59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<script setup>
|
|
useHead({
|
|
title: 'Inspin Digital | Get Notified',
|
|
meta: [
|
|
{
|
|
name: 'description',
|
|
content: `Get Notified by Inspin Digital. An epic chronicle of the dweb, libre software, and community updates.`
|
|
},
|
|
],
|
|
})
|
|
|
|
const articles = await queryContent('articles')
|
|
.sort({ date: -1 })
|
|
.where({ public: true })
|
|
.only(['slug','image', 'description', 'date', 'tags', 'heading'])
|
|
.limit(4)
|
|
.find()
|
|
|
|
|
|
// Format article dates
|
|
import { format } from "date-fns";
|
|
|
|
let formatDate = (date) => {
|
|
date = new Date(date)
|
|
return new Date(
|
|
date.valueOf() + date.getTimezoneOffset() * 60 * 1000
|
|
)
|
|
}
|
|
|
|
for (let i = 0; i < articles.length; i++) {
|
|
let date = formatDate(articles[i].date)
|
|
articles[i].published = format(date, 'MMM do, yyy')
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="article">
|
|
<div class="heading center">
|
|
<h2>Get.Notified</h2>
|
|
<p>An epic chronicle of the dweb, libre software, and community updates.</p>
|
|
</div>
|
|
<div class="cards center">
|
|
<div class="card" :id="'card-' + index" v-for="(article, index) in articles" :key="index">
|
|
<NuxtLink :href="'/articles/' + article.slug">
|
|
<img :src="article.image.src" :alt="article.image.alt" />
|
|
<div class="meta">
|
|
<h3>{{ article.heading }}</h3>
|
|
<p class="desc">{{ article.description }}</p>
|
|
<p class="date">{{ article.published }}</p>
|
|
<p class="tags" v-for="tag in article.tags">
|
|
{{ tag }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |