Refactoring Site Creation and Additions

firebase.json

@@ -2,10 +2,6 @@
   "hosting": {
     "target": "nodejs-dev",
     "public": "public",
-    "rewrites": [{
-      "source": "/learn/**",
-      "destination": "/learn/"
-    }],
     "ignore": [
       "firebase.json",
       "**/.*",

gatsby-config.js

@@ -1,13 +1,8 @@
 if (process.env.ENVIROMENT !== 'production') {
-  require('dotenv').config()
+  require('dotenv').config();
 }
 
-// const contentfulConfig = {
-//   spaceId: process.env.SPACE_ID,
-//   accessToken: process.env.ACCESS_TOKEN,
-// }
-
-const config = require('./src/config')
+const config = require('./src/config');
 
 module.exports = {
   pathPrefix: process.env.PATH_PREFIX,
@@ -73,10 +68,6 @@ module.exports = {
         ],
       },
     },
-    // {
-    //   resolve: `gatsby-source-contentful`,
-    //   options: contentfulConfig,
-    // },
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
@@ -104,30 +95,30 @@ module.exports = {
           }
         }`,
         serialize: ({ site, allSitePage, allMarkdownRemark }) => {
-          let pages = []
+          let pages = [];
           allSitePage.edges.map(edge => {
             pages.push({
               url: site.siteMetadata.siteUrlNoSlash + edge.node.path,
               changefreq: `daily`,
               priority: 0.7,
-            })
-          })
+            });
+          });
           allMarkdownRemark.edges.map(edge => {
             pages.push({
-              url: `${site.siteMetadata.siteUrlNoSlash}/learn/${
+              url: `${site.siteMetadata.siteUrlNoSlash}/${
                 edge.node.fields.slug
               }`,
               changefreq: `daily`,
               priority: 0.7,
-            })
-          })
+            });
+          });
 
-          return pages
+          return pages;
         },
       },
     },
     {
       resolve: `gatsby-plugin-emotion`,
     },
   ],
-}
+};

gatsby-node.js

@@ -1,31 +1,162 @@
 const createSlug = require('./src/util/createSlug');
+const path = require('path');
 
-exports.onCreatePage = async ({ page, actions }) => {
-  const { createPage, deletePage } = actions
+exports.createPages = ({ graphql, actions }) => {
+  const { createPage, createRedirect, createNodeField } = actions;
 
-  // If this is the learn page, accept all following paths.
-  console.log(page.path);
-  if (!!~page.path.indexOf('/learn')) {
-    deletePage(page);
-    createPage({
-      ...page,
-      path: '/'
-    });
-    createPage({
-      ...page,
-      matchPath: "/learn/*",
-    });
-  }
-}
+  return new Promise((resolve, reject) => {
+    const docTemplate = path.resolve('./src/templates/learn.tsx');
+
+    resolve(
+      graphql(
+        `
+          {
+            allMarkdownRemark(
+              filter: { fields: { slug: { ne: "" } } }
+              sort: { fields: [fileAbsolutePath], order: ASC }
+            ) {
+              edges {
+                node {
+                  id
+                  fileAbsolutePath
+                  html
+                  parent {
+                    ... on File {
+                      relativePath
+                    }
+                  }
+                  frontmatter {
+                    title
+                    description
+                    authors
+                    section
+                  }
+                  fields {
+                    slug
+                  }
+                }
+                next {
+                  frontmatter {
+                    title
+                  }
+                  fields {
+                    slug
+                  }
+                }
+                previous {
+                  frontmatter {
+                    title
+                  }
+                  fields {
+                    slug
+                  }
+                }
+              }
+            }
+          }
+        `
+      ).then(result => {
+        if (result.errors) {
+          console.log(result.errors);
+          reject(result.errors);
+        }
+        const { edges } = result.data.allMarkdownRemark;
+        let navigationData = {};
+        const docPages = [];
+        edges.forEach(({ node }, index) => {
+          const {
+            fields: { slug, authors },
+            frontmatter: { title, section },
+            parent: { relativePath },
+          } = node;
+
+          let previousNodeData = undefined;
+          const previousNode = index === 0 ? undefined : edges[index - 1].node;
+          if (previousNode) {
+            previousNodeData = {
+              slug: previousNode.fields.slug,
+              title: previousNode.frontmatter.title,
+            };
+          }
+
+          let nextNodeData = undefined;
+          const nextNode =
+            index === edges.length - 1 ? undefined : edges[index + 1].node;
+          if (nextNode) {
+            nextNodeData = {
+              slug: nextNode.fields.slug,
+              title: nextNode.frontmatter.title,
+            };
+          }
+
+          let data;
+          if (!navigationData[section]) {
+            data = { title, slug, section };
+            navigationData = { ...navigationData, [section]: [data] };
+          } else {
+            data = { title, slug, section };
+            navigationData = {
+              ...navigationData,
+              [section]: [...navigationData[section], data],
+            };
+          }
+          docPages.push({
+            slug,
+            next: nextNodeData,
+            previous: previousNodeData,
+            relativePath,
+          });
+        });
+
+        docPages.forEach(page => {
+          createPage({
+            path: `/${page.slug}`,
+            component: docTemplate,
+            context: {
+              slug: page.slug,
+              next: page.next,
+              previous: page.previous,
+              relativePath: page.relativePath,
+              navigationData: navigationData,
+            },
+          });
+          if (page.slug === 'introduction-to-nodejs')
+          createPage({
+            path: `/`,
+            component: docTemplate,
+            context: {
+              slug: page.slug,
+              next: page.next,
+              previous: page.previous,
+              relativePath: page.relativePath,
+              navigationData: navigationData,
+            },
+          })
+        });
+      })
+    );
+  });
+};
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
   if (node.internal.type === 'MarkdownRemark') {
     const { createNodeField } = actions;
+
     const slug = createSlug(node.frontmatter.title);
     createNodeField({
       node,
       name: `slug`,
       value: slug,
     });
+
+    let authors = node.frontmatter.authors;
+    if (authors) {
+      authors = authors.split(',');
+      createNodeField({
+        node,
+        name: `authors`,
+        value: authors,
+      });
+    }
   }
