---
import '../styles/normalize.css';
import SiteNav from '../components/SiteNav.astro';
import SeoHead from '../components/seo/SeoHead.astro';
import { site } from '../lib/siteConfig';
import { getArchiveYears, getTagSummaries } from '../lib/posts';

const archiveYears = getArchiveYears();
const tags = getTagSummaries();
const description = `${site.title} 的文章、归档和标签站点地图`;
---

<!doctype html>
<html lang={site.language}>
  <head>
    <SeoHead title="站点地图" description={description} path="/site-map/" />
  </head>
  <body>
    <main class="site-map">
      <SiteNav />
      <header>
        <h1>站点地图</h1>
        <p>{description}</p>
      </header>

      <section aria-labelledby="main-pages">
        <h2 id="main-pages">主要页面</h2>
        <ul>
          <li><a href="/">首页</a></li>
          <li><a href="/archive/">归档</a></li>
          <li><a href="/tags/">标签</a></li>
          <li><a href="/rss.xml">RSS</a></li>
          <li><a href="/sitemap.xml">XML Sitemap</a></li>
        </ul>
      </section>

      {tags.length > 0 && (
        <section aria-labelledby="tag-pages">
          <h2 id="tag-pages">标签</h2>
          <ul class="columns">
            {tags.map((tag) => (
              <li><a href={`/tags/${tag.slug}/`}>{tag.name}</a> <span>({tag.count})</span></li>
            ))}
          </ul>
        </section>
      )}

      <section aria-labelledby="post-pages">
        <h2 id="post-pages">文章</h2>
        {archiveYears.map((year) => (
          <div class="year-group">
            <h3>{year.year}</h3>
            <ul>
              {year.posts.map((post) => (
                <li>
                  <a href={post.url}>{post.title}</a>
                  {post.date && <time datetime={post.date}>{new Date(post.date).toLocaleDateString(site.language)}</time>}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </section>
    </main>
  </body>
</html>

<style>
  .site-map {
    width: min(860px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0 80px;
    color: #20201d;
    font-family:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      sans-serif;
  }

  .site-map :global(.site-nav) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 36px;
    color: #625a50;
    font-size: 0.95rem;
  }

  a {
    color: inherit;
    text-underline-offset: 4px;
  }

  header {
    border-bottom: 1px solid #d8d1c3;
    margin-bottom: 32px;
    padding-bottom: 24px;
  }

  h1 {
    margin: 0 0 12px;
    font-size: 2.5rem;
    line-height: 1.1;
  }

  h2 {
    margin: 32px 0 12px;
    font-size: 1.35rem;
  }

  h3 {
    margin: 20px 0 8px;
    color: #625a50;
    font-size: 1rem;
  }

  p {
    margin: 0;
    color: #5b554d;
    line-height: 1.7;
  }

  ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 1.2rem;
  }

  .columns {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  li {
    line-height: 1.6;
  }

  time,
  span {
    color: #766e63;
    font-size: 0.9rem;
  }

  time {
    margin-left: 10px;
  }

  .year-group + .year-group {
    margin-top: 16px;
  }
</style>
