Add blink test + coverage improvements

[rbdr/forum] / src / components / post / post.svelte

diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
index bf2a190a554695d289b6d3ebdac5856cf998dde1..66901af69601edc06db88d08c35eaf1668bc76f1 100644 (file)
--- a/src/components/post/post.svelte
+++ b/src/components/post/post.svelte
@@ -1,23 +1,50 @@
 <script>
-  export let id;
+       export let post;
+       export let index = 0;
+       export let count = 1;
 
-  import { _ } from 'svelte-i18n';
+       import { _ } from 'svelte-i18n';
+       import Glyph from '$/components/glyph/glyph.svelte';
 
-  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';
-
-  $: store = getPost(id);
-  $: post = $store.data;
+       const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
 </script>
 
-{#if $store.loading}
-  <Loader />
-{/if}
-{#if $store.error}
-  <ErrorBlock message={$_('post.error.unavailable')} />
-{/if}
-{#if post}
-  <PostContent post={post} />
-{/if}
+<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>