@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/dist/utils/theme-helpers.js

@@ -1,4 +1,4 @@
-import { rgbToCSS } from './theme.js';
+import { rgbToCSS, colorToCSS, isRGBA } from './theme.js';
 /**
  * Generate color-mix CSS for theme colors with transparency
  */
@@ -48,6 +48,57 @@ export function getThemedAccent(hasTheme, opacity) {
         color: 'var(--theme-accent)'
     };
 }
+/**
+ * Get theme-aware page background
+ */
+export function getThemedPageBackground(hasTheme, showPageBackground) {
+    if (!hasTheme)
+        return {};
+    if (showPageBackground === false)
+        return {};
+    return { backgroundColor: 'var(--theme-page-background)' };
+}
+/**
+ * Get background image styles
+ */
+export function getBackgroundImageStyles(bgImage) {
+    if (!bgImage?.url)
+        return {};
+    return {
+        backgroundImage: `url(${bgImage.url})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center'
+    };
+}
+/**
+ * Get font styles from theme
+ */
+export function getFontStyles(theme) {
+    if (!theme)
+        return {};
+    const headingFont = theme.headingFont;
+    const bodyFont = theme.bodyFont;
+    if (bodyFont) {
+        return { fontFamily: `"${bodyFont}", system-ui, sans-serif` };
+    }
+    return {};
+}
+/**
+ * Get heading font styles from theme
+ */
+export function getHeadingFontStyles(theme) {
+    if (!theme?.headingFont)
+        return {};
+    return { fontFamily: `"${theme.headingFont}", system-ui, sans-serif` };
+}
+/**
+ * Get page width styles from theme
+ */
+export function getPageWidthStyles(theme) {
+    if (!theme?.pageWidth)
+        return {};
+    return { maxWidth: `${theme.pageWidth}px` };
+}
 /**
  * Convert BasicTheme to CSS custom properties
  */
@@ -61,3 +112,49 @@ export function themeToCssVars(theme) {
         '--theme-accent-foreground': rgbToCSS(theme.accentForeground)
     };
 }
+/**
+ * Convert ExtendedTheme to CSS custom properties
+ */
+export function extendedThemeToCssVars(theme) {
+    if (!theme)
+        return {};
+    const vars = {};
+    if (theme.backgroundColor) {
+        vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+    }
+    // Extended theme uses different property names
+    if (theme.pageBackground) {
+        vars['--theme-page-background'] = colorToCSS(theme.pageBackground);
+    }
+    if (theme.primary) {
+        vars['--theme-accent'] = colorToCSS(theme.primary);
+    }
+    if (theme.accentBackground) {
+        vars['--theme-accent-background'] = colorToCSS(theme.accentBackground);
+    }
+    if (theme.accentText) {
+        vars['--theme-accent-foreground'] = colorToCSS(theme.accentText);
+    }
+    if (theme.headingFont) {
+        vars['--theme-heading-font'] = `"${theme.headingFont}", system-ui, sans-serif`;
+    }
+    if (theme.bodyFont) {
+        vars['--theme-body-font'] = `"${theme.bodyFont}", system-ui, sans-serif`;
+    }
+    if (theme.pageWidth) {
+        vars['--theme-page-width'] = `${theme.pageWidth}px`;
+    }
+    return vars;
+}
+/**
+ * Convert any theme to CSS custom properties
+ */
+export function anyThemeToCssVars(theme) {
+    if (!theme)
+        return {};
+    // Check for basic theme properties
+    if ('background' in theme && 'foreground' in theme) {
+        return themeToCssVars(theme);
+    }
+    return extendedThemeToCssVars(theme);
+}

package/dist/utils/theme.d.ts

@@ -1,12 +1,28 @@
-import type { RGBColor } from '../types.js';
+import type { RGBColor, RGBAColor, Color, BasicTheme, ExtendedTheme, BackgroundImage } from '../types.js';
+/**
+ * Type guard for RGBA color
+ */
+export declare function isRGBA(color: Color): color is RGBAColor;
 /**
  * Convert RGB color object to CSS rgb() string
  */
 export declare function rgbToCSS(color: RGBColor): string;
+/**
+ * Convert RGBA color object to CSS rgba() string
+ */
+export declare function rgbaToCSS(color: RGBAColor): string;
+/**
+ * Convert Color (RGB or RGBA) to CSS string
+ */
+export declare function colorToCSS(color: Color): string;
 /**
  * Convert RGB color object to hex string
  */
 export declare function rgbToHex(color: RGBColor): string;
+/**
+ * Convert RGBA color object to hex string with alpha
+ */
+export declare function rgbaToHex(color: RGBAColor): string;
 /**
  * Get theme CSS variables from BasicTheme
  */
@@ -16,3 +32,34 @@ export declare function getThemeVars(theme: {
     accent: RGBColor;
     accentForeground: RGBColor;
 }): Record<string, string>;
+/**
+ * Get CSS for background image
+ */
+export declare function getBackgroundImageCSS(bgImage: BackgroundImage | undefined): Record<string, string>;
+/**
+ * Convert BasicTheme to CSS custom properties
+ */
+export declare function basicThemeToCssVars(theme: BasicTheme): Record<string, string>;
+/**
+ * Convert ExtendedTheme to CSS custom properties
+ */
+export declare function extendedThemeToCssVars(theme: ExtendedTheme): Record<string, string>;
+/**
+ * Convert any theme (Basic or Extended) to CSS custom properties
+ */
+export declare function themeToCssVars(theme: BasicTheme | ExtendedTheme | undefined): Record<string, string>;
+/**
+ * Get font family CSS with fallbacks
+ */
+export declare function getFontFamilyCSS(fontName: string | undefined, fallback: string): string;
+/**
+ * Generate Google Fonts URL for custom fonts
+ */
+export declare function getGoogleFontsUrl(fonts: {
+    headingFont?: string;
+    bodyFont?: string;
+}): string | null;
+/**
+ * Get all theme CSS variables including defaults
+ */
+export declare function getAllThemeVars(theme?: BasicTheme | ExtendedTheme): Record<string, string>;

package/dist/utils/theme.js

@@ -1,9 +1,32 @@
+/**
+ * Type guard for RGBA color
+ */
+export function isRGBA(color) {
+    return 'a' in color;
+}
 /**
  * Convert RGB color object to CSS rgb() string
  */
 export function rgbToCSS(color) {
     return `rgb(${color.r}, ${color.g}, ${color.b})`;
 }
+/**
+ * Convert RGBA color object to CSS rgba() string
+ */
+export function rgbaToCSS(color) {
+    // Alpha is 0-100, convert to 0-1
+    const alpha = color.a / 100;
+    return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+/**
+ * Convert Color (RGB or RGBA) to CSS string
+ */
+export function colorToCSS(color) {
+    if (isRGBA(color)) {
+        return rgbaToCSS(color);
+    }
+    return rgbToCSS(color);
+}
 /**
  * Convert RGB color object to hex string
  */
@@ -11,6 +34,14 @@ export function rgbToHex(color) {
     const toHex = (n) => n.toString(16).padStart(2, '0');
     return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`;
 }
+/**
+ * Convert RGBA color object to hex string with alpha
+ */
+export function rgbaToHex(color) {
+    const toHex = (n) => n.toString(16).padStart(2, '0');
+    const alpha = Math.round((color.a / 100) * 255);
+    return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}${toHex(alpha)}`;
+}
 /**
  * Get theme CSS variables from BasicTheme
  */
@@ -22,3 +53,130 @@ export function getThemeVars(theme) {
         '--theme-accent-foreground': rgbToCSS(theme.accentForeground)
     };
 }
+/**
+ * Get CSS for background image
+ */
+export function getBackgroundImageCSS(bgImage) {
+    if (!bgImage?.url)
+        return {};
+    const styles = {
+        'background-image': `url(${bgImage.url})`,
+        'background-size': 'cover',
+        'background-position': 'center',
+        'background-repeat': 'no-repeat'
+    };
+    if (bgImage.opacity !== undefined) {
+        // For opacity, we need to use a pseudo-element or overlay
+        // This is handled separately in the component
+    }
+    if (bgImage.blur !== undefined) {
+        styles['background-blur'] = `${bgImage.blur}px`;
+    }
+    return styles;
+}
+/**
+ * Convert BasicTheme to CSS custom properties
+ */
+export function basicThemeToCssVars(theme) {
+    return {
+        '--theme-background': rgbToCSS(theme.background),
+        '--theme-foreground': rgbToCSS(theme.foreground),
+        '--theme-accent': rgbToCSS(theme.accent),
+        '--theme-accent-foreground': rgbToCSS(theme.accentForeground)
+    };
+}
+/**
+ * Convert ExtendedTheme to CSS custom properties
+ */
+export function extendedThemeToCssVars(theme) {
+    const vars = {};
+    if (theme.backgroundColor) {
+        vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+    }
+    if (theme.pageBackground) {
+        vars['--theme-page-background'] = colorToCSS(theme.pageBackground);
+    }
+    if (theme.primary) {
+        vars['--theme-primary'] = colorToCSS(theme.primary);
+    }
+    if (theme.accentBackground) {
+        vars['--theme-accent-background'] = colorToCSS(theme.accentBackground);
+    }
+    if (theme.accentText) {
+        vars['--theme-accent-text'] = colorToCSS(theme.accentText);
+    }
+    if (theme.headingFont) {
+        vars['--theme-heading-font'] = theme.headingFont;
+    }
+    if (theme.bodyFont) {
+        vars['--theme-body-font'] = theme.bodyFont;
+    }
+    if (theme.pageWidth) {
+        vars['--theme-page-width'] = `${theme.pageWidth}px`;
+    }
+    // Map extended theme properties to standard theme variables for compatibility
+    if (theme.backgroundColor) {
+        vars['--theme-background'] = colorToCSS(theme.backgroundColor);
+    }
+    // Use primary as accent if accent is not defined
+    if (theme.primary && !theme.accentBackground) {
+        vars['--theme-accent'] = colorToCSS(theme.primary);
+    }
+    return vars;
+}
+/**
+ * Convert any theme (Basic or Extended) to CSS custom properties
+ */
+export function themeToCssVars(theme) {
+    if (!theme)
+        return {};
+    // Check if it's a basic theme
+    if ('background' in theme && 'foreground' in theme && 'accent' in theme && 'accentForeground' in theme) {
+        return basicThemeToCssVars(theme);
+    }
+    // Otherwise treat as extended theme
+    return extendedThemeToCssVars(theme);
+}
+/**
+ * Get font family CSS with fallbacks
+ */
+export function getFontFamilyCSS(fontName, fallback) {
+    if (!fontName)
+        return fallback;
+    return `"${fontName}", ${fallback}`;
+}
+/**
+ * Generate Google Fonts URL for custom fonts
+ */
+export function getGoogleFontsUrl(fonts) {
+    const families = [];
+    if (fonts.headingFont) {
+        families.push(`${encodeURIComponent(fonts.headingFont)}:wght@400;600;700`);
+    }
+    if (fonts.bodyFont) {
+        families.push(`${encodeURIComponent(fonts.bodyFont)}:wght@400;500;600`);
+    }
+    if (families.length === 0)
+        return null;
+    return `https://fonts.googleapis.com/css2?family=${families.join('&family=')}&display=swap`;
+}
+/**
+ * Get all theme CSS variables including defaults
+ */
+export function getAllThemeVars(theme) {
+    const defaults = {
+        '--theme-background': 'rgb(255, 255, 255)',
+        '--theme-foreground': 'rgb(0, 0, 0)',
+        '--theme-accent': 'rgb(0, 0, 225)',
+        '--theme-accent-foreground': 'rgb(255, 255, 255)',
+        '--theme-page-background': 'rgb(255, 255, 255)',
+        '--theme-primary': 'rgb(0, 0, 225)',
+        '--theme-accent-background': 'rgb(0, 0, 225)',
+        '--theme-accent-text': 'rgb(255, 255, 255)',
+        '--theme-heading-font': 'system-ui, -apple-system, sans-serif',
+        '--theme-body-font': 'system-ui, -apple-system, sans-serif',
+        '--theme-page-width': '800px'
+    };
+    const themeVars = themeToCssVars(theme);
+    return { ...defaults, ...themeVars };
+}

