Frank's Book Log (v2)

Source for www.franksbooklog.com. Built with Astro.

Setup

1. Install nvm.

   See the instructions at the NVM repo.

2. Initialize your Node env.

   An .nvmrc is included in the project.

   # use the .nvmrc version of Node.
   nvm use

3. Install dependencies.

   NPM has come a long way and we don't need workspaces (yet)

   npm i

4. Start a Dev server.

   # start Astro dev.
   npm run dev

5. Open the source code and start editing!

   The site is now running at http://localhost:4321.

What's inside?

A quick look at the non-standard directories included in the project.

.
├── content
├── src/images
├── src/styles
└── src/utils

1. /content: The book log content. Reviews and data copied from the backend system, as well as front-end specific assets like backdrops and covers. It also contains the content for the how I grade page. We don't leverage Astro's content directory because I prefer keeping content and code separate.

2. /src/api: Functions to access the data in the /content folder. This replaces Gatsby's GraphQL layer. /src/api/data contains Zod schemas to validate all the JSON and Markdown.

3. /src/utils: Shared utility functions.

Deployment

Push to Github and Actions builds the project and POST's to Netlify.

What's new in v2?

Gatsby's deathbed status prompted me to migrate to a new framework. Losing Gatsby's GraphQL layer hurt (I still miss it) but the move means I can finally use ES modules and bump multiple dependencies (looking at you, unified).

I also opted to prune as many dependencies as possible in the name of simplicity. Notably:

• Tailwind instead of Vanilla Extract and Sprinkles. The big draw for Vanilla Extract was the ability to leverage Typescript to type the styles, but Tailwind now has an eslint plugin that covers this use case.

• Vitest instead of Jest. Astro's built on Vite (which handles Typescript transpilation), so Vitest is a minimal add. Adding Jest would bring Babel into the mix.

• Npm instead of Yarn. I still prefer Yarn's DX (having to type 'run' for every NPM script is annoying) but Yarn's recent change to how it resolved peer deps made me wary of its long-term stability. I don't need workspaces (yet) so NPM will do.

Some metrics

Total distinct packages (i.e. name + version):

v1	v2
1800	963

Source lines of code:

Language	v1	v2
Typescript	40,362	7,269
Javascript	186	260