Skip to content

dschapman/dschapman-com

Repository files navigation

About this Website

The website currently has three different types of posts - articles, poems, and notes. All three are implemented with gatsby-plugin-mdx and I curate links on /articles and /poetry respectively. On the backend I write my notes using Dendron

πŸ“ Notes

Dendron notes use wikilinks, are hierarchical, and context aware. Currently I use gatsby-remark-double-brackets-link to handle the wikilinks and gatsby-remark-copy-linked-files to display when these notes are referenced by another note.

πŸ“˜ Articles

Implemented in gatsby-plugin-mdx. The slug is drawn from slug in the frontmatter, title, and excerpt are also important values. A list of all tags used in articles can be viewed at /articles/tags. These tags will also list links to any note pages that are tagged as well.

πŸ“œ Poems

Like Articles, all the poems on the site can be seen at /poetry/all. Much of the frontmatter for articles and poems are the same, the exception is the recording element which takes the location of an MP3 file and will generate a player at the top of the poem if one exists. Poems have the same tagging system as Articles.

πŸ“„ Pages

Make sure to import a layout if you're creating an .mdx page in src/pages

πŸ“ Directory Structure

.
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md
β”œβ”€β”€ content
β”‚Β Β  β”œβ”€β”€ assets
β”‚Β Β  β”œβ”€β”€ notes <-- Note .mdx or .md files go here
β”‚Β Β  β”œβ”€β”€ poems <-- Poem .mdx or .md files go here
β”‚Β Β  β”‚Β Β  └── seasons-of-thought
β”‚Β Β  └── posts <-- Article .mdx or .md files go here
β”œβ”€β”€ src
β”‚Β Β  β”œβ”€β”€ @aengusm / gatsby-theme-brain
β”‚Β Β  β”œβ”€β”€ components
β”‚   β”‚   β”œβ”€β”€ layout <-- General Layout
β”‚   β”‚   β”œβ”€β”€ notes <-- Modified layout for the notes
β”‚   β”‚   β”œβ”€β”€ poems <-- Modified layout for poems
β”‚   β”‚   β”œβ”€β”€ posts <-- Modified layout for articles
β”‚   β”‚   └── tags <-- information on generating tags
β”‚Β Β  └── pages <-- Pages (often .mdx) go here
β”œβ”€β”€ static <-- It might not be optimized but its sometimes easier to link to images stored here.
β”œβ”€β”€ gatsby-config.js
β”œβ”€β”€ gatsby-node.js
└── yarn.lock

↔️ Bidirectional Links / Link Previews

Link Previews are implemented using Tippy JS Tooltips. gatsby-theme-brain provides native bidirectional linking and the information to easily implement link previews (with a slightly modified GraphQL query); however, in order to get this working across the site I added an MDX component that cycles through every single mdx page and puts the childMdx.body value inside of a tooltip if the slugs match.

Link Previews only show up on larger screen size so make sure to check out the website on your desktop.

πŸ•ΊπŸΌ Styling

This site uses emotion for CSS in JS styling as well as some vanilla CSS. The CSS is inspired and adapted from Tufte's CSS.

About

Gatsby Blog built as a digital garden. It's is meant to be curated, read, and explored. Trying to think about this as a place I want to use first and foremost.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published