add react-helmet

gatsby-config.js

@@ -1,7 +1,8 @@
 module.exports = {
   siteMetadata: {
     title: `Nature of Code`,
-    siteUrl: `https://www.yourdomain.tld`,
+    siteUrl: `https://natureofcode.com`,
+    description: ``,
   },
   plugins: [
     {
@@ -13,5 +14,6 @@ module.exports = {
     },
     `gatsby-transformer-json`,
     `gatsby-plugin-postcss`,
+    `gatsby-plugin-react-helmet`,
   ],
 };

package-lock.json

@@ -8508,6 +8508,14 @@
         }
       }
     },
+    "gatsby-plugin-react-helmet": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-5.19.0.tgz",
+      "integrity": "sha512-XXrJYfHqoaUe57oAF+/ljPHncrvYk0UonES3aUwynbWsR8UXhQpdbwqIOYZPGQgPsc1X55Kzdo+/3pU1gA9ajQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4"
+      }
+    },
     "gatsby-plugin-typescript": {
       "version": "4.19.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-4.19.0.tgz",
@@ -13594,6 +13602,29 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+        }
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13609,6 +13640,11 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
       "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="
     },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -29,6 +29,7 @@
     "dotenv": "^16.0.0",
     "gatsby": "^4.19.1",
     "gatsby-plugin-postcss": "^5.19.0",
+    "gatsby-plugin-react-helmet": "^5.19.0",
     "gatsby-source-filesystem": "^4.19.0",
     "gatsby-transformer-json": "^4.19.0",
     "hast-util-to-html": "^8.0.3",
@@ -40,6 +41,7 @@
     "prismjs": "^1.28.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "rehype-format": "^4.0.1",
     "rehype-parse": "^8.0.4",
     "rehype-react": "^7.1.1",

src/components/Head.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+const Head = ({ title, description }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          siteUrl
+          description
+        }
+      }
+    }
+  `);
+
+  const {
+    site: {
+      siteMetadata: {
+        title: defaultTitle,
+        siteUrl,
+        description: defaultDescription,
+      },
+    },
+  } = data;
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang: 'en',
+      }}
+      defaultTitle={defaultTitle}
+      titleTemplate={`%s / ${defaultTitle}`}
+    >
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="width=device-width,initial-scale=1" />
+      <title>{title}</title>
+      <meta name="description" content={description ?? defaultDescription} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={siteUrl} />
+      <meta property="og:title" content={title ?? defaultTitle} />
+      <meta
+        property="og:description"
+        content={description ?? defaultDescription}
+      />
+
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content={siteUrl} />
+      <meta property="twitter:title" content={title ?? defaultTitle} />
+      <meta
+        property="twitter:description"
+        content={description ?? defaultDescription}
+      />
+    </Helmet>
+  );
+};
+
+export default React.memo(Head);

src/components/Layout.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import Head from './Head';
+
+const Layout = ({ children, title, description }) => {
+  return (
+    <div>
+      <Head title={title} description={description} />
+      <div className="px-4">{children}</div>
+    </div>
+  );
+};
+
+export default Layout;

src/layouts/ChapterLayout.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 
+import Layout from '../components/Layout';
 import { useRehypeProcessor } from '../hooks/useRehypeProcessor';
 
 export default function ChapterLayout({ data }) {
@@ -8,9 +9,9 @@ export default function ChapterLayout({ data }) {
   const body = useRehypeProcessor(chaptersJson.src.fields.html);
 
   return (
-    <div className="px-4">
+    <Layout title={chaptersJson.title}>
       <div className="my-8 mx-auto w-[640px] prose">{body}</div>
-    </div>
+    </Layout>
   );
 }
 

src/pages/index.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { graphql, Link } from 'gatsby';
 
+import Layout from '../components/Layout';
+
 export default function IndexPage({ data }) {
   return (
-    <div className="px-4">
+    <Layout>
       <div className="my-8 mx-auto w-[640px] prose">
         <h1>Nature of Code</h1>
         <ul>
@@ -16,7 +18,7 @@ export default function IndexPage({ data }) {
           })}
         </ul>
       </div>
-    </div>
+    </Layout>
   );
 }