package/package.json

@@ -1,13 +1,48 @@
 {
   "name": "@ewanc26/svelte-standard-site",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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.",
+  "author": "Ewan Croft",
   "license": "AGPL-3.0-only",
-  "author": {
-    "name": "Ewan Croft",
-    "url": "https://github.com/ewanc26"
-  },
   "type": "module",
+  "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/lib",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -25,8 +60,8 @@
       "default": "./dist/utils/content.js"
     },
     "./comments": {
-      "types": "./dist/utils/comments.d.ts",
-      "default": "./dist/utils/comments.js"
+      "types": "./dist/utils/native-comments.d.ts",
+      "default": "./dist/utils/native-comments.js"
     },
     "./verification": {
       "types": "./dist/utils/verification.d.ts",
@@ -47,23 +82,23 @@
       "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"
+  "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 ."
   },
   "dependencies": {
     "@atproto/api": "^0.19.3",
+    "@ewanc26/atproto": "workspace:*",
+    "@ewanc26/tid": "workspace:*",
+    "@ewanc26/utils": "workspace:*",
     "@lucide/svelte": "^0.577.0",
     "katex": "^0.16.38",
     "rehype-slug": "^6.0.0",
@@ -73,10 +108,11 @@
     "remark-rehype": "^11.1.2",
     "shiki": "^3.21.0",
     "unified": "^11.0.5",
-    "zod": "^3.24.0",
-    "@ewanc26/atproto": "0.2.4",
-    "@ewanc26/tid": "1.1.2",
-    "@ewanc26/utils": "0.1.4"
+    "zod": "^3.24.0"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
@@ -96,44 +132,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.2.6",
     "vitest": "^4.1.0"
-  },
-  "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 ."
   }
