@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/src/lib/components/Comment.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import RichText from './document/RichText.svelte';
+	import Comment from './Comment.svelte';
+	import type { CommentRecord, LinearDocumentQuote } from '$lib/types.js';
+
+	interface CommentProps extends CommentRecord {
+		uri: string;
+		cid: string;
+		author: {
+			did: string;
+			handle?: string;
+			displayName?: string;
+			avatar?: string;
+		};
+		replies?: CommentProps[];
+	}
+
+	interface Props {
+		comment: CommentProps;
+		hasTheme?: boolean;
+		/** Whether to show the attachment/quote */
+		showQuote?: boolean;
+		/** Depth in the thread (for styling) */
+		depth?: number;
+	}
+
+	const { comment, hasTheme = false, showQuote = true, depth = 0 }: Props = $props();
+
+	// Format date
+	const formattedDate = $derived(
+		new Date(comment.createdAt).toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		})
+	);
+
+	// Author display name
+	const authorName = $derived(
+		comment.author.displayName || comment.author.handle || comment.author.did
+	);
+
+	// Author profile URL
+	const authorUrl = $derived(`https://leaflet.pub/p/${comment.author.did}`);
+
+	// Quote text extraction
+	const quoteText = $derived(
+		comment.attachment?.quote ? extractQuotePreview(comment.attachment) : null
+	);
+
+	function extractQuotePreview(quote: LinearDocumentQuote): string {
+		if (quote.quote) {
+			return `Quote from block ${quote.quote.start.block.join('.')}`;
+		}
+		return 'Document quote';
+	}
+</script>
+
+<article
+	class="comment"
+	class:themed={hasTheme}
+	class:reply={depth > 0}
+	style:padding-left={depth > 0 ? '1rem' : undefined}
+>
+	<header class="comment-header flex items-center gap-3 mb-2">
+		{#if comment.author.avatar}
+			<img
+				src={comment.author.avatar}
+				alt={authorName}
+				class="w-8 h-8 rounded-full"
+			/>
+		{:else}
+			<div
+				class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium"
+				class:themed={hasTheme}
+			>
+				{authorName.charAt(0).toUpperCase()}
+			</div>
+		{/if}
+
+		<div class="flex-1 min-w-0">
+			<a
+				href={authorUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="author-name font-medium hover:underline"
+				class:themed={hasTheme}
+			>
+				{authorName}
+			</a>
+			{#if comment.author.handle}
+				<span class="author-handle text-sm opacity-60">@{comment.author.handle}</span>
+			{/if}
+		</div>
+
+		<time datetime={comment.createdAt} class="text-sm opacity-60">
+			{formattedDate}
+		</time>
+	</header>
+
+	<div class="comment-body">
+		{#if showQuote && comment.attachment}
+			<blockquote class="quote-attachment mb-2 px-3 py-2 border-l-2 text-sm opacity-80">
+				{quoteText}
+			</blockquote>
+		{/if}
+
+		<div class="comment-text">
+			<RichText plaintext={comment.plaintext} facets={comment.facets} {hasTheme} />
+		</div>
+	</div>
+
+	{#if comment.replies && comment.replies.length > 0}
+		<div class="replies mt-4 space-y-4 border-l-2 pl-4">
+			{#each comment.replies as reply}
+				<Comment comment={reply} {hasTheme} {showQuote} depth={depth + 1} />
+			{/each}
+		</div>
+	{/if}
+</article>
+
+<style>
+	.comment {
+		padding: 1rem;
+		border-radius: 0.5rem;
+		background-color: rgb(249 250 251);
+	}
+
+	.comment.themed {
+		background-color: color-mix(in srgb, var(--theme-foreground) 5%, transparent);
+	}
+
+	.comment.reply {
+		background-color: transparent;
+	}
+
+	.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);
+	}
+
+	.author-name {
+		color: rgb(0 0 0);
+	}
+
+	.author-name.themed {
+		color: var(--theme-foreground);
+	}
+
+	.quote-attachment {
+		border-color: rgb(209 213 219);
+		background-color: rgb(255 255 255);
+	}
+
+	.comment:global(.themed) .quote-attachment {
+		border-color: color-mix(in srgb, var(--theme-foreground) 20%, transparent);
+		background-color: color-mix(in srgb, var(--theme-background) 50%, transparent);
+	}
+
+	.replies {
+		border-color: rgb(229 231 235);
+	}
+
+	.replies:global(.themed) {
+		border-color: color-mix(in srgb, var(--theme-foreground) 10%, transparent);
+	}
+</style>

package/src/lib/components/CommentsSection.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Comment from './Comment.svelte';
+	import { organizeCommentsIntoThreads } from '$lib/utils/native-comments.js';
+
+	interface CommentProps {
+		uri: string;
+		cid: string;
+		author: {
+			did: string;
+			handle?: string;
+			displayName?: string;
+			avatar?: string;
+		};
+		replies?: CommentProps[];
+		$type: 'pub.leaflet.comment';
+		subject: string;
+		plaintext: string;
+		createdAt: string;
+		facets?: any[];
+		attachment?: any;
+	}
+
+	interface Props {
+		/** AT-URI of the document */
+		subject: string;
+		/** Raw comments from API */
+		comments?: Array<any>;
+		/** Pre-organized comment threads */
+		threads?: CommentProps[];
+		hasTheme?: boolean;
+		/** Show quote attachments */
+		showQuotes?: boolean;
+	}
+
+	const { subject, comments = [], threads: propThreads, hasTheme = false, showQuotes = true }: Props = $props();
+
+	// Organize comments into threads if not provided
+	const commentThreads = $derived(
+		propThreads ?? organizeCommentsIntoThreads(comments)
+	);
+
+	// Total comment count
+	const totalComments = $derived(
+		commentThreads.reduce((sum, thread) => sum + countThread(thread), 0)
+	);
+
+	function countThread(thread: any): number {
+		let count = 1;
+		if (thread.replies) {
+			for (const reply of thread.replies) {
+				count += countThread(reply);
+			}
+		}
+		return count;
+	}
+</script>
+
+<section class="comments-section" class:themed={hasTheme}>
+	<header class="comments-header mb-6">
+		<h2 class="text-xl font-semibold">
+			Comments
+			{#if totalComments > 0}
+				<span class="text-sm font-normal opacity-60">({totalComments})</span>
+			{/if}
+		</h2>
+	</header>
+
+	{#if commentThreads.length === 0}
+		<p class="text-sm opacity-60">No comments yet.</p>
+	{:else}
+		<div class="comments-list space-y-4">
+			{#each commentThreads as thread}
+				<Comment comment={thread} {hasTheme} showQuote={showQuotes} />
+			{/each}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.comments-section {
+		margin-top: 2rem;
+		padding-top: 2rem;
+		border-top: 1px solid rgb(229 231 235);
+	}
+
+	.comments-section.themed {
+		border-top-color: color-mix(in srgb, var(--theme-foreground) 10%, transparent);
+	}
+</style>

package/src/lib/components/DocumentCard.svelte

@@ -2,6 +2,7 @@
 	import type { Document, Publication, AtProtoRecord } from '../types.js';
 	import { extractRkey } from '$lib/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/src/lib/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/src/lib/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>