@ewanc26/svelte-standard-site

@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. Part of the @ewanc26/pkgs monorepo. Installation Requires svelte >= 5 and @sveltejs/kit >= 2 as peer dependencies. Features - Reading — Fetch site.standard.document, site.standard.publication, and pub.leaflet.* records from AT Protocol - Writing — Publish and manage documents via StandardSitePublisher - Document Rendering — Full support for all block types including ordered lists, footnotes, and rich text facets - Extended Themes — RGBA colors, background images, custom fonts, and comprehensive theme support - Comments — Federated Bluesky replies via and native Leaflet comments via - Recommendations — Like/recommend documents with the component - Subscriptions — Subscribe to publications via site.standard.graph.subscription - Verification — .well-known endpoint helpers to prove content ownership - Design system — Semantic colour tokens (ink, canvas, primary, secondary, accent) with automatic light/dark mode via Tailwind CSS 4 - Type-safe — Full TypeScript with Zod validation - SSR-ready — Works with SvelteKit's fetch for prerendering - Caching — In-memory cache with configurable TTL Quick Start Reading Publishing Comments (Bluesky Replies) Native Leaflet Comments Recommendations Document Rendering The library provides comprehensive rendering for all Leaflet block types: Block Components | Component | Description | |-----------|-------------| | | Master component for rendering full documents | | | Linear document layout | | | Canvas-based documents | | | Individual block rendering | | | Facet-aware rich text with links, mentions, highlights | | | Plain text blocks | | | Headers (h1-h6) | | | Ordered lists with checklist support | | | Bullet lists with nesting | | | Syntax-highlighted code | | | KaTeX math rendering | | | Images with aspect ratio | | | Quotations | | | Embedded Bluesky posts | | | Interactive polls | | | Call-to-action buttons | Rich Text Facets Full support for all facet types: - Links (pub.leaflet.richtext.facet#link) - DID Mentions (pub.leaflet.richtext.facet#didMention) - @ Mentions (pub.leaflet.richtext.facet#atMention) - Code spans (pub.leaflet.richtext.facet#code) - Highlights (pub.leaflet.richtext.facet#highlight) - Underline (pub.leaflet.richtext.facet#underline) - Strikethrough (pub.leaflet.richtext.facet#strikethrough) - Bold (pub.leaflet.richtext.facet#bold) - Italic (pub.leaflet.richtext.facet#italic) - Anchor IDs (pub.leaflet.richtext.facet#id) - Footnotes (pub.leaflet.richtext.facet#footnote) Footnotes Extended Theme Support The library supports the full pub.leaflet.publication#theme specification: Theme Utilities UI Components | Component | Description | |-----------|-------------| | | User avatar with initials fallback | | | Toast notifications (success/error/info/warning) | | | Publication watermark | | | Floating action bar for documents | | | Like/recommend button with count | | | Apply theme with font loading | Entry Points | Import | Description | |--------|-------------| | @ewanc26/svelte-standard-site | Components, client, stores, types, utilities | | .../publisher | StandardSitePublisher for writing records | | .../content | Markdown transformation utilities | | .../comments | Bluesky comment fetching utilities | | .../verification | .well-known and ownership verification helpers | | .../schemas | Zod schemas and COLLECTIONS constant | | .../config/env | getConfigFromEnv() SvelteKit helper | | .../styles/base.css | Base CSS | | .../styles/themes.css | Theme CSS variables | Publisher API The StandardSitePublisher class provides methods for all record types: Document Operations Comment Operations Interactions Subscriptions Environment Variables Tech Stack Svelte 5, SvelteKit 2, Tailwind CSS 4, @atproto/api, Zod, Vitest. Customizing Components All components support style overrides via the class prop. For deeper customization, use render snippets. DocumentCard with Custom Layout Override Individual Sections Available snippets: layout, cover, title, description, metadata, tags. Headless Mode Use headless on ThemedCard to render only the themed wrapper without default styles: Licence AGPL-3.0-only — see the pkgs monorepo.