feat: enable head component and native typegen

Author: wardpeet

.gitignore

@@ -73,4 +73,4 @@ yarn-error.log
 *.swp
 
 # Codegen stuff
-src/__generated__/
+src/gatsby-types.d.ts

.prettierrc

@@ -1,4 +1,5 @@
 {
   "arrowParens": "avoid",
-  "semi": false
-}
+  "semi": false,
+  "singleQuote": false
+}

gatsby-config.js

@@ -5,10 +5,9 @@ module.exports = {
       "A query language for your API — GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.",
     siteUrl: "http://graphql.org/",
   },
-
+  graphqlTypegen: true,
   plugins: [
-    "gatsby-plugin-react-helmet",
-    'gatsby-plugin-anchor-links',
+    "gatsby-plugin-anchor-links",
     {
       resolve: "gatsby-source-filesystem",
       options: {
@@ -23,11 +22,11 @@ module.exports = {
           {
             resolve: "@weknow/gatsby-remark-twitter",
             options: {
-              debug: true
-            }
-          }
-        ]
-      }
+              debug: true,
+            },
+          },
+        ],
+      },
     },
     {
       resolve: `gatsby-plugin-webfonts`,
@@ -51,7 +50,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-less`,
-    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {
@@ -115,11 +113,5 @@ module.exports = {
         ],
       },
     },
-    {
-      resolve: "gatsby-plugin-typegen",
-      options: {
-        outputPath: "src/__generated__/gatsby-types.d.ts",
-      },
-    },
   ],
 }

gatsby-node.js

@@ -6,13 +6,11 @@ const { readFile } = require("fs-extra")
 const { promisify } = require("util")
 
 exports.createSchemaCustomization = ({ actions, schema }) => {
-  const gql = String.raw;
-  const { createTypes } = actions;
+  const gql = String.raw
+  const { createTypes } = actions
 
   createTypes(gql`
-    type BlogPost implements Node
-      @childOf(types: ["MarkdownRemark"])
-    {
+    type BlogPost implements Node @childOf(types: ["MarkdownRemark"]) {
       postId: String!
       title: String!
       tags: [String!]!
@@ -21,8 +19,8 @@ exports.createSchemaCustomization = ({ actions, schema }) => {
       guestBio: String
       remark: MarkdownRemark! @link # backlink to the parent
     }
-  `);
-};
+  `)
+}
 
 // Transform nodes, each of logic inside here can be extracted to a separated plugin later.
 exports.onCreateNode = async ({
@@ -32,60 +30,62 @@ exports.onCreateNode = async ({
   createNodeId,
   createContentDigest,
 }) => {
-  const { createNode, createParentChildLink } = actions;
+  const { createNode, createParentChildLink } = actions
 
   // Derive content nodes from remark nodes
-  if (node.internal.type === 'MarkdownRemark') {
-    if (node.frontmatter.layout === 'blog') {
-      const nodeId = createNodeId(`${node.id} >>> BlogPost`);
-
-      const permalink = node.frontmatter.permalink;
-      if (!permalink?.startsWith('/blog/')) {
-        reporter.panicOnBuild(`${permalink} is not valid permalink for blog post`);
-        return;
+  if (node.internal.type === "MarkdownRemark") {
+    if (node.frontmatter.layout === "blog") {
+      const nodeId = createNodeId(`${node.id} >>> BlogPost`)
+
+      const permalink = node.frontmatter.permalink
+      if (!permalink?.startsWith("/blog/")) {
+        reporter.panicOnBuild(
+          `${permalink} is not valid permalink for blog post`
+        )
+        return
       }
 
       // It contains a kind of transform logic. However, those logics can be extracted to resolvers into ahead of sourcing (createTypes)
       const blogPostContent = {
         id: nodeId,
-        postId: permalink.replace('/blog/', '').replace(/\/$/, ''),
+        postId: permalink.replace("/blog/", "").replace(/\/$/, ""),
         title: node.frontmatter.title,
         tags: node.frontmatter.tags ?? [],
         date: node.frontmatter.date,
-        authors: (node.frontmatter.byline ?? '')
-          .split(',')
+        authors: (node.frontmatter.byline ?? "")
+          .split(",")
           .map(name => name.trim())
           .filter(Boolean),
         guestBio: node.frontmatter.guestBio ?? null,
-      };
+      }
 
       createNode({
         ...blogPostContent,
         remark: node.id,
         parent: node.id,
         children: [],
         internal: {
-          type: 'BlogPost',
+          type: "BlogPost",
           contentDigest: createContentDigest(blogPostContent),
         },
-      });
+      })
 
       createParentChildLink({
         parent: node,
         child: blogPostContent,
-      });
+      })
     }
   }
-};
+}
 
 exports.onCreatePage = async ({ page, actions }) => {
   // trying to refactor code to be "the Gatsby way".
   // from the paths on ready, ignores a bunch of existing custom logic below.
-  if (page.path.startsWith('/blog')) {
-    return;
+  if (page.path.startsWith("/blog")) {
+    return
   }
-  if (page.path.startsWith('/tags')) {
-    return;
+  if (page.path.startsWith("/tags")) {
+    return
   }
 
   const { createPage, deletePage } = actions
@@ -400,10 +400,8 @@ exports.createPages = async ({ graphql, actions }) => {
     let i = 0
     while (page && i++ < 1000) {
       const { frontmatter } = page
-      const {
-        category: definedCategory,
-        next: definedNextPageUrl,
-      } = frontmatter
+      const { category: definedCategory, next: definedNextPageUrl } =
+        frontmatter
       let category = definedCategory || folder
       if (!currentCategory || category !== currentCategory.name) {
         if (currentCategory) {
@@ -444,27 +442,27 @@ exports.createPages = async ({ graphql, actions }) => {
   // Use all the set up data to now tell Gatsby to create pages
   // on the site
   allPages
-    .filter(page => !page.permalink.startsWith('/blog'))
+    .filter(page => !page.permalink.startsWith("/blog"))
     .forEach(page => {
-    createPage({
-      path: `${page.permalink}`,
-      component: docTemplate,
-      context: {
-        permalink: page.permalink,
-        nextPermalink: page.nextPermalink,
-        sideBarData: sideBardata[page.relativeDirectory],
-        sourcePath: page.sourcePath,
-      },
+      createPage({
+        path: `${page.permalink}`,
+        component: docTemplate,
+        context: {
+          permalink: page.permalink,
+          nextPermalink: page.nextPermalink,
+          sideBarData: sideBardata[page.relativeDirectory],
+          sourcePath: page.sourcePath,
+        },
+      })
     })
-  })
 }
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       fallback: {
-        "assert": require.resolve("assert/"),
-      }
-    }
+        assert: require.resolve("assert/"),
+      },
+    },
   })
 }

package.json

@@ -21,12 +21,11 @@
     "assert": "2.0.0",
     "codemirror": "5.65.1",
     "codemirror-graphql": "1.2.11",
-    "gatsby": "4.7.2",
+    "gatsby": "4.24.8",
     "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-feed": "4.7.0",
     "gatsby-plugin-google-analytics": "4.7.0",
     "gatsby-plugin-less": "6.7.0",
-    "gatsby-plugin-react-helmet": "5.7.0",
     "gatsby-plugin-typegen": "2.2.4",
     "gatsby-plugin-webfonts": "2.2.1",
     "gatsby-source-filesystem": "4.7.0",
@@ -40,13 +39,11 @@
     "prismjs": "1.25.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-helmet": "6.1.0",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "5.60.5",
     "@types/prismjs": "1.16.6",
-    "@types/react-helmet": "6.1.4",
     "prettier": "2.4.1"
   }
