Merge pull request graphql#1125 from cometkim/custom-blog-posts

refactor blog posts

Author: Urigo

gatsby-node.js

@@ -5,7 +5,89 @@ const frontmatterParser = require("parser-front-matter")
 const { readFile } = require("fs-extra")
 const { promisify } = require("util")
 
+exports.createSchemaCustomization = ({ actions, schema }) => {
+  const gql = String.raw;
+  const { createTypes } = actions;
+
+  createTypes(gql`
+    type BlogPost implements Node
+      @childOf(types: ["MarkdownRemark"])
+    {
+      postId: String!
+      title: String!
+      tags: [String!]!
+      date: Date! @dateformat(formatString: "YYYY-MM-DD")
+      authors: [String!]!
+      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 ({
+  reporter,
+  node,
+  actions,
+  createNodeId,
+  createContentDigest,
+}) => {
+  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;
+      }
+
+      // 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(/\/$/, ''),
+        title: node.frontmatter.title,
+        tags: node.frontmatter.tags ?? [],
+        date: node.frontmatter.date,
+        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',
+          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('/tags')) {
+    return;
+  }
+
   const { createPage, deletePage } = actions
   deletePage(page)
   let context = {
@@ -148,8 +230,8 @@ exports.createPages = async ({ graphql, actions }) => {
           }
         }
       }
-      tagsGroup: allMarkdownRemark {
-        group(field: frontmatter___tags) {
+      allBlogPost {
+        group(field: tags) {
           fieldValue
         }
       }
@@ -164,6 +246,17 @@ exports.createPages = async ({ graphql, actions }) => {
     throw result.errors
   }
 
+  const tags = result.data.allBlogPost.group.map(group => group.fieldValue)
+  tags.forEach(tag => {
+    createPage({
+      path: `/tags/${tag.toLowerCase()}/`,
+      component: path.resolve("./src/templates/{BlogPost.tags}.tsx"),
+      context: {
+        tag,
+      },
+    })
+  })
+
   const markdownPages = result.data.allMarkdownRemark.edges
 
   // foundation: [
@@ -350,7 +443,9 @@ exports.createPages = async ({ graphql, actions }) => {
 
   // Use all the set up data to now tell Gatsby to create pages
   // on the site
-  allPages.forEach(page => {
+  allPages
+    .filter(page => !page.permalink.startsWith('/blog'))
+    .forEach(page => {
     createPage({
       path: `${page.permalink}`,
       component: docTemplate,
@@ -362,19 +457,6 @@ exports.createPages = async ({ graphql, actions }) => {
       },
     })
   })
-
-  // Create tag pages
-  const tagTemplate = path.resolve("src/templates/tags.tsx")
-  const tags = result.data.tagsGroup.group
-  tags.forEach(tag => {
-    createPage({
-      path: `/tags/${tag.fieldValue}/`,
-      component: tagTemplate,
-      context: {
-        tag: tag.fieldValue,
-      },
-    })
-  })
 }
 
 exports.onCreateWebpackConfig = ({ actions }) => {

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@graphql-tools/schema": "8.2.0",
+    "@reach/router": "1.3.4",
     "@weknow/gatsby-remark-twitter": "0.2.3",
     "assert": "2.0.0",
     "codemirror": "5.63.0",

src/components/BlogLayout/index.tsx

@@ -1,60 +1,29 @@
-import React from "react"
+import * as React from "react"
+import { graphql } from "gatsby"
 import BlogSidebar from "../BlogSidebar"
 import BlogPost from "../BlogPost"
 
+export const fragments = graphql`
+  fragment BlogLayout_post on BlogPost {
+    ...BlogPost_post
+  }
+`;
+
 interface Props {
-  title: string
-  date: string
-  permalink: string
-  byline: string
-  guestBio: string
-  rawMarkdownBody: string
-  sideBarData: any
-  pageContext: any
-  tags: Array<string>
+  post: GatsbyTypes.BlogLayout_postFragment,
 }
 
-const index = ({
-  title,
-  date,
-  permalink,
-  byline,
-  guestBio,
-  rawMarkdownBody,
-  sideBarData,
-  pageContext,
-  tags,
-}: Props) => {
+const BlogLayout: React.FC<Props> = ({
+  post,
+}) => {
   return (
     <section>
       <div className="documentationContent">
-        <BlogPost
-          title={title}
-          date={date}
-          permalink={permalink}
-          byline={byline}
-          guestBio={guestBio}
-          rawMarkdownBody={rawMarkdownBody}
-          isPermalink={true}
-          pageContext={pageContext}
-          tags={tags}
-        />
-        <BlogSidebar
-          posts={sideBarData[0].links.sort((a: any, b: any) => {
-            const aDate = new Date(a.frontmatter.date)
-            const bDate = new Date(b.frontmatter.date)
-            if (aDate > bDate) {
-              return -1
-            } else if (aDate < bDate) {
-              return 1
-            }
-            return 0
-          })}
-          currentPermalink={permalink}
-        />
+        <BlogPost post={post} />
+        <BlogSidebar />
       </div>
     </section>
   )
 }
 
-export default index
+export default BlogLayout

src/components/BlogPost/index.tsx

@@ -1,58 +1,51 @@
-import React from "react"
+import * as React from "react"
+import { graphql, Link } from "gatsby"
 import Marked from "../Marked"
-import { Link } from "gatsby"
+
+export const fragments = graphql`
+  fragment BlogPost_post on BlogPost {
+    title
+    date
+    authors
+    tags
+    guestBio
+    remark {
+      rawMarkdownBody
+    }
+  }
+`;
 
 interface Props {
-  title: string
-  date: string
-  permalink: string
-  byline: string
-  guestBio: string
-  rawMarkdownBody: string
-  isPermalink: boolean
-  pageContext: any
-  excerpt?: string
-  showExcerpt?: true
-  tags: Array<string>
+  post: GatsbyTypes.BlogPost_postFragment,
 }
 
-const BlogPost = ({
-  title,
-  date,
-  permalink,
-  byline,
-  guestBio,
-  rawMarkdownBody,
-  isPermalink,
-  pageContext,
-  excerpt,
-  showExcerpt,
-  tags,
-}: Props) => (
-  <div className="inner-content">
-    <h1>{isPermalink ? title : <a href={permalink}>{title}</a>}</h1>
-    <p>
-      {new Date(date).toLocaleDateString()} by {byline}
-    </p>
-    <div className="tag-wrapper">
-      {tags.map(tag => (
-        <span className="tag">
-          <Link to={`/tags/${tag}`}>{tag}</Link>
-        </span>
-      ))}
-    </div>
+const BlogPost: React.FC<Props> = ({
+  post,
+}) => {
+  const byline = post.authors.join(', ')
+  return (
+    <div className="inner-content">
+      <h1>{post.title}</h1>
+
+      <p>
+        {new Date(post.date).toLocaleDateString()} by {byline}
+      </p>
+
+      <div className="tag-wrapper">
+        {post.tags.map(tag => (
+          <span key={tag} className="tag">
+            <Link to={`/tags/${tag}/`}>{tag}</Link>
+          </span>
+        ))}
+      </div>
 
-    {guestBio ? null : <hr />}
-    {guestBio && (
-      <p className="guestBio">{`This guest article contributed by ${byline}, ${guestBio}.`}</p>
-    )}
-
-    {showExcerpt ? (
-      <p>{excerpt}</p>
-    ) : (
-      <Marked pageContext={pageContext}>{rawMarkdownBody}</Marked>
-    )}
-  </div>
-)
+      {post.guestBio && (
+        <p className="guestBio">{`This guest article contributed by ${byline}, ${post.guestBio}.`}</p>
+      )}
+
+      <Marked>{post.remark.rawMarkdownBody}</Marked>
+    </div>
+  )
+}
 
 export default BlogPost

src/components/BlogPostPreview/index.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { graphql, Link } from "gatsby"
+
+export const fragments = graphql`
+  fragment BlogPostPreview_post on BlogPost {
+    title
+    date
+    authors
+    tags
+    postPath: gatsbyPath(filePath: "/blog/{BlogPost.postId}")
+    remark {
+      excerpt
+    }
+  }
+`;
+
+interface Props {
+  post: GatsbyTypes.BlogPostPreview_postFragment,
+}
+
+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(', ')}
+    </p>
+
+    <div className="tag-wrapper">
+      {post.tags.map(tag => (
+        <span key={tag} className="tag">
+          <Link to={`/tags/${tag}/`}>{tag}</Link>
+        </span>
+      ))}
+    </div>
+
+    <p>{post.remark.excerpt}</p>
+  </div>
+)
+
+export default BlogPostPreview