You've already forked AstralRinth
forked from didirus/AstralRinth
eef09e1ffe
* feat: blog migration w/ fixes Co-authored-by: Prospector <prospectordev@gmail.com> * feat: add changelog button to news page * fix: lint issues * refactor: replace nuxt content with `@modrinth/blog` * feat: shared public folder * feat: try lazy loading html content * feat: rss + hide newsletter btn + blog.config.ts * feat: add new chapter modrinth servers post * fix: lint issues * fix: only generate RSS feed if changes detected * fix: utils dep * fix: lockfile dep * feat: GET /email/subscribe + subscription button * fix: lint issues * feat: articles.json for app * Made grid more responsive * fix: changes * Make margin slightly smaller in lists * Fix footer link * feat: latest news * Fix responsiveness * Remove old utm link * Update changelog * Lint --------- Co-authored-by: Prospector <prospectordev@gmail.com>
41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import dayjs from "dayjs";
|
|
|
|
interface Article {
|
|
path: string;
|
|
thumbnail: string;
|
|
title: string;
|
|
summary: string;
|
|
date: string;
|
|
}
|
|
|
|
defineProps<{
|
|
article: Article;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<nuxt-link
|
|
:to="`${article.path}/`"
|
|
class="active:scale-[0.99]! group flex flex-col transition-all ease-in-out hover:brightness-125"
|
|
>
|
|
<article class="flex h-full grow flex-col gap-4">
|
|
<img
|
|
:src="article.thumbnail"
|
|
class="aspect-video w-full rounded-xl border-[1px] border-solid border-button-border object-cover"
|
|
/>
|
|
<div class="flex grow flex-col gap-2">
|
|
<h3 class="m-0 text-base leading-tight group-hover:underline">
|
|
{{ article.title }}
|
|
</h3>
|
|
<p v-if="article.summary" class="m-0 text-sm leading-tight">
|
|
{{ article.summary }}
|
|
</p>
|
|
<div class="mt-auto text-sm text-secondary">
|
|
{{ dayjs(article.date).format("MMMM D, YYYY") }}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</nuxt-link>
|
|
</template>
|