Create PostInfo component and tweak post headings

Author: stelcodes

src/components/PostInfo.astro

@@ -0,0 +1,32 @@
+---
+import { dateString } from '@utils'
+import { renderComponentToString } from 'astro/runtime/server/render/component.js'
+import { render, type CollectionEntry } from 'astro:content'
+
+interface Props {
+  post: CollectionEntry<'posts'>
+  class?: string
+}
+
+const { post, class: className } = Astro.props
+const { remarkPluginFrontmatter } = await render(post)
+const { minutesRead } = remarkPluginFrontmatter
+---
+
+<div class:list={[className, 'text-foreground/80']}>
+  <time>{dateString(post.data.published)}</time>
+  {
+    post.data.author && (
+      <span class="before:content-['::'] before:inline-block before:mx-0.5">
+        {post.data.author}
+      </span>
+    )
+  }
+  {
+    minutesRead && (
+      <span class="before:content-['::'] before:inline-block before:mx-0.5">
+        {minutesRead}
+      </span>
+    )
+  }
+</div>

src/components/PostPreview.astro

@@ -3,7 +3,8 @@ import { dateString } from '@utils'
 import { Icon } from 'astro-icon/components'
 import type { CollectionEntry } from 'astro:content'
 import { render } from 'astro:content'
-import Tags from './Tags.astro'
+import Tags from '@components/Tags.astro'
+import PostInfo from '@components/PostInfo.astro'
 
 interface Props {
   post: CollectionEntry<'posts'>
@@ -12,31 +13,14 @@ interface Props {
 const { post } = Astro.props
 
 const { remarkPluginFrontmatter } = await render(post)
-const { minutesRead } = remarkPluginFrontmatter
 const description = remarkPluginFrontmatter.description || post.data.description
 ---
 
 <article class="w-full py-5 my-1 md:my-4 border-accent/10">
   <h1 class="mb-3 text-2xl text-[var(--theme-h1)] font-semibold">
     <a href={`/posts/${post.id}`}># {post.data.title}</a>
   </h1>
-  <div class="text-foreground/80 my-3">
-    <time>{dateString(post.data.published)}</time>
-    {
-      post.data.author && (
-        <span class="before:content-['::'] before:inline-block before:mx-0.5">
-          {post.data.author}
-        </span>
-      )
-    }
-    {
-      minutesRead && (
-        <span class="before:content-['::'] before:inline-block before:mx-0.5">
-          {minutesRead}
-        </span>
-      )
-    }
-  </div>
+  <PostInfo post={post} class="my-3" />
   {description && <p class="my-4 text-base/7 text-foreground">{description}</p>}
   {
     post.data.tags && (

src/components/Tags.astro

@@ -12,7 +12,7 @@ const { tags } = Astro.props
     tags.map((tag) => (
       <a
         href={`/tags/${encodeURIComponent(tag)}`}
-        class="py-1 px-3 bg-accent/2 hover:bg-accent/10 border-1 border-accent/10 text-accent/90 rounded-2xl transition-colors"
+        class="py-1 px-3 bg-accent/1 hover:bg-accent/8 border-1 border-accent/10 text-accent/90 rounded-2xl transition-colors"
       >
         {tag}
       </a>

src/pages/posts/[slug].astro

@@ -11,6 +11,7 @@ import { Image } from 'astro:assets'
 import GiscusLoader from '@components/GiscusLoader.astro'
 import siteConfig from '../../site.config'
 import Tags from '@components/Tags.astro'
+import PostInfo from '@components/PostInfo.astro'
 
 export const getStaticPaths = (async () => {
   const posts = await getSortedPosts()
@@ -60,22 +61,15 @@ if (addendum.length > 0) {
       <h1 class="mb-4 text-[1.75rem] text-[var(--theme-h1)] font-semibold">
         # {postData.title}
       </h1>
-      <div class="text-foreground/80 mb-1">
-        <time>{dateString(postData.published)}</time>
+      <div class="my-2 border-l-2 border-accent/80 pl-4 py-2">
+        <PostInfo post={post} class="mb-1" />
         {
-          postData.author && (
-            <span class="before:content-['::'] before:inline-block before:mx-0.5">
-              {postData.author}
-            </span>
+          postData.tags && (
+            <div class="mt-4">
+              <Tags tags={postData.tags} />
+            </div>
           )
         }
-      {
-        postData.tags && (
-          <div class="mt-4">
-            <Tags tags={postData.tags} />
-          </div>
-        )
-      }
       </div>
     </div>
     <!-- <hr class="border-accent/10 border-2 rounded-xl hidden lg:block" /> -->

src/styles/global.css

@@ -77,7 +77,7 @@ button {
 }
 
 a.button {
-  @apply inline-flex text-accent border-3 border-accent/30 border-double py-1.5 px-3 whitespace-nowrap hover:bg-accent/10 rounded-xl transition-colors;
+  @apply inline-flex text-accent border-3 border-accent/30 border-double py-1.5 px-3 whitespace-nowrap hover:bg-accent/8 rounded-xl transition-colors;
 }
 
 header button,