@ewanc26/svelte-standard-site 0.2.0

package/dist/utils/theme-helpers.d.ts

@@ -0,0 +1,34 @@
+import type { BasicTheme } from '../types.js';
+/**
+ * Generate color-mix CSS for theme colors with transparency
+ */
+export declare function mixThemeColor(variable: string, opacity: number, fallback?: string): string;
+/**
+ * Get theme-aware color styles for text
+ */
+export declare function getThemedTextColor(hasTheme: boolean, opacity?: number): {
+    color?: string;
+};
+/**
+ * Get theme-aware background color
+ */
+export declare function getThemedBackground(hasTheme: boolean, opacity?: number): {
+    backgroundColor?: string;
+};
+/**
+ * Get theme-aware border color
+ */
+export declare function getThemedBorder(hasTheme: boolean, opacity?: number): {
+    borderColor?: string;
+};
+/**
+ * Get theme-aware accent color
+ */
+export declare function getThemedAccent(hasTheme: boolean, opacity?: number): {
+    color?: string;
+    backgroundColor?: string;
+};
+/**
+ * Convert BasicTheme to CSS custom properties
+ */
+export declare function themeToCssVars(theme?: BasicTheme): Record<string, string>;

package/dist/utils/theme-helpers.js

@@ -0,0 +1,63 @@
+import { rgbToCSS } from './theme.js';
+/**
+ * Generate color-mix CSS for theme colors with transparency
+ */
+export function mixThemeColor(variable, opacity, fallback = 'transparent') {
+    return `color-mix(in srgb, var(${variable}) ${opacity}%, ${fallback})`;
+}
+/**
+ * Get theme-aware color styles for text
+ */
+export function getThemedTextColor(hasTheme, opacity = 100) {
+    if (!hasTheme)
+        return {};
+    return opacity === 100
+        ? { color: 'var(--theme-foreground)' }
+        : { color: mixThemeColor('--theme-foreground', opacity) };
+}
+/**
+ * Get theme-aware background color
+ */
+export function getThemedBackground(hasTheme, opacity) {
+    if (!hasTheme)
+        return {};
+    if (opacity === undefined) {
+        return { backgroundColor: 'var(--theme-background)' };
+    }
+    return { backgroundColor: mixThemeColor('--theme-background', opacity) };
+}
+/**
+ * Get theme-aware border color
+ */
+export function getThemedBorder(hasTheme, opacity = 20) {
+    if (!hasTheme)
+        return {};
+    return { borderColor: mixThemeColor('--theme-foreground', opacity) };
+}
+/**
+ * Get theme-aware accent color
+ */
+export function getThemedAccent(hasTheme, opacity) {
+    if (!hasTheme)
+        return {};
+    if (opacity === undefined) {
+        return { color: 'var(--theme-accent)' };
+    }
+    return {
+        backgroundColor: mixThemeColor('--theme-accent', opacity),
+        color: 'var(--theme-accent)'
+    };
+}
+/**
+ * Convert BasicTheme to CSS custom properties
+ */
+export function themeToCssVars(theme) {
+    if (!theme)
+        return {};
+    return {
+        '--theme-background': rgbToCSS(theme.background),
+        '--theme-foreground': rgbToCSS(theme.foreground),
+        '--theme-accent': rgbToCSS(theme.accent),
+        '--theme-accent-foreground': rgbToCSS(theme.accentForeground)
+    };
+}

package/dist/utils/theme.d.ts

@@ -0,0 +1,18 @@
+import type { RGBColor } from '../types.js';
+/**
+ * Convert RGB color object to CSS rgb() string
+ */
+export declare function rgbToCSS(color: RGBColor): string;
+/**
+ * Convert RGB color object to hex string
+ */
+export declare function rgbToHex(color: RGBColor): string;
+/**
+ * Get theme CSS variables from BasicTheme
+ */
+export declare function getThemeVars(theme: {
+    background: RGBColor;
+    foreground: RGBColor;
+    accent: RGBColor;
+    accentForeground: RGBColor;
+}): Record<string, string>;

package/dist/utils/theme.js

