r2-blog 🤝 Sonik

This experimental project was driven by my curiosity about the r2-blog project and building an SSR application with Sonik. Most of the things I implemented here can be achievable by other SSR frameworks such as Remix and NextJS. The entire point is to gain knowledge and experience building an SSR application on top of the cloudflare pages.

Screenshots

1. The list of blog posts is available

2. Blog posts can be looked up by selecting a tag

3. The blog post Markdown is parsed and converted into HTML. Emoji and syntax highlights are supported.

   

4. It supports dark mode (Client side)

Prod Setup

You wouldn't need this step if you just run it locally.

npx wrangler login
npx wrangler r2 bucket create <your-bucket-name> # Create a bucket
npx wrangler r2 object put <your-bucket-name>/<filename> --file <path/filename> # Put a content into the bucket

Notes

• The modules in islands have to be "Default exports". They don't work with "Named exports".
• To prevent flickers for dark mode, an inline script is needed. stackoverflow
• The "unkink" event in the local2r2 is not developed, but it should be super easy to build one.
• highlight.js and prism do not support ESM, hence, those are loaded via CDN and executed on the client side.

Kudos

• vite
• And all other dependencies in the package.json