photog/templates/album.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{.Tag.Name}} · Photo Gallery</title>
  <link rel="stylesheet" href="{{.FontsURL}}">
  <link rel="stylesheet" href="/static/style.css">
  <link rel="icon" href="/static/favicon.ico" sizes="any">
  <link rel="icon" type="image/png" href="/static/web-32.png" sizes="32x32">
  <link rel="apple-touch-icon" href="/static/web-192.png">
  <style>:root { --serif: '{{.SerifFamily}}', Georgia, serif; --mj: '{{.MlFamily}}', sans-serif; }</style>
  <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Photo Feed">
</head>
<body>
  <header class="profile-hdr">
    <div class="profile-inner">
      <div class="avatar-ring">
        <span class="avatar-initials">{{.Initial}}</span>
      </div>
      <div class="pinfo">
        <h1>{{.Author}}</h1>
        <p class="handle">{{.Handle}}</p>
        <p class="pcount"><strong>{{.Total}}</strong> posts</p>
        <p class="pbio">{{.Bio}}{{if .BioAlt}}<br><span class="ml">{{.BioAlt}}</span>{{end}}</p>
        <a href="{{.TimelineURL}}" class="rss-a">Timeline</a>
        <a href="/albums/" class="rss-a">← Albums</a>
      </div>
    </div>
  </header>

  <main>
    <div class="grid-wrap">
      <section class="tl-day">
        <h2 class="tl-date">{{.Tag.Name}}<span class="tl-count">{{.Count}}</span></h2>
        <div class="pgrid">
          {{range .Photos}}
          <a href="/photo/{{.Slug}}/" class="ptile">
            <img src="/{{.Thumb}}" alt="{{.Caption}}" loading="lazy">
          </a>
          {{end}}
        </div>
      </section>

      {{if or .PrevURL .NextURL}}
      <nav class="pager">
        {{if .PrevURL}}<a class="pager-newer" href="{{.PrevURL}}">← Newer</a>{{end}}
        {{if .NextURL}}<a class="pager-older" href="{{.NextURL}}" data-load-more>Older →</a>{{end}}
      </nav>
      {{end}}
    </div>
  </main>

  <footer class="site-footer">
    © 2000–{{.Year}} {{.Author}}. All rights reserved.
  </footer>

  <script>
  (function () {
    const btn = document.querySelector('[data-load-more]');
    if (!btn) return;
    const grid = document.querySelector('.pgrid');
    let loading = false;

    async function loadMore(url) {
      if (loading) return;
      loading = true;
      try {
        const res = await fetch(url);
        if (!res.ok) return;
        const html = await res.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        doc.querySelectorAll('.pgrid > a').forEach(t => grid.appendChild(t));
        const nextBtn = doc.querySelector('[data-load-more]');
        if (nextBtn) btn.href = nextBtn.getAttribute('href');
        else btn.remove();
      } finally {
        loading = false;
      }
    }

    btn.addEventListener('click', (e) => {
      e.preventDefault();
      loadMore(btn.href);
    });

    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && document.body.contains(btn)) {
        loadMore(btn.href);
      }
    }, { rootMargin: '400px' });
    io.observe(btn);
  })();
  </script>
</body>
</html>