Browse Source

add support for 'notes'

theming
Will Webberley 2 months ago
parent
commit
aee7e97cf2
14 changed files with 230 additions and 17 deletions
  1. 16
      gatsby-node.js
  2. 12
      src/components/ArticleHeader.js
  3. 4
      src/components/BlogPostHeader.js
  4. 1
      src/components/Header.js
  5. 17
      src/components/NoteHeader.js
  6. 2
      src/pages/blog/index.js
  7. 21
      src/pages/index.js
  8. 20
      src/pages/notes/books.md
  9. 12
      src/pages/notes/geminispace.md
  10. 50
      src/pages/notes/index.js
  11. 27
      src/pages/notes/podcasts.md
  12. 4
      src/templates/blog-post.js
  13. 56
      src/templates/note.js
  14. 5
      src/templates/tag-posts.js

16
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,

12
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;

4
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>
)

1
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>

17
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;

2
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 }) => {

21
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 {

20
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).

12
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).

50
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
}
}
}
}
}
`;

27
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"

4
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>
}

56
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
}
}
}
`;

5
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
}
}
}

Loading…
Cancel
Save