feat: display post tags

Author: SidonieBouthors

components/ArticleBlock.tsx

@@ -2,13 +2,14 @@ import React from "react";
 import { format } from "date-fns";
 import Link from "next/link";
 import { CalendarIcon } from "./icons/CalendarIcon";
+import { Tag } from "@components/Tag";
 
 interface ArticleBlockProps {
   slug: string;
   title: string;
   description?: string;
   date: string;
-  tags?: string[];
+  tags: string[];
 }
 
 export default function ArticleBlock({
@@ -25,8 +26,17 @@ export default function ArticleBlock({
         <h2>{title}</h2>
       </Link>
       <p>{description}</p>
-      <span className="art-date"><CalendarIcon/>{formattedDate}</span>
-      
+      {tags.length != 0 ? (
+        <div className="tags">
+          {tags?.map((tag) => (
+            <Tag>{tag}</Tag>
+          ))}
+        </div>
+      ) : null}
+      <span className="art-date">
+        <CalendarIcon />
+        {formattedDate}
+      </span>
     </article>
   );
 }

components/Tag.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+import { slug } from "github-slugger";
+
+interface TagProps {
+  children: string;
+}
+export function Tag({ children }: TagProps) {
+  return <span className="tag">{children}</span>;
+}

styles/components/_index.scss

@@ -7,4 +7,5 @@
 @forward "toc-links";
 @forward "info-box";
 @forward "recipe-info";
-@forward "article-block";
+@forward "article-block";
+@forward "tag";

styles/components/_tag.scss

@@ -0,0 +1,21 @@
+@use "../abstracts" as *;
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  cursor: pointer;
+  font-family: $font-bold;
+  font-size: 0.8rem;
+  display: inline-block;
+  padding: 0.25em 0.8em;
+  border-radius: 0.7em;
+  background-color: var(--collapsible-bg);
+
+  &:hover {
+    background-color: var(--collapsible-summary-bg);
+  }
+}

velite.config.ts

@@ -64,7 +64,7 @@ const posts = defineCollection({
       description: s.string().max(200).optional(),
       date: s.isodate(),
       published: s.boolean().default(true),
-      tags: s.array(s.string()).optional(),
+      tags: s.array(s.string()).default([]),
       body: s.mdx(),
     })
     .transform(postComputedFields),