blog/src/pages/index.astro

---
import Layout from '@/layouts/Layout.astro'
import { getPinnedPosts, getPostsByYear } from '@/utils/content'

const pinnedPosts = await getPinnedPosts()
const postsByYear = await getPostsByYear()
---

<Layout>
  <main>
    {pinnedPosts.length > 0 && (
      <section>
        <ul>
          {pinnedPosts.map(post => (
            <li>
              <a href={`/posts/${post.data.slug || post.slug}/`}>
                {post.data.title}
                <div class="block lg:inline lg:before:content-['_']">
                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
                  {post.remarkPluginFrontmatter?.minutes && <span>  {post.remarkPluginFrontmatter.minutes} min</span>}
                </div>
              </a>
            </li>
          ))}
        </ul>
      </section>
    )}

    {[...postsByYear.entries()].map(([year, posts]) => (
      // Year Group
      <section class="mt-8">
        {/* Year */}
        <time class="text-8 font-navbar">{year}</time>
        {/* Posts List */}
        <ul>
          {posts.map(post => (
            // Single Post
            <li class="mt-6">
              {/* Post Title */}
              <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
                {/* Post Date */}
                <div class="block text-5.6 leading-7 font-navbar lg:inline lg:before:content-['_']" aria-hidden="true">
                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
                  {post.remarkPluginFrontmatter?.minutes && <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
                </div>
            </li>
          ))}
        </ul>
      </section>
    ))}
  </main>
</Layout>