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-12">
        {/* Decorative Line */}
        <div class="h-0.2 w-16 bg-secondary opacity-25"></div>
        {/* Posts List */}
        <ul>
          {posts.map(post => (
            // Single Post
            <li class="mt-7">
              {/* Post Title */}
              <a
                class="hover:c-primary"
                href={`/posts/${post.data.slug || post.slug}`}
                transition:name={`post-${post.data.slug || post.slug}`}
              >
                {post.data.title}
              </a>
              {/* Post Date */}
              <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
                <span>
                  {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
                </span>
                <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
                  {post.remarkPluginFrontmatter?.minutes} min
                </span>
              </div>
            </li>
          ))}
        </ul>
      </section>
    ))}
  </main>
</Layout>