feat: add Destinations component and integrate destination data in blog posts

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

@@ -3,6 +3,7 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 import Schema from "@/components/seo/Schema.astro";
 import Tags from "@/components/ui/Tags.astro";
 import Categories from "@/components/ui/Categories.astro";
+import Destinations from "@/components/ui/Destinations.astro";
 import { toR2Url } from "@/utils/r2";
 import Picture from "@/components/ui/Picture.astro";
 
@@ -18,8 +19,16 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { Content, remarkPluginFrontmatter } = await render(post);
-const { title, description, pubDate, author, image, categories, tags } =
-  post.data;
+const {
+  title,
+  description,
+  pubDate,
+  author,
+  image,
+  categories,
+  tags,
+  destination,
+} = post.data;
 const coverImage = toR2Url(image);
 
 const formattedDate = pubDate.toLocaleDateString("vi-VN", {
@@ -70,6 +79,13 @@ const metadata = {
         >
           {title}
         </h1>
+        {
+          destination && destination.length > 0 && (
+            <div class="flex flex-wrap justify-center gap-2 mt-4">
+              <Destinations destinations={destination} />
+            </div>
+          )
+        }
       </div>
 
       {

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

@@ -0,0 +1,64 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import { getCollection } from "astro:content";
+import Headline from "@/components/ui/Headline.astro";
+import PostItem from "@/components/blog/PostItem.astro";
+import Pagination from "@/components/ui/Pagination.astro";
+import type { GetStaticPathsOptions } from "astro";
+
+export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
+  const allPosts = await getCollection("blog");
+  const posts = allPosts.filter((post) => post.data && post.data.pubDate);
+
+  const destinations = new Set<string>();
+  posts.forEach((post) => {
+    post.data.destination?.forEach((d) => destinations.add(d));
+  });
+
+  return Array.from(destinations).flatMap((destination) => {
+    const destinationPosts = posts
+      .filter((post) => post.data.destination?.includes(destination))
+      .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+    return paginate(destinationPosts, {
+      params: { destination },
+      pageSize: 6,
+    });
+  });
+}
+
+const { page } = Astro.props;
+const { destination } = Astro.params;
+
+const metadata = {
+  title: `Destination: ${destination}`,
+  description: `Travel articles about ${destination}.`,
+};
+---
+
+<BaseLayout metadata={metadata}>
+  <section class="relative px-4 py-8 sm:px-6 lg:px-8 md:py-12">
+    <div class="relative mx-auto max-w-5xl">
+      <Headline
+        tagline="Destination"
+        title={destination}
+        subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
+        classes={{
+          container: "mb-12 text-center",
+          title:
+            "font-heading mb-4 text-4xl font-bold tracking-tight text-foreground md:text-6xl capitalized",
+          subtitle: "mx-auto max-w-3xl text-xl text-muted-foreground",
+        }}
+      />
+
+      <div class="mb-8 text-center">
+        <a href="/blog" class="text-primary hover:underline">← Quay lại blog</a>
+      </div>
+
+      <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+        {page.data.map((post) => <PostItem post={post} />)}
+      </div>
+      <Pagination page={page} />
+    </div>
+  </section>
+</BaseLayout>