feat: add date to blog

.prettierrc.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     require.resolve("prettier-plugin-astro"),
-    //require.resolve("prettier-plugin-tailwindcss"),
+    require.resolve("prettier-plugin-tailwindcss"),
   ],
   overrides: [
     {

src/components/widgets/decorations/Fireworks.astro

@@ -1,4 +1,4 @@
-<div class="fireworks-container absolute top-0 left-0 z-[-1000] h-full w-full">
+<div class="fireworks-container absolute left-0 top-0 z-[-1000] h-full w-full">
 </div>
 
 <script>

src/components/widgets/docs/TableOfContents.astro

@@ -23,16 +23,24 @@ const parseDepth = (depth: number) => {
 
 <ul class="mt-24 flex flex-col gap-4">
   {
-    headings.map(({ slug, text, depth }: {
+    headings.map(
-      slug: string;
+      ({
-      text: string;
+        slug,
-      depth: number;
+        text,
-    }) => {
+        depth,
-      return (
+      }: {
-        <li class={`text-slate-100 hover:text-slate-700 ${parseDepth(depth)}`}>
+        slug: string;
-          <a href={`#${slug}`}>{text}</a>
+        text: string;
-        </li>
+        depth: number;
-      );
+      }) => {
-    })
+        return (
+          <li
+            class={`text-slate-100 hover:text-slate-700 ${parseDepth(depth)}`}
+          >
+            <a href={`#${slug}`}>{text}</a>
+          </li>
+        );
+      }
+    )
   }
 </ul>

src/layouts/blog/PostLayout.astro

@@ -8,13 +8,30 @@ const { item } = Astro.props;
 const url = Astro.url.pathname;
 ---
 
-<Layout description={item.frontmatter.title} date={item.frontmatter.date} url={`https://xhyrom.dev${url}`}>
+<Layout
+  description={item.frontmatter.title}
+  date={item.frontmatter.date}
+  url={`https://xhyrom.dev${url}`}
+>
   <Navbar />
-  <h1 class="w-full py-32 text-center text-5xl font-extrabold text-white">
+  <div class="w-full py-32">
-    {item.frontmatter.title}
+    <div class="flex flex-col items-center justify-center gap-2">
-  </h1>
+      <h1 class="text-5xl font-extrabold text-white">
+        {item.frontmatter.title}
+      </h1>
+      <h2 class="text-2xl font-semibold text-white text-opacity-40">
+        {
+          new Date(item.frontmatter.date).toLocaleDateString("en-us", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+          })
+        }
+      </h2>
+    </div>
+  </div>
 
-  <Container class="prose prose-invert text-2xl content-center justify-center">
+  <Container class="prose prose-invert content-center justify-center text-2xl">
     <article>
       <slot />
     </article>

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

@@ -3,8 +3,11 @@ import Layout from "@layouts/Layout.astro";
 import Navbar from "@components/widgets/Navbar.astro";
 import Container from "@components/atoms/Container.astro";
 import Button from "~/components/widgets/Button.astro";
+import type { PaginateFunction } from "astro";
 
-export async function getStaticPaths({ paginate }) {
+export async function getStaticPaths({ paginate }: {
+    paginate: PaginateFunction;
+}) {
   // Load your data with fetch(), Astro.glob(), etc.
   const posts = (await Astro.glob('@blog/*.md')).sort(
 	(a, b) => new Date(b.frontmatter.date).valueOf() - new Date(a.frontmatter.date).valueOf()