Migration

Move intent, not utility strings.

Version 0.1.1 supplies the application and publishing primitives for a page-by-page migration to the Svelte adapter and shared CSS.

Recommended sequence

Authenticate GitHub Packages and install the CSS and Svelte packages.
Import index.css once in the root layout, then add ThemeScript before first paint.
Replace global palette, font, focus, and reduced-motion rules; verify that the page remains visually unchanged in light mode.
Migrate shell components: SkipLink, AppShell, Navbar, Container/Section, and Footer.
Migrate fields, tags, pagination, alerts, and cards.
Replace article descendant utilities with Prose and use Avatar, InlineEmoji, MediaGrid, and ChatThread for comments and transcripts.
Remove the legacy utility pipeline only after repository-wide searches find no old directives.

Utility mapping

Current cofob.dev pattern	Design-system replacement
`bg-white text-zinc-800`	Canvas and text semantic tokens / base.css
`text-sky-700 hover:underline`	.cf-link
`rounded-lg border-2 px-3 py-2`	.cf-button or .cf-input
`rounded-full bg-zinc-100`	.cf-tag or .cf-badge
`max-w-screen-lg mx-auto`	.cf-container
`min-h-screen flex flex-col`	.cf-app-shell
`flex flex-col gap-*`	.cf-stack with data-gap
`flex flex-wrap gap-*`	.cf-inline with data-gap
`border-sky-300 bg-sky-50`	.cf-alert[data-tone=info]
`border-amber-400 bg-amber-50`	.cf-alert[data-tone=warning]
`blog-prose descendant utilities`	.cf-prose

Local component mapping

Current local component	Package replacement
`Navbar.svelte`	`Navbar`
`Footer.svelte`	`Footer`
`Section.svelte`	`Section`
`Heading.svelte`	`Heading`
`BlueLine.svelte`	`BlueLine`
`blog/PostCard.svelte`	`PostCard`
`blog/LatestPostLink.svelte`	`LatestPostCard`
`blog/ResponsiveImage.svelte`	`ResponsiveImage`
`blog/ChatThread.svelte`	`ChatThread`
`blog/Sticker.svelte`	`Sticker`
`comment avatar / fallback`	`Avatar`
`custom emoji image`	`InlineEmoji`
`comment attachment grid`	`MediaGrid`
`blog/RichText.svelte`	`Prose`
`blog/NoticeBlock.svelte`	`Alert with info tone`
`blog/WarningBlock.svelte`	`Alert with warning tone`

Components that intentionally stay in the site

SEO metadata, structured data, feed rendering, Fediverse fetching and sanitization, blog asset processing, recording URL validation, dedicated player routes, CommentThread, Comments, and CommentMedia remain application concerns. The Asciinema browser runtime and its adapter shells are available through the optional @cofob/design-system-asciinema-player package.

Acceptance checks

Light-mode screenshots match the existing site’s visual identity.
Dark mode works before hydration and across every route.
Node, static/IPFS, and Cloudflare builds remain supported.
The existing accessibility, feed, and portable-render tests remain green.