{
  "$type": "site.standard.document",
  "canonicalUrl": "https://devlog.croft.click/2026/05/08/devlog-modularisation",
  "description": "Split the monolithic layout.css and inline page logic into focused modules and components.",
  "path": "/2026/05/08/devlog-modularisation",
  "publishedAt": "2026-05-08T14:51:40.000Z",
  "site": "at://did:plc:ofrbh253gwicbkc5nktqepol/site.standard.publication/3mlen2qhzrt2s",
  "tags": [
    "website",
    "tooling"
  ],
  "textContent": "What changed\n\nThe devlog had accumulated into a handful of large files — a 221-line CSS monolith, page components with inline header/footer/timeline logic, and a format.ts that mixed client-side date formatting with server-only markdown rendering. Time to break it apart.\n\nCSS split\n\nlayout.css was doing everything: design tokens, base reset, timeline, tags, prose. Now it's just imports:\n\nEach file owns one concern. layout.css went from 221 lines to 9.\n\nComponent extraction\n\nThe page components had header, footer, timeline grouping, and table of contents all inline. Pulled them into src/lib/components/:\n\n- Header.svelte — logo, back arrow, RSS link, external link\n- Footer.svelte — sequoia + github links\n- Tag.svelte — tag span with dynamic hash-based colour\n- Timeline.svelte — month grouping + entry rendering\n- TimelineEntry.svelte — single entry (date, title, description, tags)\n- TableOfContents.svelte — h2/h3 sidebar\n\nThe index page went from 73 lines of inline logic to a <Timeline> component. The post page went from 59 lines to a clean article + <TableOfContents> composition.\n\nLib split\n\nformat.ts mixed two unrelated concerns: formatDate (runs in the browser) and renderMarkdown/extractToc (server-only, depends on unified/remark/rehype). Split into:\n\n- date.ts — formatDate()\n- markdown.ts — remarkStripH1, renderMarkdown(), extractToc(), TocEntry\n\nResult\n\nSame output, same CSS bundle size (26.16 KB), cleaner structure. Each file does one thing. Adding a new tag, tweaking the timeline, or changing the prose styling now means editing a single focused file instead of navigating a monolith.",
  "title": "Devlog Modularisation"
}