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 }} - + /> 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 }} - + :name="tag" + /> 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 }, +]; 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 }} - + :name="tag" + />