Port to sveltekit

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

diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
index 47205339b2c830664e26df6669b19e62b5f74681..5d8ef1cb179d1e1bdf6cc033b1078ec7d6c949fb 100644 (file)
--- a/src/components/post/post.svelte
+++ b/src/components/post/post.svelte
@@ -1,27 +1,50 @@
 <script>
 <script>

-  import { _ } from 'svelte-i18n';
+       export let post;
+       export let index = 0;
+       export let count = 1;

 
 

-  import Glyph from '../glyph/glyph.svelte';
+       import { _ } from 'svelte-i18n';
+       import Glyph from '$/components/glyph/glyph.svelte';
+
+       const timestampToISO = (timestamp) => new Date(timestamp).toISOString();

 </script>
 
 </script>
 

-<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
+       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>
 </aside>

-<article class="e-content" title="{$_('post.title', { values: { count: 1, total: 2, author: 'time4carrots' } })}">
-  <p>It's just how it is...</p>
+<article
+       class="e-content"
+       title={$_('post.title', {
+               values: { count: index + 1, total: count, author: post.author.handle }
+       })}
+>
+       {post.text}

 </article>
 </article>

-<hr/>
+<hr />

 
 <style>
 
 <style>

-  .post-meta * {
-    vertical-align: top;
-  }
+       .post-meta * {
+               vertical-align: top;
+       }
+
+       article {
+               white-space: pre;
+       }

 </style>
 </style>