-}
+}

package/src/lib/components/ActionBar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	interface Props {
+		/** Snippet for action items */
+		children: import('svelte').Snippet;
+		/** Position of the action bar */
+		position?: 'left' | 'bottom' | 'right';
+		/** Has theme applied */
+		hasTheme?: boolean;
+		/** Sticky positioning */
+		sticky?: boolean;
+	}
+
+	const { children, position = 'left', hasTheme = false, sticky = false }: Props = $props();
+</script>
+
+<div
+	class="action-bar {position}"
+	class:themed={hasTheme}
+	class:sticky
+>
+	{@render children()}
+</div>
+
+<style>
+	.action-bar {
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		border-radius: 0.5rem;
+		background-color: rgb(255 255 255);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
+	}
+
+	.action-bar.themed {
+		background-color: var(--theme-page-background, var(--theme-background));
+	}
+
+	.action-bar.left {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.action-bar.bottom {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.action-bar.right {
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.action-bar.sticky {
+		position: sticky;
+	}
+
+	.action-bar.left.sticky {
+		top: 1rem;
+	}
+
+	.action-bar.bottom.sticky {
+		bottom: 1rem;
+	}
+
+	.action-bar :global(button) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 9999px;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.15s;
+	}
+
+	.action-bar :global(button:hover) {
+		background-color: rgb(243 244 246);
+	}
+
+	.action-bar.themed :global(button:hover) {
+		background-color: color-mix(in srgb, var(--theme-foreground) 10%, transparent);
+	}
+</style>

package/src/lib/components/Avatar.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	interface Props {
+		/** User's DID */
+		did: string;
+		/** User's handle (optional, for display) */
+		handle?: string;
+		/** User's display name */
+		displayName?: string;
+		/** Avatar image URL */
+		src?: string;
+		/** Size in pixels */
+		size?: number;
+		/** Whether to link to profile */
+		link?: boolean;
+		/** Has theme applied */
+		hasTheme?: boolean;
+	}
+
+	const {
+		did,
+		handle,
+		displayName,
+		src,
+		size = 40,
+		link = true,
+		hasTheme = false
+	}: Props = $props();
+
+	// Generate initials from display name or handle
+	const initials = $derived(
+		(displayName || handle || did)
+			.split(/[.\s_@]+/)
+			.slice(0, 2)
+			.map((s) => s.charAt(0).toUpperCase())
+			.join('')
+	);
+
+	// Profile URL
+	const profileUrl = $derived(`https://leaflet.pub/p/${did}`);
+
+	// Size classes
+	const sizeStyle = $derived(`width: ${size}px; height: ${size}px; font-size: ${size * 0.4}px;`);
+</script>
+
+{#if link}
+	<a
+		href={profileUrl}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="avatar-link"
+		title={displayName || handle || did}
+	>
+		{#if src}
+			<img
+				src={src}
+				alt={displayName || handle || 'Avatar'}
+				class="avatar rounded-full object-cover"
+				style={sizeStyle}
+				loading="lazy"
+			/>
+		{:else}
+			<div
+				class="avatar-placeholder rounded-full flex items-center justify-center font-medium"
+				class:themed={hasTheme}
+				style={sizeStyle}
+			>
+				{initials}
+			</div>
+		{/if}
+	</a>
+{:else if src}
+	<img
+		src={src}
+		alt={displayName || handle || 'Avatar'}
+		class="avatar rounded-full object-cover"
+		style={sizeStyle}
+		loading="lazy"
+	/>
+{:else}
+	<div
+		class="avatar-placeholder rounded-full flex items-center justify-center font-medium"
+		class:themed={hasTheme}
+		style={sizeStyle}
+	>
+		{initials}
+	</div>
+{/if}
+
+<style>
+	.avatar-link {
+		display: inline-block;
+		text-decoration: none;
+	}
+
+	.avatar-placeholder {
+		background-color: rgb(229 231 235);
+		color: rgb(107 114 128);
+	}
+
+	.avatar-placeholder.themed {
+		background-color: color-mix(in srgb, var(--theme-accent) 20%, transparent);
+		color: var(--theme-accent);
+	}
+</style>