forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
50 lines
1.4 KiB
Vue
50 lines
1.4 KiB
Vue
<template>
|
|
<div class="mx-2 p-4 !py-8 sm:mx-8 sm:p-32">
|
|
<div class="my-8 flex items-center justify-between">
|
|
<h2 class="m-0 mx-auto text-3xl font-extrabold sm:text-4xl">Latest news from Modrinth</h2>
|
|
</div>
|
|
|
|
<div v-if="latestArticles" class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
|
|
<div
|
|
v-for="(article, index) in latestArticles"
|
|
:key="article.slug"
|
|
:class="{ 'max-xl:hidden': index === 2 }"
|
|
>
|
|
<NewsArticleCard :article="article" />
|
|
</div>
|
|
</div>
|
|
<div class="mx-2 my-8 flex w-full items-center justify-center">
|
|
<ButtonStyled color="brand" size="large">
|
|
<nuxt-link to="/news">
|
|
<NewspaperIcon />
|
|
View all news
|
|
</nuxt-link>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { NewspaperIcon } from '@modrinth/assets'
|
|
import { articles as rawArticles } from '@modrinth/blog'
|
|
import { ButtonStyled, NewsArticleCard } from '@modrinth/ui'
|
|
import { computed, ref } from 'vue'
|
|
|
|
const articles = ref(
|
|
rawArticles
|
|
.map((article) => ({
|
|
...article,
|
|
path: `/news/article/${article.slug}/`,
|
|
thumbnail: article.thumbnail
|
|
? `/news/article/${article.slug}/thumbnail.webp`
|
|
: `/news/default.webp`,
|
|
title: article.title,
|
|
summary: article.summary,
|
|
date: article.date,
|
|
}))
|
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
|
|
)
|
|
|
|
const latestArticles = computed(() => articles.value.slice(0, 3))
|
|
</script>
|