webfussel
0a481fee5e
Add first post for monday, add external posts from other authors, add components for internal and external links
49 lines
No EOL
1 KiB
Vue
49 lines
No EOL
1 KiB
Vue
<template>
|
|
<aside class="BlogAuthor">
|
|
<div class="image">
|
|
<img
|
|
loading="lazy"
|
|
width="50"
|
|
height="50"
|
|
:srcset="imageSet"
|
|
: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
|
|
img?: string
|
|
}
|
|
|
|
const { name, date, img } = 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 = computed(() => {
|
|
if (img) return img
|
|
return getImageSet('/img/blog/authors/', name).join(', ')
|
|
})
|
|
|
|
const initialImage = computed(() => {
|
|
if (img) return img
|
|
return getInitialImage('/img/blog/authors/', name)
|
|
})
|
|
</script> |