-}
+}

src/components/BlogLayout/index.tsx

@@ -7,15 +7,13 @@ export const fragments = graphql`
   fragment BlogLayout_post on BlogPost {
     ...BlogPost_post
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogLayout_postFragment,
+  post: Queries.BlogLayout_postFragment
 }
 
-const BlogLayout: React.FC<Props> = ({
-  post,
-}) => {
+const BlogLayout: React.FC<Props> = ({ post }) => {
   return (
     <section>
       <div className="documentationContent">

src/components/BlogPost/index.tsx

@@ -13,16 +13,14 @@ export const fragments = graphql`
       rawMarkdownBody
     }
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogPost_postFragment,
+  post: Queries.BlogPost_postFragment
 }
 
-const BlogPost: React.FC<Props> = ({
-  post,
-}) => {
-  const byline = post.authors.join(', ')
+const BlogPost: React.FC<Props> = ({ post }) => {
+  const byline = post.authors.join(", ")
   return (
     <div className="inner-content">
       <h1>{post.title}</h1>

src/components/BlogPostPreview/index.tsx

@@ -12,22 +12,20 @@ export const fragments = graphql`
       excerpt
     }
   }
-`;
+`
 
 interface Props {
-  post: GatsbyTypes.BlogPostPreview_postFragment,
+  post: Queries.BlogPostPreview_postFragment
 }
 
-const BlogPostPreview: React.FC<Props> = ({
-  post,
-}) => (
+const BlogPostPreview: React.FC<Props> = ({ post }) => (
   <div className="inner-content">
     <h1>
       <Link to={post.postPath!}>{post.title}</Link>
     </h1>
 
     <p>
-      {new Date(post.date).toLocaleDateString()} by {post.authors.join(', ')}
+      {new Date(post.date).toLocaleDateString()} by {post.authors.join(", ")}
     </p>
 
     <div className="tag-wrapper">

src/components/BlogSidebar/index.tsx

@@ -3,15 +3,15 @@ import { Link, useStaticQuery, graphql } from "gatsby"
 import { useLocation } from "@reach/router"
 
 const BlogSidebar: React.FC = () => {
-  const data = useStaticQuery<GatsbyTypes.AllTagsStaticQuery>(graphql`
+  const data = useStaticQuery<Queries.AllTagsStaticQuery>(graphql`
     query AllTagsStatic {
       allBlogPost {
         group(field: tags) {
           fieldValue
         }
       }
       allRecentBlogPost: allBlogPost(
-        limit: 30,
+        limit: 30
         sort: { fields: [date], order: DESC }
       ) {
         nodes {
@@ -26,7 +26,7 @@ const BlogSidebar: React.FC = () => {
   const tags = data.allBlogPost.group.map(group => group.fieldValue!)
   const recentPosts = data.allRecentBlogPost.nodes
 
-  const { pathname: currentPath } = useLocation();
+  const { pathname: currentPath } = useLocation()
 
   return (
     <div className="nav-docs blog-sidebar">
@@ -41,7 +41,7 @@ const BlogSidebar: React.FC = () => {
         <ul>
           {tags.map(tag => {
             const formattedTag = tag[0].toUpperCase() + tag.substring(1)
-            const pathname = `/tags/${tag}/`;
+            const pathname = `/tags/${tag}/`
             return (
               <li key={tag}>
                 {pathname === currentPath ? (

src/components/Layout/index.tsx

@@ -1,30 +1,20 @@
 import React from "react"
 import Footer from "../Footer"
 import Header from "../Header"
-import Seo from "../Seo"
 
 import "../../assets/css/style.less"
 
-interface PageContext {
-  sourcePath?: string
-}
-
 interface Props {
   children: React.ReactNode
-  title?: string
-  description?: string
   className?: string
-  pageContext: PageContext
+  pageContext?: { sourcePath?: string }
 }
 const IndexLayout = ({
-  title,
-  description,
   children,
   className,
-  pageContext: { sourcePath },
+  pageContext: { sourcePath } = {},
 }: Props): JSX.Element => (
   <>
-    <Seo title={title} description={description} />
     <div className={className}>
       <Header />
       {children}