This site is built with gatsby!
An unorganized list to help me keep this organized
- Everything in
src/posts
is built into a page automatically, nothing extra needed - All the blog posts are made into pages by
js
code ingatsby-node.js
.md(x)
files in thepages
folder can have optional frontmatter that's available toMdxPageLayout
viaprops.pageContext.frontmatter
..md(x)
files can supply atitle
in frontmatter, or just use a#
tag at the top of the page. If you want a subtitle, you need to supply both thetitle
andsubtitle
in frontmatter.- For the
SEO
component, later versions of it will be merged into the root value.title
andXYZ
are picked up automatically if in frontmatter or you can drop an actual component in the file. the gatsby version is pinned to2.22.20
to get around thisthe gatsby version is pinned to~3.6
because of a bug with inline SVGsthe gatsby version is pinned to4.7.2
because of a bug preventing builds on netlify- there's really only styles for h1-h4, so don't use h5 and down
- anything that would have dropped in as a cdn tag and included should go in
gatsby-browser
- some lines in markdown have
<!-- prettier-ignore -->
because prettier is adding a\
before regular$
. - adding
draft: true
to a post's frontmatter hides it from the list and stops the page from being built. It's still accessible locally by exact url. - here's a handy bash script that downloads remote images, puts them in
./images
, and copies the filename for pasting:
function imgsav () {
curl -s $(pbpaste) > "./images/$1"; printf "./images/$1" | pbcopy;
}
- You can insert a markdown img after the above function with the
;img
snippet - the favicon was generated at this link
- the
og_img
is from this site using the same settings as the favicon:- font:
Covered by your Grace
- Michigan colors
- font:
- Meramid works out of the box, but I've also been able to embed SVGs from github pages like this:
<img class="svg" src="https://gist.githubusercontent.com/xavdid/9691c907a61ee538f39d3a33c1f4bd3c/raw/c726af6a29f60e647bee16e33ec49ec5ea695440/start.svg?sanitize=true" />
- everything in the
static
is served from the root of the site (without any prefix)
- Movie/tv backdrops are on TMDB
- book covers are at
https://books.google.com/books/content/images/frontcover/<GBID>?fife=w400-h400
- game headers are straight from Steam (or IGDB for non-steam games)
yarn doctoc path/to/folder
will regenerate the TOC, along with the;toc
snippet.- for the media post, use
yarn doctoc posts/favorite-media-2021 --maxlevel 2
to get only the headers
- for the media post, use
- the 2022 header was made on design.ai and used
Bebas Neue
for the big font andBungee
for the smaller font. - Here's a rough checklist to get everything published:
- Write outline
- Talk to Karen about image- start it early!
- Flesh each section out. Don't focus on mechanics! Talk about what made a thing special
- Add placeholders for availability, images, and trailers
- Copy into google doc
- Edit
- Paste back to drafts to replace footnotes
- Export for site
- Add images
- Link to as official of a page as possible for everything. Book publishers have one. Most games do too
- In airtable, add award levels and anchors
- Add url of post to award years. Once that's done, the next site build will show award emoji
- Create Steam list with winning games. It'll be public by default, so do this at the end. Link it in post.
- Push both sites. You're live!
Markdown, but with react components.
- Add a folder in
components
withindex.js
andcomponent-name.scss
- Add the component to
MdxComponentLayout
- Add the name to the eslint config, so it doesn't yell in the linter