big style update

app/blog/DjBlogMain.tsx

@@ -0,0 +1,42 @@
+import { defineComponent } from "vue";
+import useAsyncState from "@/useAsyncState.ts";
+import getDjAPI from "@/api.ts";
+import { RouterLink } from "vue-router";
+import { addCSS, css } from "@/util.ts";
+
+const style = css`
+.entry {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+}
+`;
+
+export default defineComponent({
+    name: "DjBlogMain",
+    async setup() {
+        addCSS('DjBlogMain', style);
+
+        const blogEntries = useAsyncState('blog-entries-meta', ({ hostUrl }) => getDjAPI(hostUrl, "/blog-entries"));
+
+        await blogEntries.done;
+
+        return () => <>
+            <main>
+                <h2>Entries</h2>
+                <ul>
+                    {blogEntries.result.value?.map(_ => (
+                        <li key={_.slug}>
+                            <div class="entry">
+                                <RouterLink to={{ name: 'DjBlogEntry', params: { slug: _.slug }}}>{ _.title }</RouterLink>
+                                <span>-</span>
+                                <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time>
+                            </div>
+                        </li>
+                    )) ?? <li>Blog posts loading...</li>}
+                </ul>
+            </main>
+        </>;
+    },
+});
+