58 lines
1.9 KiB
Vue
58 lines
1.9 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="notified">
|
|
<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">
|
|
|
|
<input type="radio" name="slide-nav" id="0" aria-label="slider" checked>
|
|
<input type="radio" name="slide-nav" id="1" aria-label="slider">
|
|
<input type="radio" name="slide-nav" id="2" aria-label="slider">
|
|
|
|
<div class="scroll-nav">
|
|
<label for="0"></label>
|
|
<label for="1"></label>
|
|
<label for="2"></label>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
<div class="card card-min" :id="index" :for="index" 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="3">
|
|
<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> |