blog/src/components/pages/MomentsPage.astro

---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';
import { t } from '../../i18n/ui';
import type { Locale } from '../../lib/locale';

// /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
interface Props {
  locale?: Locale;
}
const { locale = 'zh' } = Astro.props;

const moments = (await getCollection('moments')).sort(
  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
);
const iso = (d: Date) => d.toISOString();
---

<BaseLayout title={`${t('moments_title', locale)} · wait4x`}>
  <h1 class="page-title">{t('moments_title', locale)}</h1>
  <p class="page-note">{t('moments_note', locale)}</p>
  <p class="pv-line" aria-label={t('pv_viewed', locale)}>
    <span data-artalk-pv data-page-key={locale === 'en' ? '/en/moments/' : '/moments/'}>–</span>
    {' '}{t('pv_viewed', locale)}
  </p>
  <ol class="tl">
    {moments.map((m) => (
      <li class="tl-item">
        <time class="tl-date" datetime={iso(m.data.pubDate)}>
          {iso(m.data.pubDate).slice(0, 10)}
        </time>
        <div class="mom-card">
          {m.data.image && (
            <figure
              class:list={[
                'mom-fig',
                (m.data.image.width ?? 0) < (m.data.image.height ?? 0) && 'vt',
              ]}
            >
              <Image
                src={m.data.image}
                alt={m.data.text ?? m.data.tags.join(' ')}
                widths={[480, 840]}
                sizes="(min-width: 760px) 420px, calc(100vw - 140px)"
              />
            </figure>
          )}
          {m.data.text && <p>{m.data.text}</p>}
          {m.data.tags.length > 0 && (
            <p class="mom-tags">
              {m.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
            </p>
          )}
        </div>
      </li>
    ))}
  </ol>

  <!-- 安装引导（disclosure 小条）：仅浏览器明确可装且未安装时现形，克制不打扰 -->
  <div class="install-cta" id="install-cta" hidden>
    <span>{locale === 'en' ? 'Add to Home Screen — moments work offline' : '装到主屏，离线也能刷瞬间'}</span>
    <button type="button" id="install-btn" class="install-btn">
      {locale === 'en' ? 'Install' : '安装'}
    </button>
  </div>
</BaseLayout>

<script>
  // 访问量：与 ArtalkComments 同款独立 POST（双轨 pageKey 分开计数；POST 绕 ESA 缓存）
  const bumpPv = async () => {
    const el = document.querySelector('[data-artalk-pv]');
    if (!el) return;
    const key = el.dataset.pageKey ?? '';
    if (!key) return;
    try {
      const res = await fetch('/artalk/api/v2/pages/pv', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ page_key: key, site_name: 'wait4x.online' }),
      });
      const d = await res.json();
      el.textContent = String(d.pv ?? '–');
    } catch {
      el.textContent = '–';
    }
  };

  // 时间线渐显：html[data-mom-anim] 由 JS 前置标记——无 JS / reduced-motion 时
  // 标记缺席，CSS 初始隐藏规则整体不生效（渐进降级，元素永远可见）
  let io: IntersectionObserver | null = null;
  const armAnim = () => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!('IntersectionObserver' in window)) return;
    document.documentElement.dataset.momAnim = 'on';
    io?.disconnect();
    io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            e.target.classList.add('in-view');
            io?.unobserve(e.target);
          }
        }
      },
      { rootMargin: '0px 0px -8% 0px' },
    );
    document.querySelectorAll('.tl-item:not(.in-view)').forEach((el) => io?.observe(el));
  };

  document.addEventListener('astro:page-load', () => {
    void bumpPv();
    armAnim();
    refreshInstallCta();
  });
  void bumpPv();
  armAnim();

  // —— PWA 安装引导：beforeinstallprompt 早在页面加载初期触发，
  //     故模块级立即绑定存事件，page-load 只负责刷新 UI 显隐 ——
  let deferredPrompt: Event & { prompt?: () => Promise<void>; userChoice?: Promise<{ outcome: string }> } | null = null;
  document.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e as typeof deferredPrompt;
    refreshInstallCta();
  });
  document.addEventListener('appinstalled', () => {
    deferredPrompt = null;
    refreshInstallCta();
  });
  const isInstalled = () =>
    matchMedia('(display-mode: standalone)').matches ||
    (navigator as Navigator & { standalone?: boolean }).standalone === true;
  function refreshInstallCta() {
    const cta = document.getElementById('install-cta');
    if (!cta) return;
    cta.hidden = !(deferredPrompt && !isInstalled());
  }
  document.addEventListener('click', (e) => {
    if ((e.target as HTMLElement)?.id !== 'install-btn') return;
    if (!deferredPrompt) return;
    void (async () => {
      try {
        await deferredPrompt?.prompt?.();
        const choice = await deferredPrompt?.userChoice;
        if (choice?.outcome === 'accepted') {
          deferredPrompt = null;
          refreshInstallCta();
        }
      } catch { /* 用户关闭安装框：保留事件，小条仍在 */ }
    })();
  });
  refreshInstallCta();
</script>

<style>
  .page-title {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    color: var(--ink-1);
    margin-top: var(--space-5);
    text-wrap: balance;
  }
  .page-note {
    font-size: 13px;
    color: var(--ink-4);
    margin-block: var(--space-1) var(--space-4);
  }
  .tl {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
  }
  /* 时间线骨架：左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
  .tl-item {
    position: relative;
    margin: 0 0 var(--space-4) calc(var(--space-5) + var(--space-4));
    padding-left: var(--space-4);
    border-left: 1px solid var(--line);
  }
  .tl-item:last-child { margin-bottom: 0; }
  .tl-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--bg);
  }
  .tl-date {
    position: absolute;
    left: calc(-1 * (var(--space-5) + var(--space-4)));
    top: 4px;
    width: var(--space-5);
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ink-4);
    font-variant-numeric: tabular-nums;
  }
  .mom-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-soft);
  }
  .mom-card > p { font-size: 15px; color: var(--ink-2); }
  .mom-fig {
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 var(--space-2);
    max-width: 420px;
  }
  .mom-fig.vt { max-width: 260px; }
  .mom-fig :global(img) { width: 100%; height: auto; }
  .mom-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
  }
  .tag {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-3);
    background: var(--bg);
    border-radius: 5px;
    padding: 1px 7px;
    white-space: nowrap;
  }
  /* 窄屏：日期卡到卡片上方，竖线左移收窄 */
  @media (max-width: 760px) {
    .tl-item { margin-left: var(--space-3); }
    .tl-date {
      position: static;
      display: block;
      width: auto;
      text-align: left;
      margin-bottom: var(--space-1);
    }
  }
  @media (max-width: 560px) {
    .mom-card { padding: var(--space-2) var(--space-3); }
    .mom-fig { max-width: 100%; }
  }
  .install-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3);
    border: 1px dashed var(--line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink-3);
  }
  .install-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-2);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
  }
  .install-btn:hover { border-color: var(--accent); }
  .pv-line {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-4);
    margin: 0 0 var(--space-4);
  }
  /* 初始隐藏仅在 JS 标记存在时生效：宁轻勿闹——透明度+8px 上移，进入视口一次性点亮 */
  [data-mom-anim] .tl-item {
    opacity: 0;
    translate: 0 8px;
    transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
  }
  [data-mom-anim] .tl-item.in-view {
    opacity: 1;
    translate: 0 0;
  }
</style>