Adds h-entry data to blog posts

src/layouts/BlogPost.astro

@@ -10,30 +10,41 @@ type Props = CollectionEntry<'blog'>['data'];
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 ---
 
+<style>
+  .byline {
+    color: var(--color-gray);
+    margin-bottom: 1em;
+  }
+</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">
+            <time class="dt-published">{ pubDate && <FormattedDate date={pubDate} /> }</time>
+            <div>
+              by <span class="p-author">Periodic</span>
+            </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>
+					<div class="title">
+						<h1 class="p-name">{title}</h1>
 						<hr />
 					</div>
+          <div class="e-content">
 					  <slot />
           </div>
+				</div>
       </article>
     </NotchedBox>
 		</main>