48 lines
No EOL
1.1 KiB
Vue
48 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<NuxtLink :to="link" class="BlogCard z-2">
|
|
<div class="image">
|
|
<img :src="image" alt=" " aria-hidden="true"/>
|
|
</div>
|
|
<div class="card-content">
|
|
<header>
|
|
<span class="chip"><BlogCategory :name="category"/></span>
|
|
<h2>{{ title }}</h2>
|
|
</header>
|
|
<main>
|
|
<p>
|
|
{{ generatePlainText(excerpt.value).at(0)?.text ?? '' }}
|
|
</p>
|
|
</main>
|
|
<footer>
|
|
<BlogAuthor :name="author.name" :image="author.image" :date="date"/>
|
|
<div class="tags">
|
|
<span>tags</span>
|
|
<span class="tag" v-for="tag in tags">{{ tag }}</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Category } from './types'
|
|
import type { MinimalNode } from '@nuxt/content'
|
|
|
|
type Props = {
|
|
title: string
|
|
description: string
|
|
image: string
|
|
date: string
|
|
excerpt: { type: string, value: MinimalNode[], children?: any }
|
|
link: string
|
|
tags: string[]
|
|
category: Category
|
|
author: {
|
|
name: string
|
|
image: string
|
|
}
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
</script> |