feat: copy button

src/pages/404.astro

@@ -13,11 +13,12 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 import { HomeIcon } from 'lucide-react'
+import { cn } from '@lib/utils'
 ---
 
 <Layout title="404" description={SITE.DESCRIPTION}>
-  <Container>
-    <Breadcrumb className="mb-6">
+  <Container class="flex grow flex-col gap-y-6">
+    <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
@@ -32,7 +33,7 @@ import { HomeIcon } from 'lucide-react'
     </Breadcrumb>
 
     <section
-      class="flex min-h-[50vh] flex-col items-center justify-center space-y-6 text-center"
+      class="flex flex-col items-center justify-center gap-y-4 text-center"
     >
       <div class="max-w-md">
         <h1 class="mb-4 text-3xl font-bold">404: Page not found</h1>
@@ -40,16 +41,17 @@ import { HomeIcon } from 'lucide-react'
           Oops! The page you're looking for doesn't exist.
         </p>
       </div>
-      <div>
-        <Link
-          href="/"
-          class={buttonVariants({ variant: 'outline' }) + ' group'}
-        >
-          <span class="mr-1.5 transition-transform group-hover:-translate-x-1"
-            >&larr;</span
-          > Go to home page
-        </Link>
-      </div>
+      <Link
+        href="/"
+        class={cn(
+          buttonVariants({ variant: 'outline' }),
+          'flex gap-x-1.5 group',
+        )}
+      >
+        <span class="transition-transform group-hover:-translate-x-1"
+          >&larr;</span
+        > Go to home page
+      </Link>
     </section>
   </Container>
 </Layout>

src/pages/about.astro

@@ -15,8 +15,8 @@ import { HomeIcon } from 'lucide-react'
 ---
 
 <Layout title="About" description={SITE.DESCRIPTION}>
-  <Container>
-    <Breadcrumb className="mb-6">
+  <Container class="flex flex-col gap-y-6">
+    <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
@@ -30,7 +30,7 @@ import { HomeIcon } from 'lucide-react'
       </BreadcrumbList>
     </Breadcrumb>
 
-    <section class="space-y-6">
+    <section>
       <div class="min-w-full">
         <h1 class="mb-4 text-3xl font-bold">Some more about us</h1>
         <p class="prose dark:prose-invert">

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

@@ -16,7 +16,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
-import { HomeIcon } from 'lucide-react'
+import { Hash, HomeIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
 import Link from '@components/Link.astro'
@@ -156,6 +156,7 @@ if (
                 href={`/tags/${tag}`}
                 class={badgeVariants({ variant: 'secondary' })}
               >
+                <Hash className="mr-0.5 h-3 w-3" />
                 {tag}
               </a>
             ))

src/pages/blog/index.astro

@@ -34,8 +34,8 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
 ---
 
 <Layout title="Blog" description="Blog">
-  <Container>
-    <Breadcrumb className="mb-6">
+  <Container class="flex flex-col gap-y-6">
+    <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
           <BreadcrumbLink href="/"
@@ -49,25 +49,23 @@ const years = Object.keys(posts).sort((a, b) => parseInt(b) - parseInt(a))
       </BreadcrumbList>
     </Breadcrumb>
 
-    <div class="space-y-10">
-      <div class="space-y-4">
-        {
-          years.map((year) => (
-            <section class="space-y-4">
-              <div class="font-semibold">{year}</div>
-              <div>
-                <ul class="not-prose flex flex-col gap-4">
-                  {posts[year].map((post) => (
-                    <li>
-                      <BlogCard entry={post} />
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </section>
-          ))
-        }
-      </div>
+    <div class="flex flex-col gap-y-8">
+      {
+        years.map((year) => (
+          <section class="flex flex-col gap-y-4">
+            <div class="font-semibold">{year}</div>
+            <div>
+              <ul class="not-prose flex flex-col gap-4">
+                {posts[year].map((post) => (
+                  <li>
+                    <BlogCard entry={post} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        ))
+      }
     </div>
   </Container>
 </Layout>

src/pages/index.astro

@@ -21,31 +21,32 @@ const blog = (await getCollection('blog'))
 ---
 
 <Layout title="Home" description="Home">
-  <Container>
-    <section class="space-y-6">
+  <Container class="flex flex-col gap-y-6">
+    <section>
       <Card>
         <CardHeader>
           <CardTitle className="text-3xl">er·u·dite</CardTitle>
           <CardDescription
-            >/ˈer(y)əˌdīt/ &bull; <span
-              class="font-semibold text-muted-foreground">adjective</span
+            >/ˈer(y)əˌdīt/ &bull; <span class="font-semibold">adjective</span
             ></CardDescription
           >
         </CardHeader>
         <CardContent>
-          <p>having or showing great knowledge or learning.</p>
+          <p class="text-sm">
+            astro-erudite is an opinionated, no-frills static blogging template
+            built with <Link href="https://astro.build" external underline
+              >Astro</Link
+            >. To learn more about why this template exists, read <Link
+              href="/blog/the-state-of-static-blogs"
+              underline>The State of Static Blogs in 2024</Link
+            >.
+          </p>
         </CardContent>
       </Card>
-      <div class="mt-8">
-        <p class="prose min-w-full dark:prose-invert">
-          {SITE.TITLE} is an opinionated, no-frills static blogging template built
-          with Astro.
-        </p>
-      </div>
-      <div class="flex flex-wrap items-center justify-between gap-y-2">
-        <h2 class="text-2xl font-bold">Latest posts</h2>
-      </div>
-      <ul class="not-prose flex flex-col gap-4">
+    </section>
+    <section class="flex flex-col gap-y-4">
+      <h2 class="text-2xl font-bold">Latest posts</h2>
+      <ul class="not-prose flex flex-col gap-y-4">
         {
           blog.map((post) => (
             <li>