@@ -0,0 +1,24 @@
+/**
+ * Convert RGB color object to CSS rgb() string
+ */
+export function rgbToCSS(color) {
+    return `rgb(${color.r}, ${color.g}, ${color.b})`;
+}
+/**
+ * Convert RGB color object to hex string
+ */
+export function rgbToHex(color) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
+}
+/**
+ * Get theme CSS variables from BasicTheme
+ */
+export function getThemeVars(theme) {
+    return {
+        '--theme-background': rgbToCSS(theme.background),
+        '--theme-foreground': rgbToCSS(theme.foreground),
+        '--theme-accent': rgbToCSS(theme.accent),
+        '--theme-accent-foreground': rgbToCSS(theme.accentForeground)
+    };
+}

package/dist/utils/verification.d.ts

@@ -0,0 +1,129 @@
+/**
+ * Verification utilities for proving content ownership
+ *
+ * Creates `.well-known` endpoints and `<link>` tags to verify that
+ * you own the content published to ATProto.
+ *
+ * @example
+ * ```ts
+ * // SvelteKit endpoint: src/routes/.well-known/site.standard.publication/+server.ts
+ * import { generatePublicationWellKnown } from 'svelte-standard-site/verification';
+ * import { text } from '@sveltejs/kit';
+ *
+ * export function GET() {
+ *   return text(
+ *     generatePublicationWellKnown({
+ *       did: 'did:plc:xxx',
+ *       publicationRkey: '3abc123xyz',
+ *     })
+ *   );
+ * }
+ * ```
+ */
+/**
+ * Parse an AT-URI to extract its components
+ */
+export declare function parseAtUri(uri: string): {
+    did: string;
+    collection: string;
+    rkey: string;
+} | null;
+/**
+ * Build an AT-URI for a document
+ */
+export declare function getDocumentAtUri(did: string, rkey: string): string;
+/**
+ * Build an AT-URI for a publication
+ */
+export declare function getPublicationAtUri(did: string, rkey: string): string;
+/**
+ * Generate content for /.well-known/site.standard.publication endpoint
+ *
+ * This endpoint proves you own your publication record on ATProto.
+ *
+ * @example
+ * ```ts
+ * // src/routes/.well-known/site.standard.publication/+server.ts
+ * import { generatePublicationWellKnown } from 'svelte-standard-site/verification';
+ * import { text } from '@sveltejs/kit';
+ *
+ * export function GET() {
+ *   return text(
+ *     generatePublicationWellKnown({
+ *       did: 'did:plc:xxx',
+ *       publicationRkey: '3abc123xyz',
+ *     })
+ *   );
+ * }
+ * ```
+ */
+export declare function generatePublicationWellKnown(options: {
+    did: string;
+    publicationRkey: string;
+}): string;
+/**
+ * Generate a <link> tag for document verification
+ *
+ * Add this to your document's <head> to verify ownership.
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html generateDocumentLinkTag({
+ *     did: 'did:plc:xxx',
+ *     documentRkey: '3xyz789abc',
+ *   })}
+ * </svelte:head>
+ * ```
+ */
+export declare function generateDocumentLinkTag(options: {
+    did: string;
+    documentRkey: string;
+}): string;
+/**
+ * Generate a <link> tag for publication verification
+ *
+ * Add this to your site's <head> to verify publication ownership.
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html generatePublicationLinkTag({
+ *     did: 'did:plc:xxx',
+ *     publicationRkey: '3abc123xyz',
+ *   })}
+ * </svelte:head>
+ * ```
+ */
+export declare function generatePublicationLinkTag(options: {
+    did: string;
+    publicationRkey: string;
+}): string;
+/**
+ * Verify that a well-known endpoint returns the expected AT-URI
+ *
+ * @example
+ * ```ts
+ * const isValid = await verifyPublicationWellKnown(
+ *   'https://yourblog.com',
+ *   'did:plc:xxx',
+ *   '3abc123xyz'
+ * );
+ * ```
+ */
+export declare function verifyPublicationWellKnown(siteUrl: string, did: string, publicationRkey: string): Promise<boolean>;
+/**
+ * Extract AT-URI from a <link> tag in HTML
+ *
+ * @example
+ * ```ts
+ * const html = '<link rel="site.standard.document" href="at://did:plc:xxx/site.standard.document/3xyz">';
+ * const uri = extractDocumentLinkFromHtml(html);
+ * // => 'at://did:plc:xxx/site.standard.document/3xyz'
+ * ```
+ */
+export declare function extractDocumentLinkFromHtml(html: string): string | null;
+/**
+ * Extract publication AT-URI from a <link> tag in HTML
+ */
+export declare function extractPublicationLinkFromHtml(html: string): string | null;

