@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/dist/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/dist/components/ActionBar.svelte.d.ts

@@ -0,0 +1,13 @@
+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;
+}
+declare const ActionBar: import("svelte").Component<Props, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/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>

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

@@ -0,0 +1,19 @@
+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;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/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 '../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/dist/components/Comment.svelte.d.ts

@@ -0,0 +1,22 @@
+import Comment from './Comment.svelte';
+import type { CommentRecord } from '../types.js';
+declare const Comment: import("svelte").Component<{
+    comment: CommentRecord & {
+        uri: string;
+        cid: string;
+        author: {
+            did: string;
+            handle?: string;
+            displayName?: string;
+            avatar?: string;
+        };
+        replies?: (CommentRecord & /*elided*/ any)[];
+    };
+    hasTheme?: boolean;
+    /** Whether to show the attachment/quote */
+    showQuote?: boolean;
+    /** Depth in the thread (for styling) */
+    depth?: number;
+}, {}, "">;
+type Comment = ReturnType<typeof Comment>;
+export default Comment;

package/dist/components/CommentsSection.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Comment from './Comment.svelte';
+	import { organizeCommentsIntoThreads } from '../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>