BlogTitleHeader.vue

<script setup lang="ts">
interface Frontmatter {
  date: string
  updated: string
  tags: string
  socialImage?: string
}

const props = defineProps<{
  frontmatter: Frontmatter
  title: string
}>()

const reader = useReaderStore()
const tags = props.frontmatter.tags?.split(', ')

const getImageSrc = (imagePath?: string): string => {
  if (!imagePath) return ''
  if (imagePath.startsWith('http')) return imagePath
  const basePath = import.meta.env.BASE_URL || '/pythoncheatsheet/'
  return basePath.endsWith('/') ? `${basePath}${imagePath.slice(1)}` : `${basePath}${imagePath}`
}
</script>

<template>
  <div>
    <div class="flex items-center">
      <span class="font-display text-sm font-medium text-primary-500">
        Posted on {{ frontmatter.date }}
      </span>
      <span class="ml-2 text-slate-400">·</span>
      <span
        v-if="frontmatter.updated"
        class="font-display text-sm text-slate-400 sm:ml-2"
      >
        Updated on {{ frontmatter.updated }}
      </span>
    </div>
    <h1 :class="tags && !reader.isActive ? 'mb-0' : ''">{{ title }}</h1>

    <div
      v-if="tags && !reader.isActive"
      class="mb-10 mt-3 flex flex-wrap gap-3 text-xs text-slate-50 dark:text-white"
    >
      <span
        v-for="tag in tags"
        :key="tag"
        class="rounded bg-primary-500 px-1.5 py-1 dark:bg-primary-600"
      >
        #{{ tag }}
      </span>
    </div>

    <img
      v-if="frontmatter.socialImage"
      :src="getImageSrc(frontmatter.socialImage)"
      :alt="`Image for ${title}`"
      class="w-full rounded-lg my-4"
    />
  </div>
</template>