FMHYedit/.vitepress/theme/Posts.vue
2024-01-25 16:32:45 +00:00

68 lines
1.7 KiB
Vue

<!-- eslint-disable vue/require-v-for-key -->
<script setup lang="ts">
import { data as posts } from './posts.data'
const formatDate = (raw: string): string => {
const date = new Date(raw)
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric'
})
}
</script>
<template>
<div>
<section>
<h1 class="flex items-center gap-2">Posts</h1>
<p>Everything from Monthly Updates to fmhy updates.</p>
We also have a
<a href="/feed.rss" target="_blank" title="RSS feed">
<div class="i-carbon-rss vertical-top" />
RSS feed.
</a>
</section>
<template v-for="year in Object.keys(posts).reverse()" :key="year">
<h2>{{ year }}</h2>
<ul>
<li v-for="post of posts[year]" :key="post.url">
<article>
<a :href="post.url" class="border-none">{{ post.title }}</a>
-
<dl class="m-0 inline">
<dt class="sr-only">Published on</dt>
<dd class="m-0 inline">
<time :datetime="post.date" class="font-bold">
{{ formatDate(post.date) }}
</time>
</dd>
</dl>
</article>
</li>
</ul>
</template>
</div>
</template>
<style scoped>
.VPBadge {
border: 1px solid transparent;
border-radius: 8px;
display: inline-flex;
margin-left: 2px;
padding: 0 10px;
line-height: 22px;
font-size: 12px;
font-weight: 500;
transform: translateY(-2px);
align-items: center;
gap: 0.2rem;
padding-right: 10px;
vertical-align: middle;
color: var(--vp-badge-tip-text);
background-color: transparent;
border-color: var(--vp-custom-block-tip-outline);
}
</style>