WIP: blog

content/blog/a-blog-post/index.md

@@ -0,0 +1,16 @@
+---
+title: A Blog Post
+templateKey: 'blog-post'
+date: '2021-05-28T22:40:32.169Z'
+description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquet tortor. Suspendisse commodo nisl nunc, in pulvinar risus tristique sit amet. Pellentesque interdum est id nunc maximus, sed condimentum urna tempor. Cras risus neque, laoreet id rutrum vitae, consequat vitae urna. In ac neque id metus commodo lobortis. Aenean ornare purus tempor metus pretium dictum. Aliquam vitae interdum arcu.
+
+Fusce pharetra, dui et ultricies tempor, dui orci tempor libero, eu egestas tortor mauris sit amet quam. Fusce et ex eu lectus luctus lacinia at ac nulla. Donec ultrices urna nulla, sit amet convallis turpis imperdiet accumsan. Duis scelerisque faucibus aliquet. Nulla quis efficitur augue. Donec pellentesque elementum lacinia. Maecenas nec mattis sapien, vitae placerat diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ipsum nisi. Vivamus faucibus vestibulum consectetur. Integer placerat erat purus, porta convallis lectus eleifend vitae. Proin at lectus non enim blandit congue. Proin ex neque, ullamcorper ut enim et, lacinia facilisis lorem. Nunc non odio augue. Etiam erat sapien, maximus non vulputate eget, ultrices a turpis. Phasellus ut risus orci.
+
+Duis auctor imperdiet lectus, in commodo erat molestie eleifend. Donec pretium egestas eros, eget tincidunt nibh tristique quis. Nulla ut tempus tellus. Etiam vel euismod mauris. Nulla eu ante auctor augue viverra lacinia non egestas erat. Ut lacinia nisi elementum dui dignissim mattis. Praesent sollicitudin auctor orci eget tincidunt. Proin egestas eget nulla nec auctor. In bibendum, diam id pharetra porta, felis ante egestas nibh, ac ultricies augue metus ac lorem. Mauris volutpat ipsum at aliquam cursus. Integer velit eros, varius ut ultricies vel, facilisis sit amet dui. Nunc tempor quis massa eu pellentesque. In a mauris porta lectus tempor gravida at a nulla. Integer quis tristique felis, at accumsan augue. Sed finibus, est non vulputate tincidunt, purus ex suscipit dolor, quis dictum metus purus ac neque. Nulla ut nisl ac odio venenatis consectetur.
+
+Nunc sed pulvinar lectus, a pellentesque elit. Curabitur sed mollis risus, non sagittis ex. Donec sit amet faucibus tellus. Vestibulum tempus mauris eget nunc egestas vestibulum. Praesent tristique nunc nec ipsum cursus fringilla quis in nulla. Nulla a tempor est. Etiam bibendum odio vitae pharetra auctor.
+
+Suspendisse vehicula lorem et tempus euismod. Sed consequat, nunc non auctor varius, sem leo dignissim justo, in molestie risus sem non ligula. Sed interdum urna congue, faucibus odio quis, ullamcorper sem. Donec risus purus, malesuada nec varius quis, porta quis enim. Maecenas euismod sed mi sed pharetra. Integer porta viverra ante, a fringilla purus. Praesent urna nisl, scelerisque sed tellus ut, aliquam hendrerit justo.

content/blog/another-blog-post/index.md

