<script>
+ export let id;
+
import { _ } from 'svelte-i18n';
- import Glyph from '../glyph/glyph.svelte';
-</script>
+ import { getPost } from '$/stores/post';
+ import PostContent from '$/components/post_content/post_content.svelte';
+ import ErrorBlock from '$/components/error_block/error_block.svelte';
+ import Loader from '$/components/loader/loader.svelte';
-<aside class="post-meta" title="{$_('post.metadata_title', { values: { count: 2, total: 2 } })}">
- <Glyph uuid="b33f0339f7d64d1ca27f1c0aefb7d753" />
- <span class="h-card">
- {$_('post.author_credit')} <a href="/a/time4carrots" class="p-nickname u-url">time4carrots</a>.
- </span>
- <time role="presentation" class="dt-published" datetime="2018-08-15T04:10:00.929Z">
- <a href="/p/da9910f3febde91948000ce1535ea">
- 2018-08-15 04:10:00
- </a>
- </time>
-</aside>
-<article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'time4carrots' } })}">
- <p>It's just how it is...</p>
-</article>
-<hr/>
+ $: store = getPost(id);
+ $: post = $store.data;
+</script>
-<style>
- .post-meta * {
- vertical-align: top;
- }
-</style>
+{#if $store.loading}
+ <Loader />
+{/if}
+{#if $store.error}
+ <ErrorBlock message={$_('post.error.unavailable')} />
+{/if}
+{#if post}
+ <PostContent post={post} />
+{/if}
--- /dev/null
+<script>
+ export let post;
+ export let index = 0;
+ export let count = 1;
+
+ import { _ } from 'svelte-i18n';
+ import Glyph from '$/components/glyph/glyph.svelte';
+
+ const timestampToISO = (timestamp) => (new Date(timestamp)).toISOString();
+</script>
+ <aside class="post-meta" title="{$_('post.metadata_title', { values: { count: index + 1, total: count } })}">
+ <Glyph uuid={post.author.id} />
+ <span class="h-card">
+ {$_('post.author_credit')} <a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
+ </span>
+ <time role="presentation" class="dt-published" datetime="{timestampToISO(post.created_at)}">
+ <a title="{$_('post.permalink_title')}" href="/p/{post.id}">
+ {timestampToISO(post.created_at)}
+ </a>
+ </time>
+ {#if post.topic}
+ <span class="h-card">
+ ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
+ </span>
+ {/if}
+ </aside>
+ <article class="e-content" title="{$_('post.title', { values: { count: index + 1, total: count, author: post.author.handle } })}">
+ {post.text}
+ </article>
+ <hr/>
+
+<style>
+ .post-meta * {
+ vertical-align: top;
+ }
+
+ article {
+ white-space: pre;
+ }
+</style>