dschapman / my-website Goto Github PK

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.

Home Page: https://www.dschapman.com

License: MIT License

JavaScript 95.20% CSS 4.80%

blog gatsby creative writing digital-garden poetry gatsby-theme-brain bidirectional-links

my-website's Introduction

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.

my-website's People

Contributors

Stargazers

Watchers

Forkers

theianjones rosiecampbell zacjones93 krry floar drawablex86

my-website's Issues

Add goodreads page

Use Goodread API and graphql to get the books I've reviewed recently and display on a page. Add a link to this on my home page. Probably not on the NavBar.

Create a Second, "Reading" Page type

On Blogs, or project pages we don't want to encourage navigation away so the Navbar should be less evident.

Perhaps fading until they scroll up
or only appearing when a button is selected

create a sitemap and 404 page

Write 404 poem

Re-Style Email Subscription Box

Restyle the subscription box on the about page.

Include disclaimer about how I plan on using email addresses.
Include the response data from mail chimp so that the user receives feedback when the submission is successful
Maybe something like "Thanks for subscribing" fades in on the screen replacing the disclaimer

Add additional categories and corresponding dropdowns

Integrate Google Analytics

Implement an RSS Feed

I'd like to implement an RSS Feed for my website

Create a custom SEO for each page

Remove any theme-ui code that remains

I recently removed theme-ui and switched to using a combination of emotion and vanilla css. However several files still have theme-ui code.

Create a Photos Page

Use the Unsplash API to get photos I've contributed

Create a Layout Component

Create a Layout Page as seen in Zac's project here that contains the Header components along with children.

Pin the NavBar to the top of the page for all non-reading pages

The Navbar should always be present at the top of the page for all pages where prolonged reading is not expected.

Create Featured Content Component

Utilize #77 to create featured content component

Import Blog Posts

Create a Shell Script that parses through WordPress and creates blogposts from past wordpress blogposts

add color tab to show the type of resource being shown

Create Global CSS stylesheet

Use Classes as necessary. Uniform simple style. Emulate printed word.

Investigate factoring out tailwind

Add Search to Website

Watched a talk on digital gardening by Joel Hooks where he mentions that every digital garden should have search. I've also noticed that as my site has grown my notes are especially inaccessible when I want to find a specific note. Implement a search feature to solve these problems.

Create Post List Components to Better Feature Content

Started Doing this inspired by @theianjones blog in 0cd6be2

Doom Emacs mixing fonts note issue

Hey! Your note is high on Google results for Doom Emacs variable pitch font. Congrats! There's one issue there though. Namely, it has the following snippet:

(use-package mixed-pitch
  :hook
  ;; If you want it in all text modes:
  (text-mode . mixed-pitch-mode))

The proper mechanism in Doom Emacs is use-package! (note the bang), I believe.

Create/Expand the Poem class/tag

Create a card, using tailwindcss, for poems so that they stand out on the page.