Adds h-entry data to blog posts

src/layouts/BlogPost.astro

@@ -5,35 +5,79 @@ import FormattedDate from '../components/FormattedDate.astro';
 import NotchedBox from '../components/NotchedBox.astro';
 import { Image } from 'astro:assets';
 
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<'blog'>['data'] & { slug: string; };
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { slug, title, description, pubDate, updatedDate, heroImage, tags } = Astro.props;
 ---
 
+<style>
+  .byline {
+    color: var(--color-gray);
+  }
+  .title {
+    margin-top: 1em;
+
+    h1 {
+      margin: 0;
+    }
+  }
+  .permalink {
+    color: var(--color-gray);
+    font-size: 80%;
+  }
+
+  .tags {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+
+    a {
+      color: var(--color-gray);
+    }
+  }
+</style>
 <RootLayout title={title} description={description}>
 		<main>
       <NotchedBox fillNotches="left">
-			<article>
+			<article class="h-entry">
 				<div class="hero-image">
 					{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
 				</div>
 				<div class="prose">
-					<div class="title">
-						<div class="date">
-              { pubDate && <FormattedDate date={pubDate} /> }
+          <div class="byline">
+            <div>
+              <time class="dt-published">{ pubDate && <FormattedDate date={pubDate} /> }</time>
+              by
+              <a class="p-author h-card u-url" href="https://www.blazestar.net">Periodic</a>
+            </div>
+            <div>
+              <a class="permalink u-url" href={`https://blazestar.net/blog/${slug}`}>Permalink</a>
+            </div>
             {
               updatedDate && (
-									<div class="last-updated-on">
+                <div class="last-updated-on dt-updated">
                   Last updated on <FormattedDate date={updatedDate} />
                 </div>
               )
             }
           </div>
-						<h1>{title}</h1>
-						<hr />
+					<div class="title">
+						<h1 class="p-name">{title}</h1>
 					</div>
+          { tags &&
+            <div class="tags">
+              {
+                tags.map(tag =>
+                  <a href={`/blog/tag/${tag}`} >#{tag}</a>
+                )
+              }
+            </div>
+          }
+          <hr />
+          <div class="e-content">
 					  <slot />
           </div>
+				</div>
       </article>
     </NotchedBox>
 		</main>

src/pages/blog/[...slug].astro

@@ -13,9 +13,10 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
+const { slug } = Astro.params;
 const { Content } = await render(post);
 ---
 
-<BlogPost {...post.data}>
+<BlogPost slug={slug} {...post.data} >
 	<Content />
 </BlogPost>