+<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>
+ ({$_('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>