@ewanc26/svelte-standard-site 0.2.2 → 0.2.4

package/src/lib/components/document/blocks/OrderedListBlock.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import RichText from '../RichText.svelte';
+	import OrderedListBlock from './OrderedListBlock.svelte';
+	import UnorderedListBlock from './UnorderedListBlock.svelte';
+	import HeaderBlock from './HeaderBlock.svelte';
+	import ImageBlock from './ImageBlock.svelte';
+
+	interface OrderedListContent {
+		plaintext: string;
+		facets?: any[];
+		textSize?: 'default' | 'small' | 'large';
+		level?: number;
+		image?: {
+			$type?: 'blob';
+			ref?: { $link: string };
+			mimeType?: string;
+			size?: number;
+		};
+		alt?: string;
+		aspectRatio?: { width: number; height: number };
+	}
+
+	interface OrderedListItem {
+		content?: OrderedListContent;
+		checked?: boolean;
+		children?: OrderedListItem[];
+		unorderedListChildren?: {
+			children: Array<{
+				content?: { plaintext: string; facets?: any[] };
+				children?: OrderedListItem[];
+			}>;
+		};
+	}
+
+	interface Props {
+		block: {
+			children: OrderedListItem[];
+			startIndex?: number;
+		};
+		hasTheme?: boolean;
+		did?: string;
+		pds?: string;
+	}
+
+	const { block, hasTheme = false, did = '', pds = '' }: Props = $props();
+
+	function isTextContent(content: OrderedListContent): boolean {
+		return !!(content?.plaintext && content.level === undefined && !content.image);
+	}
+
+	function isHeaderContent(content: OrderedListContent): boolean {
+		return !!(content?.level !== undefined);
+	}
+
+	function isImageContent(content: OrderedListContent): boolean {
+		return !!(content?.image);
+	}
+</script>
+
+<ol class="ordered-list pb-2" start={block.startIndex}>
+	{#each block.children as item, i}
+		<li class="flex flex-row gap-2 pb-0">
+			{#if item.checked !== undefined}
+				<!-- Checklist item -->
+				<div
+					class="checkbox-marker z-1 mx-2 mt-3.5 h-4 w-4 shrink-0 rounded border-2 flex items-center justify-center"
+					class:themed={hasTheme}
+					class:checked={item.checked}
+				>
+					{#if item.checked}
+						<svg class="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
+							<path d="M10.28 2.28L4.5 8.06 1.72 5.28 1 6l3.5 3.5 6.5-6.5-.72-.72z" />
+						</svg>
+					{/if}
+				</div>
+			{:else}
+				<!-- Regular numbered item -->
+				<div
+					class="list-number z-1 mx-2 mt-1 h-6 w-6 shrink-0 flex items-center justify-center text-sm font-medium"
+					class:themed={hasTheme}
+				>
+					{(block.startIndex || 1) + i}
+				</div>
+			{/if}
+
+			<div class="flex w-full flex-col">
+				{#if item.content}
+					<div class="textBlock mt-1 mb-2">
+						{#if isTextContent(item.content)}
+							<RichText plaintext={item.content.plaintext} facets={item.content.facets} {hasTheme} />
+						{:else if isHeaderContent(item.content)}
+							<HeaderBlock block={item.content as any} {hasTheme} />
+						{:else if isImageContent(item.content)}
+							<ImageBlock block={item.content as any} {did} {pds} {hasTheme} />
+						{/if}
+					</div>
+				{/if}
+
+				{#if item.children && item.children.length > 0}
+					<OrderedListBlock block={{ children: item.children }} {hasTheme} {did} {pds} />
+				{/if}
+
+				{#if item.unorderedListChildren && item.unorderedListChildren.children.length > 0}
+					<UnorderedListBlock block={{ children: item.unorderedListChildren.children }} {hasTheme} />
+				{/if}
+			</div>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	.ordered-list {
+		list-style: none;
+		padding-left: 0;
+		margin-left: -1px;
+		counter-reset: item;
+	}
+
+	@media (min-width: 640px) {
+		.ordered-list {
+			margin-left: 9px;
+		}
+	}
+
+	.list-number {
+		color: rgb(107 114 128);
+	}
+
+	.list-number.themed {
+		color: var(--theme-accent);
+	}
+
+	.checkbox-marker {
+		border-color: rgb(107 114 128);
+		background-color: transparent;
+	}
+
+	.checkbox-marker.themed {
+		border-color: var(--theme-accent);
+	}
+
+	.checkbox-marker.checked {
+		background-color: rgb(107 114 128);
+		border-color: rgb(107 114 128);
+		color: white;
+	}
+
+	.checkbox-marker.checked.themed {
+		background-color: var(--theme-accent);
+		border-color: var(--theme-accent);
+	}
+</style>

package/src/lib/components/document/blocks/UnorderedListBlock.svelte

@@ -2,7 +2,7 @@
 	import RichText from '../RichText.svelte';
 	import UnorderedListBlock from './UnorderedListBlock.svelte';
 
-	export interface ListItem {
+	interface ListItem {
 		content?: {
 			plaintext: string;
 			facets?: any[];

package/src/lib/components/index.ts

@@ -13,3 +13,35 @@ export { default as ThemedCard } from './common/ThemedCard.svelte';
 // Document rendering
 export { default as DocumentRenderer } from './document/DocumentRenderer.svelte';
 export { default as MarkdownRenderer } from './document/MarkdownRenderer.svelte';
+export { default as LinearDocumentRenderer } from './document/LinearDocumentRenderer.svelte';
+export { default as CanvasRenderer } from './document/CanvasRenderer.svelte';
+export { default as BlockRenderer } from './document/BlockRenderer.svelte';
+export { default as RichText } from './document/RichText.svelte';
+
+// Block components
+export { default as TextBlock } from './document/blocks/TextBlock.svelte';
+export { default as HeaderBlock } from './document/blocks/HeaderBlock.svelte';
+export { default as BlockquoteBlock } from './document/blocks/BlockquoteBlock.svelte';
+export { default as ImageBlock } from './document/blocks/ImageBlock.svelte';
+export { default as CodeBlock } from './document/blocks/CodeBlock.svelte';
+export { default as MathBlock } from './document/blocks/MathBlock.svelte';
+export { default as UnorderedListBlock } from './document/blocks/UnorderedListBlock.svelte';
+export { default as OrderedListBlock } from './document/blocks/OrderedListBlock.svelte';
+export { default as HorizontalRuleBlock } from './document/blocks/HorizontalRuleBlock.svelte';
+export { default as IframeBlock } from './document/blocks/IframeBlock.svelte';
+export { default as WebsiteBlock } from './document/blocks/WebsiteBlock.svelte';
+export { default as ButtonBlock } from './document/blocks/ButtonBlock.svelte';
+export { default as BskyPostBlock } from './document/blocks/BskyPostBlock.svelte';
+export { default as PollBlock } from './document/blocks/PollBlock.svelte';
+export { default as PageBlock } from './document/blocks/PageBlock.svelte';
+
+// UI components
+export { default as Avatar } from './Avatar.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Watermark } from './Watermark.svelte';
+export { default as ActionBar } from './ActionBar.svelte';
+export { default as RecommendButton } from './RecommendButton.svelte';
+export { default as ThemeProvider } from './ThemeProvider.svelte';
+export { default as Footnotes } from './Footnotes.svelte';
+export { default as Comment } from './Comment.svelte';
+export { default as CommentsSection } from './CommentsSection.svelte';

package/src/lib/index.ts

@@ -14,7 +14,35 @@ export {
 	ThemedText,
 	ThemedCard,
 	DocumentRenderer,
-	MarkdownRenderer
+	MarkdownRenderer,
+	LinearDocumentRenderer,
+	CanvasRenderer,
+	BlockRenderer,
+	RichText,
+	TextBlock,
+	HeaderBlock,
+	BlockquoteBlock,
+	ImageBlock,
+	CodeBlock,
+	MathBlock,
+	UnorderedListBlock,
+	OrderedListBlock,
+	HorizontalRuleBlock,
+	IframeBlock,
+	WebsiteBlock,
+	ButtonBlock,
+	BskyPostBlock,
+	PollBlock,
+	PageBlock,
+	Avatar,
+	Toast,
+	Watermark,
+	ActionBar,
+	RecommendButton,
+	ThemeProvider,
+	Footnotes,
+	Comment,
+	CommentsSection
 } from './components/index.js';
 
 // Comments component
@@ -28,13 +56,66 @@ export type {
 	AtProtoBlob,
 	StrongRef,
 	RGBColor,
+	RGBAColor,
+	Color,
+	BackgroundImage,
 	BasicTheme,
+	ExtendedTheme,
 	PublicationPreferences,
 	Publication,
 	Document,
 	AtProtoRecord,
 	ResolvedIdentity,
-	SiteStandardConfig
+	SiteStandardConfig,
+	// Rich text types
+	ByteSlice,
+	LinkFeature,
+	DidMentionFeature,
+	AtMentionFeature,
+	CodeFeature,
+	HighlightFeature,
+	UnderlineFeature,
+	StrikethroughFeature,
+	BoldFeature,
+	ItalicFeature,
+	IdFeature,
+	FootnoteFeature,
+	FacetFeature,
+	Facet,
+	// Block types
+	TextBlock,
+	HeaderBlock,
+	BlockquoteBlock,
+	ImageBlock,
+	CodeBlock,
+	MathBlock,
+	OrderedListItem,
+	OrderedListBlock,
+	UnorderedListItem,
+	UnorderedListBlock,
+	HorizontalRuleBlock,
+	IframeBlock,
+	WebsiteBlock,
+	ButtonBlock,
+	BskyPostBlock,
+	PollBlock,
+	PageBlock,
+	Block,
+	// Content types
+	Position,
+	Quote,
+	LinearDocumentPage,
+	CanvasPage,
+	Content,
+	// Comment types
+	LinearDocumentQuote,
+	CommentReplyRef,
+	CommentRecord,
+	// Interaction types
+	RecommendRecord,
+	// Graph types
+	SubscriptionRecord,
+	LeafletSubscriptionRecord
 } from './types.js';
 
 // Schema exports
@@ -53,7 +134,21 @@ export { resolveIdentity, buildPdsBlobUrl } from './utils/agents.js';
 
 export { cache } from './utils/cache.js';
 
-export { rgbToCSS, rgbToHex, getThemeVars } from './utils/theme.js';
+export {
+	rgbToCSS,
+	rgbaToCSS,
+	colorToCSS,
+	rgbToHex,
+	rgbaToHex,
+	getThemeVars,
+	isRGBA,
+	basicThemeToCssVars,
+	extendedThemeToCssVars,
+	themeToCssVars as anyThemeToCssVars,
+	getFontFamilyCSS,
+	getGoogleFontsUrl,
+	getAllThemeVars
+} from './utils/theme.js';
 
 export {
 	mixThemeColor,
@@ -61,7 +156,14 @@ export {
 	getThemedBackground,
 	getThemedBorder,
 	getThemedAccent,
-	themeToCssVars
+	getThemedPageBackground,
+	getBackgroundImageStyles,
+	getFontStyles,
+	getHeadingFontStyles,
+	getPageWidthStyles,
+	themeToCssVars,
+	extendedThemeToCssVars,
+	anyThemeToCssVars
 } from './utils/theme-helpers.js';
 
 export {
@@ -83,11 +185,23 @@ export {
 
 export type { TransformOptions, TransformResult } from './utils/content.js';
 
-// Comments exports
+// Comments exports (Bluesky replies)
 export { fetchComments, fetchMentionComments, formatRelativeTime } from './utils/comments.js';
 
 export type { Comment, CommentAuthor, FetchCommentsOptions } from './utils/comments.js';
 
+// Native comments exports
+export {
+	COMMENTS_COLLECTION,
+	createCommentRecord,
+	parseCommentUri,
+	buildCommentUri,
+	fetchComments as fetchNativeComments,
+	organizeCommentsIntoThreads,
+	countThreadComments,
+	extractQuotedText
+} from './utils/native-comments.js';
+
 // Verification exports
 export {
 	generatePublicationWellKnown,

package/src/lib/publisher.ts

@@ -484,6 +484,257 @@ export class StandardSitePublisher {
 	getAtpAgent(): AtpAgent {
 		return this.getAgent();
 	}
+
+	// ============================================
+	// Comment Methods (pub.leaflet.comment)
+	// ============================================
+
+	/**
+	 * Publish a comment on a document
+	 */
+	async publishComment(input: {
+		/** AT-URI of the document being commented on */
+		subject: string;
+		/** Comment text */
+		plaintext: string;
+		/** Facets for rich text */
+		facets?: any[];
+		/** Parent comment AT-URI if replying */
+		parent?: string;
+		/** Page ID if commenting on a specific page */
+		onPage?: string;
+		/** Quote attachment */
+		attachment?: {
+			document: string;
+			quote?: {
+				start: { block: number[]; offset: number };
+				end: { block: number[]; offset: number };
+			};
+		};
+	}): Promise<PublishResult> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const record: any = {
+			$type: 'pub.leaflet.comment',
+			subject: input.subject,
+			plaintext: input.plaintext,
+			createdAt: new Date().toISOString()
+		};
+
+		if (input.parent) {
+			record.reply = {
+				$type: 'pub.leaflet.comment#replyRef',
+				parent: input.parent
+			};
+		}
+
+		if (input.facets) {
+			record.facets = input.facets;
+		}
+
+		if (input.onPage) {
+			record.onPage = input.onPage;
+		}
+
+		if (input.attachment) {
+			record.attachment = {
+				$type: 'pub.leaflet.comment#linearDocumentQuote',
+				...input.attachment
+			};
+		}
+
+		const rkey = generateTid();
+
+		const response = await agent.api.com.atproto.repo.createRecord({
+			repo: did,
+			collection: 'pub.leaflet.comment',
+			rkey,
+			record
+		});
+
+		return {
+			uri: response.data.uri,
+			cid: response.data.cid
+		};
+	}
+
+	/**
+	 * Delete a comment
+	 */
+	async deleteComment(rkey: string): Promise<void> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		await agent.api.com.atproto.repo.deleteRecord({
+			repo: did,
+			collection: 'pub.leaflet.comment',
+			rkey
+		});
+	}
+
+	// ============================================
+	// Recommend Methods (pub.leaflet.interactions.recommend)
+	// ============================================
+
+	/**
+	 * Recommend a document
+	 */
+	async recommendDocument(subject: string): Promise<PublishResult> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const record = {
+			$type: 'pub.leaflet.interactions.recommend',
+			subject,
+			createdAt: new Date().toISOString()
+		};
+
+		const rkey = generateTid();
+
+		const response = await agent.api.com.atproto.repo.createRecord({
+			repo: did,
+			collection: 'pub.leaflet.interactions.recommend',
+			rkey,
+			record
+		});
+
+		return {
+			uri: response.data.uri,
+			cid: response.data.cid
+		};
+	}
+
+	/**
+	 * Remove a recommendation
+	 */
+	async unrecommendDocument(rkey: string): Promise<void> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		await agent.api.com.atproto.repo.deleteRecord({
+			repo: did,
+			collection: 'pub.leaflet.interactions.recommend',
+			rkey
+		});
+	}
+
+	/**
+	 * Check if the current user has recommended a document
+	 */
+	async hasRecommended(subject: string): Promise<{ recommended: boolean; rkey?: string }> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const response = await agent.api.com.atproto.repo.listRecords({
+			repo: did,
+			collection: 'pub.leaflet.interactions.recommend',
+			limit: 100
+		});
+
+		const record = response.data.records.find(
+			(r: any) => r.value?.subject === subject
+		);
+
+		if (record) {
+			const rkey = record.uri.split('/').pop();
+			return { recommended: true, rkey };
+		}
+
+		return { recommended: false };
+	}
+
+	// ============================================
+	// Subscription Methods (site.standard.graph.subscription)
+	// ============================================
+
+	/**
+	 * Subscribe to a publication
+	 */
+	async subscribeToPublication(publication: string): Promise<PublishResult> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const record = {
+			$type: 'site.standard.graph.subscription',
+			publication
+		};
+
+		const rkey = generateTid();
+
+		const response = await agent.api.com.atproto.repo.createRecord({
+			repo: did,
+			collection: 'site.standard.graph.subscription',
+			rkey,
+			record
+		});
+
+		return {
+			uri: response.data.uri,
+			cid: response.data.cid
+		};
+	}
+
+	/**
+	 * Unsubscribe from a publication
+	 */
+	async unsubscribeFromPublication(rkey: string): Promise<void> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		await agent.api.com.atproto.repo.deleteRecord({
+			repo: did,
+			collection: 'site.standard.graph.subscription',
+			rkey
+		});
+	}
+
+	/**
+	 * List subscriptions for the current user
+	 */
+	async listSubscriptions(
+		limit = 100
+	): Promise<Array<{ uri: string; cid: string; value: { publication: string } }>> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const response = await agent.api.com.atproto.repo.listRecords({
+			repo: did,
+			collection: 'site.standard.graph.subscription',
+			limit
+		});
+
+		return response.data.records.map((r) => ({
+			uri: r.uri,
+			cid: r.cid,
+			value: r.value as { publication: string }
+		}));
+	}
+
+	/**
+	 * Check if subscribed to a publication
+	 */
+	async isSubscribed(publication: string): Promise<{ subscribed: boolean; rkey?: string }> {
+		const did = this.getDid();
+		const agent = this.getAgent();
+
+		const response = await agent.api.com.atproto.repo.listRecords({
+			repo: did,
+			collection: 'site.standard.graph.subscription',
+			limit: 100
+		});
+
+		const record = response.data.records.find(
+			(r: any) => r.value?.publication === publication
+		);
+
+		if (record) {
+			const rkey = record.uri.split('/').pop();
+			return { subscribed: true, rkey };
+		}
+
+		return { subscribed: false };
+	}
 }
 
 export type { PublisherConfig };