Peng.ly Blog

The one inline script, and the hash that lets it run

Fri, 09 Oct 2026 00:00:00 GMT

The theme toggle has a classic problem. Your pick lives in localStorage, and nothing can read it before the page paints unless a script runs first. Load that script the normal way and you get a flash of the wrong theme on every single page. Not exactly ideal.

The script

It goes inline in the <head>, before any CSS, so it runs before anything gets drawn:

src/lib/theme.ts

try {
  const theme = localStorage.getItem('theme');
  if (theme) document.documentElement.dataset.theme = theme;
} catch {}

The real one’s squashed onto a single line, but it’s the same thing. The try is there because browsers throw if you touch storage while cookies are blocked, and a theme isn’t worth breaking the page over.

The policy

This site sends a Content Security Policy that only lets scripts from its own origin run. An inline script breaks that rule, so the policy names this one by its SHA-256 hash:

- script-src 'self' 'unsafe-inline'
+ script-src 'self' 'sha256-1Ub7...'

'unsafe-inline' would’ve worked too, but then any script that got injected into a page would run as well, which is the exact thing CSP is there to stop.

Keeping the two in step

Change one character of the script and the hash stops matching. The browser blocks it, the console grumbles, and the theme starts flashing again. Nothing on the page tells you. So there’s a test that hashes the script and checks vercel.json still has it:

src/lib/theme.test.ts

test("vercel.json's CSP trusts the theme script as it is now", async () => {
  const { headers } = JSON.parse(await readFile('vercel.json', 'utf8'));
  // ...find the Content-Security-Policy header...
  const hash = `'sha256-${createHash('sha256').update(themeScript).digest('base64')}'`;
  assert.ok(csp.includes(hash), `script-src wants ${hash}`);
});

If it fails, the message has the new hash in it, ready to paste.

Everything else

Every other script here ships as its own file, so 'self' covers it. The JSON-LD blocks look like scripts but browsers never run them, so CSP leaves them alone. Styles get 'unsafe-inline', because the syntax highlighting puts its colours in style attributes, and an injected style is a much smaller worry than an injected script.

You can see the whole policy in the response headers of this page, if you fancy a look.

How a post gets written here

Thu, 08 Oct 2026 00:00:00 GMT

A post is a folder in posts/, named after the address you want. Inside goes index.md, or index.mdx if you want components, plus any pictures. This one lives at posts/how-a-post-gets-written-here/index.mdx.

The frontmatter

Every post starts with a block like this, and the build checks it. Leave out the description, put a capital in a tag or misspell a field, and the build stops and tells you what’s wrong.

index.md

---
title: How a post gets written here
description: Between 50 and 160 characters, since that's about what Google shows
date: 2026-10-08
updated: 2026-10-09 # optional
tags: [astro, mdx] # lowercase, with hyphens if you need them
draft: true # optional, drafts only show on the dev server
cover: # optional
  src: ./cover.png
  alt: What's in the picture
---

Callouts

Four flavours, for the bits you’d otherwise put in bold and hope for the best.

Note

A note, for context that’s handy but not essential.

Pro tip

The title’s optional, each type has its own.

Heads up

Something that’ll catch you out if you’re not paying attention.

Careful

Something that breaks things, or leaks something it shouldn’t.

<Callout type="tip" title="Pro tip">The title's optional, each type has its own.</Callout>

Figures

Pictures get turned into AVIF and WebP at a few, so a phone never downloads the desktop one. Wrap one in a Figure and you get a caption as well.

The rail, where the date, reading time, tags and contents live, out of the way of the words

Plain Markdown images work too, they just don’t get a caption.

Video

Embeds load nothing from YouTube until you press play, and even then it’s the no-cookie player. A video file sat next to the post works as well, with src instead of youtube.

Play

Me at the zoo, the first video ever uploaded to YouTube

Play

The theme toggle on this blog, flipping between light and dark

<Video youtube="jNQXAC9IVRw" title="Me at the zoo" />
<Video src={clip} title="A clip that lives next to the post" />

Code

Highlighting happens at build time, so it costs nothing in the browser. Add a title for a file name, and line numbers in braces to light some up.

src/lib/format.ts

// a comfortable reading pace, and code blocks count like anything else
export function readingTime(text: string) {
  const words = text.split(/\s+/).filter(Boolean).length;
  return Math.max(1, Math.round(words / 230));
}

Every block gets a copy button once the page has loaded.

Publishing

Push to main and Vercel does the rest. Drafts stay in the repo but never make it into the build, so they’re not in the feed, the sitemap or search either.

Noot noot, it's a blog

Wed, 07 Oct 2026 00:00:00 GMT

This is the writing bit of peng.ly. Mostly code, security and whatever I’ve been poking at that week, written up so I remember it, and so you don’t have to find out the hard way.

What’s here

Each post lives in its own folder as plain Markdown, with any pictures sat right next to it. That’s the whole system.

Every post is tagged, and every tag gets its own page
The archive has the lot, by year
Search runs in your browser, so nothing you type gets sent anywhere

Spotted something wrong? The source for every post is on GitHub, so a PR is very welcome.

For the robots

Plenty of what reads this stuff isn’t a person, so everything has a version a machine can pick up easily.

What	Where
Full-text RSS	`/rss.xml`
A contents page for LLMs	`/llms.txt`
Every post in one file	`/llms-full.txt`
Any post as Markdown	its address, with `.md` on the end
Sitemap	`/sitemap-index.xml`

Light, dark, or whatever your system says

The theme follows your system until you press the toggle up top, then it remembers your pick. Choose the one your system would’ve shown anyway and it goes back to following along.

Under the bonnet

It’s Astro, built to static files and served from Vercel. No JavaScript turns up unless a page needs it, and so far that’s search, the copy buttons on code and the theme toggle.

astro.config.ts

export default defineConfig({
  site: 'https://blog.peng.ly',
  trailingSlash: 'always',
  markdown,
});

Thanks for reading :)