Merge branch 'main' into feat/rename-deck

.eslintignore

@@ -5,6 +5,7 @@ packages/**/node_modules
 packages/**/gatsby-browser.js
 packages/**/gatsby-config.js
 packages/**/gatsby-node.js
+packages/**/gatsby-ssr.js
 packages/**/__gatsby-node.js
 packages/**/postcss.config.js
 packages/**/tailwind.config.js

.github/workflows/eslint.yml

@@ -6,8 +6,10 @@ jobs:
   run-eslint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
       - run: yarn install
       - run: yarn test:ci
       - run: yarn lint:ci

.github/workflows/gh-pages.yml

@@ -8,11 +8,10 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18
       - name: Install package dependencies
         run: yarn install
       - run: yarn test:ci

.github/workflows/release.yml

@@ -8,11 +8,10 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18
       - name: Install package dependencies
         run: yarn install
       - name: Run Tests
@@ -21,7 +20,7 @@ jobs:
         run: mkdir --parents dist; tar --create --gzip --verbose --directory=packages --exclude=node_modules --exclude=adr --file dist/gatsby-theme-adr.tar.gz gatsby-theme-adr
       - name: Semantic Release
         if: ${{ success() }}
-        uses: cycjimmy/semantic-release-action@v2
+        uses: cycjimmy/semantic-release-action@v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,5 +1,5 @@
 node_modules/
 .cache/
 /packages/*/public/
-/yarn-error.log
+yarn-error.log
 /dist

.nvmrc

@@ -1 +1 @@
-16
+18

.tugboat/config.yml

@@ -8,7 +8,7 @@ services:
       - /adr/20210608-record-architecture-decisions/
     commands:
       init:
-        - curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
+        - curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
         - ln --symbolic --no-dereference --force "${TUGBOAT_ROOT}/packages/example/public" "${DOCROOT}"
         - apt-get install -y nodejs
         - npm install --global yarn

CONTRIBUTING.md

@@ -13,8 +13,8 @@ This theme uses `yarn` workspaces to manage the theme and the example site that
 
 In the `packages/` folder you will find:
 
-  - `gatsby-theme-adr`: The theme itself. This is where most of the action happens during development and work on issues.
-  - `example`: The example site that showcases the theme. This is where one can see the changes in the theme.
+- `gatsby-theme-adr`: The theme itself. This is where most of the action happens during development and work on issues.
+- `example`: The example site that showcases the theme. This is where one can see the changes in the theme.
 
 If you are familiar with <abbr title="Object Oriented Programming">OOP</abbr> you can think of the `gatsby-theme-adr` theme as a "class", and the `example` as the "object instance".
 
@@ -29,7 +29,7 @@ If you are familiar with <abbr title="Object Oriented Programming">OOP</abbr> yo
 If your task includes adding a new dependency you will need to know where to add it.
 
 | Workspace | Use case                                                             | Command                                                       |
-|----------|----------------------------------------------------------------------|---------------------------------------------------------------|
-| Root     | This is for dependencies that apply globally. Ex: `eslint`.          | `yarn --ignore-workspace-root-check add my-dependency`        |
-| Theme    | This is usually the case. Around 90% of the time.                    | `yarn workspace @lullabot/gatsby-theme-adr add my-dependency` |
-| Site     | When you need some extra code for the example. Ex: some font family. | `yarn workspace example add my-dependency`                    |
+| --------- | -------------------------------------------------------------------- | ------------------------------------------------------------- |
+| Root      | This is for dependencies that apply globally. Ex: `eslint`.          | `yarn --ignore-workspace-root-check add my-dependency`        |
+| Theme     | This is usually the case. Around 90% of the time.                    | `yarn workspace @lullabot/gatsby-theme-adr add my-dependency` |
+| Site      | When you need some extra code for the example. Ex: some font family. | `yarn workspace example add my-dependency`                    |

README.md

@@ -1,8 +1,9 @@
 <p align="center">
-  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
+  <a href="https://www.gatsbyjs.com/">
     <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
   </a>
 </p>
+
 <h1 align="center">
   Gatsby Theme ADR
 </h1>
@@ -67,7 +68,7 @@ differ.
 
 Here is an example that assumes you use _GitHub Actions_ for CI and _GitHub Pages_ to host the static site.
 
-Add a workflow for your repository in `.github/worflows/gh-pages.yml` with the
+Add a workflow for your repository in `.github/workflows/gh-pages.yml` with the
 following contents:
 
 ```yaml

package.json

@@ -1,5 +1,8 @@
 {
   "name": "gatsby-theme-adr-development",
+  "description": "Gatsby theme for a site to list ADRs",
+  "repository": "github:lullabot/gatsby-theme-adr",
+  "bugs": "https://github.com/Lullabot/gatsby-theme-adr/issues",
   "private": true,
   "version": "0.0.1",
   "license": "MIT",
@@ -8,10 +11,10 @@
     "develop": "yarn workspace example develop",
     "start": "yarn workspace example develop",
     "serve": "yarn workspace example serve",
-    "clean": "concurrently -c \"bgBlue,bgMagenta\" \"yarn workspace example clean\" \"yarn workspace @lullabot/gatsby-theme-adr clean\"",
+    "clean": "concurrently --names \"example site,theme\" --prefix-colors \"bgBlue,bgMagenta\" \"yarn workspace example clean\" \"yarn workspace @lullabot/gatsby-theme-adr clean\"",
     "test": "yarn workspace @lullabot/gatsby-theme-adr test",
     "test:ci": "yarn workspace @lullabot/gatsby-theme-adr test:ci",
-    "telemetry:off": "concurrently -c \"bgBlue,bgMagenta\" \"yarn workspace example telemetry:off\" \"yarn workspace @lullabot/gatsby-theme-adr telemetry:off\"",
+    "telemetry:off": "concurrently --names \"example site,theme\" --prefix-colors \"bgBlue,bgMagenta\" \"yarn workspace example telemetry:off\" \"yarn workspace @lullabot/gatsby-theme-adr telemetry:off\"",
     "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx,html}\"",
     "lint:fix": "prettier --write \"{**/*,*}.{js,ts,jsx,tsx,json,md}\" && yarn lint --fix",
     "lint:ci": "yarn lint -o reports/eslint/issues.json -f json",

