How this site is built.

In-app browsers such as Instagram's sometimes serve a page from their own cache and lose the separate stylesheet on the way. Inlining it costs about 6 KB per page after compression and removes that failure entirely.

export default defineConfig({
  build: { inlineStylesheets: 'always' },
});

Every script, font and image that Astro builds is named after its own contents, so browsers can keep it for a year without asking again; a change gets a new name. Only the page itself is checked on each visit. Helpers shared by several scripts are bundled into one file instead of many small ones.

{
  "source": "/_astro/(.*)",
  "headers": [{
    "key": "Cache-Control",
    "value": "public, max-age=31536000, immutable"
  }]
}

Cross-document View Transitions are a single CSS rule. The header keeps its place, article titles travel from the list into the heading, and browsers without support simply load the next page.

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
[data-vt] { view-transition-name: var(--vt); }

The command menu is rendered at build time from the same data as the pages, so a new article or page appears in it without anyone touching the menu. It follows the combobox pattern, so it works with a keyboard and a screen reader.

if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {
  e.preventDefault();
  dialog.open ? close() : open();
}

After each production deploy, a GitHub Action works out which pages changed and sends only those to IndexNow. Google, which does not take part, reads a sitemap whose dates come from each article.

on:
  deployment_status:
jobs:
  submit:
    if: github.event.deployment_status.state == 'success'

Satori turns a small layout into SVG with the text already outlined, and sharp turns that into a PNG. No design tool, and no image to forget when a title changes.

const svg = await satori(tree, { ...OG_SIZE, fonts });
return sharp(Buffer.from(svg)).png().toBuffer();

If your system asks for less motion, the theme switches instantly, pages swap without fading, and nothing slides. The reading line on articles is pure CSS, driven by scroll position rather than JavaScript.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none !important; }
}