@@ -0,0 +1,15 @@
+---
+title: Another Blog Post
+templateKey: 'blog-post'
+date: '2021-06-11T22:40:32.169Z'
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel aliquet tortor. Suspendisse commodo nisl nunc, in pulvinar risus tristique sit amet. Pellentesque interdum est id nunc maximus, sed condimentum urna tempor. Cras risus neque, laoreet id rutrum vitae, consequat vitae urna. In ac neque id metus commodo lobortis. Aenean ornare purus tempor metus pretium dictum. Aliquam vitae interdum arcu.
+
+Fusce pharetra, dui et ultricies tempor, dui orci tempor libero, eu egestas tortor mauris sit amet quam. Fusce et ex eu lectus luctus lacinia at ac nulla. Donec ultrices urna nulla, sit amet convallis turpis imperdiet accumsan. Duis scelerisque faucibus aliquet. Nulla quis efficitur augue. Donec pellentesque elementum lacinia. Maecenas nec mattis sapien, vitae placerat diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ipsum nisi. Vivamus faucibus vestibulum consectetur. Integer placerat erat purus, porta convallis lectus eleifend vitae. Proin at lectus non enim blandit congue. Proin ex neque, ullamcorper ut enim et, lacinia facilisis lorem. Nunc non odio augue. Etiam erat sapien, maximus non vulputate eget, ultrices a turpis. Phasellus ut risus orci.
+
+Duis auctor imperdiet lectus, in commodo erat molestie eleifend. Donec pretium egestas eros, eget tincidunt nibh tristique quis. Nulla ut tempus tellus. Etiam vel euismod mauris. Nulla eu ante auctor augue viverra lacinia non egestas erat. Ut lacinia nisi elementum dui dignissim mattis. Praesent sollicitudin auctor orci eget tincidunt. Proin egestas eget nulla nec auctor. In bibendum, diam id pharetra porta, felis ante egestas nibh, ac ultricies augue metus ac lorem. Mauris volutpat ipsum at aliquam cursus. Integer velit eros, varius ut ultricies vel, facilisis sit amet dui. Nunc tempor quis massa eu pellentesque. In a mauris porta lectus tempor gravida at a nulla. Integer quis tristique felis, at accumsan augue. Sed finibus, est non vulputate tincidunt, purus ex suscipit dolor, quis dictum metus purus ac neque. Nulla ut nisl ac odio venenatis consectetur.
+
+Nunc sed pulvinar lectus, a pellentesque elit. Curabitur sed mollis risus, non sagittis ex. Donec sit amet faucibus tellus. Vestibulum tempus mauris eget nunc egestas vestibulum. Praesent tristique nunc nec ipsum cursus fringilla quis in nulla. Nulla a tempor est. Etiam bibendum odio vitae pharetra auctor.
+
+Suspendisse vehicula lorem et tempus euismod. Sed consequat, nunc non auctor varius, sem leo dignissim justo, in molestie risus sem non ligula. Sed interdum urna congue, faucibus odio quis, ullamcorper sem. Donec risus purus, malesuada nec varius quis, porta quis enim. Maecenas euismod sed mi sed pharetra. Integer porta viverra ante, a fringilla purus. Praesent urna nisl, scelerisque sed tellus ut, aliquam hendrerit justo.

gatsby-node.js

