tags

src/routes/blog/[slug].svelte

@@ -15,6 +15,7 @@
   import PostAttributes from '$lib/components/PostAttributes.svelte'
   import WpAdapter from '$lib/components/WPAdapter.svelte'
   import type { GQLBasePostFragment } from '$lib/gql/gen'
+  import Tags from '$lib/components/Tags.svelte'
 
   export let data: GQLBasePostFragment
 </script>
@@ -28,4 +29,5 @@
   {#if data.content}
     <WpAdapter content={data.content} />
   {/if}
+  <Tags tags={data.tags.nodes} />
 </SimplePage>

src/routes/blog/index.svelte

@@ -6,6 +6,7 @@
     return {
       props: {
         data: await fetch('/api/posts/*.json').then((r) => r.json()),
+        tags: await fetch('/api/tags/*.json').then((r) => r.json()),
       },
     }
   }
@@ -14,17 +15,29 @@
 <script lang="ts">
   import SimplePage from '$lib/components/SimplePage.svelte'
   import PostPreview from '$lib/components/PostPreview.svelte'
-  import type { GQLBasePostFragment } from '$lib/gql/gen'
+  import type { GQLBasePostFragment, GQLBaseTagFragment } from '$lib/gql/gen'
+  import Tags from '$lib/components/Tags.svelte'
 
   export let data: GQLBasePostFragment[]
+  export let tags: GQLBaseTagFragment[]
 </script>
 
 <svelte:head>
   <title>Blog</title>
 </svelte:head>
 
-<SimplePage title="Works">
+<SimplePage title="Blog">
+  <b>Explore Tags</b>
+  <Tags {tags} />
+  <div />
+
   {#each data as post}
     <PostPreview {post} />
   {/each}
 </SimplePage>
+
+<style>
+  div {
+    margin-bottom: 3em;
+  }
+</style>

src/routes/blog/tags/[slug].svelte

@@ -0,0 +1,31 @@
+<script lang="ts" context="module">
+  import type { Load } from '@sveltejs/kit'
+
+  export const load: Load = async ({ fetch, page }) => {
+    return {
+      props: {
+        slug: page.params.slug,
+        data: await fetch(`/api/postsByTags/${page.params.slug}.json`).then((r) => r.json()),
+      },
+    }
+  }
+</script>
+
+<script lang="ts">
+  import SimplePage from '$lib/components/SimplePage.svelte'
+  import type { GQLPostsManyByTagQuery } from '$lib/gql/gen'
+  import PostPreview from '$lib/components/PostPreview.svelte'
+
+  export let slug: string
+  export let data: GQLPostsManyByTagQuery['posts']['nodes']
+</script>
+
+<svelte:head>
+  <title>Blog - {slug}</title>
+</svelte:head>
+
+<SimplePage title={slug}>
+  {#each data as post}
+    <PostPreview {post} />
+  {/each}
+</SimplePage>