46 lines
No EOL
1 KiB
Vue
46 lines
No EOL
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>
|
|
<small>{{ description }}</small>
|
|
</header>
|
|
<main>
|
|
<ContentRenderer :value="excerpt" />
|
|
</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'
|
|
|
|
type Props = {
|
|
title : string
|
|
description : string
|
|
image : string
|
|
date : string
|
|
excerpt : { type: string, children?: any }
|
|
link : string
|
|
tags : string[]
|
|
category : Category
|
|
author : {
|
|
name : string
|
|
image : string
|
|
}
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
</script> |