@@ -6,12 +6,30 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
-exports.createPages = ({ actions, graphql }) => {
+exports.createPages = ({ actions, graphql, reporter }) => {
   const { createPage } = actions
-
   return graphql(`
     {
-      allMarkdownRemark(limit: 1000) {
+      subPages: allMarkdownRemark(
+        limit: 1000
+        filter: { frontmatter: { templateKey: { eq: "subpage" } } }
+      ) {
+        edges {
+          node {
+            id
+            frontmatter {
+              templateKey
+            }
+            fields {
+              slug
+            }
+          }
+        }
+      }
+      blogPosts: allMarkdownRemark(
+        limit: 1000
+        filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
+      ) {
         edges {
           node {
             id
@@ -22,16 +40,26 @@ exports.createPages = ({ actions, graphql }) => {
               templateKey
             }
           }
+          next {
+            id
+          }
+          previous {
+            id
+          }
         }
       }
     }
   `).then(result => {
     if (result.errors) {
-      result.errors.forEach(e => console.error(e.toString()))
-      return Promise.reject(result.errors)
+      reporter.panicOnBuild(
+        `There was an error loading the pages and blog posts`,
+        result.errors
+      )
+      return
     }
 
-    const pages = result.data.allMarkdownRemark.edges
+    // Create subpages like Code of Conduct
+    const pages = result.data.subPages.edges
 
     pages.forEach(edge => {
       const id = edge.node.id
@@ -41,12 +69,34 @@ exports.createPages = ({ actions, graphql }) => {
         component: path.resolve(
           `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
-        // additional data can be passed via context
         context: {
           id,
         },
       })
     })
+
+    // Create pages for each blog post
+    const posts = result.data.blogPosts.edges
+    // But only if there's at least one markdown file found at "content/blog" (defined in gatsby-config.js)
+    // `context` is available in the template as a prop and as a variable in GraphQL
+    if (posts.length > 0) {
+      posts.forEach((post, index) => {
+        const previousPostId = post.previous ? post.previous.id : null
+        const nextPostId = post.next ? post.next.id : null
+
+        createPage({
+          path: post.node.fields.slug,
+          component: path.resolve(
+            `src/templates/${String(post.node.frontmatter.templateKey)}.js`
+          ),
+          context: {
+            id: post.node.id,
+            previousPostId,
+            nextPostId,
+          },
+        })
+      })
+    }
   })
 }
 

src/components/menu/index.js

@@ -46,6 +46,13 @@ const Menu = () => {
       >
         Sponsorship
       </button>
+      <button
+        onClick={() => {
+          navigate('/blog')
+        }}
+      >
+        Blog
+      </button>
     </nav>
   )
 

src/components/menu/menu.module.css

@@ -25,7 +25,7 @@
 .small {
   display: none;
 
-  @media screen and (max-width: 60em) {
+  @media screen and (max-width: 68em) {
     display: block;
     .links {
       z-index: 1;
@@ -48,7 +48,7 @@
     }
   }
 
-  @media screen and (max-width: 60em) {
+  @media screen and (max-width: 68em) {
     display: none;
   }
 }

src/components/posts/index.js

@@ -0,0 +1,27 @@
+import React from 'react'
+// import styles from './post.module.css'
+import { Link } from 'gatsby'
+
+const Post = ({ post }) => (
+  <article itemScope itemType="http://schema.org/Article">
+    <header>
+      <h2>
+        <Link to={post.fields.slug} itemProp="url" className="link">
+          <span itemProp="headline">{post.frontmatter.title}</span>
+        </Link>
+      </h2>
+      {post.frontmatter.date}
+      <p>Time to read: {post.timeToRead} minutes</p>
+    </header>
+    <section>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: post.frontmatter.description || post.excerpt,
+        }}
+        itemProp="description"
+      />
+    </section>
+  </article>
+)
+
+export default Post

src/pages/blog/index.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import Layout from '../../layouts/default'
+import SEO from '../../components/seo'
+import Post from '../../components/posts'
+
+const Blog = ({ data }) => {
+  const posts = data.allMarkdownRemark.nodes
+  return (
+    <Layout>
+      <SEO title="Blog" keywords={[`tech`, `diversity`, `blog`]} />
+      <header>
+        <h1>Blog</h1>
+      </header>
+      <section>
+        <ol style={{ listStyle: `none`, padding: 0, margin: 0 }}>
+          {posts.map(post => {
+            return (
+              <li key={post.fields.slug}>
+                <Post post={post} />
+              </li>
+            )
+          })}
+        </ol>
+      </section>
+    </Layout>
+  )
+}
+
+export default Blog
+
+export const postsQuery = graphql`
+  query {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
+    ) {
+      nodes {
+        excerpt
+        fields {
+          slug
+        }
+        frontmatter {
+          date(formatString: "MMMM DD, YYYY")
+          title
+          description
+          templateKey
+        }
+        timeToRead
+      }
+    }
+  }
+`

src/templates/blog-post.js

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Link, graphql } from 'gatsby'
+
+import Layout from '../layouts/default'
+import Seo from '../components/seo'
+
+const BlogPostTemplate = ({ data }) => {
+  const post = data.markdownRemark
+  const { previous, next } = data
+
+  return (
+    <Layout>
+      <Seo
+        title={post.frontmatter.title}
+        description={post.frontmatter.description || post.excerpt}
+      />
+      <article itemScope itemType="http://schema.org/Article">
+        <header>
+          <h1 itemProp="headline">{post.frontmatter.title}</h1>
+          <p>{post.frontmatter.date}</p>
+        </header>
+        <section
+          dangerouslySetInnerHTML={{ __html: post.html }}
+          itemProp="articleBody"
+        />
+      </article>
+      <nav>
+        <ul
+          style={{
+            display: `flex`,
+            flexWrap: `wrap`,
+            justifyContent: `space-between`,
+            listStyle: `none`,
+            padding: 0,
+          }}
+        >
+          <li>
+            {previous && (
+              <Link to={previous.fields.slug} rel="prev">
+                ← {previous.frontmatter.title}
+              </Link>
+            )}
+          </li>
+          <li>
+            {next && (
+              <Link to={next.fields.slug} rel="next">
+                {next.frontmatter.title} →
+              </Link>
+            )}
+          </li>
+        </ul>
+      </nav>
+    </Layout>
+  )
+}
+
+export default BlogPostTemplate
+
+export const pageQuery = graphql`
+  query BlogPostBySlug(
+    $id: String!
+    $previousPostId: String
+    $nextPostId: String
+  ) {
+    markdownRemark(id: { eq: $id }) {
+      id
+      excerpt(pruneLength: 160)
+      html
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+        description
+      }
+    }
+    previous: markdownRemark(id: { eq: $previousPostId }) {
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+      }
+    }
+    next: markdownRemark(id: { eq: $nextPostId }) {
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+      }
+    }
+  }
+`

static/admin/config.yml

@@ -286,3 +286,20 @@ collections:
         name: 'url_source'
         widget: 'string'
         required: false
+
+  - name: 'blog'
+    label: 'Blog'
+    folder: 'content/blog'
+    create: true
+    delete: true
+    slug: 'index'
+    media_folder: ''
+    public_folder: ''
+    path: '{{title}}/index'
+    editor:
+      preview: false
+    fields:
+      - { label: 'Title', name: 'title', widget: 'string' }
+      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
+      - { label: 'Description', name: 'description', widget: 'string' }
+      - { label: 'Body', name: 'body', widget: 'markdown' }