54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
|
<article ref="postEl" class="md:flex">
|
|
<h2 class="content-date h-full mt-px">
|
|
<a >{{ content.date }}</a>
|
|
</h2>
|
|
<div class="content-block">
|
|
<div class="feed-border"></div>
|
|
<div class="feed-dot"></div>
|
|
<badge
|
|
:label="`v ${content.version}`"
|
|
class="absolute -top-6 right-0 md:static mb-4"
|
|
/>
|
|
<h1 v-if="content.title" class="text-xl sm:text-3xl font-bold mb-4">
|
|
{{ content.title }}
|
|
</h1>
|
|
<ContentRenderer :value="content" class="document" />
|
|
<Authors v-if="content.authors" :authors="content.authors" />
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useScrollReveal } from '@/composables/useScrollReveal'
|
|
|
|
const props = defineProps({
|
|
content: Object,
|
|
})
|
|
|
|
const postEl = ref(null)
|
|
|
|
onMounted(() => {
|
|
useScrollReveal(postEl)
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.feed-dot {
|
|
@apply absolute -top-[1.0625rem] -left-1 h-[0.5625rem] w-[0.5625rem] rounded-full border-2 border-slate-300 bg-white md:top-[0.4375rem];
|
|
}
|
|
.feed-border {
|
|
@apply absolute -bottom-2 left-0 w-px bg-slate-200 -top-3 md:top-2.5;
|
|
}
|
|
.content-date {
|
|
@apply pl-7 text-xs sm:text-sm leading-6 text-white md:w-1/4 md:pl-0 md:pr-12 md:text-right;
|
|
}
|
|
.content-block {
|
|
@apply relative pt-2 pl-7 md:w-3/4 md:pt-0 md:pl-12 pb-16;
|
|
}
|
|
.document {
|
|
@apply max-w-none prose-h3:mb-4 prose-h3:text-base prose-h3:leading-6 prose-sm prose prose-pre:text-base prose-slate text-white prose-strong:text-primary prose-a:font-semibold prose-a:text-primary hover:prose-a:text-sky-600;
|
|
}
|
|
</style>
|