1---
 2import type { CollectionEntry } from "astro:content";
 3
 4import { DEFAULT_LOCALE } from "@/config.ts";
 5import { getPostLocaleSlug } from "@/utils/content.ts";
 6import { getRelativeLocaleUrl } from "@/utils/url.ts";
 7
 8interface Props {
 9  posts: CollectionEntry<"posts">[];
10}
11
12const { posts } = Astro.props;
13
14const postUrl = (post) => {
15  const { locale, slug } = getPostLocaleSlug(post);
16  return getRelativeLocaleUrl(slug, locale);
17};
18---
19
20<nav class="posts-list">
21  <ol>
22    {posts.map((post) => {
23      const dt = Temporal.ZonedDateTime.from(post.data.date).toPlainDateTime();
24      return (
25        <li>
26          <a href={postUrl(post)}>{post.data.title}</a>
27          <time datetime={dt.toString()}>
28            {dt
29              .toPlainDate()
30              .toLocaleString(Astro.currentLocale || DEFAULT_LOCALE)}
31          </time>
32        </li>
33      );
34    })}
35  </ol>
36</nav>
37
38<style lang="scss" is:global>
39nav.posts-list ol li {
40  display: grid;
41  align-items: first baseline;
42  grid-template-columns: 1fr auto;
43  gap: 1rem;
44
45  &::before {
46    /* remove ::before */
47    content: initial;
48  }
49
50  a {
51    color: inherit;
52    text-decoration-color: color-mix(in oklab, var(--color-base-content) 60%,
53      transparent);
54
55    &:hover {
56      text-decoration-color: var(--color-base-content);
57    }
58  }
59
60  time {
61    font-size: 0.875rem;
62    color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
63  }
64}
65</style>