packages/example/gatsby-config.js

@@ -1,12 +1,17 @@
 module.exports = {
+  pathPrefix: '/gatsby-theme-adr',
   plugins: [
     {
       resolve: '@lullabot/gatsby-theme-adr',
       options: {
         contentPath: 'adrs',
+        trailingSlash: 'always',
         siteMetadata: {
           siteUrl: 'https://architecture.my-company.com',
           title: "My Company's Architecture Decision Records",
+          description:
+            'Welcome to the architecture knowledge base of My Company. You will find here all the Architecture Decision Records (ADR) of the project.',
+          image: '/icons/icon-192x192.png',
           menuLinks: [
             { name: 'Home', uri: '/', iconName: 'HomeIcon' },
             { name: 'All ADRs', uri: '/adrs', iconName: 'CollectionIcon' },

packages/example/package.json

@@ -6,15 +6,15 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@lullabot/gatsby-theme-adr": "*",
-    "gatsby": "^4.12.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "gatsby": "^5.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "scripts": {
     "test": "/bin/true",
     "develop": "gatsby develop",
     "start": "gatsby develop",
-    "build": "gatsby build",
+    "build": "gatsby build --prefix-paths",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "telemetry:off": "gatsby telemetry --disable",

packages/example/src/pages/index.tsx

@@ -3,35 +3,55 @@ import React, { PropsWithChildren } from 'react';
 import PageTitle from '@lullabot/gatsby-theme-adr/src/components/PageTitle';
 
 import Layout from '@lullabot/gatsby-theme-adr/src/components/layout/Layout';
-import { graphql, PageProps, useStaticQuery } from 'gatsby';
+import { SiteMetadata } from '@lullabot/gatsby-theme-adr/src/types';
+
+import { graphql, PageProps } from 'gatsby';
 import AdrStats, {
   AdrStatsProps,
 } from '@lullabot/gatsby-theme-adr/src/components/AdrStats';
+import SEO from '@lullabot/gatsby-theme-adr/src/components/SEO';
 
-const HomePage = (props: PropsWithChildren<PageProps>) => {
-  const {
-    allMdx: { edges: adrs },
-  } = useStaticQuery<{ allMdx: { edges: AdrStatsProps['adrs'] } }>(graphql`
-    query {
-      allMdx {
-        edges {
-          node {
-            frontmatter {
-              tags
-              deciders
-            }
+export const query = graphql`
+  query PageQuery {
+    site {
+      siteMetadata {
+        title
+        description
+      }
+    }
+    allMdx {
+      edges {
+        node {
+          frontmatter {
+            tags
+            deciders
           }
         }
       }
     }
-  `);
+  }
+`;
+
+export const Head = () => <SEO />;
+
+const HomePage = (
+  props: PropsWithChildren<
+    PageProps<{
+      allMdx: { edges: AdrStatsProps['adrs'] };
+      site: { siteMetadata: Partial<SiteMetadata> };
+    }>
+  >,
+) => {
+  const {
+    allMdx: { edges: adrs },
+    site: {
+      siteMetadata: { title, description },
+    },
+  } = props.data;
   return (
     <Layout {...props}>
-      <PageTitle
-        context="Welcome to the architecture knowledge base of My Company. You will find here all the Architecture Decision Records (ADR) of the project."
-        preTitle="ADR"
-      >
-        My Company&apos;s Architecture Decision Records
+      <PageTitle context={description} preTitle="ADR">
+        {title}
       </PageTitle>
       <section
         aria-labelledby="primary-heading"

packages/gatsby-theme-adr/config/feedOptions.js

@@ -33,9 +33,7 @@ module.exports = {
       },
       query: `
         {
-          allMdx(
-            sort: { order: DESC, fields: [frontmatter___date] },
-          ) {
+          allMdx(sort: {frontmatter: {date: DESC}}) {
             edges {
               node {
                 frontmatter {

packages/gatsby-theme-adr/config/lunrOptions.js

@@ -14,7 +14,7 @@ const lunrOptions = {
             fields {
               slug
             }
-            rawBody
+            body
           }
         }
       }
@@ -28,7 +28,7 @@ const lunrOptions = {
       title: node.frontmatter.title,
       context: node.frontmatter.context,
       slug: node.fields.slug,
-      body: node.rawBody,
+      body: node.body,
     })),
 };
 

packages/gatsby-theme-adr/gatsby-config.js

@@ -12,15 +12,14 @@ module.exports = ({
 }) => ({
   jsxRuntime: 'automatic',
   siteMetadata,
+  trailingSlash: 'always',
   plugins: [
     'gatsby-plugin-image',
-    'gatsby-plugin-react-helmet',
     'gatsby-plugin-sitemap',
     {
       resolve: 'gatsby-plugin-postcss',
       options: postCssOptions,
     },
-    'gatsby-plugin-remove-generator',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
@@ -71,9 +70,6 @@ module.exports = ({
             },
           },
         ],
-        defaultLayouts: {
-          default: require.resolve('./src/templates/AdrTemplate.tsx'),
-        },
       },
     },
     {

packages/gatsby-theme-adr/gatsby-node.js

@@ -56,13 +56,16 @@ const createAdrDetail = async (createPage, graphql, reporter) => {
   // Get all markdown blog posts sorted by date
   const result = await graphql(`
     {
-      allMdx(sort: { fields: frontmatter___date }) {
+      allMdx(sort: { frontmatter: { date: ASC } }) {
         edges {
           node {
             id
             fields {
               slug
             }
+            internal {
+              contentFilePath
+            }
           }
         }
       }
@@ -89,6 +92,7 @@ const createAdrDetail = async (createPage, graphql, reporter) => {
         {
           node: {
             fields: { slug },
+            internal: { contentFilePath },
             id,
           },
         },
@@ -100,7 +104,7 @@ const createAdrDetail = async (createPage, graphql, reporter) => {
 
         createPage({
           path: slug,
-          component: adrTemplate,
+          component: `${adrTemplate}?__contentFilePath=${contentFilePath}`,
           context: {
             id,
             previousAdrId,
@@ -124,12 +128,11 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions;
 
   if (node.internal.type === 'Mdx') {
-    const name = 'slug';
-    const value = `/adr/${createFilePath({ node, getNode }).replace(
-      /^\//,
-      '',
-    )}`;
-    createNodeField({ name, node, value });
+    createNodeField({
+      node,
+      name: 'slug',
+      value: `/adr/${createFilePath({ node, getNode }).replace(/^\//, '')}`,
+    });
   }
 };
 
@@ -142,3 +145,27 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     createAdrDetail(createPage, graphql, reporter),
   ]);
 };
+
+// Define SiteMetadata type schema to allow for optional socialLinks.
+exports.createSchemaCustomization = ({ actions }) => {
+  actions.createTypes(`
+    type Site {
+      siteMetadata: SiteMetadata!
+    }
+
+    type SiteMetadata {
+      siteUrl: String!
+      title: String!
+      description: String!
+      image: String!
+      menuLinks: [IconLink!]!
+      socialLinks: [IconLink!]
+    }
+
+    type IconLink {
+      name: String!
+      uri: String!
+      iconName: String
+    }
+  `);
+};

packages/gatsby-theme-adr/gatsby-ssr.js

@@ -0,0 +1,3 @@
+export const onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes({ lang: 'en-US' });
+};