Update metadata

packages/website/src/routes/blog/+page.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
     import { page } from "$app/stores";
+    import { SITE_URL } from "$lib/metadata";
+    import SvelteSeo from "svelte-seo";
 
     export let data;
     let { pages } = data;
     // $: console.log(data);
 </script>
 
-<section role="feed">
-    <h1>Blog Posts</h1>
+<SvelteSeo
+    title=""
+    canonical={SITE_URL + "/blog"} />
+
+<section role="feed" class="h-feed" id="feed">
+    <h1 class="p-name">Blog Posts <a class="u-url" href="/#feed"></a></h1>
     {#each pages as post, index}
-        <article aria-posinset={index + 1} aria-setsize={pages.length}>
+        <article aria-posinset={index + 1} aria-setsize={pages.length} class="h-entry">
             <div class="content" data-sveltekit-preload-data="hover">
                 <h2>
-                    <a href="/blog/{post.canonical}" class="text-link">
+                    <a class="u-url p-name" href="/blog/{post.canonical}">
                         {post.title}
                     </a>
                 </h2>
-                <span class="quiet">{post.date}</span>
+                <span class="quiet"><time class="dt-published" datetime={post.date}>{new Date(post.date).toLocaleDateString()}</time></span>
                 {#if post.description}
-                <p>{post.description}</p>
+                <p class="p-summary">{post.description}</p>
                 {/if}
             </div>
         </article>

packages/website/src/routes/blog/[...date]/[slug]/+page.svelte

@@ -8,20 +8,37 @@
     // if (data.ghReleaseData) {
     //     GhReleasesDownload = import("$lib/GhReleasesDownload.svelte").then((m) => m.default)
     // }
-
-    console.log(data)
 </script>
 
 <SvelteSeo
     title={data.post.title}
     description={data.post.description}
     canonical={SITE_URL + "/blog/" + data.post.canonical}
+    twitter={{
+        card: "summary",
+        // site: "@primalmovement",
+        title: data.post.title,
+        description: data.post.description,
+        // image: data.post.image
+    }}
+    openGraph={{
+        title: data.post.title,
+        description: data.post.description,
+    }}
 />
-<h1>{data.post.title}</h1>
-<!-- {#await GhReleasesDownload}
+
+<article class="h-entry">
+    <h1 id="title" class="p-name">{data.post.title}</h1>
+    <aside>Published on <time class="dt-published" datetime={data.post.date}>{new Date(data.post.date).toLocaleDateString()}</time></aside>
+    <!-- {#await GhReleasesDownload}
     
 {:then component} 
     <svelte:component this={component} releaseData={data.ghReleaseData} />
 {/await} -->
 
-<svelte:component this={data.component} />
+    <svelte:component this={data.component} />
+</article>
+
+<style>
+    aside {font-size: .85em;}
+</style>