From 8137527cc1a400a90a7fe672a57af09fedc79eec Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 13 Jan 2022 10:34:37 -0500
Subject: [PATCH 01/19] Add the blog source repo and blog template.

---
 site-data.js          | 10 +++++
 src/templates/blog.js | 85 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 src/templates/blog.js

diff --git a/site-data.js b/site-data.js
index 273eb57..6a7c00b 100644
--- a/site-data.js
+++ b/site-data.js
@@ -6,6 +6,7 @@
  * designated `directory`. The default is `DOCS_TEMPLATE`.
  */
 const DOCS_TEMPLATE = './src/templates/docs.js';
+const BLOG_TEMPLATE = './src/templates/blog.js';
 
 module.exports = {
   siteMetadata: {
@@ -57,5 +58,14 @@ module.exports = {
       branch: '1.x',
       directory: 'docs/',
     },
+    {
+      name: 'blog',
+      title: 'Blog',
+      baseURI: '/blog',
+      remote: 'https://github.com/jgaehring/farmOS-community.git',
+      branch: 'main',
+      directory: 'blog/',
+      template: BLOG_TEMPLATE,
+    },
   ],
 };
diff --git a/src/templates/blog.js b/src/templates/blog.js
new file mode 100644
index 0000000..dc4adda
--- /dev/null
+++ b/src/templates/blog.js
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { graphql } from 'gatsby'
+import 'prismjs/themes/prism.css'
+import Markdown from '../components/markdown';
+import { Box, Hidden } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import Seo from '../components/seo';
+import TableOfContents from '../components/table-of-contents';
+import theme, { toolbarOffset } from '../theme';
+
+const contentWidth = 1280;
+const lineLengthInChars = 90;
+const lineLength = `${lineLengthInChars}ch`;
+const sidebarWidth = `calc(calc(${contentWidth}px - ${lineLength}) / 2)`;
+const sidebarOffset = `calc(50% + ${lineLengthInChars / 2}ch)`;
+
+const useStyles = makeStyles({
+  mainToC: {
+    position: 'fixed',
+    ...toolbarOffset(({ minHeight }) => ({
+      top: minHeight,
+      bottom: minHeight,
+    })),
+    left: sidebarOffset,
+    overflowY: 'auto',
+    width: sidebarWidth,
+    [theme.breakpoints.down('md')]: {
+      left: `calc(50% + ${lineLengthInChars * 3 / 4}ch - ${contentWidth / 4}px)`,
+    },
+    padding: theme.spacing(2),
+  },
+});
+
+export default function BlogTemplate({ data }) {
+  const classes = useStyles();
+
+  const { markdownRemark: post } = data;
+  const [tocHtml, setTocHtml] = useState(post.tableOfContents);
+  const title = post.headings.find(({ depth }) => depth === 1)?.value;
+  const toc = {
+    title,
+    __html: tocHtml,
+    headings: post.headings
+      .filter(({ depth }) => depth > 1)
+      .map(({ id }) => id),
+  };
+  useEffect(() => {
+    const div = document.createElement('div');
+    div.innerHTML = post.tableOfContents;
+    const ul1 = div.querySelector('ul li ul');
+    const ul2 = ul1 && ul1.outerHTML;
+    setTocHtml(ul2);
+  }, [post.tableOfContents]);
+
+  return (
+    <>
+      <Seo title={title}/>
+      <Box component='main'>
+        <h1>Blog Template</h1>
+        <Markdown html={post.html}/>
+      </Box>
+      {(
+        toc.__html
+        ? (<Hidden smDown implementation='css' className={classes.mainToC}>
+            <TableOfContents {...toc}/>
+          </Hidden>)
+        : null
+      )}
+    </>
+  );
+};
+
+export const query = graphql`
+  query($pathname: String!) {
+    markdownRemark(fields: { pathname: { eq: $pathname } }) {
+      html
+      tableOfContents
+      headings {
+        id
+        value
+        depth
+      }
+    }
+  }
+`;

From d0130d623c881176249e298f59e034824942b20d Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 14 Jan 2022 11:01:38 -0500
Subject: [PATCH 02/19] Create blog index page.

