リスト表示をちゃんとした

src/lib/components/list.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    export let items: {page: string, url: string}[]
+    export let title: string
+</script>
+
+<div class="contents">
+    <h1>{title}</h1>
+    <ul>
+        {#each items as item}
+            <li><a href="{item.url}">{item.page}</a></li>
+        {/each}
+    </ul>
+</div>
+
+
+<style>
+    .contents {
+        max-width: 1000px;
+        margin: auto;
+        padding: 2em;
+        font-family: monospace;
+    }
+
+    h1 {
+        margin: 0;
+    }
+
+    ul {
+        padding-left: 2em;
+    }
+
+    li {
+        list-style-type: '├';
+        font-size: 1.5em;
+        padding: 4px 8px;
+
+        &:last-child {
+            list-style-type: '└';
+        }
+    }
+</style>

src/routes/(DefaultStyle)/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
+    import List from '$lib/components/list.svelte'
-  import { onMount } from "svelte";
-  import { base } from '$app/paths'
 
-  onMount(() => {
+    let items = [
-      goto(`${base}/0/`)
+        {page: "Posts",     url: "0"},
-	})
+        {page: "Category",  url: "category"},
+        {page: "Tag",       url: "tag"},
+        {page: "About",     url: "about"},
+    ]
 </script>
 
-To show posts, click <a href="/blog/0">here</a>
+<List title="moris.day/blog/" items={items} />

src/routes/(DefaultStyle)/category/+page.server.ts

@@ -13,5 +13,5 @@ export async function load() {
         }
     }
 
-    return {cats}
+    return {cats: cats.map((cat)=>{return {page: cat, url: cat}})}
 }

src/routes/(DefaultStyle)/category/+page.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-	const { data } = $props();
+    import List from '$lib/components/list.svelte'
+	const { data } = $props()
 </script>
 
-{#each data.cats as cat}
+<List title="moris.day/blog/category/" items={data.cats} />
-    <div>
-        <a href="{cat}">{cat}</a>
-    </div>
-{/each}

src/routes/(DefaultStyle)/category/[slug]/+page.server.ts

@@ -5,7 +5,11 @@ export async function load({params}) {
 
     const metalist = await Metadatas()
 
-    const result = metalist.filter((meta)=>meta.metadata.category == cat).map((meta)=>meta.postId)
+    const posts = metalist
+        .filter((meta)=>meta.metadata.category == cat)
+        .map((meta)=>{
+            return {page: meta.postId, url: `../../post/${meta.postId}`}
+        })
 
-    return {posts: result}
+    return {cat, posts}
 }

src/routes/(DefaultStyle)/category/[slug]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+    import List from '$lib/components/list.svelte'
 	const { data } = $props();
 </script>
 
-{#each data.posts as post}
+<List title="moris.day/blog/category/{data.cat}/" items={data.posts} />
-    <div><a href="../../post/{post}">{post}</a></div>
-{/each}

src/routes/(DefaultStyle)/tag/+page.server.ts

@@ -13,5 +13,5 @@ export async function load() {
         }
     }
 
-    return {tags}
+    return {tags: tags.map((tag)=>{return {page: tag, url: tag}})}
 }

src/routes/(DefaultStyle)/tag/+page.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
+    import List from '$lib/components/list.svelte'
 	const { data } = $props();
 </script>
 
-{#each data.tags as tag}
+<List title="moris.day/blog/tag/" items={data.tags} />
-    <div>
-        <a href="{tag}">{tag}</a>
-    </div>
-{/each}

src/routes/(DefaultStyle)/tag/[slug]/+page.server.ts

@@ -5,7 +5,11 @@ export async function load({params}) {
 
     const metalist = await Metadatas()
 
-    const result = metalist.filter((meta)=>meta.metadata.tags.includes(tag)).map((meta)=>meta.postId)
+    const posts = metalist
+        .filter((meta)=>meta.metadata.tags.includes(tag))
+        .map((meta)=>{
+            return {page: meta.postId, url: `../../post/${meta.postId}`}
+        })
 
-    return {posts: result}
+    return {tag, posts}
 }

src/routes/(DefaultStyle)/tag/[slug]/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
+    import List from '$lib/components/list.svelte'
 	const { data } = $props();
 </script>
 
-{#each data.posts as post}
+<List title="moris.day/blog/tag/{data.tag}/" items={data.posts} />
-    <div><a href="../../post/{post}">{post}</a></div>
-{/each}