@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/dist/components/DocumentCard.svelte

@@ -2,6 +2,7 @@
 	import type { Document, Publication, AtProtoRecord } from '../types.js';
 	import { extractRkey } from '../index.js';
 	import { ThemedCard, ThemedText, DateDisplay, TagList } from './index.js';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		document: AtProtoRecord<Document>;
@@ -9,6 +10,45 @@
 		class?: string;
 		showCover?: boolean;
 		href?: string;
+		/**
+		 * Custom render snippet for the entire card content.
+		 * Receives { document, publication, href }.
+		 * If provided, default rendering is replaced entirely.
+		 */
+		layout?: Snippet<
+			[
+				{
+					document: AtProtoRecord<Document>;
+					publication?: AtProtoRecord<Publication>;
+					href: string;
+				}
+			]
+		>;
+		/**
+		 * Custom render snippet for the cover image.
+		 * Receives { src, alt }.
+		 */
+		cover?: Snippet<[{ src: string; alt: string }]>;
+		/**
+		 * Custom render snippet for the title.
+		 * Receives { title, href }.
+		 */
+		title?: Snippet<[{ title: string; href: string }]>;
+		/**
+		 * Custom render snippet for the description.
+		 * Receives { description }.
+		 */
+		description?: Snippet<[{ description: string }]>;
+		/**
+		 * Custom render snippet for the metadata section.
+		 * Receives { publishedAt, updatedAt }.
+		 */
+		metadata?: Snippet<[{ publishedAt: string; updatedAt?: string }]>;
+		/**
+		 * Custom render snippet for tags.
+		 * Receives { tags }.
+		 */
+		tags?: Snippet<[{ tags: string[] }]>;
 	}
 
 	const {
@@ -16,7 +56,13 @@
 		publication,
 		class: className = '',
 		showCover = true,
-		href: customHref
+		href: customHref,
+		layout,
+		cover,
+		title,
+		description,
+		metadata,
+		tags
 	}: Props = $props();
 
 	const value = $derived(document.value);
@@ -32,64 +78,88 @@
 	{href}
 	class="flex gap-6 duration-200 focus-within:shadow-md hover:shadow-md {className}"
 >
