Skip to content

Commit

Permalink
chore: use NextJS 14 recommended way to use include Google analytics
Browse files Browse the repository at this point in the history
  • Loading branch information
@talohana
talohana committed May 3, 2024
1 parent 52c6b1b commit 0cc4955
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 94 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"dependencies": {
"@headlessui/react": "^1.6.5",
"@next/bundle-analyzer": "^12.0.10",
"@next/third-parties": "^14.2.3",
"@tailwindcss/forms": "^0.5.2",
"clsx": "^1.1.1",
"date-fns": "^2.28.0",
Expand Down
4 changes: 4 additions & 0 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Layout } from '@/components/layout/layout';
import '@/styles/globals.css';
import '@/styles/prism.css';
import { defaultSEO } from '@/utils/next-seo.config';
import { GoogleAnalytics } from '@next/third-parties/google';
import { DefaultSeo } from 'next-seo';
import { ThemeProvider } from 'next-themes';
import type { AppProps } from 'next/app';
Expand All @@ -13,6 +14,9 @@ function MyApp({ Component, pageProps }: AppProps) {
<ThemeProvider>
<Layout>
<Component {...pageProps} />
<GoogleAnalytics
gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ?? ''}
/>
</Layout>
</ThemeProvider>
</>
Expand Down
18 changes: 1 addition & 17 deletions src/pages/_document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,7 @@ class MyDocument extends Document {
<Html lang="en">
<Head>
{/* Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`,
}}
/>
{/* PWA */}
{/* PWA */}
<link rel="manifest" href="/manifest.json" />
<meta content="#ffffff" name="theme-color" />
<link
Expand Down
88 changes: 39 additions & 49 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { PostCard } from '@/components/blog/post-card';
import { links } from '@/lib/constants';
import { getPostsFrontmatter } from '@/lib/mdx';
import me from '@/public/assets/me.jpg';
import { Frontmatter } from '@/types/frontmatter';
Expand All @@ -16,12 +15,12 @@ interface Props {

const Company: React.FC = () => (
<span>
<span className="underline text-[#4285F4]">G</span>
<span className="underline text-[#DB4437]">o</span>
<span className="underline text-[#F4B400]">o</span>
<span className="underline text-[#4285F4]">g</span>
<span className="underline text-[#0F9D58]">l</span>
<span className="underline text-[#DB4437]">e</span>
<span className="text-[#4285F4]">G</span>
<span className="text-[#DB4437]">o</span>
<span className="text-[#F4B400]">o</span>
<span className="text-[#4285F4]">g</span>
<span className="text-[#0F9D58]">l</span>
<span className="text-[#DB4437]">e</span>
</span>
);

Expand All @@ -30,51 +29,42 @@ const Home: React.FC<Props> = ({ posts }) => {
<PostCard key={post.slug} frontmatter={post} />
));

return <>
<NextSeo title="Home" />
<div className="py-4 container space-y-12">
<div className="flex flex-col space-y-4 md:justify-between md:flex-row-reverse md:items-center">
<div>
<Image
src={me}
alt="Tal Ohana profile picture"
width={170}
height={170}
className="rounded-full"
priority
quality={50}
/>
</div>
<div>
<div className="mb-4">
<h1 className="mb-2 font-bold text-primary">Tal Ohana</h1>
<h2>
Software Engineer at{' '}
<a
href={links.company}
target="_blank"
rel="noopener noreferrer"
className="font-bold"
>
<Company />
</a>
</h2>
return (
<>
<NextSeo title="Home" />
<div className="py-4 container space-y-12">
<div className="flex flex-col space-y-4 md:justify-between md:flex-row-reverse md:items-center">
<div>
<Image
src={me}
alt="Tal Ohana profile picture"
width={170}
height={170}
className="rounded-full"
priority
quality={50}
/>
</div>
<div>
<div className="mb-4">
<h1 className="mb-2 font-bold text-primary">Tal Ohana</h1>
<h2>
Software Engineer at <Company />
</h2>
</div>
</div>
<h3 className="text-lg font-light">
I am a coding and software engineering enthusiast!
</h3>
</div>
<div className="space-y-4">
<h3 className="underline decoration-primary">Recent Posts</h3>
<div className="grid grid-cols-1 gap-8">{cards}</div>
<Link href="/blog" className="inline-flex items-center text-xl group">
Read All Posts
<AiOutlineArrowRight className="transition-transform transform group-hover:translate-x-1" />
</Link>
</div>
</div>
<div className="space-y-4">
<h3 className="underline decoration-primary">Recent Posts</h3>
<div className="grid grid-cols-1 gap-8">{cards}</div>
<Link href="/blog" className="inline-flex items-center text-xl group">
Read All Posts<AiOutlineArrowRight className="transition-transform transform group-hover:translate-x-1" />

</Link>
</div>
</div>
</>;
</>
);
};

export const getStaticProps: GetStaticProps<Props> = async () => {
Expand Down
43 changes: 15 additions & 28 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2517,6 +2517,13 @@
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz#2be4e39ee25bfbd85be78eea17c0e7751dc4323c"
integrity sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==

"@next/third-parties@^14.2.3":
version "14.2.3"
resolved "https://registry.yarnpkg.com/@next/third-parties/-/third-parties-14.2.3.tgz#2e72d9fa456c1155700082ab40ac68018e9ec5d2"
integrity sha512-j4E2xBSsEZq4VX2pVm3LpGltSwCxETic6glJWfHyYQvpoMdplCAYrQKpF+E9Gg3jfsrfmRAIdTE11m+biBCx1Q==
dependencies:
third-party-capital "1.0.20"

"@nodelib/[email protected]":
version "2.1.5"
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
Expand Down Expand Up @@ -15478,16 +15485,7 @@ string-length@^4.0.1:
char-regex "^1.0.2"
strip-ansi "^6.0.0"

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -15655,7 +15653,7 @@ stringify-object@^3.3.0:
is-obj "^1.0.1"
is-regexp "^1.0.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand Down Expand Up @@ -15683,13 +15681,6 @@ strip-ansi@^5.1.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
Expand Down Expand Up @@ -16004,6 +15995,11 @@ text-table@^0.2.0:
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=

[email protected]:
version "1.0.20"
resolved "https://registry.yarnpkg.com/third-party-capital/-/third-party-capital-1.0.20.tgz#e218a929a35bf4d2245da9addb8ab978d2f41685"
integrity sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==

throat@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
Expand Down Expand Up @@ -17357,7 +17353,7 @@ worker-rpc@^0.1.0:
dependencies:
microevent.ts "~0.1.1"

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -17375,15 +17371,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down

0 comments on commit 0cc4955

Please sign in to comment.