feat: move post metadata to snippet component

src/components/snippets/PostMetadataSnippet.astro

@@ -0,0 +1,60 @@
+---
+import getReadingTime from 'reading-time';
+
+import type { Post } from '@lib/directusTypes';
+
+import Logo from '@components/images/Logo.astro';
+import { formatShortDate } from '@support/time';
+import { getDirectusImageURL } from '@/support/url';
+
+interface Props {
+  post: Post;
+}
+
+const { post } = Astro.props;
+
+const readingTime = getReadingTime(post.content || '');
+---
+
+<div>
+  <ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
+    {post.category && (
+    <li class="inline-flex items-center">
+      <a
+        class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
+        href={`/categories/${post.category.slug}`}
+        data-astro-prefetch
+      >
+        <div class="flex flex-row items-center shrink-0">
+          <div class="mr-2">
+            <Logo
+              srcLight={getDirectusImageURL(post.category.logoLight)}
+              srcDark={getDirectusImageURL(post.category.logoDark)}
+              alt={`Logo of ${post.category.title}`}
+              width = 18,
+              height = 18,
+            />
+          </div>
+          {post.category.title}
+        </div>
+      </a>
+      <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
+        /
+      </span>
+    </li>
+    )}
+    <li class="inline-flex items-center">
+      <span class="shrink-0 text-secondary text-sm">
+        {formatShortDate(post.published_date)}
+      </span>
+      <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
+        /
+      </span>
+    </li>
+    <li class="inline-flex items-center">
+      <span class="shrink-0 text-secondary text-sm">
+        {readingTime.minutes.toPrecision(1)} minutes
+      </span>
+    </li>
+  </ol>
+</div>

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

@@ -1,7 +1,6 @@
 ---
 
 import { Image } from 'astro:assets';
-import getReadingTime from 'reading-time';
 import { marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { createHighlighter } from 'shiki';
@@ -9,17 +8,16 @@ import { readItems, readSingleton } from '@directus/sdk';
 import 'photoswipe/style.css';
 
 import SocialShareButton from '@components/buttons/SocialShareButton.astro';
-import Logo from '@components/images/Logo.astro';
+import PostMetadataSnippet from '@/components/snippets/PostMetadataSnippet.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
-import { formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 const post = Astro.props;
 
 export async function getStaticPaths() {
   const posts = await directus.request(readItems('posts', {
-    fields: ['*', 'category.*'],
+    fields: ['*', { category: ['*'] }],
   }));
   return posts.map((post) => ({
     params: { slug: post.slug },
@@ -28,9 +26,6 @@ export async function getStaticPaths() {
 }
 
 const global = await directus.request(readSingleton('site_global'));
-const category = post.category;
-
-const readingTime = getReadingTime(post.content || '');
 
 const highlighter = await createHighlighter({
   themes: ['github-light', 'github-dark'],
@@ -101,46 +96,7 @@ const content = marked.parse(post.content || '');
             <h2 class="card-text-header block">
               {post.title}
             </h2>
-            <ol class="flex items-center justify-center sm:justify-start whitespace-nowrap gap-2 sm:gap-0 mt-6 sm:mt-4">
+            <PostMetadataSnippet post={post}/>
-              {category && (
-              <li class="inline-flex items-center">
-                <a
-                  class="inline-flex items-center text-secondary hover:text-secondary-hover text-sm transition-all duration-300"
-                  href=`/categories/${category.slug}`
-                  data-astro-prefetch
-                >
-                  <div class="flex flex-row items-center shrink-0">
-                    <div class="mr-2">
-                      <Logo
-                        srcLight={getDirectusImageURL(category.logoLight)}
-                        srcDark={getDirectusImageURL(category.logoDark)}
-                        alt={`Logo of ${category.title}`}
-                        width = 18,
-                        height = 18,
-                      />
-                    </div>
-                    {category.title}
-                  </div>
-                </a>
-                <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
-                  /
-                </span>
-              </li>
-              )}
-              <li class="inline-flex items-center">
-                <span class="shrink-0 text-secondary text-sm">
-                  {formatDate(post.published_date)}
-                </span>
-                <span class="shrink-0 text-secondary text-sm mx-2 sm:mx-4">
-                  /
-                </span>
-              </li>
-              <li class="inline-flex items-center">
-                <span class="shrink-0 text-secondary text-sm">
-                  {readingTime.minutes.toPrecision(1)} minutes to read
-                </span>
-              </li>
-            </ol>
           </div>
           <div class="border-t border-divider mt-10 mb-10"/>