---
 src/pages/blog.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/pages/blog.js

diff --git a/src/pages/blog.js b/src/pages/blog.js
new file mode 100644
index 0000000..a242889
--- /dev/null
+++ b/src/pages/blog.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Link } from 'gatsby-material-ui-components';
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Typography } from '@material-ui/core';
+import Seo from '../components/seo';
+import theme from '../theme';
+
+const useStyles = makeStyles({
+  main: {
+    '& h1': {
+      color: theme.palette.text.secondary,
+      fontWeight: 300,
+      fontSize: '2rem',
+      lineHeight: 1.3,
+      letterSpacing: '-.01em',
+      margin: '0 0 1.25rem',
+    },
+  },
+});
+
+const BlogIndex = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <Seo title='farmOS | Blog'/>
+      <Box component='main' className={classes.main}>
+        <Typography variant='h1'>
+          Blog Page!
+        </Typography>
+        <Typography variant='body1'>
+          <Link to='/'>Return home</Link>.
+        </Typography>
+      </Box>
+    </>
+  );
+};
+
+export default BlogIndex

From 2486aedfe97bd4944346b3016d68017789937a36 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 20 Jan 2022 13:12:42 -0500
Subject: [PATCH 03/19] Fix prepareSource for remotes w/o config.

---
 lib/sources.js | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/lib/sources.js b/lib/sources.js
