Add post content component

1 files changed, 40 insertions, 0 deletions

diff --git a/src/components/post_content/post_content.svelte b/src/components/post_content/post_content.svelte
new file mode 100644
index 0000000..671c07c
--- /dev/null
+++ b/src/components/post_content/post_content.svelte
@@ -0,0 +1,40 @@
+<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>