blog: add tag list

components/TagIcon.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default () => (
+    <svg
+        class="page__tag-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+    >
+        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+        <line x1="7" y1="7" x2="7" y2="7"></line>
+    </svg>
+);

lib/tags.js

@@ -0,0 +1,13 @@
+export const parseTags = (strings) => {
+    const postTags = keys
+        .map((key, index) => {
+            const value = values[index];
+            // Parse yaml metadata & markdownbody in document
+
+            const document = matter(value.default);
+            const rawTags = document.data?.tags || "";
+            return rawTags.split(",").map((tag) => tag.trim());
+        })
+        .flat()
+        .filter((value) => value !== "");
+};

pages/posts/[post].js

@@ -5,6 +5,7 @@ import rehypeRaw from "rehype-raw";
 import Page from "../../components/Page";
 import glob from "glob";
 import React from "react";
+import TagIcon from "../../components/TagIcon";
 
 export default function BlogTemplate(props) {
     function reformatDate(fullDate) {
@@ -31,6 +32,21 @@ export default function BlogTemplate(props) {
         });
     };
 
+    const renderTagList = () => {
+        const tags = props.frontmatter.tags
+            ?.split(",")
+            .map((tag) => tag.trim());
+
+        return (
+            <div className="page__tag-list">
+                <TagIcon />
+                {tags.map((tag) => (
+                    <a href={`/posts?tags=${tag}`}>#{tag}</a>
+                ))}
+            </div>
+        );
+    };
+
     return (
         <Page
             siteTitle="Garrit's Notes"
@@ -53,13 +69,16 @@ export default function BlogTemplate(props) {
                 {props.markdownBody}
             </ReactMarkdown>
             <hr />
-            <a
-                href={`mailto:garrit@slashdev.space?subject=Re: ${encodeURIComponent(
-                    props.frontmatter.title
-                )}`}
-            >
-                Reply via E-Mail
-            </a>
+            <p>
+                <a
+                    href={`mailto:garrit@slashdev.space?subject=Re: ${encodeURIComponent(
+                        props.frontmatter.title
+                    )}`}
+                >
+                    Reply via E-Mail
+                </a>
+            </p>
+            {renderTagList()}
         </Page>
     );
 }

styles/components/page.scss

@@ -94,6 +94,25 @@
 .page__footer a svg {
     width: 20px;
 }
+
+.page__tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+}
+
+.page__tag-icon {
+    vertical-align: middle;
+    margin-right: 4px;
+}
+
+@media (prefers-color-scheme: light) {
+    .page__tag-icon {
+        filter: invert(1);
+    }
+}
+
 @media (max-width: 768px) {
     .page__footer {
         display: none;

styles/foundation/index.scss

@@ -1,4 +1,5 @@
 @import "colors";
 @import "fonts";
 @import "typography";
+@import "utility";
 @import "base";

styles/foundation/utility.scss

@@ -0,0 +1,3 @@
+.flex {
+    display: flex;
+}