41 lines
No EOL
941 B
Vue
41 lines
No EOL
941 B
Vue
<template>
|
|
<aside class="BlogAuthor">
|
|
<div class="image">
|
|
<img
|
|
loading="lazy"
|
|
width="50"
|
|
height="50"
|
|
:srcset="imageSet.join(', ')"
|
|
:src="initialImage"
|
|
aria-hidden="true"
|
|
:alt="`Profilbild von ${name}`"
|
|
/>
|
|
</div>
|
|
<div class="meta">
|
|
<span class="name">{{ name }}</span>
|
|
<span class="date">{{ dateFormatted }}</span>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getImageSet, getInitialImage } from '../../utils/image'
|
|
|
|
type Props = {
|
|
name: string
|
|
date: string
|
|
}
|
|
|
|
const { name, date } = defineProps<Props>()
|
|
|
|
const formatter = new Intl.DateTimeFormat('de-DE', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: '2-digit',
|
|
})
|
|
|
|
const dateFormatted = computed(() => formatter.format(new Date(date)))
|
|
|
|
const imageSet = getImageSet('/img/blog/authors/', name)
|
|
const initialImage = getInitialImage('/img/blog/authors/', name)
|
|
</script> |