@ewanc26/svelte-standard-site 0.2.0

package/dist/components/Comments.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+	/**
+	 * Comments component for displaying Bluesky replies
+	 *
+	 * Fetches and displays threaded replies from Bluesky as comments on your blog.
+	 *
+	 * @example
+	 * ```svelte
+	 * <Comments
+	 *   bskyPostUri="at://did:plc:xxx/app.bsky.feed.post/abc123"
+	 *   canonicalUrl="https://yourblog.com/posts/my-post"
+	 *   maxDepth={3}
+	 * />
+	 * ```
+	 */
+
+	import { onMount } from 'svelte';
+	import { fetchComments, formatRelativeTime, type Comment } from '../utils/comments.js';
+	import { MessageSquare, ExternalLink, Heart } from '@lucide/svelte';
+
+	interface Props {
+		/** AT-URI of the Bluesky announcement post */
+		bskyPostUri: string;
+		/** Canonical URL of your blog post */
+		canonicalUrl: string;
+		/** Maximum nesting depth for replies (default: 3) */
+		maxDepth?: number;
+		/** Section title (default: "Comments") */
+		title?: string;
+		/** Show "Reply on Bluesky" link (default: true) */
+		showReplyLink?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		bskyPostUri,
+		canonicalUrl,
+		maxDepth = 3,
+		title = 'Comments',
+		showReplyLink = true,
+		class: className = ''
+	}: Props = $props();
+
+	let comments = $state<Comment[]>([]);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	// Convert AT-URI to HTTPS URL for the reply link
+	const bskyUrl = $derived.by(() => {
+		const match = bskyPostUri.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/(.+)$/);
+		if (!match) return null;
+		const [, did, rkey] = match;
+		// We'll need to resolve the DID to a handle, but for now use DID
+		return `https://bsky.app/profile/${did}/post/${rkey}`;
+	});
+
+	onMount(async () => {
+		try {
+			comments = await fetchComments({
+				bskyPostUri,
+				canonicalUrl,
+				maxDepth
+			});
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load comments';
+			console.error('Failed to fetch comments:', err);
+		} finally {
+			loading = false;
+		}
+	});
+
+	function CommentItem(comment: Comment) {
+		const authorUrl = `https://bsky.app/profile/${comment.author.handle}`;
+		const postUrl = $derived.by(() => {
+			const match = comment.uri.match(/^at:\/\/([^/]+)\/app\.bsky\.feed\.post\/(.+)$/);
+			if (!match) return null;
+			return `https://bsky.app/profile/${comment.author.handle}/post/${match[2]}`;
+		});
+
+		return {
+			comment,
+			authorUrl,
+			postUrl
+		};
+	}
+</script>
+
+<section class="comments-section {className}">
+	<header class="mb-6">
+		<h2 class="text-ink-900 dark:text-ink-50 flex items-center gap-2 text-2xl font-bold">
+			<MessageSquare size={24} />
+			{title}
+		</h2>
+		{#if showReplyLink && bskyUrl}
+			<a
+				href={bskyUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 mt-2 inline-flex items-center gap-1 text-sm transition-colors"
+			>
+				Reply on Bluesky
+				<ExternalLink size={14} />
+			</a>
+		{/if}
+	</header>
+
+	{#if loading}
+		<div class="text-ink-600 dark:text-ink-400 py-8 text-center">
+			<div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary-600 border-t-transparent"></div>
+			<p class="mt-2">Loading comments...</p>
+		</div>
+	{:else if error}
+		<div class="border-canvas-200 bg-canvas-100 dark:border-canvas-700 dark:bg-canvas-800 rounded-lg border p-4">
+			<p class="text-ink-900 dark:text-ink-50 font-medium">Failed to load comments</p>
+			<p class="text-ink-600 dark:text-ink-400 mt-1 text-sm">{error}</p>
+		</div>
+	{:else if comments.length === 0}
+		<div class="text-ink-600 dark:text-ink-400 py-8 text-center">
+			<MessageSquare size={48} class="mx-auto mb-2 opacity-50" />
+			<p>No comments yet. Be the first to comment!</p>
+			{#if showReplyLink && bskyUrl}
+				<a
+					href={bskyUrl}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 mt-2 inline-flex items-center gap-1 transition-colors"
+				>
+					Start the conversation on Bluesky
+					<ExternalLink size={14} />
+				</a>
+			{/if}
+		</div>
+	{:else}
+		<div class="space-y-4">
+			{#each comments as comment}
+				{@const item = CommentItem(comment)}
+				<article
+					class="border-canvas-200 bg-canvas-50 dark:border-canvas-700 dark:bg-canvas-900 rounded-lg border p-4"
+					style="margin-left: {comment.depth * 1.5}rem"
+				>
+					<header class="mb-2 flex items-start justify-between">
+						<div class="flex items-center gap-3">
+							{#if comment.author.avatar}
+								<img
+									src={comment.author.avatar}
+									alt={comment.author.displayName || comment.author.handle}
+									class="h-10 w-10 rounded-full"
+								/>
+							{:else}
+								<div class="bg-primary-200 dark:bg-primary-800 flex h-10 w-10 items-center justify-center rounded-full">
+									<span class="text-primary-900 dark:text-primary-100 text-sm font-bold">
+										{(comment.author.displayName || comment.author.handle)[0].toUpperCase()}
+									</span>
+								</div>
+							{/if}
+
+							<div>
+								<a
+									href={item.authorUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="text-ink-900 dark:text-ink-50 hover:text-primary-600 dark:hover:text-primary-400 font-medium transition-colors"
+								>
+									{comment.author.displayName || comment.author.handle}
+								</a>
+								<p class="text-ink-600 dark:text-ink-400 text-sm">@{comment.author.handle}</p>
+							</div>
+						</div>
+
+						<time class="text-ink-600 dark:text-ink-400 text-sm" datetime={comment.createdAt}>
+							{formatRelativeTime(comment.createdAt)}
+						</time>
+					</header>
+
+					<p class="text-ink-900 dark:text-ink-50 mb-3 whitespace-pre-wrap">{comment.text}</p>
+
+					<footer class="text-ink-600 dark:text-ink-400 flex items-center gap-4 text-sm">
+						{#if comment.likeCount > 0}
+							<span class="flex items-center gap-1">
+								<Heart size={14} />
+								{comment.likeCount}
+							</span>
+						{/if}
+
+						{#if item.postUrl}
+							<a
+								href={item.postUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="hover:text-primary-600 dark:hover:text-primary-400 flex items-center gap-1 transition-colors"
+							>
+								View on Bluesky
+								<ExternalLink size={12} />
+							</a>
+						{/if}
+					</footer>
+
+					{#if comment.replies && comment.replies.length > 0}
+						<div class="mt-4 space-y-4">
+							{#each comment.replies as reply}
+								{@const replyItem = CommentItem(reply)}
+								<article
+									class="border-canvas-200 bg-canvas-100 dark:border-canvas-600 dark:bg-canvas-800 rounded-lg border p-4"
+								>
+									<header class="mb-2 flex items-start justify-between">
+										<div class="flex items-center gap-3">
+											{#if reply.author.avatar}
+												<img
+													src={reply.author.avatar}
+													alt={reply.author.displayName || reply.author.handle}
+													class="h-8 w-8 rounded-full"
+												/>
+											{:else}
+												<div class="bg-primary-200 dark:bg-primary-800 flex h-8 w-8 items-center justify-center rounded-full">
+													<span class="text-primary-900 dark:text-primary-100 text-xs font-bold">
+														{(reply.author.displayName || reply.author.handle)[0].toUpperCase()}
+													</span>
+												</div>
+											{/if}
+
+											<div>
+												<a
+													href={replyItem.authorUrl}
+													target="_blank"
+													rel="noopener noreferrer"
+													class="text-ink-900 dark:text-ink-50 hover:text-primary-600 dark:hover:text-primary-400 text-sm font-medium transition-colors"
+												>
+													{reply.author.displayName || reply.author.handle}
+												</a>
+												<p class="text-ink-600 dark:text-ink-400 text-xs">@{reply.author.handle}</p>
+											</div>
+										</div>
+
+										<time class="text-ink-600 dark:text-ink-400 text-xs" datetime={reply.createdAt}>
+											{formatRelativeTime(reply.createdAt)}
+										</time>
+									</header>
+
+									<p class="text-ink-900 dark:text-ink-50 mb-2 whitespace-pre-wrap text-sm">{reply.text}</p>
+
+									<footer class="text-ink-600 dark:text-ink-400 flex items-center gap-4 text-xs">
+										{#if reply.likeCount > 0}
+											<span class="flex items-center gap-1">
+												<Heart size={12} />
+												{reply.likeCount}
+											</span>
+										{/if}
+
+										{#if replyItem.postUrl}
+											<a
+												href={replyItem.postUrl}
+												target="_blank"
+												rel="noopener noreferrer"
+												class="hover:text-primary-600 dark:hover:text-primary-400 flex items-center gap-1 transition-colors"
+											>
+												View on Bluesky
+												<ExternalLink size={10} />
+											</a>
+										{/if}
+									</footer>
+								</article>
+							{/each}
+						</div>
+					{/if}
+				</article>
+			{/each}
+		</div>
+	{/if}
+</section>
+
+<style>
+	.comments-section {
+		margin-top: 3rem;
+		margin-bottom: 3rem;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+interface Props {
+    /** AT-URI of the Bluesky announcement post */
+    bskyPostUri: string;
+    /** Canonical URL of your blog post */
+    canonicalUrl: string;
+    /** Maximum nesting depth for replies (default: 3) */
+    maxDepth?: number;
+    /** Section title (default: "Comments") */
+    title?: string;
+    /** Show "Reply on Bluesky" link (default: true) */
+    showReplyLink?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const Comments: import("svelte").Component<Props, {}, "">;
+type Comments = ReturnType<typeof Comments>;
+export default Comments;

package/dist/components/DocumentCard.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { Document, Publication, AtProtoRecord } from '../types.js';
+	import { extractRkey } from '../index.js';
+	import { ThemedCard, ThemedText, DateDisplay, TagList } from './index.js';
+
+	interface Props {
+		document: AtProtoRecord<Document>;
+		publication?: AtProtoRecord<Publication>;
+		class?: string;
+		showCover?: boolean;
+		href?: string;
+	}
+
+	const {
+		document,
+		publication,
+		class: className = '',
+		showCover = true,
+		href: customHref
+	}: Props = $props();
+
+	const value = $derived(document.value);
+	const hasTheme = $derived(!!publication?.value.basicTheme);
+
+	const pubRkey = $derived(extractRkey(value.site));
+	const docRkey = $derived(extractRkey(document.uri));
+	const href = $derived(customHref || `/${pubRkey}/${docRkey}`);
+</script>
+
+<ThemedCard
+	theme={publication?.value.basicTheme}
+	{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}
+
+		<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 value.tags && value.tags.length > 0}
+			<TagList tags={value.tags} {hasTheme} />
+		{/if}
+	</div>
+</ThemedCard>

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

@@ -0,0 +1,11 @@
+import type { Document, Publication, AtProtoRecord } from '../types.js';
+interface Props {
+    document: AtProtoRecord<Document>;
+    publication?: AtProtoRecord<Publication>;
+    class?: string;
+    showCover?: boolean;
+    href?: string;
+}
+declare const DocumentCard: import("svelte").Component<Props, {}, "">;
+type DocumentCard = ReturnType<typeof DocumentCard>;
+export default DocumentCard;

package/dist/components/PublicationCard.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Publication, AtProtoRecord } from '../types.js';
+	import { ThemedCard, ThemedText } from './index.js';
+	import { ExternalLink } from '@lucide/svelte';
+
+	interface Props {
+		publication: AtProtoRecord<Publication>;
+		class?: string;
+		showExternalIcon?: boolean;
+	}
+
+	const { publication, class: className = '', showExternalIcon = true }: Props = $props();
+
+	const value = $derived(publication.value);
+	const hasTheme = $derived(!!value.basicTheme);
+</script>
+
+<ThemedCard theme={value.basicTheme} class="focus-within:shadow-lg hover:shadow-lg {className}">
+	<div class="mb-4 flex gap-4">
+		{#if value.icon}
+			<img
+				src={value.icon}
+				alt="{value.name} icon"
+				class="size-16 shrink-0 rounded-lg object-cover"
+			/>
+		{/if}
+		<div class="min-w-0 flex-1">
+			<ThemedText {hasTheme} element="h3" class="mb-2 text-xl font-semibold">
+				{value.name}
+			</ThemedText>
+			{#if value.description}
+				<ThemedText {hasTheme} opacity={70} element="p" class="text-sm">
+					{value.description}
+				</ThemedText>
+			{/if}
+		</div>
+	</div>
+	<a
+		href={value.url}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="inline-flex items-center gap-2 font-medium transition-opacity hover:opacity-80 focus-visible:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2"
+		class:text-primary-600={!hasTheme}
+		class:dark:text-primary-400={!hasTheme}
+		class:focus-visible:outline-primary-600={!hasTheme}
+		style:color={hasTheme ? 'var(--theme-accent)' : undefined}
+		style:outline-color={hasTheme ? 'var(--theme-accent)' : undefined}
+	>
+		Visit Site
+		{#if showExternalIcon}
+			<ExternalLink class="size-4" aria-hidden="true" />
+		{/if}
+	</a>
+</ThemedCard>

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

@@ -0,0 +1,9 @@
+import type { Publication, AtProtoRecord } from '../types.js';
+interface Props {
+    publication: AtProtoRecord<Publication>;
+    class?: string;
+    showExternalIcon?: boolean;
+}
+declare const PublicationCard: import("svelte").Component<Props, {}, "">;
+type PublicationCard = ReturnType<typeof PublicationCard>;
+export default PublicationCard;

package/dist/components/StandardSiteLayout.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ThemeToggle from './ThemeToggle.svelte';
+
+	interface Props {
+		/** Site title */
+		title?: string;
+		/** Header slot for custom header content */
+		header?: Snippet;
+		/** Footer slot for custom footer content */
+		footer?: Snippet;
+		/** Main content */
+		children: Snippet;
+		/** Additional CSS classes for the main container */
+		class?: string;
+		/** Show theme toggle in default header */
+		showThemeToggle?: boolean;
+	}
+
+	let {
+		title = 'My Site',
+		header,
+		footer,
+		children,
+		class: className = '',
+		showThemeToggle = true
+	}: Props = $props();
+</script>
+
+<svelte:head>
+	<script>
+		// Prevent flash of unstyled content (FOUC) by applying theme before page renders
+		(function () {
+			const stored = localStorage.getItem('theme');
+			const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+			const isDark = stored === 'dark' || (!stored && prefersDark);
+			const htmlElement = document.documentElement;
+
+			if (isDark) {
+				htmlElement.classList.add('dark');
+				htmlElement.style.colorScheme = 'dark';
+			} else {
+				htmlElement.classList.remove('dark');
+				htmlElement.style.colorScheme = 'light';
+			}
+		})();
+	</script>
+</svelte:head>
+
+<div
+	class="bg-canvas-50 text-ink-900 dark:bg-canvas-950 dark:text-ink-50 flex min-h-screen flex-col overflow-x-hidden"
+>
+	{#if header}
+		{@render header()}
+	{:else}
+		<header
+			class="border-canvas-200 bg-canvas-50/90 dark:border-canvas-800 dark:bg-canvas-950/90 sticky top-0 z-50 w-full border-b backdrop-blur-md"
+		>
+			<nav
+				class="container mx-auto flex items-center justify-between px-4 py-4"
+				aria-label="Main navigation"
+			>
+				<a
+					href="/"
+					class="text-ink-900 hover:text-primary-600 focus-visible:text-primary-600 focus-visible:outline-primary-600 dark:text-ink-50 dark:hover:text-primary-400 dark:focus-visible:text-primary-400 text-xl font-bold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2"
+				>
+					{title}
+				</a>
+
+				{#if showThemeToggle}
+					<ThemeToggle />
+				{/if}
+			</nav>
+		</header>
+	{/if}
+
+	<main id="main-content" class="container mx-auto grow px-4 py-8 {className}" tabindex="-1">
+		{@render children()}
+	</main>
+
+	{#if footer}
+		{@render footer()}
+	{:else}
+		<footer
+			class="border-canvas-200 bg-canvas-50 dark:border-canvas-800 dark:bg-canvas-950 mt-auto w-full border-t py-6"
+		>
+			<div class="text-ink-700 dark:text-ink-200 container mx-auto px-4 text-center text-sm">
+				<p>
+					&copy; {new Date().getFullYear()}
+					{title}. Powered by svelte-standard-site and the AT Protocol. Created by
+					<a
+						href="https://ewancroft.uk"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="text-primary-600 hover:text-primary-700 focus-visible:outline-primary-600 dark:text-primary-400 dark:hover:text-primary-500 font-semibold transition focus-visible:outline-2 focus-visible:outline-offset-2"
+						>Ewan Croft</a
+					>.
+				</p>
+			</div>
+		</footer>
+	{/if}
+</div>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Site title */
+    title?: string;
+    /** Header slot for custom header content */
+    header?: Snippet;
+    /** Footer slot for custom footer content */
+    footer?: Snippet;
+    /** Main content */
+    children: Snippet;
+    /** Additional CSS classes for the main container */
+    class?: string;
+    /** Show theme toggle in default header */
+    showThemeToggle?: boolean;
+}
+declare const StandardSiteLayout: import("svelte").Component<Props, {}, "">;
+type StandardSiteLayout = ReturnType<typeof StandardSiteLayout>;
+export default StandardSiteLayout;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Sun, Moon } from '@lucide/svelte';
+	import { themeStore } from '../stores/index.js';
+
+	interface Props {
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	let isDark = $state(false);
+	let mounted = $state(false);
+
+	onMount(() => {
+		themeStore.init();
+
+		const unsubscribe = themeStore.subscribe((state) => {
+			isDark = state.isDark;
+			mounted = state.mounted;
+		});
+
+		return unsubscribe;
+	});
+
+	function toggle() {
+		themeStore.toggle();
+	}
+</script>
+
+<button
+	onclick={toggle}
+	class="bg-canvas-200 text-ink-900 hover:bg-canvas-300 focus-visible:outline-primary-600 dark:bg-canvas-800 dark:text-ink-50 dark:hover:bg-canvas-700 relative flex h-10 w-10 items-center justify-center rounded-lg transition-all focus-visible:outline-2 focus-visible:outline-offset-2 {className}"
+	aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+	type="button"
+>
+	{#if mounted}
+		<div class="relative h-5 w-5">
+			<Sun
+				class="absolute inset-0 h-5 w-5 transition-all duration-300 {isDark
+					? 'scale-0 -rotate-90 opacity-0'
+					: 'scale-100 rotate-0 opacity-100'}"
+				aria-hidden="true"
+			/>
+			<Moon
+				class="absolute inset-0 h-5 w-5 transition-all duration-300 {isDark
+					? 'scale-100 rotate-0 opacity-100'
+					: 'scale-0 rotate-90 opacity-0'}"
+				aria-hidden="true"
+			/>
+		</div>
+	{:else}
+		<div class="bg-canvas-300 dark:bg-canvas-700 h-5 w-5 animate-pulse rounded"></div>
+	{/if}
+</button>

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

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/common/DateDisplay.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	interface Props {
+		date: string;
+		label?: string;
+		class?: string;
+		showIcon?: boolean;
+		style?: string;
+		locale?: string;
+	}
+
+	let { date, label, class: className = '', showIcon = false, style, locale }: Props = $props();
+
+	function formatDate(dateString: string): string {
+		// Use browser's locale if not specified
+		const userLocale = locale || navigator.language || 'en-US';
+
+		return new Date(dateString).toLocaleDateString(userLocale, {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		});
+	}
+</script>
+
+<time datetime={date} class={className} {style}>
+	{#if showIcon}
+		<svg class="inline size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+			/>
+		</svg>
+	{/if}
+	{#if label}{label}{/if}
+	{formatDate(date)}
+</time>