{
"path": "/projects/svelte-standard-site",
"site": "at://did:plc:ofrbh253gwicbkc5nktqepol/site.standard.publication/3mfyq5mpohw25",
"tags": [
"atproto",
"pkgs",
"tooling",
"website"
],
"$type": "site.standard.document",
"title": "@ewanc26/svelte-standard-site",
"description": "SvelteKit library for reading and writing AT Protocol longform content via site.standard.* and pub.leaflet.* records — with a complete design system, federated comments, publishing tools, and content verification.",
"publishedAt": "2026-02-24T00:00:00.000Z",
"textContent": "@ewanc26/svelte-standard-site is a SvelteKit component library for the Standard.site protocol and Leaflet — specs for storing longform content on AT Protocol. It supports reading content from AT Protocol, publishing to it, federated Bluesky comments, native Leaflet comments, recommendations, subscriptions, content verification, and a complete design system.\n\nPart of the @ewanc26/pkgs monorepo.\n\nInstallation\n\nRequires svelte >= 5 and @sveltejs/kit >= 2 as peer dependencies.\n\nFeatures\n\n- Reading — Fetch site.standard.document, site.standard.publication, and pub.leaflet.* records from AT Protocol\n- Writing — Publish and manage documents via StandardSitePublisher\n- Document Rendering — Full support for all block types including ordered lists, footnotes, and rich text facets\n- Extended Themes — RGBA colors, background images, custom fonts, and comprehensive theme support\n- Comments — Federated Bluesky replies via <Comments /> and native Leaflet comments via <CommentsSection />\n- Recommendations — Like/recommend documents with the <RecommendButton /> component\n- Subscriptions — Subscribe to publications via site.standard.graph.subscription\n- Verification — .well-known endpoint helpers to prove content ownership\n- Design system — Semantic colour tokens (ink, canvas, primary, secondary, accent) with automatic light/dark mode via Tailwind CSS 4\n- Type-safe — Full TypeScript with Zod validation\n- SSR-ready — Works with SvelteKit's fetch for prerendering\n- Caching — In-memory cache with configurable TTL\n\nQuick Start\n\nReading\n\nPublishing\n\nComments (Bluesky Replies)\n\nNative Leaflet Comments\n\nRecommendations\n\nDocument Rendering\n\nThe library provides comprehensive rendering for all Leaflet block types:\n\nBlock Components\n\n| Component | Description |\n|-----------|-------------|\n| <DocumentRenderer> | Master component for rendering full documents |\n| <LinearDocumentRenderer> | Linear document layout |\n| <CanvasRenderer> | Canvas-based documents |\n| <BlockRenderer> | Individual block rendering |\n| <RichText> | Facet-aware rich text with links, mentions, highlights |\n| <TextBlock> | Plain text blocks |\n| <HeaderBlock> | Headers (h1-h6) |\n| <OrderedListBlock> | Ordered lists with checklist support |\n| <UnorderedListBlock> | Bullet lists with nesting |\n| <CodeBlock> | Syntax-highlighted code |\n| <MathBlock> | KaTeX math rendering |\n| <ImageBlock> | Images with aspect ratio |\n| <BlockquoteBlock> | Quotations |\n| <BskyPostBlock> | Embedded Bluesky posts |\n| <PollBlock> | Interactive polls |\n| <ButtonBlock> | Call-to-action buttons |\n\nRich Text Facets\n\nFull support for all facet types:\n\n- Links (pub.leaflet.richtext.facet#link)\n- DID Mentions (pub.leaflet.richtext.facet#didMention)\n- @ Mentions (pub.leaflet.richtext.facet#atMention)\n- Code spans (pub.leaflet.richtext.facet#code)\n- Highlights (pub.leaflet.richtext.facet#highlight)\n- Underline (pub.leaflet.richtext.facet#underline)\n- Strikethrough (pub.leaflet.richtext.facet#strikethrough)\n- Bold (pub.leaflet.richtext.facet#bold)\n- Italic (pub.leaflet.richtext.facet#italic)\n- Anchor IDs (pub.leaflet.richtext.facet#id)\n- Footnotes (pub.leaflet.richtext.facet#footnote)\n\nFootnotes\n\nExtended Theme Support\n\nThe library supports the full pub.leaflet.publication#theme specification:\n\nTheme Utilities\n\nUI Components\n\n| Component | Description |\n|-----------|-------------|\n| <Avatar> | User avatar with initials fallback |\n| <Toast> | Toast notifications (success/error/info/warning) |\n| <Watermark> | Publication watermark |\n| <ActionBar> | Floating action bar for documents |\n| <RecommendButton> | Like/recommend button with count |\n| <ThemeProvider> | Apply theme with font loading |\n\nEntry Points\n\n| Import | Description |\n|--------|-------------|\n| @ewanc26/svelte-standard-site | Components, client, stores, types, utilities |\n| .../publisher | StandardSitePublisher for writing records |\n| .../content | Markdown transformation utilities |\n| .../comments | Bluesky comment fetching utilities |\n| .../verification | .well-known and ownership verification helpers |\n| .../schemas | Zod schemas and COLLECTIONS constant |\n| .../config/env | getConfigFromEnv() SvelteKit helper |\n| .../styles/base.css | Base CSS |\n| .../styles/themes.css | Theme CSS variables |\n\nPublisher API\n\nThe StandardSitePublisher class provides methods for all record types:\n\nDocument Operations\n\nComment Operations\n\nInteractions\n\nSubscriptions\n\nEnvironment Variables\n\nTech Stack\n\nSvelte 5, SvelteKit 2, Tailwind CSS 4, @atproto/api, Zod, Vitest.\n\nCustomizing Components\n\nAll components support style overrides via the class prop. For deeper customization, use render snippets.\n\nDocumentCard with Custom Layout\n\nOverride Individual Sections\n\nAvailable snippets: layout, cover, title, description, metadata, tags.\n\nHeadless Mode\n\nUse headless on ThemedCard to render only the themed wrapper without default styles:\n\nLicence\n\nAGPL-3.0-only — see the pkgs monorepo.",
"canonicalUrl": "https://docs.ewancroft.uk/projects/svelte-standard-site"
}