51 lines
1.8 KiB
Vue
51 lines
1.8 KiB
Vue
|
<script setup>
|
||
|
|
|
||
|
|
const { isDesktopOrTablet } = useDevice();
|
||
|
|
|
||
|
|
const articles = await queryContent('articles')
|
||
|
|
.sort({ date: -1 })
|
||
|
|
.where({ public: true })
|
||
|
|
.only(['slug','image', 'preview', 'date', 'tags'])
|
||
|
|
.limit(3)
|
||
|
|
.find()
|
||
|
|
|
||
|
|
import { format, addMinutes, parseISO } from "date-fns";
|
||
|
|
|
||
|
|
for (let i = 0; i < articles.length; i++) {
|
||
|
|
let date = parseISO(articles[i].date)
|
||
|
|
articles[i].published = format(addMinutes(date, 240), 'MMM do, yyy')
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="journal">
|
||
|
|
<div class="msg">
|
||
|
|
<h2><span>Get.Notified</span><br> by Inspin Digital</h2>
|
||
|
|
<p>An epic chronicle of the decentralized web, <br v-if="isDesktopOrTablet">libre software, and community updates.</p>
|
||
|
|
</div>
|
||
|
|
<div class="cards-container">
|
||
|
|
<div class="scroll">
|
||
|
|
<a href="#first" aria-label="Scroll news articles right"><span class="icon-arrow-left"></span></a>
|
||
|
|
<a href="#last" aria-label="Scroll news articles left"><span class="icon-arrow-right"></span></a>
|
||
|
|
</div>
|
||
|
|
<div class="cards">
|
||
|
|
<div class="card" :id="index === 0 ? 'first' : null" v-for="(article, index) in articles" :key="index">
|
||
|
|
<NuxtLink :href="'/articles/' + article.slug">
|
||
|
|
<img :src="article.image.src" :alt="article.image.alt" />
|
||
|
|
<h3>{{ article.preview }}</h3>
|
||
|
|
<p class="date">{{ article.published }}</p>
|
||
|
|
<p class="tags" v-for="tag in article.tags">
|
||
|
|
{{ tag }}
|
||
|
|
</p>
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
<div class="card card-last" id="last">
|
||
|
|
<h4>Continue Reading</h4>
|
||
|
|
<p>Explore resources, software <br/>guides, and community posts</p>
|
||
|
|
<NuxtLink href="/articles">View More<span class="icon-chevron-right"></span></NuxtLink>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|