Skip to content

RyanClementsHax/ryanclements.dev

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ryanclements.dev

Setup

  1. (Recommended) Use VSCode and install the recommended extensions

  2. Run npm run install to install all of the dependencies

  3. Create a .env.local file and put the following keys in it

    BEEHIIV_PUBLICATION_ID="<beehiiv publication id>"
    BEEHIIV_API_KEY="<beehiiv api key>"
  4. Create a .env.production.local file and put the following contents in it

    NEXT_PUBLIC_VERCEL_URL=ryanclements.dev

Developing

Run npm run dev to start a dev server

Run npm run format <files> to format the files given

Run npm run format:all to format all of the files

Run npm run print-browser-support to print out all the browsers this project is configured to support as specified in the .browserslistrc

You can use feeder.co's Chrome extension RSS Feed Reader when testing the rss feed

Docs for rss can be found here

Debugging in VSCode

See the Next.js docs for how to do this

Linting

Run npm run lint:all to lint all of the files

Run npm run lint:js <files> to lint the specified files via eslint

Run npm run lint:js to lint all of the js/jsx/ts/tsx files

Run npm run lint:styles <files> to lint the specified files fia stylelint

Run npm run lint:styles:all to lint all of the css/scss files

Testing

Run npm run test to run the jest tests

Run npm run type-check to run type checking

Run npm run test:all to lint all files, type check, and run jest tests

Lighthouse

It is recommended that you get this extension to help run lighthouse tests

Upgrading dependencies

Run npx npm-check -u to get an interactive shell of everything that can be upgraded.

Deployment

Deployment is handled by Vercel on merge to the main branch

SEO

You can use opengraph.xyz for general social card debugging.

You can use Facebook's OG debugger tool to help debug card creation when sharing on Facebook. The docs for this can be found here.

You can use Twitter's Tweet Composer to test link rendering. See this post for more details and this troubleshooting guide for help.

You can use this tool to test iOS link rendering.

Media

Optimizing gifs

First install ffmpeg.

sudo apt update && sudo apt upgrade
sudo apt install ffmpeg

Then run npm run media:optimize-gifs to transform them in place to .mp4 and .webm files.

Consult chrome's developer guide for efficient video formats for further details.

Docs

ADRs

I use MADR to record architectural decisions in the docs/adr folder.