65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<TopBarLayout title="Blog" back-target="/">
|
|
<div class="fixed top-0 left-0 bottom-0 right-0 flex justify-center items-center">
|
|
<BlurredBlobCanvas
|
|
:blur="50"
|
|
:size="400"
|
|
:randomness="400"
|
|
:minimum-duration="3000"
|
|
:duration-variation="1000"
|
|
:minimum-opacity="0.4"
|
|
:opacity-variation="0"
|
|
:colors="['#eb34cf', '#6577fc']"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col space-y-8 max-w-120 mx-auto">
|
|
<router-link
|
|
v-for="post in posts"
|
|
:key="post.id"
|
|
:to="`/blog/${post.slug}`"
|
|
class="bg-light-300 bg-opacity-5 rounded-lg backdrop-blur-lg cursor-pointer hover:bg-opacity-10 focus-visible:bg-opacity-10 transform hover:scale-104
|
|
transition duration-200 p-5 sm:p-7 flex flex-col overflow-hidden"
|
|
>
|
|
<div class="font-bold text-xl">
|
|
{{ post.title }}
|
|
</div>
|
|
<XSpacer v="2"/>
|
|
<div class="text-lg">
|
|
{{ post.description }}
|
|
</div>
|
|
<XSpacer v="3"/>
|
|
<div class="font-bold text-sm flex justify-between">
|
|
<div>
|
|
Published at {{ new Date(post.published_at).toLocaleDateString() }}
|
|
</div>
|
|
<div>
|
|
{{ post.reading_time_minutes }} minute{{ post.reading_time_minutes === 1 ? "" : "s" }}
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</TopBarLayout>
|
|
</template>
|
|
|
|
<style module>
|
|
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import TopBarLayout from "../../components/TopBarLayout.vue"
|
|
import { getPosts } from "../../posts"
|
|
import XSpacer from "../../components/XSpacer.vue"
|
|
import BlurredBlobCanvas from "../../components/BlurredBlobCanvas.vue"
|
|
|
|
export default {
|
|
name: "BlogIndexPage",
|
|
components: { BlurredBlobCanvas, XSpacer, TopBarLayout },
|
|
async setup() {
|
|
const posts = await getPosts()
|
|
|
|
return {
|
|
posts
|
|
}
|
|
}
|
|
}
|
|
</script>
|