convert from PHP to Go

1 files changed, 300 insertions, 0 deletions

diff --git a/static/app.js b/static/app.js
new file mode 100644
index 0000000..86be9b1
--- /dev/null
+++ b/static/app.js
@@ -0,0 +1,300 @@
+(() => {
+  'use strict';
+
+  const { view, blog, query, myBlog } = window.MICHELANGELO;
+
+  // ── State ──────────────────────────────────────────────────
+  let offset = 0;
+  let loading = false;
+  let exhausted = false;
+  let postType = 'photo';
+  let posts = []; // all loaded posts for lightbox navigation
+  let lightboxIndex = -1;
+
+  // ── Elements ───────────────────────────────────────────────
+  const grid       = document.getElementById('grid');
+  const sentinel   = document.getElementById('sentinel');
+  const loader     = document.getElementById('loader');
+  const endMsg     = document.getElementById('end-message');
+  const lightbox   = document.getElementById('lightbox');
+  const lbMedia    = lightbox.querySelector('.lightbox-media');
+  const lbClose    = lightbox.querySelector('.lightbox-close');
+  const lbPrev     = lightbox.querySelector('.lightbox-prev');
+  const lbNext     = lightbox.querySelector('.lightbox-next');
+  const lbLike     = lightbox.querySelector('.btn-like');
+  const lbReblog   = lightbox.querySelector('.btn-reblog');
+  const lbSource   = lightbox.querySelector('.btn-source');
+
+  // ── Type filter wiring ─────────────────────────────────────
+  document.querySelectorAll('.type-filter a').forEach(a => {
+    a.addEventListener('click', e => {
+      e.preventDefault();
+      if (a.dataset.type === postType) return;
+      postType = a.dataset.type;
+      document.querySelectorAll('.type-filter a').forEach(x => x.classList.remove('active'));
+      a.classList.add('active');
+      reset();
+    });
+  });
+
+  // ── API fetch ──────────────────────────────────────────────
+  async function fetchPosts() {
+    if (loading || exhausted) return;
+    loading = true;
+    loader.classList.remove('hidden');
+
+    let url;
+    if (view === 'dashboard') {
+      url = `/api/dashboard?offset=${offset}&type=${postType}`;
+    } else if (view === 'blog') {
+      url = `/api/blog/${encodeURIComponent(blog)}?offset=${offset}&type=${postType}`;
+    } else if (view === 'search') {
+      url = `/api/search?q=${encodeURIComponent(query)}`;
+      exhausted = true; // tagged endpoint returns one batch
+    }
+
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) throw new Error(await resp.text());
+      const data = await resp.json();
+      const newPosts = Array.isArray(data) ? data : (data || []);
+
+      if (!newPosts.length) {
+        exhausted = true;
+        endMsg.classList.remove('hidden');
+      } else {
+        renderPosts(newPosts);
+        offset += newPosts.length;
+        if (newPosts.length < 20) {
+          exhausted = true;
+          endMsg.classList.remove('hidden');
+        }
+      }
+    } catch (err) {
+      console.error('Fetch error:', err);
+    } finally {
+      loading = false;
+      loader.classList.add('hidden');
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────
+  function renderPosts(newPosts) {
+    const startIndex = posts.length;
+    posts = posts.concat(newPosts);
+
+    newPosts.forEach((post, i) => {
+      const idx = startIndex + i;
+      const card = buildCard(post, idx);
+      if (card) grid.appendChild(card);
+    });
+  }
+
+  function buildCard(post, idx) {
+    let mediaSrc = null;
+    let isVideo = false;
+    let thumb = null;
+
+    if (post.type === 'photo' && post.photos && post.photos.length) {
+      mediaSrc = post.photos[0].original_size.url;
+    } else if (post.type === 'video' && post.video_url) {
+      mediaSrc = post.video_url;
+      thumb = post.thumbnail_url;
+      isVideo = true;
+    }
+
+    if (!mediaSrc) return null;
+
+    const card = document.createElement('div');
+    card.className = 'post-card';
+    card.dataset.index = idx;
+
+    if (isVideo) {
+      const vid = document.createElement('video');
+      vid.src = mediaSrc;
+      if (thumb) vid.poster = thumb;
+      vid.muted = true;
+      vid.loop = true;
+      vid.playsInline = true;
+      vid.addEventListener('mouseenter', () => vid.play());
+      vid.addEventListener('mouseleave', () => { vid.pause(); vid.currentTime = 0; });
+      card.appendChild(vid);
+    } else {
+      const img = document.createElement('img');
+      img.src = mediaSrc;
+      img.loading = 'lazy';
+      img.alt = '';
+      card.appendChild(img);
+    }
+
+    // Hover meta bar
+    const meta = document.createElement('div');
+    meta.className = 'post-meta';
+    meta.innerHTML = `
+      <span class="blog-name">${esc(post.blog_name)}</span>
+      <span class="note-count">${fmtNotes(post.note_count)}</span>
+    `;
+    card.appendChild(meta);
+
+    card.addEventListener('click', () => openLightbox(idx));
+    return card;
+  }
+
+  // ── Lightbox ───────────────────────────────────────────────
+  function openLightbox(idx) {
+    lightboxIndex = idx;
+    renderLightbox();
+    lightbox.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  }
+
+  function closeLightbox() {
+    lightbox.classList.add('hidden');
+    document.body.style.overflow = '';
+    lbMedia.innerHTML = '';
+  }
+
+  function renderLightbox() {
+    const post = posts[lightboxIndex];
+    if (!post) return;
+
+    lbMedia.innerHTML = '';
+    lbPrev.style.visibility = lightboxIndex > 0 ? 'visible' : 'hidden';
+    lbNext.style.visibility = lightboxIndex < posts.length - 1 ? 'visible' : 'hidden';
+
+    if (post.type === 'photo' && post.photos && post.photos.length) {
+      const img = document.createElement('img');
+      img.src = post.photos[0].original_size.url;
+      img.alt = '';
+      lbMedia.appendChild(img);
+    } else if (post.type === 'video' && post.video_url) {
+      const vid = document.createElement('video');
+      vid.src = post.video_url;
+      if (post.thumbnail_url) vid.poster = post.thumbnail_url;
+      vid.controls = true;
+      vid.autoplay = true;
+      lbMedia.appendChild(vid);
+    }
+
+    // Actions
+    lbLike.dataset.id   = post.id_string || post.id;
+    lbLike.dataset.key  = post.reblog_key;
+    lbLike.dataset.liked = post.liked ? 'true' : 'false';
+    lbLike.classList.toggle('liked', !!post.liked);
+    lbLike.textContent = post.liked ? '♥ Liked' : '♡ Like';
+
+    lbReblog.dataset.id   = post.id_string || post.id;
+    lbReblog.dataset.key  = post.reblog_key;
+    lbReblog.dataset.blog = post.blog_name;
+
+    lbSource.href = post.post_url || '#';
+
+    // Prefetch next batch if near end
+    if (lightboxIndex >= posts.length - 5) {
+      fetchPosts();
+    }
+  }
+
+  lbClose.addEventListener('click', closeLightbox);
+  lightbox.addEventListener('click', e => { if (e.target === lightbox) closeLightbox(); });
+
+  lbPrev.addEventListener('click', () => {
+    if (lightboxIndex > 0) { lightboxIndex--; renderLightbox(); }
+  });
+  lbNext.addEventListener('click', () => {
+    if (lightboxIndex < posts.length - 1) { lightboxIndex++; renderLightbox(); }
+  });
+
+  document.addEventListener('keydown', e => {
+    if (lightbox.classList.contains('hidden')) return;
+    if (e.key === 'Escape')       closeLightbox();
+    if (e.key === 'ArrowLeft')    lbPrev.click();
+    if (e.key === 'ArrowRight')   lbNext.click();
+  });
+
+  // ── Like ───────────────────────────────────────────────────
+  lbLike.addEventListener('click', async () => {
+    const id   = lbLike.dataset.id;
+    const key  = lbLike.dataset.key;
+    const liked = lbLike.dataset.liked === 'true';
+    const url  = `/api/like?id=${encodeURIComponent(id)}&key=${encodeURIComponent(key)}${liked ? '&unlike=1' : ''}`;
+    try {
+      const resp = await fetch(url, { method: 'GET' });
+      if (!resp.ok) throw new Error(await resp.text());
+      const post = posts[lightboxIndex];
+      post.liked = !liked;
+      lbLike.dataset.liked = post.liked ? 'true' : 'false';
+      lbLike.classList.toggle('liked', post.liked);
+      lbLike.textContent = post.liked ? '♥ Liked' : '♡ Like';
+    } catch (err) {
+      console.error('Like error:', err);
+    }
+  });
+
+  // ── Reblog ─────────────────────────────────────────────────
+  lbReblog.addEventListener('click', async () => {
+    if (!myBlog) return;
+    const body = new URLSearchParams({
+      id:         lbReblog.dataset.id,
+      reblog_key: lbReblog.dataset.key,
+      blog_name:  lbReblog.dataset.blog,
+      native_blog: myBlog,
+    });
+    try {
+      const resp = await fetch('/api/reblog', { method: 'POST', body });
+      if (!resp.ok) throw new Error(await resp.text());
+      lbReblog.textContent = '✓ Reblogged';
+      setTimeout(() => { lbReblog.textContent = '⇄ Reblog'; }, 2000);
+    } catch (err) {
+      console.error('Reblog error:', err);
+    }
+  });
+
+  // ── Infinite scroll via IntersectionObserver ───────────────
+  const observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting) fetchPosts();
+  }, { rootMargin: '400px' });
+
+  observer.observe(sentinel);
+
+  // ── Reset (type filter change) ─────────────────────────────
+  function reset() {
+    offset = 0;
+    loading = false;
+    exhausted = false;
+    posts = [];
+    lightboxIndex = -1;
+    grid.innerHTML = '';
+    endMsg.classList.add('hidden');
+    fetchPosts();
+  }
+
+  // ── Blog link interception ─────────────────────────────────
+  // Clicking a blog name in the meta overlay navigates to /blog/<name>
+  grid.addEventListener('click', e => {
+    const blogLink = e.target.closest('.blog-name');
+    if (blogLink && blogLink.dataset.name) {
+      e.stopPropagation();
+      window.location.href = `/blog/${encodeURIComponent(blogLink.dataset.name)}`;
+    }
+  });
+
+  // ── Helpers ────────────────────────────────────────────────
+  function esc(str) {
+    return String(str || '')
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+  }
+
+  function fmtNotes(n) {
+    if (!n) return '';
+    if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
+    return String(n);
+  }
+
+  // ── Init ───────────────────────────────────────────────────
+  fetchPosts();
+
+})();