Stage 23: add tags pages

app/tags/[tag]/page.tsx

@@ -0,0 +1,86 @@
+import { posts } from "#site/content";
+import { PostItem } from "@/components/post-item";
+import { Tag } from "@/components/tag";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAllTags, getPostsByTagSlug, sortTagsByCount } from "@/lib/utils";
+import { slug } from "github-slugger";
+import { Metadata } from "next";
+import { isAsyncFunction } from "util/types";
+
+interface TagPageProps {
+  params: {
+    tag: string;
+  };
+}
+
+export async function generateMetadata({
+  params,
+}: TagPageProps): Promise<Metadata> {
+  const { tag } = params;
+  return {
+    title: tag,
+    description: `Posts on the topic of ${tag}`,
+  };
+}
+
+export const generateStaticParams = () => {
+  const tags = getAllTags(posts);
+  const paths = Object.keys(tags).map((tag) => ({ tag: slug(tag) }));
+  return paths;
+};
+
+export default function TagPage({ params }: TagPageProps) {
+  const { tag } = params;
+  const title = tag.split("-").join(" ");
+
+  const displayPosts = getPostsByTagSlug(posts, tag);
+  const tags = getAllTags(posts);
+  const sortedTags = sortTagsByCount(tags);
+
+  return (
+    <div className="container max-w-4xl py-6 lg:py-10">
+      <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
+        <div className="flex-1 space-y-4">
+          <h1 className="inline-block font-black text-4xl lg:text-5xl capitalize">
+            {title}
+          </h1>
+        </div>
+      </div>
+      <div className="grid grid-cols-12 gap-3 mt-8">
+        <div className="col-span-12 col-start-1 sm:col-span-8">
+          <hr />
+          {displayPosts?.length > 0 ? (
+            <ul className="flex flex-col">
+              {displayPosts.map((post) => {
+                const { slug, date, title, description, tags } = post;
+                return (
+                  <li key={slug}>
+                    <PostItem
+                      slug={slug}
+                      date={date}
+                      title={title}
+                      description={description}
+                      tags={tags}
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p>Ikke noe innhold her</p>
+          )}
+        </div>
+        <Card className="col-span-12 row-start-3 h-fit sm:col-span-4 sm:col-start-9 sm:row-start-1">
+          <CardHeader>
+            <CardTitle>Tags</CardTitle>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            {sortedTags?.map((t) => (
+              <Tag tag={t} key={t} count={tags[t]} current={slug(t) === tag} />
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

app/tags/page.tsx

@@ -0,0 +1,30 @@
+import { posts } from "#site/content";
+import { Tag } from "@/components/tag";
+import { getAllTags, sortTagsByCount } from "@/lib/utils";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Tags",
+  description: "Topic I've written about",
+};
+
+export default async function TagsPage() {
+  const tags = getAllTags(posts);
+  const sortedTags = sortTagsByCount(tags);
+
+  return (
+    <div className="container max-w-4xl py-6 lg:py-10">
+      <div className="flex flex-col items-start gap-4 md:flex-row md:justify-between md:gap-8">
+        <div className="flex-1 space-y-4">
+          <h1 className="inline-block font-black text-4xl lg:text-5xl">Tags</h1>
+        </div>
+      </div>
+      <hr className="my-4" />
+      <div className="flex flex-wrap gap-3">
+        {sortedTags?.map((tag) => (
+          <Tag tag={tag} count={tags[tag]} key={tag} />
+        ))}
+      </div>
+    </div>
+  );
+}

components/post-item.tsx

@@ -23,7 +23,7 @@ export function PostItem({
     <article className="flex flex-col gap-2 border-border border-b py-3">
       <div>
         <h2 className="text-2xl font-bold">
-          <Link href={slug}>{title}</Link>
+          <Link href={"/" + slug}>{title}</Link>
         </h2>
       </div>
       <div className="flex gap-2">

lib/utils.ts

@@ -1,5 +1,6 @@
 import { Post } from "#site/content";
 import { type ClassValue, clsx } from "clsx";
+import { slug } from "github-slugger";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -37,3 +38,11 @@ export function getAllTags(posts: Array<Post>) {
 export function sortTagsByCount(tags: Record<string, number>) {
   return Object.keys(tags).sort((a, b) => tags[b] - tags[a]);
 }
+
+export function getPostsByTagSlug(posts: Array<Post>, tag: string) {
+  return posts.filter((post) => {
+    if (!post.tags) return false;
+    const slugifiedTags = post.tags.map((tag) => slug(tag));
+    return slugifiedTags.includes(tag);
+  });
+}