From 74f7bc100261e4454fc0177df342bf3000ef8251 Mon Sep 17 00:00:00 2001
From: eggy <danielchen04@hotmail.ca>
Date: Wed, 24 May 2023 12:46:44 -0400
Subject: [PATCH] feat: separate tags with and without spaces

with spaces are non-clickable
---
 components/PostPreviewCard.vue |  5 ++---
 components/StoryStatBox.vue    |  5 ++---
 components/Tag.vue             | 24 ++++++++++++++++--------
 pages/[...slug].vue            |  5 ++---
 pages/blog.vue                 |  5 ++---
 pages/stories.vue              |  5 ++---
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/PostPreviewCard.vue b/components/PostPreviewCard.vue
index 61a3bd7..44c5465 100644
--- a/components/PostPreviewCard.vue
+++ b/components/PostPreviewCard.vue
@@ -33,10 +33,9 @@ const descText =
         :dest="`/tags/${type}/${tag}`"
         v-for="(tag, index) in post.tags"
         :key="index"
+        :name="tag"
         :highlight="highlighttags?.includes(tag)"
-      >
-        {{ tag }}
-      </Tag>
+      />
     </div>
     <ContentRenderer :value="post" :excerpt="true" tag="section">
       <template #empty>No excerpt available.</template>
diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue
index e205426..38a05a0 100644
--- a/components/StoryStatBox.vue
+++ b/components/StoryStatBox.vue
@@ -27,9 +27,8 @@ const latest = docs.at(-1) as StoryParsedContent;
           v-for="(tag, index) in latest.tags"
           :key="index"
           :dest="`/tags/stories/${tag}`"
-        >
-          {{ tag }}
-        </Tag>
+          :name="tag"
+        />
       </div>
       <ContentRenderer
         tag="article"
diff --git a/components/Tag.vue b/components/Tag.vue
index 41b9a07..5ca14c4 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
 const props = defineProps<{
+  name: string;
   dest: string;
   highlight?: boolean;
 }>();
+
+const isLinkableTag = !props.name.includes(" ");
+const tagClass = [
+  "inline-block text-xs rounded-lg py-1 px-2 mt-1 mr-1 transition border border-pink-200 dark:border-pink-900 border-2 font-medium",
+  { "bg-pink-200 dark:bg-pink-900": props.highlight },
+  { "shadow-md": isLinkableTag },
+];
 </script>
 
 <template>
-  <a :href="dest">
-    <div
-      :class="[
-        'inline-block text-xs rounded-lg py-1 px-2 mt-1 mr-1 transition border border-pink-200 dark:border-pink-900 border-2 shadow-md font-medium',
-        { 'bg-pink-200 dark:bg-pink-900': highlight },
-      ]"
-    >
-      <slot />
+  <a :href="dest" v-if="isLinkableTag">
+    <div :class="tagClass">
+      {{ name }}
     </div>
   </a>
+  <div v-else>
+    <div :class="tagClass">
+      {{ name }}
+    </div>
+  </div>
 </template>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 0aac031..5ff570d 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -37,9 +37,8 @@ const captionText =
         v-for="(tag, index) in doc.tags"
         :dest="`/tags/${type}/${tag}`"
         :key="index"
-      >
-        {{ tag }}
-      </Tag>
+        :name="tag"
+      />
     </div>
     <ContentRenderer :value="doc" tag="article" class="pt-0 w-full">
       <template #empty>
diff --git a/pages/blog.vue b/pages/blog.vue
index 8c6ca18..526fac8 100644
--- a/pages/blog.vue
+++ b/pages/blog.vue
@@ -30,9 +30,8 @@ const tags = new Set(
         :dest="`/tags/blog/${tag}`"
         v-for="(tag, index) in tags"
         :key="index"
-      >
-        {{ tag }}
-      </Tag>
+        :name="tag"
+      />
     </div>
     <PostPreviewCard
       v-for="(post, index) in docs"
diff --git a/pages/stories.vue b/pages/stories.vue
index d44e70b..6955063 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -30,9 +30,8 @@ const tags = new Set(
         :dest="`/tags/stories/${tag}`"
         v-for="(tag, index) in tags"
         :key="index"
-      >
-        {{ tag }}
-      </Tag>
+        :name="tag"
+      />
     </div>
     <PostPreviewCard
       v-for="(story, index) in docs"