30 lines
1.1 KiB
Vue
30 lines
1.1 KiB
Vue
<template>
|
|
<HoverCard nuxt-client class="min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]">
|
|
<template #content>
|
|
<Markdown class="!px-6" path="tags" :filter="tag" popover />
|
|
</template>
|
|
<span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
|
|
<slot></slot>
|
|
</span>
|
|
</HoverCard>
|
|
</template>
|
|
|
|
<style>
|
|
.cm-hashtag.cm-hashtag-begin
|
|
{
|
|
@apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 ps-1 rounded-l-[12px] border border-r-0 border-accent-blue border-opacity-30;
|
|
}
|
|
.cm-hashtag.cm-hashtag-end
|
|
{
|
|
@apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 pe-1 rounded-r-[12px] !rounded-se-none border border-l-0 border-accent-blue border-opacity-30;
|
|
}
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
const { tag } = defineProps<{
|
|
tag: string
|
|
}>();
|
|
|
|
const { content } = useContent();
|
|
const overview = computed(() => content.value.find(e => e.path === "tags"));
|
|
</script> |