# The one inline script, and the hash that lets it run
> Dark mode without a flash needs a script that runs before the page paints, and a strict CSP wants to know exactly which one. Here's how they get along.
9 October 2026 · #security #astro · https://blog.peng.ly/one-inline-script/
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 ``, before any CSS, so it runs before anything gets drawn:
```js title="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:
```diff
- 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:
```ts title="src/lib/theme.test.ts" {4}
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
> Folders, frontmatter, and the three MDX components worth the faff - callouts, figures with captions, and videos that only load when you ask.
8 October 2026 · #astro #mdx #writing · https://blog.peng.ly/how-a-post-gets-written-here/
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.
```yaml title="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.
> [!TIP]
> **Pro tip**
> The title's optional, each type has its own.
> [!WARNING]
> Something that'll catch you out if you're not paying attention.
> [!CAUTION]
> Something that breaks things, or leaks something it shouldn't.
```mdx
The title's optional, each type has its own.
```
## Figures
Pictures get turned into AVIF and WebP at a few sizes, 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`.
[Video: Me at the zoo, the first video ever uploaded to YouTube](https://www.youtube.com/watch?v=jNQXAC9IVRw)
[Video: The theme toggle on this blog, flipping between light and dark](https://raw.githubusercontent.com/NotAFlightRisk/blog/main/posts/how-a-post-gets-written-here/toggle.webm)
```mdx
```
## 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.
```ts title="src/lib/format.ts" {3-4}
// 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
> The first post, and a quick look round. Every post is a folder of Markdown, comes with a feed and a plain text copy, and there's a penguin.
7 October 2026 · #meta #astro · https://blog.peng.ly/hello-noot/
This is the writing bit of [peng.ly](https://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](/tags/)
- The [archive](/archive/) has the lot, by year
- [Search](/search/) runs in your browser, so nothing you type gets sent anywhere
> Spotted something wrong? The source for every post is [on GitHub](https://github.com/NotAFlightRisk/blog), 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`](/rss.xml) |
| A contents page for LLMs | [`/llms.txt`](/llms.txt) |
| Every post in one file | [`/llms-full.txt`](/llms-full.txt) |
| Any post as Markdown | its address, with `.md` on the end |
| Sitemap | [`/sitemap-index.xml`](/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](https://astro.build), 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.
```ts title="astro.config.ts" {2-3}
export default defineConfig({
site: 'https://blog.peng.ly',
trailingSlash: 'always',
markdown,
});
```
Thanks for reading :)