class/src/pages/index.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import OnThisDay from "../components/OnThisDay.astro";
import { galleryIntro, photoTopics } from "../data/photos";
import { featuredMessage, messages, messagesIntro } from "../data/messages";
import { people, peopleIntro } from "../data/people";
import { site, stats } from "../data/site";
import { timeline, timelineIntro } from "../data/timeline";
import { articles, featuredArticles } from "../data/articles";

const previewTimeline = timeline.slice(0, 4);
const previewPhotoTopics = photoTopics.slice(0, 4);
const previewPeople = people.slice(0, 6);
---

<BaseLayout title={site.title}>
  <section
    id="top"
    class="hero"
    style={`--hero-image: url("${site.heroImage}")`}
  >
    <div class="hero-content">
      <p class="eyebrow">{site.anniversary}</p>
      <h1>{site.title}</h1>
      <p>{site.subtitle}</p>
      <div class="hero-actions">
        <a class="button primary" href="/timeline/">翻开回忆</a>
        <a class="button" href="/messages/">写一句话</a>
      </div>
    </div>
  </section>

  <aside class="stats" aria-label="纪念数据">
    {
      stats.map((item) => (
        <div class="stat">
          <strong>{item.value}</strong>
          <span>{item.label}</span>
        </div>
      ))
    }
  </aside>

  <main>
    <OnThisDay />

    <section id="timeline">
      <div class="section-inner">
        <div class="section-title">
          <h2>{timelineIntro.title}</h2>
          <p>{timelineIntro.text}</p>
        </div>

        <div class="timeline">
          {
            previewTimeline.map((moment) =>
              moment.href ? (
                <a class="moment moment-link" href={moment.href}>
                  <time>{moment.date}</time>
                  <div>
                    <h3>{moment.title}</h3>
                    <p>{moment.text}</p>
                  </div>
                </a>
              ) : (
                <article class="moment">
                  <time>{moment.date}</time>
                  <div>
                    <h3>{moment.title}</h3>
                    <p>{moment.text}</p>
                  </div>
                </article>
              )
            )
          }
        </div>

        <a class="section-link" href="/timeline/">查看完整时间线</a>
      </div>
    </section>

    <section id="gallery" class="gallery-band">
      <div class="section-inner">
        <div class="section-title">
          <h2>{galleryIntro.title}</h2>
          <p>{galleryIntro.text}</p>
        </div>

        <div class="photo-grid">
          {
            previewPhotoTopics.map((topic) => (
              <a
                class="photo-card topic-card"
                href={`/gallery/${topic.slug}/`}
                style={topic.cover ? `--photo-image: url("${topic.cover}")` : ""}
              >
                <div>
                  <strong>{topic.title}</strong>
                  <span>{topic.text}</span>
                </div>
              </a>
            ))
          }
        </div>

        <a class="section-link" href="/gallery/">查看全部照片</a>
      </div>
    </section>

    <section id="people">
      <div class="section-inner">
        <div class="section-title">
          <h2>{peopleIntro.title}</h2>
          <p>{peopleIntro.text}</p>
        </div>

        <div class="people-grid">
          {
            previewPeople.map((person) => (
              <a class="person person-link" href={`/people/${person.slug}/`}>
                <div class="person-photo" style={person.photo ? `--person-photo: url("${person.photo}")` : ""}>
                  <span>{person.initial}</span>
                </div>
                <div class="person-body">
                  <h3>
                    {person.name} · {person.location}
                  </h3>
                  <div class="person-meta">
                    <span>{person.school}</span>
                    <span>{person.direction}</span>
                  </div>
                  <p>{person.text}</p>
                </div>
              </a>
            ))
          }
        </div>

        <a class="section-link" href="/people/">查看如今的我们</a>
      </div>
    </section>

    <section id="articles" class="publication-band">
      <div class="section-inner">
        <div class="section-title publication-title">
          <div>
            <p class="eyebrow">FROM WECHAT · 青春刊物</p>
            <h2>散落在公众号里的故事，也该被好好收藏</h2>
          </div>
          <p>
            已整理 {articles.length} 篇公众号文章。从班级日志、毕业典礼到节日来信，按下时间的书签，重新读一遍当时的我们。
          </p>
        </div>

        <div class="featured-articles">
          {
            featuredArticles.map((article, index) => (
              <a
                class:list={["article-card", index === 0 && "article-card-featured"]}
                href={article.sourceUrl}
                target="_blank"
                rel="noreferrer"
              >
                <div
                  class="article-cover"
                  style={article.cover ? `--article-cover: url("${article.cover}")` : ""}
                >
                  <span>{article.category}</span>
                </div>
                <div class="article-copy">
                  <time datetime={article.date}>{article.displayDate}</time>
                  <h3>{article.title}</h3>
                  <p>{article.excerpt}</p>
                  <span class="read-more">阅读原文 <i class="fa-solid fa-arrow-up-right-from-square"></i></span>
                </div>
              </a>
            ))
          }
        </div>

        <a class="section-link publication-link" href="/articles/">翻阅全部 {articles.length} 篇</a>
      </div>
    </section>

    <section id="messages" class="gallery-band">
      <div class="section-inner">
        <div class="section-title">
          <h2>{messagesIntro.title}</h2>
          <p>{messagesIntro.text}</p>
        </div>

        <div class="message-wall">
          <article class="message featured">
            <p>“{featuredMessage.text}”</p>
            <cite>{featuredMessage.author}</cite>
          </article>
          <div class="small-messages">
            {
              messages.slice(0, 2).map((message) => (
                <article class="message">
                  <h3>{message.title}</h3>
                  <p>{message.text}</p>
                </article>
              ))
            }
          </div>
        </div>

        <a class="section-link" href="/messages/">查看全部留言</a>
      </div>
    </section>

    <section class="ending">
      <div class="section-inner">
        <h2>下一次见面，我们再补一张合照</h2>
        <p>
          这个网站会继续长大：添上真实照片、真实名字、真实留言，然后成为属于我们班的一本电子纪念册。
        </p>
      </div>
    </section>
  </main>
</BaseLayout>