38 lines
1.0 KiB
Vue
38 lines
1.0 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>
|
|
</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>
|