feat: separate tags with and without spaces

with spaces are non-clickable

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>

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}`"
-        >
+          :name="tag"
-          {{ tag }}
+        />
-        </Tag>
       </div>
       <ContentRenderer
         tag="article"

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">
+  <a :href="dest" v-if="isLinkableTag">
-    <div
+    <div :class="tagClass">
-      :class="[
+      {{ name }}
-        '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 />
     </div>
   </a>
+  <div v-else>
+    <div :class="tagClass">
+      {{ name }}
+    </div>
+  </div>
 </template>

pages/[...slug].vue

@@ -37,9 +37,8 @@ const captionText =
         v-for="(tag, index) in doc.tags"
         :dest="`/tags/${type}/${tag}`"
         :key="index"
-      >
+        :name="tag"
-        {{ tag }}
+      />
-      </Tag>
     </div>
     <ContentRenderer :value="doc" tag="article" class="pt-0 w-full">
       <template #empty>

pages/blog.vue

@@ -30,9 +30,8 @@ const tags = new Set(
         :dest="`/tags/blog/${tag}`"
         v-for="(tag, index) in tags"
         :key="index"
-      >
+        :name="tag"
-        {{ tag }}
+      />
-      </Tag>
     </div>
     <PostPreviewCard
       v-for="(post, index) in docs"

pages/stories.vue

@@ -30,9 +30,8 @@ const tags = new Set(
         :dest="`/tags/stories/${tag}`"
         v-for="(tag, index) in tags"
         :key="index"
-      >
+        :name="tag"
-        {{ tag }}
+      />
-      </Tag>
     </div>
     <PostPreviewCard
       v-for="(story, index) in docs"