Card.vue

<script setup lang="ts">
import type { ReleaseData } from '~~/shared/types/changelog'

const { release } = defineProps<{
  release: ReleaseData
}>()
const formattedDate = computed(() => {
  if (!release.publishedAt) {
    return
  }
  return new Date(release.publishedAt).toISOString().split('T')[0]
})

const cardId = computed(() => (release.publishedAt ? `date-${formattedDate.value}` : undefined))

const navId = computed(() => `release-${encodeURI(release.title)}:`)

function navigateToTitle() {
  navigateTo(`#${navId.value}`)
}
</script>
<template>
  <section class="border border-border rounded-lg p-4 sm:p-6">
    <div class="flex gap-2 items-center" :id="cardId">
      <h2 class="text-1xl sm:text-2xl font-medium min-w-0 break-words py-2" :id="navId">
        <a
          class="hover:decoration-accent hover:text-accent focus-visible:decoration-accent focus-visible:text-accent transition-colors duration-200"
          :class="$style.linkTitle"
          :href="`#${navId}`"
          @click.prevent="navigateToTitle()"
        >
          {{ release.title }}
        </a>
      </h2>
      <TagStatic v-if="release.prerelease" variant="default" class="h-unset">
        {{ $t('changelog.pre_release') }}
      </TagStatic>
      <TagStatic v-if="release.draft" variant="default" class="h-unset">
        {{ $t('changelog.draft') }}
      </TagStatic>
      <div class="flex-1" aria-hidden="true"></div>
      <ReadmeTocDropdown
        v-if="release?.toc && release.toc.length > 1"
        :toc="release.toc"
        class="ms-auto"
      />
      <!-- :active-id="activeTocId" -->
    </div>
    <DateTime v-if="release.publishedAt" :datetime="release.publishedAt" date-style="medium" />
    <Readme v-if="release.html" :html="release.html"></Readme>
  </section>
</template>

<style module>
.linkTitle::after {
  content: '__';
  @apply inline i-lucide:link rtl-flip ms-1 opacity-0;
}

.linkTitle:hover:after {
  @apply opacity-100;
}
</style>