<!-- 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>