add support for 'notes'

gatsby-node.js

@@ -15,6 +15,13 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
         value: slug.replace(dateSection, newDateSection),
       });
     }
+    else if (slug.indexOf('/notes/') > -1) {
+      actions.createNodeField({
+        node,
+        name: 'slug',
+        value: slug,
+      });
+    }
   }
 };
 
@@ -57,11 +64,18 @@ exports.createPages = async ({ graphql, actions }) => {
           context: { slug }
         });
       }
+      if (slug.indexOf('/notes/') > -1) {
+        actions.createPage({
+          path: slug,
+          component: path.resolve(`./src/templates/note.js`),
+          context: { slug }
+        });
+      }
   });
 
   result.data.tagsGroup.group.forEach(tag => {
     actions.createPage({
-      path: `/blog/tags/${tag.fieldValue}/`,
+      path: `/tags/${tag.fieldValue}/`,
       component: path.resolve(`./src/templates/tag-posts.js`),
       context: {
         tag: tag.fieldValue,

src/components/ArticleHeader.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import BlogPostHeader from './BlogPostHeader';
+import NoteHeader from './NoteHeader';
+
+const ArticleHeader = ({ post }) => {
+  return post.fields.slug.indexOf('blog') > -1 ? 
+    <BlogPostHeader post={post} /> 
+  : 
+    <NoteHeader post={post} />
+}
+
+export default ArticleHeader;

src/components/BlogPostHeader.js

@@ -7,9 +7,9 @@ const BlogPostHeader = ({ post }) => (
 
   <div style={{marginBottom: '1.45rem', background: 'floralwhite', padding: 3, borderRadius: 3}}>
     <h3><Emoji e='📝' /> <Link to={post.fields.slug}>{post.frontmatter.title}</Link> <small>{moment(post.frontmatter.date).format('D MMMM YYYY')}</small></h3>
-    <p>{post.excerpt}</p>
+    <p><em>{post.excerpt}</em></p>
     {post.frontmatter.tags && post.frontmatter.tags.map(tag => 
-      <Link style={{marginRight: 10}} to={`/blog/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
+      <Link style={{marginRight: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
     )}
   </div>
 )

src/components/Header.js

@@ -57,6 +57,7 @@ const Header = () => (
       <p style={{fontSize: 20}}>
         <Link to='/' activeClassName='active-link'>about</Link><Spacer />
         <Link to='/blog' activeClassName='active-link'>blog</Link><Spacer />
+        <Link to='/notes' activeClassName='active-link'>notes</Link><Spacer />
         <Link to='/projects' activeClassName='active-link'>projects</Link><Spacer />
         <Link to='/research' activeClassName='active-link'>research</Link>
       </p>

src/components/NoteHeader.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import moment from 'moment';
+import Emoji from './Emoji';
+
+const NoteHeader = ({ post }) => (
+
+  <div style={{marginBottom: '1.45rem', background: 'aliceblue', padding: 3, borderRadius: 3}}>
+    <h3><Emoji e='📔' /> <Link to={post.fields.slug}>{post.frontmatter.title}</Link> <small>(last updated {moment(post.frontmatter.date).format('D MMMM YYYY')})</small></h3>
+    <p>{post.frontmatter.description}</p>
+    {post.frontmatter.tags && post.frontmatter.tags.map(tag => 
+      <Link style={{marginRight: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
+    )}
+  </div>
+)
+
+export default NoteHeader;

src/pages/blog/index.js

@@ -15,7 +15,7 @@ export default class Blog extends React.Component {
         <Helmet title='Blog'>
           <meta name="description" content="Blog post entries and articles" />
         </Helmet>
-        <h2>Articles
+        <h2>Blog posts
           <small style={{float: 'right'}}><FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link></small>
         </h2>
         {this.props.data.allMarkdownRemark.edges.map(({ node }) => {

src/pages/index.js

@@ -6,7 +6,7 @@ import { faRss } from '@fortawesome/free-solid-svg-icons'
 
 import Layout from '../components/Layout/Layout.js';
 import Emoji from '../components/Emoji';
-import BlogPostHeader from '../components/BlogPostHeader';
+import ArticleHeader from '../components/ArticleHeader';
 import ExternalLink from '../components/ExternalLink';
 
 const IndexPage = (props) => (
@@ -20,7 +20,7 @@ const IndexPage = (props) => (
     <div style={{background: 'beige', padding: '2px', borderRadius: 3, margin: '40px 0px'}}>
       <h3><Emoji e='💯' /> 100 Days to Offload</h3>
       <p>I'm taking part in the <ExternalLink href="https://100daystooffload.com/">100 Days to Offload challenge</ExternalLink> in 2021.</p>
-      <p><Link to='/blog/2021/01/29/100-days-to-offload'>Read more about it</Link> and <Link to='/blog/tags/100daystooffload'>see what I've written so far</Link> for this challenge.</p>
+      <p><Link to='/blog/2021/01/29/100-days-to-offload'>Read more about it</Link> and <Link to='/tags/100daystooffload'>see what I've written so far</Link> for this challenge.</p>
     </div>
 
     <h3>Quick background</h3>
@@ -32,7 +32,7 @@ const IndexPage = (props) => (
     <h3>What's on this website?</h3>
     <p><Emoji n="Research" e='👨‍💻' /> Some of my research publications are <Link to='/research'>available here</Link>.</p>
     <p><Emoji e='📦' /> I work on and maintain a number of <Link to='/projects'>projects</Link>.</p>
-    <p><Emoji n="Blogging" e='📓' /> I write about technology and things I find interesting on <Link to='/blog'>my blog</Link> <small>(<FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link> available)</small>.</p>
+    <p><Emoji n="Blogging" e='📝' /> I write about technology and things I find interesting on <Link to='/blog'>my blog</Link> <small>(<FontAwesomeIcon icon={faRss} /> <Link to='/feeds'>RSS feeds</Link> available)</small>.</p>
     <p><Emoji e='🚀' /> I publish additional content on my geminispace at <a href="gemini://g.wilw.dev">gemini://g.wilw.dev</a> <small>(see <Link to='/blog/2021/01/20/project-gemini'>this post</Link> for help with opening this link)</small>.</p>
     <p><Emoji e='🪴' /> <Link to='/this'>Find out more</Link> about this website and its purpose.</p>
 
@@ -44,17 +44,19 @@ const IndexPage = (props) => (
     <p>You can also get in touch on Matrix (<ExternalLink href="https://matrix.to/#/@wilw:matrix.wilw.dev">@wilw:matrix.wilw.dev</ExternalLink>) and Telegram (<ExternalLink href="https://t.me/wilw88">@wilw88</ExternalLink>).</p>
 
     <h3>Recent posts</h3>
-    {props.data.recentPosts.edges.map(({ node }) => {
-      if (node.fields.slug.includes('/blog/')) {
-        return <BlogPostHeader post={node} />;       
-      } else return null;
-    })}
+    {props.data.recentPosts.edges
+      .map(({ node }) => node.fields.slug.indexOf('blog') > -1 ? <ArticleHeader post={node} /> : null)}
+    <p><Link to='/blog'>See more</Link></p>
   </Layout>
 )
 
 export const query = graphql`
   query RecentPostsQuery {
-   	recentPosts: allMarkdownRemark(sort: {fields: [fileAbsolutePath], order: DESC}, limit: 2){
+     recentPosts: allMarkdownRemark(
+        sort: {fields: [fileAbsolutePath], order: DESC},
+        limit: 3,
+        filter: { fields: { slug: { regex: "/blog/" } } }
+      ){
       totalCount
       edges {
         node {
@@ -63,6 +65,7 @@ export const query = graphql`
             title
             date
             tags
+            description
           }
           excerpt
           fields {

src/pages/notes/books.md

@@ -0,0 +1,20 @@
+---
+date: "2021-02-02T22:49:00Z"
+title: Books
+description: "Notes on some of the books I read, including my favourite authors."
+tags: [book]
+---
+
+I try and read a wide variety of books.
+
+To see what I've been reading lately the easiest thing is to visit my [Goodreads profile](https://www.goodreads.com/user/show/22390023-will).
+
+## My favourite books and authors
+
+- Iain M. Banks - probably my favourite sci-fi author. Best books are _Excession_ and _Consider Phlebas_.
+- Alistair Reynolds - another fantastic sci-fi author. _House of Suns_ was fantastic, as is his _Revelation Space_ series.
+- Douglas Adams - a genius in more ways than one.
+
+## Book blog
+
+I sometimes blog about books I read too. You can [view these posts here](/tags/book).

src/pages/notes/geminispace.md

@@ -0,0 +1,12 @@
+---
+date: "2021-01-20T21:08:00Z"
+title: Geminispace
+description: "Information on my Geminispace, and what I keep there."
+tags: [technology]
+---
+
+Gemini is a newer internet protocol designed to provide a more lightweight, privacy- and content-focused experience. For more information I recommend reading [this blog post about it](/blog/2021/01/20/project-gemini).
+
+I try not to replicate too much content across this website and my Gemini space (but that might change over time).
+
+If you're interested in seeing what I write there, get a Gemini client (I use [Amfora](https://github.com/makeworld-the-better-one/amfora)) and head over to [gemini://g.wilw.dev](gemini://g.wilw.dev).

src/pages/notes/index.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { graphql, Link } from 'gatsby';
+import Helmet from 'react-helmet'
+
+import Layout from '../../components/Layout/Layout.js';
+import NoteHeader from '../../components/NoteHeader';
+
+export default class Notes extends React.Component {
+
+  render() {
+    return (
+      <Layout>
+        <Helmet title='Notes'>
+          <meta name="description" content="A collection of arbitrary notes" />
+        </Helmet>
+        <h2>Notes</h2>
+        <p>These notes are articles that I try and periodically update. View <Link to='/blog'>my blog</Link> to see a post stream.</p>
+        {this.props.data.notesQuery.edges.map(({ node }) => {
+          if (node.fields.slug.includes('/notes/')) {
+            return <NoteHeader post={node} />;
+          } else return null;
+        })}
+
+      </Layout>
+    );
+  }
+}
+
+export const query = graphql`
+  query {
+   	notesQuery: allMarkdownRemark(sort: {fields: [fileAbsolutePath], order: ASC}){
+      totalCount
+      edges {
+        node {
+          id
+          frontmatter {
+            title
+            description
+            date
+            tags
+          }
+          excerpt
+          fields {
+            slug
+          }
+        }
+      }
+    }
+  }
+`;

src/pages/notes/podcasts.md

@@ -0,0 +1,27 @@
+---
+date: "2020-10-01T15:49:00Z"
+title: Podcasts
+description: "A collection of podcasts I frequently listen to."
+tags: [technology]
+---
+
+I subscribe to a small number of podcasts. I usually listen to them when out walking and so if I subscribe to too many I just can't get through them all each week!
+
+That said, I'm always open to good recommendations if you have any.
+
+Most of these podcasts should be available by searching your podcast app. (I use [Overcast](https://overcast.fm) on my phone).
+
+## Weekly podcasts
+
+These podcasts usually release episodes every week.
+
+* [TWiT](https://twit.tv/shows/this-week-in-tech): This Week in Tech - General tech news each week
+* [Linux Action News](https://linuxactionnews.com) - Open source tech and Linux news
+* [GoTime](https://changelog.com/gotime) - Discussion panels about the Go language and community
+* [Accidental Tech Podcast](https://atp.fm) - General and casual tech discussion. Often Apple focused.
+
+## Periodic podcasts
+
+These podcasts release new episodes less frequently.
+
+* [Darknet Diaries](https://darknetdiaries.com) - Probably my favourite podcast: "stories from the dark side of the Internet"

src/templates/blog-post.js

@@ -22,7 +22,7 @@ export default class BlogPost extends React.Component {
         <h1>{post.frontmatter.title}</h1>
         <h4>{moment(post.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(post.frontmatter.date).fromNow()})</small></i>
         {post.frontmatter.tags && post.frontmatter.tags.map(tag => 
-          <Link style={{marginLeft: 10}} to={`/blog/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
+          <Link style={{marginLeft: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
         )}
         </h4>
 
@@ -31,7 +31,7 @@ export default class BlogPost extends React.Component {
             <h3><Emoji e='💯' /> 100 Days to Offload</h3>
             <p><b>This article is one of a series of posts in the <Link to='/blog/2021/01/29/100-days-to-offload'>100 Days to Offload challenge</Link></b>.
             The challenge focuses on writing <i>lots</i> rather than <em>quality</em>, so apologies for typos or inaccuracies.</p>
-            <p><Link to='/blog/tags/100daystooffload'>View other articles in this series</Link></p>
+            <p><Link to='/tags/100daystooffload'>View other articles in this series</Link></p>
           </div>
         }
 

src/templates/note.js

@@ -0,0 +1,56 @@
+import React from "react";
+import moment from 'moment';
+import { graphql, Link } from 'gatsby'
+import Helmet from 'react-helmet'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+
+import Layout from '../components/Layout/Layout.js';
+import Emoji from '../components/Emoji';
+
+export default class Note extends React.Component {
+
+  render() {
+    const note = this.props.data.markdownRemark;
+    return (
+      <Layout>
+        <Helmet title={note.frontmatter.title}>
+          {note.frontmatter.description && <meta name="description" content={note.frontmatter.description} />}
+        </Helmet>
+        <h4><FontAwesomeIcon icon={faArrowLeft} /> <Link to='/notes/'>More notes</Link></h4>
+
+        <h1>{note.frontmatter.title}</h1>
+        <h4>Last updated {moment(note.frontmatter.date).format('D MMMM YYYY')} <i><small>({moment(note.frontmatter.date).fromNow()})</small></i>
+        {note.frontmatter.tags && note.frontmatter.tags.map(tag => 
+          <Link style={{marginLeft: 10}} to={`/tags/${tag}`}><Emoji e="🏷️" /> #{tag}</Link>
+        )}
+        </h4>
+
+        {moment(note.frontmatter.date).isBefore(moment().subtract(12, 'months')) &&
+          <div style={{background: 'lightpink', padding: 4, borderRadius: 3, margin: '20px 0px'}}>
+            <h3><Emoji e='🕰️' /> This is an old note</h3>
+            <p>Please note that this article was last updated quite a while ago and may now be out-of-date or inaccurate.</p>
+          </div>
+        }
+
+        <article className='post' style={{marginTop: 10}}>
+          <div dangerouslySetInnerHTML={{ __html: note.html }} />
+        </article>
+      </Layout>
+    );
+  }
+};
+
+export const query = graphql`
+  query NoteQuery($slug: String!) {
+    markdownRemark(fields: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        title
+        description
+        date
+        tags
+      }
+    }
+  }
+`;

src/templates/tag-posts.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { graphql } from 'gatsby'
 import Helmet from 'react-helmet'
-import BlogPostHeader from '../components/BlogPostHeader';
+import ArticleHeader from '../components/ArticleHeader';
 
 import Layout from '../components/Layout/Layout.js';
 
@@ -18,7 +18,7 @@ export default class BlogPost extends React.Component {
         </Helmet>
         <h2>Articles in the #{tag} series ({totalCount})</h2>
 
-        {edges.map(({ node }) => <BlogPostHeader post={node} />)}
+        {edges.map(({ node }) => <ArticleHeader post={node} />)}
       </Layout>
     );
   }
@@ -42,6 +42,7 @@ export const pageQuery = graphql`
             title
             date
             tags
+            description
           }
         }
       }