update

app/blog/DjBlogMain.tsx

@@ -5,14 +5,21 @@ import { RouterLink } from "vue-router";
 import { addCSS, css } from "@/util.ts";
 
 const style = css`
-.entry {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-}
+.dj-blog-main {
+    .entry {
+        display: flex;
+        flex-direction: row;
+        gap: 4px;
+    }
 
-h2 {
-    margin-top: 0;
+    em {
+        color: gray;
+    }
+
+
+    h2 {
+        margin-top: 0;
+    }
 }
 `;
 
@@ -26,16 +33,17 @@ export default defineComponent({
         await blogEntries.done;
 
         return () => <>
-            <main>
+            <main class="dj-blog-main">
                 <h2>Entries</h2>
                 <ul>
                     {blogEntries.result.value?.map(_ => (
                         <li key={_.slug}>
                             <div class="entry">
-                                <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time>
-                                <span>-</span>
                                 <RouterLink to={{ name: 'DjBlogEntry', params: { slug: _.slug }}}>{ _.title }</RouterLink>
                             </div>
+                            <div>
+                                <em>first published <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time></em>
+                            </div>
                         </li>
                     )) ?? <li>Blog posts loading...</li>}
                 </ul>