feat: update post layout

src/components/FormattedDate.tsx

@@ -0,0 +1,14 @@
+import type { JSX, Component } from "solid-js";
+
+export const FormattedDate: Component<{ dateTime: Date }> = (props) => {
+  const langCode = document.documentElement.lang || navigator.language;
+  const formatter = new Intl.DateTimeFormat(langCode, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+  return (
+    <time datetime={props.dateTime.toISOString()}>
+      {formatter.format(props.dateTime)}
+    </time>
+  );
+};

src/components/Tags.tsx

@@ -0,0 +1,15 @@
+import { type JSX, type Component, For } from "solid-js";
+
+export const Tags: Component<{ tags: string[] }> = (props) => {
+  return (
+    <div class="flex gap-2">
+      <For each={props.tags}>
+        {(tag, i) => (
+          <div class="font-mono uppercase cursor-pointer transition-colors border-gray-700 dark:border-white border px-1">
+            {tag}
+          </div>
+        )}
+      </For>
+    </div>
+  );
+};

src/content/blog/multiplatform-rust.md

@@ -3,6 +3,7 @@ title: 멀티 플랫폼 라이브러리 만들기
 description: Rust로 멀티 플랫폼은 어떻게 만들 수 있을까요? uniffi, napi-rs 등등의 멀티플랫폼 솔루션을 알아봅시다.
 category: Rust
 pubDate: Nov 26 2023
+tags: ["Text", "Multi-platform", "Breakthrough", "Open-Source"]
 ---
 
 ## 멀티 플랫폼 라이브러리 - 왜 자꾸 실패하는가?

src/content/config.ts

@@ -6,6 +6,7 @@ const blog = defineCollection({
     title: z.string(),
     description: z.string(),
     category: z.string().optional(),
+    tags: z.array(z.string()).optional(),
     // Transform string to Date object
     pubDate: z.coerce.date(),
     updatedDate: z.coerce.date().optional(),

src/layouts/BlogPost.astro

@@ -2,10 +2,12 @@
 import type { CollectionEntry } from "astro:content";
 import Layout from "./Layout.astro";
 import { Profile } from "../components/Profile";
+import { FormattedDate } from "../components/FormattedDate";
+import { Tags } from "../components/Tags";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, pubDate, updatedDate, heroImage, category } =
+const { title, description, pubDate, updatedDate, heroImage, category, tags } =
   Astro.props;
 ---
 
@@ -15,19 +17,23 @@ const { title, description, pubDate, updatedDate, heroImage, category } =
   >
     <div class="grow flex justify-center w-full lg:w-auto">
       <article class="w-full max-w-4xl">
-        <div class="image">
+        <div class="image min-h-[16rem]">
           {heroImage && <img class="max-w-100%" src={heroImage} alt="" />}
         </div>
         <div class="prose">
-          <div class="title">
-            <legend>{category ?? "UNCATEGORIZED"}</legend>
+          <div class="title mb-8">
+            <legend class="uppercase font-bold tracking-widest"
+              >{category ?? "Uncategorized"}</legend
+            >
             <h1>{title}</h1>
-            <div class="date">
-              {pubDate}
+            {tags && <Tags tags={tags} />}
+            <div class="date text-gray-500">
+              <FormattedDate dateTime={pubDate} client:only />
               {
                 updatedDate && (
                   <div class="last-updated-on">
-                    Last updated on {updatedDate}
+                    |
+                    <FormattedDate dateTime={updatedDate} client:only /> 수정
                   </div>
                 )
               }

src/styles/global.css

@@ -23,8 +23,8 @@ h3,
 h4,
 h5,
 h6 {
+  font-weight: 500;
   margin: 0 0 0.5rem 0;
-  color: rgb(var(--black));
   line-height: 1.2;
 }
 h1 {
@@ -49,5 +49,5 @@ b {
 
 hr {
   border: none;
-  border-top: 1px solid rgb(var(--gray-light));
+  border-top: 1px solid #6b7280;
 }

tailwind.config.mjs

@@ -1,9 +1,15 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   darkMode: "class",
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        mono: ['"Monoplex KR"', ...defaultTheme.fontFamily.mono]
+      }
+    },
   },
   plugins: [],
 };