vhaudiquet
99a943eb36
pipeline / build-and-push-images (push) Successful in 3m12s
NuxtJS, Vue, real web app Nuxt content: blog Better mobile/responsive design and practices Better practices overall
41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
defineOgImageComponent('Site', {
|
|
title: 'Blog'
|
|
})
|
|
|
|
const content = await queryCollection('blog').order('date', 'DESC').all()
|
|
|
|
function formatDateString(dateString: string) : string {
|
|
let date = new Date(Date.parse(dateString))
|
|
return new Intl.DateTimeFormat("en-US", {
|
|
dateStyle: "long",
|
|
timeZone: "Europe/Paris",
|
|
}).format(date)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<HeaderCompact title="Blog" previous-link="/" class="mb-20" />
|
|
|
|
<div class="m-auto lg:w-[56rem] w-[90%]" v-for="article in content">
|
|
<h1 class="text-2xl" v-if="article">{{ article.title }}</h1>
|
|
|
|
<h3 class="text-xl" v-if="article">
|
|
{{ formatDateString(article.date) }}
|
|
</h3>
|
|
|
|
<div class="flex">
|
|
<h4 v-for="tag in article.tags"
|
|
class="p-1 bg-slate-100 mr-3 hover:cursor-pointer">
|
|
{{ tag }}
|
|
</h4>
|
|
</div>
|
|
|
|
<h4 class="text-xl mt-2" v-if="article">{{ article.description }}</h4>
|
|
|
|
<a :href="article.path">
|
|
<h2 class="text-xl text-right">[ Read more ]</h2>
|
|
</a>
|
|
</div>
|
|
</template>
|