index e930b22..e6accba 100644
--- a/lib/sources.js
+++ b/lib/sources.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const { assoc, compose, evolve, has, ifElse } = require('ramda');
 
 const validateSource = (source = {}) => {
   const { name, config, baseURI, remote, local } = source;
@@ -20,20 +21,16 @@ const validateSource = (source = {}) => {
   return isValid;
 };
 
-const prepareSource = git => source => {
-  if (!source.remote) {
-    return {
-      ...source,
-      basePath: source.local,
-    };
-  }
-  const { config, directory = '', name } = source;
-  return {
-    ...source,
-    basePath: path.resolve(git, name, directory),
-    config: path.resolve(git, name, config),
-  };
-};
+const prepareSource = git => (s) => ifElse(
+  has('remote'),
+  compose(
+    evolve({
+      config: c => path.resolve(git, s.name, c),
+    }),
+    assoc('basePath', path.resolve(git, s.name, s.directory || '')),
+  ),
+  assoc('basePath', s.local),
+)(s);
 
 const prepareSources = (sources, git) => {
   return sources.filter(validateSource).map(prepareSource(git));

From 3f4e7261ad21e42839f7ece78a9cf250b3b25cbd Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 20 Jan 2022 13:16:05 -0500
Subject: [PATCH 04/19] Add query to blog template.

---
 src/pages/blog.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/pages/blog.js b/src/pages/blog.js
index a242889..6f38fdf 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Box, Typography } from '@material-ui/core';
 import Seo from '../components/seo';
 import theme from '../theme';
+import { graphql } from 'gatsby';
 
 const useStyles = makeStyles({
   main: {
@@ -35,4 +36,24 @@ const BlogIndex = () => {
   );
 };
 
+export const query = graphql`query BlogIndex {
+  allMarkdownRemark(
+    filter: {fields: {template: {eq: "./src/templates/blog.js"}}}
+    sort: {fields: frontmatter___date, order: DESC}
+  ) {
+    totalCount
+    edges {
+      node {
+        frontmatter {
+          canonical
+          date(formatString: "MMMM DD, YYYY")
+          slug
+          title
+        }
+        excerpt
+      }
+    }
+  }
+}`;
+
 export default BlogIndex

From 724ef386808215ddd2f63a5a96222498d9c98763 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 20 Jan 2022 13:40:33 -0500
Subject: [PATCH 05/19] Add blog to nav drawer.

---
 lib/navigation.js | 4 ++--
 site-data.js      | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/navigation.js b/lib/navigation.js
index 384b23f..a51f253 100644
--- a/lib/navigation.js
+++ b/lib/navigation.js
@@ -146,11 +146,11 @@ const insertChildNode = (nav, child, indices) => {
 };
 
 const createSourceNav = (source) => {
-  const { title, config, baseURI } = source;
+  const { title, config, baseURI, page = null } = source;
   let nav = {
     title,
     key: baseURI,
-    page: null,
+    page,
     children: [],
   };
   const configYaml = loadConfigYaml(config);
diff --git a/site-data.js b/site-data.js
index 6a7c00b..e15fae5 100644
--- a/site-data.js
+++ b/site-data.js
@@ -62,6 +62,10 @@ module.exports = {
       name: 'blog',
       title: 'Blog',
       baseURI: '/blog',
+      page: {
+        title: 'Blog',
+        pathname: '/blog',
+      },
       remote: 'https://github.com/jgaehring/farmOS-community.git',
       branch: 'main',
       directory: 'blog/',

From a0331beb11da2ff521088d6d33d5ed08a07d0f50 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 30 Jun 2022 12:08:27 -0400
Subject: [PATCH 06/19] Render blog posts in blog index page.

---
 src/pages/blog.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/pages/blog.js b/src/pages/blog.js
index 6f38fdf..07d8702 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -19,7 +19,21 @@ const useStyles = makeStyles({
   },
 });
 
-const BlogIndex = () => {
+const BlogIndex = ({ data: { allMarkdownRemark } }) => {
+  const posts = allMarkdownRemark.edges.map(({ node }, i) => {
+    const {
+      excerpt,
+      fields: { pathname },
+      frontmatter: {title, date, },
+    } = node;
+    return (
+    <Box component='a' href={pathname} key={i}>
+      <Typography variant='h3'>{title}</Typography>
+      <Typography variant='h5'>{date}</Typography>
+      <Typography variant='body1'>{excerpt}</Typography>
+    </Box>
+    );
+  });
   const classes = useStyles();
   return (
     <>
@@ -31,6 +45,7 @@ const BlogIndex = () => {
         <Typography variant='body1'>
           <Link to='/'>Return home</Link>.
         </Typography>
+        {posts}
       </Box>
     </>
   );
@@ -38,7 +53,7 @@ const BlogIndex = () => {
 
 export const query = graphql`query BlogIndex {
   allMarkdownRemark(
-    filter: {fields: {template: {eq: "./src/templates/blog.js"}}}
+    filter: { fields: { template: { eq: "./src/templates/blog.js" } } }
     sort: {fields: frontmatter___date, order: DESC}
   ) {
     totalCount
@@ -51,6 +66,9 @@ export const query = graphql`query BlogIndex {
           title
         }
         excerpt
+        fields {
+          pathname
+        }
       }
     }
   }

From 208e23c89c0c22a6e0232f2b8ce5e7f7b098b2cc Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 30 Jun 2022 17:39:48 -0400
Subject: [PATCH 07/19] Remove unused GraphQL fields.

---
 src/pages/blog.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/blog.js b/src/pages/blog.js
index 07d8702..7fcea22 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -56,13 +56,10 @@ export const query = graphql`query BlogIndex {
     filter: { fields: { template: { eq: "./src/templates/blog.js" } } }
     sort: {fields: frontmatter___date, order: DESC}
   ) {
-    totalCount
     edges {
       node {
         frontmatter {
-          canonical
           date(formatString: "MMMM DD, YYYY")
-          slug
           title
         }
         excerpt

From 227f2808b0ea2de034ea20611828f94b1f8f4c54 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 30 Jun 2022 17:40:33 -0400
Subject: [PATCH 08/19] First pass at styling main blog page.

---
 src/pages/blog.js | 52 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/pages/blog.js b/src/pages/blog.js
index 7fcea22..739a597 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -6,44 +6,70 @@ import Seo from '../components/seo';
 import theme from '../theme';
 import { graphql } from 'gatsby';
 
+const DEFAULT_AUTHOR = 'the farmOS Community';
+
 const useStyles = makeStyles({
   main: {
     '& h1': {
-      color: theme.palette.text.secondary,
       fontWeight: 300,
-      fontSize: '2rem',
+      fontSize: '3rem',
       lineHeight: 1.3,
       letterSpacing: '-.01em',
       margin: '0 0 1.25rem',
     },
   },
+  post: {
+    color: 'inherit',
+    textDecoration: 'none',
+    '& div': { paddingBottom: '2rem' },
+    '& h3': {
+      color: theme.palette.primary.light,
+      fontSize: '2rem',
+      lineHeight: 1.3,
+    },
+    '& h5': {
+      fontSize: '1rem',
+      lineHeight: 1.3,
+      '& span': {
+        fontWeight: 700,
+      },
+    },
+    '& p': {
+      color: theme.palette.text.hint,
+    },
+    '&:hover': {
+      textDecoration: 'none',
+      '& h3': { color: theme.palette.warning.main },
+    },
+  },
 });
 
 const BlogIndex = ({ data: { allMarkdownRemark } }) => {
+  const classes = useStyles();
   const posts = allMarkdownRemark.edges.map(({ node }, i) => {
     const {
       excerpt,
       fields: { pathname },
-      frontmatter: {title, date, },
+      frontmatter: { author = DEFAULT_AUTHOR, date, title, },
     } = node;
     return (
-    <Box component='a' href={pathname} key={i}>
-      <Typography variant='h3'>{title}</Typography>
-      <Typography variant='h5'>{date}</Typography>
-      <Typography variant='body1'>{excerpt}</Typography>
-    </Box>
+      <Link to={pathname} key={i} className={classes.post}>
+        <Box>
+          <Typography variant='h3'>{title}</Typography>
+          <Typography variant='h5'>
+            <span>{date}</span> by {author}
+          </Typography>
+          <Typography variant='body1'>{excerpt}</Typography>
+        </Box>
+      </Link>
     );
   });
-  const classes = useStyles();
   return (
     <>
       <Seo title='farmOS | Blog'/>
       <Box component='main' className={classes.main}>
         <Typography variant='h1'>
-          Blog Page!
-        </Typography>
-        <Typography variant='body1'>
-          <Link to='/'>Return home</Link>.
+          Community Blog
         </Typography>
         {posts}
       </Box>

From fbe43f896169a23dff9fd75b4d855142099eae49 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 30 Jun 2022 18:19:24 -0400
Subject: [PATCH 09/19] Use slug if provided in markdown frontmatter.

---
 gatsby-node.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/gatsby-node.js b/gatsby-node.js
index e1485e2..d4763df 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -27,7 +27,8 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       getNode,
       basePath,
     }).replace(directory, '');
-    const pathname = `/${baseURI}/${relativeFilePath}`.replace(multiSlashRE, '/');
+    const slug = node.frontmatter && node.frontmatter.slug;
+    const pathname = `/${baseURI}/${slug || relativeFilePath}`.replace(multiSlashRE, '/');
 
     // Add a field to each markdown node to indicate its source instance. This
     // is used by the gatsby-remark-prefix-relative-links plugin.
@@ -75,7 +76,7 @@ exports.createPages = async ({ graphql, actions }) => {
     if (pathname === '/' && sourceInstanceName !== 'content') return;
     const component = path.resolve(template);
     createPage({
-      path: node.fields.pathname,
+      path: pathname,
       component,
       // Context is available in page queries as GraphQL variables.
       context: { pathname, sourceInstanceName, template },

From e8acd3244d5f58010d131cf8e463718cc17b9bc8 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Thu, 30 Jun 2022 19:04:07 -0400
Subject: [PATCH 10/19] Remove ToC from blog template.

---
 src/templates/blog.js | 56 ++-----------------------------------------
 1 file changed, 2 insertions(+), 54 deletions(-)

diff --git a/src/templates/blog.js b/src/templates/blog.js
index dc4adda..16375e5 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -1,71 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { graphql } from 'gatsby'
+import { Box } from '@material-ui/core';
 import 'prismjs/themes/prism.css'
 import Markdown from '../components/markdown';
-import { Box, Hidden } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
 import Seo from '../components/seo';
-import TableOfContents from '../components/table-of-contents';
-import theme, { toolbarOffset } from '../theme';
-
-const contentWidth = 1280;
-const lineLengthInChars = 90;
-const lineLength = `${lineLengthInChars}ch`;
-const sidebarWidth = `calc(calc(${contentWidth}px - ${lineLength}) / 2)`;
-const sidebarOffset = `calc(50% + ${lineLengthInChars / 2}ch)`;
-
-const useStyles = makeStyles({
-  mainToC: {
-    position: 'fixed',
-    ...toolbarOffset(({ minHeight }) => ({
-      top: minHeight,
-      bottom: minHeight,
-    })),
-    left: sidebarOffset,
-    overflowY: 'auto',
-    width: sidebarWidth,
-    [theme.breakpoints.down('md')]: {
-      left: `calc(50% + ${lineLengthInChars * 3 / 4}ch - ${contentWidth / 4}px)`,
-    },
-    padding: theme.spacing(2),
-  },
-});
 
 export default function BlogTemplate({ data }) {
-  const classes = useStyles();
-
   const { markdownRemark: post } = data;
-  const [tocHtml, setTocHtml] = useState(post.tableOfContents);
   const title = post.headings.find(({ depth }) => depth === 1)?.value;
-  const toc = {
-    title,
-    __html: tocHtml,
-    headings: post.headings
-      .filter(({ depth }) => depth > 1)
-      .map(({ id }) => id),
-  };
-  useEffect(() => {
-    const div = document.createElement('div');
-    div.innerHTML = post.tableOfContents;
-    const ul1 = div.querySelector('ul li ul');
-    const ul2 = ul1 && ul1.outerHTML;
-    setTocHtml(ul2);
-  }, [post.tableOfContents]);
 
   return (
     <>
       <Seo title={title}/>
       <Box component='main'>
-        <h1>Blog Template</h1>
         <Markdown html={post.html}/>
       </Box>
-      {(
-        toc.__html
-        ? (<Hidden smDown implementation='css' className={classes.mainToC}>
-            <TableOfContents {...toc}/>
-          </Hidden>)
-        : null
-      )}
     </>
   );
 };
@@ -74,7 +23,6 @@ export const query = graphql`
   query($pathname: String!) {
     markdownRemark(fields: { pathname: { eq: $pathname } }) {
       html
-      tableOfContents
       headings {
         id
         value

From dafba4bbf2a3a2474c7693183dd5b7705c1da464 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 10:34:50 -0400
Subject: [PATCH 11/19] Create GraphQL schema for blog Frontmatter.

---
 gatsby-node.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/gatsby-node.js b/gatsby-node.js
index d4763df..60379bf 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -83,3 +83,21 @@ exports.createPages = async ({ graphql, actions }) => {
     });
   });
 };
+
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions
+  const typeDefs = `
+    type MarkdownRemark implements Node {
+      frontmatter: Frontmatter
+    }
+    type Frontmatter {
+      author: String
+      canonical: String
+      # Date is the only required (non-nullable) field.
+      date: Date! @dateformat
+      slug: String
+      title: String
+    }
+  `
+  createTypes(typeDefs)
+}

From 63fc722a69a77841101b9576f67fb93f4455b73b Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 10:35:42 -0400
Subject: [PATCH 12/19] Add canonical link to head via SEO/Helmet.

---
 src/components/seo.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/seo.js b/src/components/seo.js
index 4c54313..e9158f3 100644
--- a/src/components/seo.js
+++ b/src/components/seo.js
@@ -4,7 +4,10 @@ import { Helmet } from "react-helmet"
 import { useLocation } from "@reach/router"
 import { useStaticQuery, graphql } from "gatsby"
 
-const SEO = ({ title, description, image, article }) => {
+const SEO = (props) => {
+  const {
+    article, canonical, description, image, title,
+  } = props;
   const { pathname, origin } = useLocation()
   const { site } = useStaticQuery(query)
 
@@ -56,6 +59,8 @@ const SEO = ({ title, description, image, article }) => {
       )}
 
       {seo.image && <meta name="twitter:image" content={seo.image} />}
+
+      {canonical && <link rel="canonical" href={canonical} />}
     </Helmet>
   )
 }
@@ -67,6 +72,7 @@ SEO.propTypes = {
   description: PropTypes.string,
   image: PropTypes.string,
   article: PropTypes.bool,
+  canonical: PropTypes.string,
 }
 
 SEO.defaultProps = {
@@ -74,6 +80,7 @@ SEO.defaultProps = {
   description: null,
   image: null,
   article: false,
+  canonical: null,
 }
 
 const query = graphql`

From f3bbb3abe885a2b75ae810b10a0c23b4c9a2d5ee Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 10:36:08 -0400
Subject: [PATCH 13/19] Style blog template and add Front Matter.

---
 src/templates/blog.js | 66 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/templates/blog.js b/src/templates/blog.js
index 16375e5..145ad22 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -1,19 +1,64 @@
 import React from 'react';
-import { graphql } from 'gatsby'
-import { Box } from '@material-ui/core';
-import 'prismjs/themes/prism.css'
+import { graphql } from 'gatsby';
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Typography } from '@material-ui/core';
+import 'prismjs/themes/prism.css';
+import theme from '../theme';
 import Markdown from '../components/markdown';
 import Seo from '../components/seo';
 
+const DEFAULT_AUTHOR = 'the farmOS Community';
+const DEFAULT_TITLE = 'farmOS Community Blog';
+
+const useStyles = makeStyles({
+  heading: {
+    margin: '0 0 1.25rem',
+  },
+  headline: {
+    fontWeight: 300,
+    fontSize: '3rem',
+    lineHeight: 1.3,
+  },
+  byline: {
+    fontSize: '1rem',
+    lineHeight: 1.3,
+    color: theme.palette.text.secondary,
+  },
+  dateline: {
+    fontWeight: 700,
+  },
+});
+
 export default function BlogTemplate({ data }) {
-  const { markdownRemark: post } = data;
-  const title = post.headings.find(({ depth }) => depth === 1)?.value;
+  const classes = useStyles();
+  const { markdownRemark: { frontmatter = {}, headings } } = data;
+  const { canonical, date } = frontmatter;
+  let { markdownRemark: { html } } = data;
+  let { author, title } = frontmatter;
+  if (!author) author = DEFAULT_AUTHOR;
+  const h1 = headings.find(({ depth }) => depth === 1);
+  if (h1) {
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    div.querySelector(`#${h1.id}`).remove();
+    html = div.outerHTML;
+  }
+  if (!title && h1) title = h1.value;
+  if (!title && !h1) title = DEFAULT_TITLE;
 
   return (
     <>
-      <Seo title={title}/>
+      <Seo title={title} canonical={canonical}/>
       <Box component='main'>
-        <Markdown html={post.html}/>
+        <Box className={classes.heading}>
+          <Typography variant='h3' className={classes.headline}>
+            {title}
+          </Typography>
+          <Typography variant='h5' className={classes.byline}>
+            <span className={classes.dateline}>{date}</span> by {author}
+          </Typography>
+        </Box>
+        <Markdown html={html}/>
       </Box>
     </>
   );
@@ -22,6 +67,13 @@ export default function BlogTemplate({ data }) {
 export const query = graphql`
   query($pathname: String!) {
     markdownRemark(fields: { pathname: { eq: $pathname } }) {
+      frontmatter {
+        author
+        canonical
+        date(formatString: "MMMM DD, YYYY")
+        slug
+        title
+      }
       html
       headings {
         id

From 30fa12a5ef61d596023e0a39d6289b52d79b8a3d Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 11:07:28 -0400
Subject: [PATCH 14/19] Update gatsby-image-sharp & gatsby-remark-images.

---
 gatsby-config.js  | 2 +-
 package-lock.json | 4 ++--
 package.json      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 59cd2f0..2b15c1e 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -63,7 +63,7 @@ module.exports = {
           {
             resolve: 'gatsby-remark-images',
             options: {
-              maxWidth: 960,
+              maxWidth: 1280,
             },
           },
           'gatsby-remark-autolink-headers', // must precede prismjs!
diff --git a/package-lock.json b/package-lock.json
index e5cc5ef..eca5f42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,10 +16,10 @@
         "gatsby-plugin-image": "^1.14.0",
         "gatsby-plugin-manifest": "^3.14.0",
         "gatsby-plugin-react-helmet": "^4.14.0",
-        "gatsby-plugin-sharp": "^3.14.0",
+        "gatsby-plugin-sharp": "^3.14.3",
         "gatsby-plugin-sitemap": "^4.10.0",
         "gatsby-remark-autolink-headers": "^4.11.0",
-        "gatsby-remark-images": "^4.0.0",
+        "gatsby-remark-images": "^4.2.0",
         "gatsby-remark-prismjs": "^5.11.0",
         "gatsby-source-filesystem": "^3.14.0",
         "gatsby-source-git": "^1.1.0",
diff --git a/package.json b/package.json
index 9c66a60..8c6693b 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,10 @@
     "gatsby-plugin-image": "^1.14.0",
     "gatsby-plugin-manifest": "^3.14.0",
     "gatsby-plugin-react-helmet": "^4.14.0",
-    "gatsby-plugin-sharp": "^3.14.0",
+    "gatsby-plugin-sharp": "^3.14.3",
     "gatsby-plugin-sitemap": "^4.10.0",
     "gatsby-remark-autolink-headers": "^4.11.0",
-    "gatsby-remark-images": "^4.0.0",
+    "gatsby-remark-images": "^4.2.0",
     "gatsby-remark-prismjs": "^5.11.0",
     "gatsby-source-filesystem": "^3.14.0",
     "gatsby-source-git": "^1.1.0",

From fa8b94b51b0ee7466ec9cf9a8c54d786dbe65f03 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 11:08:03 -0400
Subject: [PATCH 15/19] Fix Front Matter defaults on blog index page.

---
 src/pages/blog.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/pages/blog.js b/src/pages/blog.js
index 739a597..aa8df23 100644
--- a/src/pages/blog.js
+++ b/src/pages/blog.js
@@ -7,6 +7,7 @@ import theme from '../theme';
 import { graphql } from 'gatsby';
 
 const DEFAULT_AUTHOR = 'the farmOS Community';
+const DEFAULT_TITLE = 'farmOS Community Blog';
 
 const useStyles = makeStyles({
   main: {
@@ -48,16 +49,18 @@ const BlogIndex = ({ data: { allMarkdownRemark } }) => {
   const classes = useStyles();
   const posts = allMarkdownRemark.edges.map(({ node }, i) => {
     const {
-      excerpt,
-      fields: { pathname },
-      frontmatter: { author = DEFAULT_AUTHOR, date, title, },
+      excerpt, fields: { pathname }, frontmatter, headings,
     } = node;
+    const { author, date, title } = frontmatter;
+    const h1 = headings.find(({ depth }) => depth === 1);
     return (
       <Link to={pathname} key={i} className={classes.post}>
         <Box>
-          <Typography variant='h3'>{title}</Typography>
+          <Typography variant='h3'>
+            {title || h1?.value || DEFAULT_TITLE}
+          </Typography>
           <Typography variant='h5'>
-            <span>{date}</span> by {author}
+            <span>{date}</span> by {author || DEFAULT_AUTHOR}
           </Typography>
           <Typography variant='body1'>{excerpt}</Typography>
         </Box>
@@ -85,6 +88,7 @@ export const query = graphql`query BlogIndex {
     edges {
       node {
         frontmatter {
+          author
           date(formatString: "MMMM DD, YYYY")
           title
         }
@@ -92,6 +96,10 @@ export const query = graphql`query BlogIndex {
         fields {
           pathname
         }
+        headings {
+          value
+          depth
+        }
       }
     }
   }

From 8a24f3030438d8faf6668211519d9d3a27db9ccc Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 11:53:53 -0400
Subject: [PATCH 16/19] Set blog source to testing branch.

---
 site-data.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site-data.js b/site-data.js
index e15fae5..bacb4c4 100644
--- a/site-data.js
+++ b/site-data.js
@@ -66,8 +66,8 @@ module.exports = {
         title: 'Blog',
         pathname: '/blog',
       },
-      remote: 'https://github.com/jgaehring/farmOS-community.git',
-      branch: 'main',
+      remote: 'https://github.com/jgaehring/farmOS-community-blog.git',
+      branch: 'test',
       directory: 'blog/',
       template: BLOG_TEMPLATE,
     },

From 7165f9e493f75285b849841cb5f3ac95851c51d9 Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 12:41:08 -0400
Subject: [PATCH 17/19] Wrap DOM calls in useEffect.

---
 src/templates/blog.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/templates/blog.js b/src/templates/blog.js
index 145ad22..2c29a6d 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { graphql } from 'gatsby';
 import { makeStyles } from '@material-ui/core/styles';
 import { Box, Typography } from '@material-ui/core';
@@ -31,20 +31,25 @@ const useStyles = makeStyles({
 
 export default function BlogTemplate({ data }) {
   const classes = useStyles();
-  const { markdownRemark: { frontmatter = {}, headings } } = data;
+  const { markdownRemark: { frontmatter = {}, headings, html: initHtml } } = data;
   const { canonical, date } = frontmatter;
-  let { markdownRemark: { html } } = data;
   let { author, title } = frontmatter;
   if (!author) author = DEFAULT_AUTHOR;
   const h1 = headings.find(({ depth }) => depth === 1);
-  if (h1) {
-    const div = document.createElement('div');
-    div.innerHTML = html;
-    div.querySelector(`#${h1.id}`).remove();
-    html = div.outerHTML;
-  }
   if (!title && h1) title = h1.value;
   if (!title && !h1) title = DEFAULT_TITLE;
+  const [html, setHtml] = useState(initHtml);
+  useEffect(() => {
+    if (h1) {
+      const div = document.createElement('div');
+      div.innerHTML = html;
+      const el = div.querySelector(`#${h1.id}`);
+      if (el) {
+        el.remove();
+        setHtml(div.outerHTML);
+      }
+    }
+  }, [h1, html]);
 
   return (
     <>

From 73756cbff7abd88305c7d24b5ae22d784e4f537c Mon Sep 17 00:00:00 2001
From: Jamie Gaehring <gaehj457@gmail.com>
Date: Fri, 1 Jul 2022 16:13:30 -0400
Subject: [PATCH 18/19] Make sure heading is an h1 element.

---
 src/templates/blog.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/templates/blog.js b/src/templates/blog.js
index 2c29a6d..ede0d15 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -56,10 +56,10 @@ export default function BlogTemplate({ data }) {
       <Seo title={title} canonical={canonical}/>
       <Box component='main'>
         <Box className={classes.heading}>
-          <Typography variant='h3' className={classes.headline}>
+          <Typography variant='h1' className={classes.headline}>
             {title}
           </Typography>
-          <Typography variant='h5' className={classes.byline}>
+          <Typography className={classes.byline}>
             <span className={classes.dateline}>{date}</span> by {author}
           </Typography>
         </Box>

From 0f2d58643951ed0913884c0d24e7f3b8dd067bac Mon Sep 17 00:00:00 2001
From: Symbioquine <symbioquine@gmail.com>
Date: Mon, 31 Oct 2022 10:49:41 -0700
Subject: [PATCH 19/19] Update blog repository/branch/dir to match new location
 of blog posts

To be merged first:

* https://github.com/farmOS/farmOS.org/pull/49
* https://github.com/farmOS/farmOS-community-blog/pull/2
---
 site-data.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site-data.js b/site-data.js
index bacb4c4..85f8729 100644
--- a/site-data.js
+++ b/site-data.js
@@ -66,9 +66,9 @@ module.exports = {
         title: 'Blog',
         pathname: '/blog',
       },
-      remote: 'https://github.com/jgaehring/farmOS-community-blog.git',
-      branch: 'test',
-      directory: 'blog/',
+      remote: 'https://github.com/farmOS/farmOS-community-blog.git',
+      branch: 'main',
+      directory: 'posts/',
       template: BLOG_TEMPLATE,
     },
   ],