package/dist/utils/verification.js

@@ -0,0 +1,157 @@
+/**
+ * Verification utilities for proving content ownership
+ *
+ * Creates `.well-known` endpoints and `<link>` tags to verify that
+ * you own the content published to ATProto.
+ *
+ * @example
+ * ```ts
+ * // SvelteKit endpoint: src/routes/.well-known/site.standard.publication/+server.ts
+ * import { generatePublicationWellKnown } from 'svelte-standard-site/verification';
+ * import { text } from '@sveltejs/kit';
+ *
+ * export function GET() {
+ *   return text(
+ *     generatePublicationWellKnown({
+ *       did: 'did:plc:xxx',
+ *       publicationRkey: '3abc123xyz',
+ *     })
+ *   );
+ * }
+ * ```
+ */
+/**
+ * Parse an AT-URI to extract its components
+ */
+export function parseAtUri(uri) {
+    const match = uri.match(/^at:\/\/([^/]+)\/([^/]+)\/(.+)$/);
+    if (!match)
+        return null;
+    return {
+        did: match[1],
+        collection: match[2],
+        rkey: match[3]
+    };
+}
+/**
+ * Build an AT-URI for a document
+ */
+export function getDocumentAtUri(did, rkey) {
+    return `at://${did}/site.standard.document/${rkey}`;
+}
+/**
+ * Build an AT-URI for a publication
+ */
+export function getPublicationAtUri(did, rkey) {
+    return `at://${did}/site.standard.publication/${rkey}`;
+}
+/**
+ * Generate content for /.well-known/site.standard.publication endpoint
+ *
+ * This endpoint proves you own your publication record on ATProto.
+ *
+ * @example
+ * ```ts
+ * // src/routes/.well-known/site.standard.publication/+server.ts
+ * import { generatePublicationWellKnown } from 'svelte-standard-site/verification';
+ * import { text } from '@sveltejs/kit';
+ *
+ * export function GET() {
+ *   return text(
+ *     generatePublicationWellKnown({
+ *       did: 'did:plc:xxx',
+ *       publicationRkey: '3abc123xyz',
+ *     })
+ *   );
+ * }
+ * ```
+ */
+export function generatePublicationWellKnown(options) {
+    return getPublicationAtUri(options.did, options.publicationRkey);
+}
+/**
+ * Generate a <link> tag for document verification
+ *
+ * Add this to your document's <head> to verify ownership.
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html generateDocumentLinkTag({
+ *     did: 'did:plc:xxx',
+ *     documentRkey: '3xyz789abc',
+ *   })}
+ * </svelte:head>
+ * ```
+ */
+export function generateDocumentLinkTag(options) {
+    const atUri = getDocumentAtUri(options.did, options.documentRkey);
+    return `<link rel="site.standard.document" href="${atUri}">`;
+}
+/**
+ * Generate a <link> tag for publication verification
+ *
+ * Add this to your site's <head> to verify publication ownership.
+ *
+ * @example
+ * ```svelte
+ * <svelte:head>
+ *   {@html generatePublicationLinkTag({
+ *     did: 'did:plc:xxx',
+ *     publicationRkey: '3abc123xyz',
+ *   })}
+ * </svelte:head>
+ * ```
+ */
+export function generatePublicationLinkTag(options) {
+    const atUri = getPublicationAtUri(options.did, options.publicationRkey);
+    return `<link rel="site.standard.publication" href="${atUri}">`;
+}
+/**
+ * Verify that a well-known endpoint returns the expected AT-URI
+ *
+ * @example
+ * ```ts
+ * const isValid = await verifyPublicationWellKnown(
+ *   'https://yourblog.com',
+ *   'did:plc:xxx',
+ *   '3abc123xyz'
+ * );
+ * ```
+ */
+export async function verifyPublicationWellKnown(siteUrl, did, publicationRkey) {
+    try {
+        const cleanUrl = siteUrl.replace(/\/$/, '');
+        const response = await fetch(`${cleanUrl}/.well-known/site.standard.publication`);
+        if (!response.ok)
+            return false;
+        const content = await response.text();
+        const expectedUri = getPublicationAtUri(did, publicationRkey);
+        return content.trim() === expectedUri;
+    }
+    catch (error) {
+        console.error('Failed to verify publication well-known:', error);
+        return false;
+    }
+}
+/**
+ * Extract AT-URI from a <link> tag in HTML
+ *
+ * @example
+ * ```ts
+ * const html = '<link rel="site.standard.document" href="at://did:plc:xxx/site.standard.document/3xyz">';
+ * const uri = extractDocumentLinkFromHtml(html);
+ * // => 'at://did:plc:xxx/site.standard.document/3xyz'
+ * ```
+ */
+export function extractDocumentLinkFromHtml(html) {
+    const match = html.match(/<link\s+rel="site\.standard\.document"\s+href="(at:\/\/[^"]+)"\s*\/?>/i);
+    return match ? match[1] : null;
+}
+/**
+ * Extract publication AT-URI from a <link> tag in HTML
+ */
+export function extractPublicationLinkFromHtml(html) {
+    const match = html.match(/<link\s+rel="site\.standard\.publication"\s+href="(at:\/\/[^"]+)"\s*\/?>/i);
+    return match ? match[1] : null;
+}

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@ewanc26/svelte-standard-site",
+  "version": "0.2.0",
+  "description": "SvelteKit library for reading and writing AT Protocol longform content via site.standard.* records — with a complete design system, federated comments, publishing tools, and content verification.",
+  "license": "AGPL-3.0-only",
+  "author": {
+    "name": "Ewan Croft",
+    "url": "https://github.com/ewanc26"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./publisher": {
+      "types": "./dist/publisher.d.ts",
+      "default": "./dist/publisher.js"
+    },
+    "./content": {
+      "types": "./dist/utils/content.d.ts",
+      "default": "./dist/utils/content.js"
+    },
+    "./comments": {
+      "types": "./dist/utils/comments.d.ts",
+      "default": "./dist/utils/comments.js"
+    },
+    "./verification": {
+      "types": "./dist/utils/verification.d.ts",
+      "default": "./dist/utils/verification.js"
+    },
+    "./schemas": {
+      "types": "./dist/schemas.d.ts",
+      "default": "./dist/schemas.js"
+    },
+    "./config/env": {
+      "types": "./dist/config/env.d.ts",
+      "default": "./dist/config/env.js"
+    },
+    "./styles/base.css": {
+      "default": "./dist/styles/base.css"
+    },
+    "./styles/themes.css": {
+      "default": "./dist/styles/themes.css"
+    }
+  },
+  "files": [
+    "dist",
+    "src/lib",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@atproto/api": "^0.18.16",
+    "@lucide/svelte": "^0.562.0",
+    "katex": "^0.16.27",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "shiki": "^3.21.0",
+    "unified": "^11.0.5",
+    "zod": "^3.24.0",
+    "@ewanc26/atproto": "0.2.0",
+    "@ewanc26/tid": "1.1.0",
+    "@ewanc26/utils": "0.1.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.17",
+    "@types/node": "^22.0.0",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.15",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.16"
+  },
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "atproto",
+    "at-protocol",
+    "bluesky",
+    "site-standard",
+    "blog",
+    "cms",
+    "design-system",
+    "components",
+    "dark-mode",
+    "light-mode",
+    "theme",
+    "publishing",
+    "federation",
+    "comments"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ewanc26/pkgs.git",
+    "directory": "packages/svelte-standard-site"
+  },
+  "homepage": "https://github.com/ewanc26/pkgs/tree/main/packages/svelte-standard-site",
+  "bugs": {
+    "url": "https://github.com/ewanc26/pkgs/issues"
+  },
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package -i src/lib -o dist && publint",
+    "dev": "svelte-kit sync && svelte-package -i src/lib -o dist --watch",
+    "dev:app": "vite dev",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write .",
+    "lint": "prettier --check ."
+  }
+}