Gatsby v4 and Dark Mode (#59)

* feat: Update all the things

* chore: Build tweaks

* feat: Added tags to posts

* chore: Remove console.log call

* chore: Updated PostTags.tsx and fixed formatDate.ts to be UTC

* content: Added new Feature Flags post

* chore: Adjust 404 styles and PageHeader.tsx

* feat: Updated tags page header and adjusted spacing

gatsby-browser.js

@@ -1,2 +1,9 @@
+import React from 'react';
+import { ThemeProvider } from './src/context/ThemeContext';
+
 require('prismjs/plugins/line-numbers/prism-line-numbers.css');
 require('prismjs/plugins/command-line/prism-command-line.css');
+
+export const wrapRootElement = ({ element }) => (
+  <ThemeProvider>{element}</ThemeProvider>
+);

gatsby-config.js

@@ -63,29 +63,29 @@ module.exports = {
       options: {
         extensions: ['.mdx', '.md'],
         defaultLayouts: {
-          default: require.resolve('./src/templates/BlogPostTemplate.tsx'),
+          posts: require.resolve('./src/templates/BlogPostTemplate.tsx'),
+          pages: require.resolve('./src/templates/MarkdownPage.tsx'),
         },
         gatsbyRemarkPlugins: [
           'gatsby-remark-code-titles',
           {
             resolve: 'gatsby-remark-mermaid',
             options: {
               language: 'mermaid',
-              theme: 'neutral',
+              currentTheme: 'neutral',
               viewport: {
-                width: 650,
+                width: 840,
                 height: 400,
               },
               mermaidOptions: {
-                themeCSS: '.node rect { fill: #fff; }',
                 fontSize: 12,
               },
             },
           },
           {
             resolve: 'gatsby-remark-autolink-headers',
             options: {
-              icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M20,10V8h-4V4h-2v4h-4V4H8v4H4v2h4v4H4v2h4v4h2v-4h4v4h2v-4h4v-2h-4v-4H20z M14,14h-4v-4h4V14z"/></g></svg>',
+              isIconAfterHeader: true,
             },
           },
           {

gatsby-node.js

@@ -7,6 +7,7 @@
 const axios = require('axios');
 const crypto = require('crypto');
 const parser = require('xml2json');
+const _ = require("lodash")
 
 exports.createPages = async ({ actions, graphql }) => {
   const { createPage } = actions;
@@ -15,10 +16,15 @@ exports.createPages = async ({ actions, graphql }) => {
   const blogPostTemplate = require.resolve('./src/templates/BlogPostTemplate.tsx');
   const { data } = await graphql(`
     {
-      posts: allMdx(limit: 1000) {
+      posts: allMdx(limit: 1000, filter: {fileAbsolutePath: {regex: "/posts/"}}) {
         nodes {
           slug
         }
+      },
+      tagsGroup: allMdx(limit: 2000, filter: {fileAbsolutePath: {regex: "/posts/"}}) {
+        group(field: frontmatter___tags) {
+          fieldValue
+        }
       },
        github {
         repository(name: "personal-reading-list", owner: "jamesrwilliams") {
@@ -44,26 +50,29 @@ exports.createPages = async ({ actions, graphql }) => {
     });
   });
 
-  /* Reading List Entries */
-  const readingListEntryTemplate = require.resolve('./src/templates/ReadingListEntryTemplate.tsx');
-  const entries = data.github.repository.issues.nodes;
-
-  entries.forEach((entry) => {
-    createPage({
-      path: `/resources/reading/${entry.number}`,
-      component: readingListEntryTemplate,
-      context: {
-        ...entry,
-      },
-    });
-  });
-
   const { createRedirect } = actions;
   createRedirect({
     fromPath: '/cv',
     toPath: '/resume',
     isPermanent: true,
   });
+
+  /**
+   * Create Tag Archive and singles
+   */
+  const tagTemplate = require.resolve('./src/templates/Tags.tsx');
+  const tags = data.tagsGroup.group;
+
+  tags.forEach(tag => {
+    createPage({
+      path: `posts/-/tags/${_.kebabCase(tag.fieldValue)}`,
+      component: tagTemplate,
+      context: {
+        tag: tag.fieldValue,
+      },
+    })
+  })
+
 };
 
 exports.sourceNodes = async ({ actions }) => {