-	{#if showCover && value.coverImage}
-		<img
-			src={value.coverImage}
-			alt="{value.title} cover"
-			class="h-48 w-32 shrink-0 rounded-lg object-cover shadow-sm"
-		/>
-	{/if}
-
-	<div class="flex-1">
-		<ThemedText
-			{hasTheme}
-			element="h3"
-			class="group-hover:text-primary-600 dark:group-hover:text-primary-400 mb-2 text-2xl font-bold transition-colors"
-		>
-			{value.title}
-		</ThemedText>
-
-		{#if value.description}
-			<ThemedText
-				{hasTheme}
-				opacity={70}
-				element="p"
-				class="mb-4 line-clamp-3 text-sm leading-relaxed"
-			>
-				{value.description}
-			</ThemedText>
+	{#if layout}
+		{@render layout({ document, publication, href })}
+	{:else}
+		{#if showCover && value.coverImage}
+			{#if cover}
+				{@render cover({ src: value.coverImage, alt: `${value.title} cover` })}
+			{:else}
+				<img
+					src={value.coverImage}
+					alt="{value.title} cover"
+					class="h-48 w-32 shrink-0 rounded-lg object-cover shadow-sm"
+				/>
+			{/if}
 		{/if}
 
-		<div class="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
-			<DateDisplay
-				date={value.publishedAt}
-				class="font-medium"
-				style={hasTheme
-					? `color: ${hasTheme ? 'color-mix(in srgb, var(--theme-foreground) 80%, transparent)' : ''}`
-					: ''}
-			/>
-			{#if value.updatedAt}
-				<span
-					class="flex items-center gap-1"
-					style:color={hasTheme
-						? 'color-mix(in srgb, var(--theme-foreground) 60%, transparent)'
-						: undefined}
+		<div class="flex-1">
+			{#if title}
+				{@render title({ title: value.title, href })}
+			{:else}
+				<ThemedText
+					{hasTheme}
+					element="h3"
+					class="group-hover:text-primary-600 dark:group-hover:text-primary-400 mb-2 text-2xl font-bold transition-colors"
 				>
-					<span
-						class="h-1 w-1 rounded-full"
-						class:bg-ink-400={!hasTheme}
-						class:dark:bg-ink-600={!hasTheme}
-						style:background-color={hasTheme
-							? 'color-mix(in srgb, var(--theme-foreground) 40%, transparent)'
-							: undefined}
-					></span>
-					Updated <DateDisplay date={value.updatedAt} />
-				</span>
+					{value.title}
+				</ThemedText>
 			{/if}
-		</div>
 
-		{#if value.tags && value.tags.length > 0}
-			<TagList tags={value.tags} {hasTheme} />
-		{/if}
-	</div>
+			{#if value.description}
+				{#if description}
+					{@render description({ description: value.description })}
+				{:else}
+					<ThemedText
+						{hasTheme}
+						opacity={70}
+						element="p"
+						class="mb-4 line-clamp-3 text-sm leading-relaxed"
+					>
+						{value.description}
+					</ThemedText>
+				{/if}
+			{/if}
+
+			{#if metadata}
+				{@render metadata({ publishedAt: value.publishedAt, updatedAt: value.updatedAt })}
+			{:else}
+				<div class="mb-4 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
+					<DateDisplay
+						date={value.publishedAt}
+						class="font-medium"
+						style={hasTheme
+							? `color: ${hasTheme ? 'color-mix(in srgb, var(--theme-foreground) 80%, transparent)' : ''}`
+							: ''}
+					/>
+					{#if value.updatedAt}
+						<span
+							class="flex items-center gap-1"
+							style:color={hasTheme
+								? 'color-mix(in srgb, var(--theme-foreground) 60%, transparent)'
+								: undefined}
+						>
+							<span
+								class="h-1 w-1 rounded-full"
+								class:bg-ink-400={!hasTheme}
+								class:dark:bg-ink-600={!hasTheme}
+								style:background-color={hasTheme
+									? 'color-mix(in srgb, var(--theme-foreground) 40%, transparent)'
+									: undefined}
+							></span>
+							Updated <DateDisplay date={value.updatedAt} />
+						</span>
+					{/if}
+				</div>
+			{/if}
+
+			{#if value.tags && value.tags.length > 0}
+				{#if tags}
+					{@render tags({ tags: value.tags })}
+				{:else}
+					<TagList tags={value.tags} {hasTheme} />
+				{/if}
+			{/if}
+		</div>
+	{/if}
 </ThemedCard>

package/dist/components/DocumentCard.svelte.d.ts

@@ -1,10 +1,61 @@
 import type { Document, Publication, AtProtoRecord } from '../types.js';
+import type { Snippet } from 'svelte';
 interface Props {
     document: AtProtoRecord<Document>;
     publication?: AtProtoRecord<Publication>;
     class?: string;
     showCover?: boolean;
     href?: string;
+    /**
+     * Custom render snippet for the entire card content.
+     * Receives { document, publication, href }.
+     * If provided, default rendering is replaced entirely.
+     */
+    layout?: Snippet<[
+        {
+            document: AtProtoRecord<Document>;
+            publication?: AtProtoRecord<Publication>;
+            href: string;
+        }
+    ]>;
+    /**
+     * Custom render snippet for the cover image.
+     * Receives { src, alt }.
+     */
+    cover?: Snippet<[{
+        src: string;
+        alt: string;
+    }]>;
+    /**
+     * Custom render snippet for the title.
+     * Receives { title, href }.
+     */
+    title?: Snippet<[{
+        title: string;
+        href: string;
+    }]>;
+    /**
+     * Custom render snippet for the description.
+     * Receives { description }.
+     */
+    description?: Snippet<[{
+        description: string;
+    }]>;
+    /**
+     * Custom render snippet for the metadata section.
+     * Receives { publishedAt, updatedAt }.
+     */
+    metadata?: Snippet<[{
+        publishedAt: string;
+        updatedAt?: string;
+    }]>;
+    /**
+     * Custom render snippet for tags.
+     * Receives { tags }.
+     */
+    tags?: Snippet<[{
+        tags: string[];
+    }]>;
 }
 declare const DocumentCard: import("svelte").Component<Props, {}, "">;
 type DocumentCard = ReturnType<typeof DocumentCard>;

package/dist/components/Footnotes.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import RichText from './document/RichText.svelte';
+
+	export interface Footnote {
+		footnoteId: string;
+		contentPlaintext: string;
+		contentFacets?: any[];
+		number: number;
+	}
+
+	interface Props {
+		footnotes: Footnote[];
+		hasTheme?: boolean;
+	}
+
+	const { footnotes, hasTheme = false }: Props = $props();
+</script>
+
+{#if footnotes.length > 0}
+	<section class="footnotes mt-12 pt-6 border-t border-gray-200 dark:border-gray-700">
+		<h2 class="text-lg font-semibold mb-4">Footnotes</h2>
+		<ol class="footnotes-list space-y-3">
+			{#each footnotes as footnote}
+				<li id={footnote.footnoteId} class="footnote-item flex gap-3">
+					<span class="footnote-number shrink-0 w-6 text-right text-sm text-gray-500 dark:text-gray-400">
+						{footnote.number}.
+					</span>
+					<div class="flex-1 text-sm">
+						<RichText plaintext={footnote.contentPlaintext} facets={footnote.contentFacets} {hasTheme} />
+						<a
+							href="#{footnote.footnoteId}-ref"
+							class="footnote-backref ml-1 text-xs"
+							class:themed={hasTheme}
+							aria-label="Back to reference"
+						>
+							↩
+						</a>
+					</div>
+				</li>
+			{/each}
+		</ol>
+	</section>
+{/if}
+
+<style>
+	.footnotes-list {
+		list-style: none;
+		padding-left: 0;
+		counter-reset: footnote;
+	}
+
+	.footnote-item {
+		scroll-margin-top: 2rem;
+	}
+
+	.footnote-number {
+		color: rgb(107 114 128);
+	}
+
+	.footnote-backref {
+		color: rgb(0 0 225);
+		text-decoration: none;
+	}
+
+	.footnote-backref.themed {
+		color: var(--theme-accent);
+	}
+
+	.footnote-backref:hover {
+		text-decoration: underline;
+	}
+</style>

package/dist/components/Footnotes.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface Footnote {
+    footnoteId: string;
+    contentPlaintext: string;
+    contentFacets?: any[];
+    number: number;
+}
+interface Props {
+    footnotes: Footnote[];
+    hasTheme?: boolean;
+}
+declare const Footnotes: import("svelte").Component<Props, {}, "">;
+type Footnotes = ReturnType<typeof Footnotes>;
+export default Footnotes;

package/dist/components/RecommendButton.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/** AT-URI of the document */
+		documentUri: string;
+		/** Initial recommend count */
+		count?: number;
+		/** Whether current user has recommended */
+		recommended?: boolean;
+		/** Has theme applied */
+		hasTheme?: boolean;
+		/** On recommend callback */
+		onRecommend?: () => Promise<void>;
+		/** On unrecommend callback */
+		onUnrecommend?: () => Promise<void>;
+	}
+
+	const {
+		documentUri,
+		count = 0,
+		recommended = false,
+		hasTheme = false,
+		onRecommend,
+		onUnrecommend
+	}: Props = $props();
+
+	let isRecommended = $state(recommended);
+	let recommendCount = $state(count);
+	let isLoading = $state(false);
+
+	async function toggleRecommend() {
+		if (isLoading) return;
+		isLoading = true;
+
+		try {
+			if (isRecommended) {
+				if (onUnrecommend) {
+					await onUnrecommend();
+				}
+				isRecommended = false;
+				recommendCount = Math.max(0, recommendCount - 1);
+			} else {
+				if (onRecommend) {
+					await onRecommend();
+				}
+				isRecommended = true;
+				recommendCount += 1;
+			}
+		} catch (error) {
+			console.error('Failed to toggle recommend:', error);
+		} finally {
+			isLoading = false;
+		}
+	}
+</script>
+
+<button
+	class="recommend-button"
+	class:recommended={isRecommended}
+	class:themed={hasTheme}
+	class:loading={isLoading}
+	onclick={toggleRecommend}
+	disabled={isLoading}
+	aria-label={isRecommended ? 'Remove recommendation' : 'Recommend'}
+	aria-pressed={isRecommended}
+>
+	<span class="icon">
+		{#if isRecommended}
+			<svg viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
+				<path
+					d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"
+				/>
+			</svg>
+		{:else}
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-5 h-5">
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+				/>
+			</svg>
+		{/if}
+	</span>
+	{#if recommendCount > 0}
+		<span class="count">{recommendCount}</span>
+	{/if}
+</button>
+
+<style>
+	.recommend-button {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0.5rem 0.75rem;
+		border-radius: 9999px;
+		border: 1px solid rgb(229 231 235);
+		background-color: transparent;
+		color: rgb(107 114 128);
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.recommend-button:hover:not(:disabled) {
+		background-color: rgb(249 250 251);
+		border-color: rgb(209 213 219);
+	}
+
+	.recommend-button.recommended {
+		color: rgb(239 68 68);
+		border-color: rgb(254 202 202);
+		background-color: rgb(254 242 242);
+	}
+
+	.recommend-button.recommended:hover:not(:disabled) {
+		background-color: rgb(254 226 226);
+	}
+
+	.recommend-button.themed {
+		border-color: color-mix(in srgb, var(--theme-foreground) 20%, transparent);
+		color: var(--theme-foreground);
+	}
+
+	.recommend-button.themed:hover:not(:disabled) {
+		background-color: color-mix(in srgb, var(--theme-foreground) 5%, transparent);
+	}
+
+	.recommend-button.themed.recommended {
+		color: var(--theme-accent);
+		border-color: var(--theme-accent);
+		background-color: color-mix(in srgb, var(--theme-accent) 10%, transparent);
+	}
+
+	.recommend-button.themed.recommended:hover:not(:disabled) {
+		background-color: color-mix(in srgb, var(--theme-accent) 20%, transparent);
+	}
+
+	.recommend-button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.count {
+		font-weight: 500;
+	}
+</style>

package/dist/components/RecommendButton.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    /** AT-URI of the document */
+    documentUri: string;
+    /** Initial recommend count */
+    count?: number;
+    /** Whether current user has recommended */
+    recommended?: boolean;
+    /** Has theme applied */
+    hasTheme?: boolean;
+    /** On recommend callback */
+    onRecommend?: () => Promise<void>;
+    /** On unrecommend callback */
+    onUnrecommend?: () => Promise<void>;
+}
+declare const RecommendButton: import("svelte").Component<Props, {}, "">;
+type RecommendButton = ReturnType<typeof RecommendButton>;
+export default RecommendButton;

package/dist/components/ThemeProvider.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { BasicTheme, ExtendedTheme, BackgroundImage } from '../types.js';
+	import {
+		anyThemeToCssVars,
+		getBackgroundImageStyles,
+		getFontStyles,
+		getPageWidthStyles
+	} from '../utils/theme-helpers.js';
+	import { getGoogleFontsUrl } from '../utils/theme.js';
+
+	interface Props {
+		theme?: BasicTheme | ExtendedTheme;
+		/** Child content */
+		children: import('svelte').Snippet;
+		/** Whether to apply the theme */
+		applyTheme?: boolean;
+		/** CSS class for the container */
+		class?: string;
+	}
+
+	const { theme, children, applyTheme = true, class: className = '' }: Props = $props();
+
+	// Get the Google Fonts URL if custom fonts are specified
+	const googleFontsUrl = $derived(
+		theme && 'headingFont' in theme
+			? getGoogleFontsUrl({
+					headingFont: (theme as ExtendedTheme).headingFont,
+					bodyFont: (theme as ExtendedTheme).bodyFont
+				})
+			: null
+	);
+
+	// Background image styles
+	const bgImageStyles = $derived(
+		theme && 'backgroundImage' in theme
+			? getBackgroundImageStyles((theme as ExtendedTheme).backgroundImage)
+			: {}
+	);
+
+	// Page width styles
+	const pageWidthStyles = $derived(
+		theme && 'pageWidth' in theme
+			? getPageWidthStyles(theme as ExtendedTheme)
+			: {}
+	);
+
+	// Font styles
+	const fontStyles = $derived(
+		theme && 'bodyFont' in theme
+			? getFontStyles(theme as ExtendedTheme)
+			: {}
+	);
+
+	// Theme CSS variables
+	const themeVars = $derived(applyTheme ? anyThemeToCssVars(theme) : {});
+
+	// Load Google Fonts on mount
+	onMount(() => {
+		if (googleFontsUrl) {
+			// Check if font link already exists
+			const existingLink = document.querySelector(`link[href="${googleFontsUrl}"]`);
+			if (!existingLink) {
+				const link = document.createElement('link');
+				link.rel = 'stylesheet';
+				link.href = googleFontsUrl;
+				document.head.appendChild(link);
+			}
+		}
+	});
+</script>
+
+<div
+	class="theme-provider {className}"
+	style:bg-image={bgImageStyles.backgroundImage ? 'url' : undefined}
+	style={Object.entries({ ...themeVars, ...fontStyles, ...pageWidthStyles })
+		.map(([k, v]) => `${k}: ${v}`)
+		.join('; ')}
+>
+	{#if googleFontsUrl}
+		<!-- Google Fonts will be loaded via onMount -->
+	{/if}
+
+	{@render children()}
+</div>
+
+<style>
+	.theme-provider {
+		min-height: 100%;
+		width: 100%;
+	}
+</style>

package/dist/components/ThemeProvider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { BasicTheme, ExtendedTheme } from '../types.js';
+interface Props {
+    theme?: BasicTheme | ExtendedTheme;
+    /** Child content */
+    children: import('svelte').Snippet;
+    /** Whether to apply the theme */
+    applyTheme?: boolean;
+    /** CSS class for the container */
+    class?: string;
+}
+declare const ThemeProvider: import("svelte").Component<Props, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;