From f193a44ce097449f3d47e20ff23deb65e40b7a97 Mon Sep 17 00:00:00 2001
From: Garrit Franke <garrit@slashdev.space>
Date: Tue, 29 Mar 2022 21:19:58 +0200
Subject: [PATCH] blog: add tag list

---
 components/TagIcon.js          | 19 +++++++++++++++++++
 lib/tags.js                    | 13 +++++++++++++
 pages/posts/[post].js          | 33 ++++++++++++++++++++++++++-------
 styles/components/page.scss    | 19 +++++++++++++++++++
 styles/foundation/index.scss   |  1 +
 styles/foundation/utility.scss |  3 +++
 6 files changed, 81 insertions(+), 7 deletions(-)
 create mode 100644 components/TagIcon.js
 create mode 100644 lib/tags.js
 create mode 100644 styles/foundation/utility.scss

diff --git a/components/TagIcon.js b/components/TagIcon.js
new file mode 100644
index 000000000..39d17a719
--- /dev/null
+++ b/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>
+);
diff --git a/lib/tags.js b/lib/tags.js
new file mode 100644
index 000000000..e87a206ae
--- /dev/null
+++ b/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 !== "");
+};
diff --git a/pages/posts/[post].js b/pages/posts/[post].js
index c7584671e..a4680d08b 100644
--- a/pages/posts/[post].js
+++ b/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>
     );
 }
diff --git a/styles/components/page.scss b/styles/components/page.scss
index c24f947c8..c04a9798e 100644
--- a/styles/components/page.scss
+++ b/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;
diff --git a/styles/foundation/index.scss b/styles/foundation/index.scss
index d9233c2de..ca6d00664 100644
--- a/styles/foundation/index.scss
+++ b/styles/foundation/index.scss
@@ -1,4 +1,5 @@
 @import "colors";
 @import "fonts";
 @import "typography";
+@import "utility";
 @import "base";
diff --git a/styles/foundation/utility.scss b/styles/foundation/utility.scss
new file mode 100644
index 000000000..6e69b9206
--- /dev/null
+++ b/styles/foundation/utility.scss
@@ -0,0 +1,3 @@
+.flex {
+    display: flex;
+}