You've already forked pages
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
43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import dayjs from 'dayjs'
|
|
|
|
import AutoLink from '../base/AutoLink.vue'
|
|
|
|
export interface Article {
|
|
path: string
|
|
thumbnail: string
|
|
title: string
|
|
summary: string
|
|
date: string
|
|
}
|
|
|
|
defineProps<{
|
|
article: Article
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<AutoLink
|
|
:to="article.path"
|
|
class="active:scale-[0.99]! group flex flex-col transition-all ease-in-out hover:brightness-125 cursor-pointer"
|
|
>
|
|
<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 text-primary">
|
|
{{ article.summary }}
|
|
</p>
|
|
<div class="mt-auto text-sm text-secondary">
|
|
{{ dayjs(article.date).format('MMMM D, YYYY') }}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</AutoLink>
|
|
</template>
|