add in analytics

mandymichael · Apr 8, 2024 · 6b4abc8 · 6b4abc8
1 parent 001e24e
commit 6b4abc8
Show file tree

Hide file tree

Showing 11 changed files with 524 additions and 297 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/third-parties": "^14.1.0",
     "date-fns": "^2.30.0",
     "gray-matter": "^4.0.3",
     "next": "^14.0.2",

diff --git a/pages/about.js b/pages/about.js
@@ -1,38 +1,71 @@
-import Link from 'next/link';
+import Link from "next/link";
 import HeadBlock from "../components/head";
-import Generic from "../styles/Generic.module.css"
-import TextStyles from '../styles/Text.module.css';
-import HomeStyles from '../styles/Home.module.css';
-import ContainerStyles from '../styles/Container.module.css';
-import PostStyles from '../styles/PostContent.module.css';
+import Generic from "../styles/Generic.module.css";
+import TextStyles from "../styles/Text.module.css";
+import HomeStyles from "../styles/Home.module.css";
+import ContainerStyles from "../styles/Container.module.css";
+import PostStyles from "../styles/PostContent.module.css";
 
-import Header from '../components/header';
-import Footer from '../components/footer';
+import Header from "../components/header";
+import Footer from "../components/footer";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
-export default function About() { 
-    return (
-        <div className={Generic.pageContainer}>
-            <HeadBlock title="About" description="About variable fonts for developers" url="https://variablefonts.dev/about" image="/images/metadata/main-og3.jpg" />
-
-            <main className={HomeStyles.main}>
-            <Header/>
+export default function About() {
+  return (
+    <div className={Generic.pageContainer}>
+      <HeadBlock
+        title="About"
+        description="About variable fonts for developers"
+        url="https://variablefonts.dev/about"
+        image="/images/metadata/main-og3.jpg"
+      />
+      <GoogleAnalytics gaId="G-RT7492NGQB" />
 
-            <section className={`${ContainerStyles.section} PageHeader`}>
-                <div className={` ${ContainerStyles.stacked}`}>
-                    <h1 className={TextStyles.heading}>About</h1>
-                </div>
-            </section>
+      <main className={HomeStyles.main}>
+        <Header />
 
-            <section className={`${PostStyles.container} PostContent`}>
-                <p>This project was created by <a href="https://twitter.com/@mandy_kerr" target="_blank">Mandy Michael</a> to showcase the many possibilities and opportunities that variable fonts can offer developers and designers on the web. The aim is to provide developers with the resources and tools needed to use variable fonts in their own projects.</p>
-                <p>Variable fonts give us more control over our Typography. We can now fine tune the font characteristics to maximise the legibility, readability and overall accessibility of our website text. This is a level of control over our fonts that is unprecedented.</p>
-                <p>To be perfectly honest, I just really like variable fonts, I think they are one of the greatest developments for the web so I just wanted a place to share all the things I like doing with them, and maybe some stuff you might enjoy too!</p>
-                <p>This is the second iteration of the website, I had to pause it's development for a while but now it's back with more cool variable fonts and things to do with them than ever.</p>
-                <p>Extra special thanks to <Link href="https://petebarr.com/">Pete Barr</Link> for designing the site for me.</p>
-            </section>
+        <section className={`${ContainerStyles.section} PageHeader`}>
+          <div className={` ${ContainerStyles.stacked}`}>
+            <h1 className={TextStyles.heading}>About</h1>
+          </div>
+        </section>
 
-            </main>
-            <Footer />
-        </div>
-    );
+        <section className={`${PostStyles.container} PostContent`}>
+          <p>
+            This project was created by{" "}
+            <a href="https://twitter.com/@mandy_kerr" target="_blank">
+              Mandy Michael
+            </a>{" "}
+            to showcase the many possibilities and opportunities that variable
+            fonts can offer developers and designers on the web. The aim is to
+            provide developers with the resources and tools needed to use
+            variable fonts in their own projects.
+          </p>
+          <p>
+            Variable fonts give us more control over our Typography. We can now
+            fine tune the font characteristics to maximise the legibility,
+            readability and overall accessibility of our website text. This is a
+            level of control over our fonts that is unprecedented.
+          </p>
+          <p>
+            To be perfectly honest, I just really like variable fonts, I think
+            they are one of the greatest developments for the web so I just
+            wanted a place to share all the things I like doing with them, and
+            maybe some stuff you might enjoy too!
+          </p>
+          <p>
+            This is the second iteration of the website, I had to pause it's
+            development for a while but now it's back with more cool variable
+            fonts and things to do with them than ever.
+          </p>
+          <p>
+            Extra special thanks to{" "}
+            <Link href="https://petebarr.com/">Pete Barr</Link> for designing
+            the site for me.
+          </p>
+        </section>
+      </main>
+      <Footer />
+    </div>
+  );
 }
diff --git a/pages/all-font-lists.js b/pages/all-font-lists.js
@@ -1,80 +1,93 @@
-import TextStyles from '../styles/Text.module.css';
-import HomeStyles from '../styles/Home.module.css';
-import TagList from '../components/tagList';
-import ContainerStyles from '../styles/Container.module.css';
-import Generic from '../styles/Generic.module.css';
-import ListPageStyles from '../styles/ListPage.module.css';
+import TextStyles from "../styles/Text.module.css";
+import HomeStyles from "../styles/Home.module.css";
+import TagList from "../components/tagList";
+import ContainerStyles from "../styles/Container.module.css";
+import Generic from "../styles/Generic.module.css";
+import ListPageStyles from "../styles/ListPage.module.css";
 
-import { getSortedPostsData } from '../lib/posts';
-import Header from '../components/header';
-import Footer from '../components/footer';
-import FeaturedPost from '../components/featuredPost';
-import PostList from '../components/postList';
-import HeadBlock from '../components/head';
-export default function Home({ fontLists, featuredList, displayList }) {
+import { getSortedPostsData } from "../lib/posts";
+import Header from "../components/header";
+import Footer from "../components/footer";
+import FeaturedPost from "../components/featuredPost";
+import PostList from "../components/postList";
+import HeadBlock from "../components/head";
+import { GoogleAnalytics } from "@next/third-parties/google";
 
+export default function Home({ fontLists, featuredList, displayList }) {
   const tags = [...new Set(fontLists.map(({ tags }) => tags).flat())];
 
   return (
     <div className={Generic.pageContainer}>
-        <HeadBlock 
-            title="Lists of variable fonts" 
-            description="Lists of variable fonts by type, style, feature or category" 
-            url="https://variablefonts.dev/all-font-lists"
-            keywords="Variable fonts, lists, fonts"
-            image="/images/metadata/main-og1.jpg"
-        />
+      <HeadBlock
+        title="Lists of variable fonts"
+        description="Lists of variable fonts by type, style, feature or category"
+        url="https://variablefonts.dev/all-font-lists"
+        keywords="Variable fonts, lists, fonts"
+        image="/images/metadata/main-og1.jpg"
+      />
+      <GoogleAnalytics gaId="G-RT7492NGQB" />
 
-        <main className={HomeStyles.main} >
-        <Header/>
+      <main className={HomeStyles.main}>
+        <Header />
 
         <section className={`${ContainerStyles.section} PageHeader`}>
-            <div className={`${ContainerStyles.wrapper} ${ContainerStyles.stacked}`}>
-                <p className={TextStyles.metaDataText}>{fontLists.length} Posts</p>
-                <h1 className={TextStyles.heading}>Font Lists</h1>
-            </div>
+          <div
+            className={`${ContainerStyles.wrapper} ${ContainerStyles.stacked}`}
+          >
+            <p className={TextStyles.metaDataText}>{fontLists.length} Posts</p>
+            <h1 className={TextStyles.heading}>Font Lists</h1>
+          </div>
 
-            <div className={`${ContainerStyles.doubleBorderContainer} ${ListPageStyles.tagGroup}`}>
-                    <details className={ListPageStyles.tagDetails}>
-                    <summary className={`${ListPageStyles.tagDetailsSummary}`}>Tags</summary>
-                    <TagList tags={tags} noSlice={true} />
-                </details>
-            </div>
+          <div
+            className={`${ContainerStyles.doubleBorderContainer} ${ListPageStyles.tagGroup}`}
+          >
+            <details className={ListPageStyles.tagDetails}>
+              <summary className={`${ListPageStyles.tagDetailsSummary}`}>
+                Tags
+              </summary>
+              <TagList tags={tags} noSlice={true} />
+            </details>
+          </div>
         </section>
 
-        {featuredList.length > 0 &&  <FeaturedPost featuredPost={featuredList} />}
-        <PostList posts={displayList} title="Font Lists" tagType="all" postType="list" />
-        </main>
-        <Footer />
+        {featuredList.length > 0 && (
+          <FeaturedPost featuredPost={featuredList} />
+        )}
+        <PostList
+          posts={displayList}
+          title="Font Lists"
+          tagType="all"
+          postType="list"
+        />
+      </main>
+      <Footer />
     </div>
   );
 }
 
 export async function getStaticProps() {
+  const fontLists = getSortedPostsData().filter((post) => {
+    const lists = post.tags && post.tags.includes("list");
+    return lists;
+  });
 
-    const fontLists = getSortedPostsData().filter((post) => {
-        const lists = post.tags && post.tags.includes('list');
-            return lists;
-        }
-    );
-
-    const displayList = fontLists.filter((post) => {
-        const lists = post.tags && !post.tags.includes('featured');
-            return lists;
-        }
-    );
+  const displayList = fontLists.filter((post) => {
+    const lists = post.tags && !post.tags.includes("featured");
+    return lists;
+  });
 
-    const featuredList = fontLists.filter((post) => {
-        const lists = post.tags && post.tags.includes('featured');
-            return lists;
-        }
-    ).slice(0,1);
+  const featuredList = fontLists
+    .filter((post) => {
+      const lists = post.tags && post.tags.includes("featured");
+      return lists;
+    })
+    .slice(0, 1);
 
-    return {
+  return {
     props: {
-        displayList,
-        fontLists,
-        featuredList
+      displayList,
+      fontLists,
+      featuredList,
     },
-    };
-}
+  };
+}