-}
+};

src/components/article.tsx

@@ -1,21 +1,44 @@
 import React from 'react';
-import { RemarkPage, PageInfo } from '../types';
+import { PaginationInfo } from '../types';
 import Pagination from './pagination';
 import EditLink from './edit-link';
+import AuthorLink from './author-link';
 
 type Props = {
-  page: RemarkPage;
-  previous?: PageInfo;
-  next?: PageInfo;
-}
+  title: string;
+  html: string;
+  authors: string[];
+  relativePath: string;
+  next?: PaginationInfo;
+  previous?: PaginationInfo;
+};
 
-const Article = ({ page, previous, next }: Props) => (
+const Article = ({
+  title,
+  html,
+  previous,
+  next,
+  relativePath,
+  authors,
+}: Props) => (
   <article className="article-reader">
-    <h1 className="article-reader__headline">{page.frontmatter.title}</h1>
-    <div dangerouslySetInnerHTML={{ __html: page.html }} />
-    <EditLink relativePath={page.parent.relativePath} />
-    <Pagination previous={previous} next={next}/>
+    <h1 className="article-reader__headline">{title}</h1>
+    <div dangerouslySetInnerHTML={{ __html: html }} />
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginTop: '5rem',
+        alignItems: 'center',
+      }}>
+      Contributors:
+      {authors && authors.map(author => (
+          author && <AuthorLink username={author} key={author}/>
+      ))}
+    </div>
+    <EditLink relativePath={relativePath} />
+    <Pagination previous={previous} next={next} />
   </article>
-)
+);
 
-export default Article
+export default Article;

src/components/author-link.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+type Props = {
+  username: string;
+  key: string;
+};
+
+const AuthorLink = ({ username }: Props) => {
+  if (!username) {
+    return null;
+  }
+  const githubLink = `https://github.com/${username}`;
+
+  return (
+    <a style={{ marginLeft: '0.5rem' }} href={githubLink}>
+      {username}
+    </a>
+  );
+};
+
+export default AuthorLink;

src/components/edit-link.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 type Props = {
-  relativePath?: string
-}
+  relativePath?: string;
+};
 
 const EditLink = ({ relativePath }: Props) => {
   if (!relativePath) {
@@ -12,10 +12,10 @@ const EditLink = ({ relativePath }: Props) => {
   const href = `https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/${relativePath}`;
 
   return (
-    <a href={href} >
+    <a style={{ display: 'inlineFlex', marginTop: '1rem' }} href={href}>
       Edit this page on GitHub
     </a>
-  )
-}
+  );
+};
 
-export default EditLink
+export default EditLink;

src/components/navigation-item.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { Link } from 'gatsby';
 
 type Props = {
+  key: string;
   isDone: boolean;
   isActive: boolean;
   slug: string;
@@ -33,7 +34,7 @@ const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
   }
 
   return (
-    <Link ref={handleRef} to={`/learn/${slug}`} onClick={onClick} className={className}>
+    <Link ref={handleRef} to={`/${slug}`} onClick={onClick} className={className}>
       {title}
     </Link>
   );