writekit/internal/build/assets/js/post.js

var WriteKit = (function() {
  'use strict';

  let config = {};
  let user = null;

  async function init(opts) {
    config = opts;

    try {
      const res = await fetch('/api/reader/me');
      const data = await res.json();
      if (data.logged_in) {
        user = data.user;
      }
    } catch (e) {}

    if (config.reactions) initReactions();
    if (config.comments) initComments();
  }

  async function initReactions() {
    const container = document.querySelector('.reactions-container');
    if (!container) return;

    const res = await fetch(`/api/reader/posts/${config.slug}/reactions`);
    const data = await res.json();

    const counts = data.counts || {};
    const userReactions = data.user || [];

    if (config.reactionMode === 'upvote') {
      const emoji = config.reactionEmojis[0] || '👍';
      const count = counts[emoji] || 0;
      const active = userReactions.includes(emoji);

      container.innerHTML = `
        <button class="reaction-btn ${active ? 'active' : ''}" data-emoji="${emoji}">
          <span class="emoji">${emoji}</span>
          <span class="count">${count}</span>
        </button>
      `;
    } else {
      container.innerHTML = config.reactionEmojis.map(emoji => {
        const count = counts[emoji] || 0;
        const active = userReactions.includes(emoji);
        return `
          <button class="reaction-btn ${active ? 'active' : ''}" data-emoji="${emoji}">
            <span class="emoji">${emoji}</span>
            <span class="count">${count}</span>
          </button>
        `;
      }).join('');
    }

    container.querySelectorAll('.reaction-btn').forEach(btn => {
      btn.addEventListener('click', () => toggleReaction(btn));
    });
  }

  async function toggleReaction(btn) {
    if (config.requireAuth && !user) {
      showAuthPrompt('reactions');
      return;
    }

    const emoji = btn.dataset.emoji;

    try {
      const res = await fetch(`/api/reader/posts/${config.slug}/reactions`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ emoji })
      });

      if (res.status === 401) {
        showAuthPrompt('reactions');
        return;
      }

      const data = await res.json();
      const countEl = btn.querySelector('.count');
      const current = parseInt(countEl.textContent) || 0;

      if (data.added) {
        btn.classList.add('active');
        countEl.textContent = current + 1;
      } else {
        btn.classList.remove('active');
        countEl.textContent = Math.max(0, current - 1);
      }
    } catch (e) {
      console.error('Failed to toggle reaction', e);
    }
  }

  async function initComments() {
    const section = document.querySelector('.comments');
    if (!section) return;

    const list = section.querySelector('.comments-list');
    const formContainer = section.querySelector('.comment-form-container');

    const res = await fetch(`/api/reader/posts/${config.slug}/comments`);
    const comments = await res.json();

    if (comments && comments.length > 0) {
      list.innerHTML = comments.map(renderComment).join('');
    } else {
      list.innerHTML = '<p class="no-comments">No comments yet. Be the first!</p>';
    }

    if (user) {
      formContainer.innerHTML = `
        <form class="comment-form">
          <textarea placeholder="Write a comment..." rows="3" required></textarea>
          <button type="submit">Post Comment</button>
        </form>
      `;
      formContainer.querySelector('form').addEventListener('submit', submitComment);
    } else {
      formContainer.innerHTML = `
        <div class="auth-prompt">
          <a href="/api/reader/login/github?redirect=${encodeURIComponent(window.location.pathname)}">Sign in</a> to leave a comment
        </div>
      `;
    }
  }

  function renderComment(comment) {
    const date = new Date(comment.created_at).toLocaleDateString('en-US', {
      year: 'numeric', month: 'short', day: 'numeric'
    });

    return `
      <div class="comment" data-id="${comment.id}">
        <div class="comment-header">
          ${comment.avatar_url ? `<img src="${comment.avatar_url}" alt="" class="comment-avatar">` : ''}
          <span class="comment-author">${escapeHtml(comment.name || 'Anonymous')}</span>
          <span class="comment-date">${date}</span>
        </div>
        <div class="comment-content">${comment.content_html || escapeHtml(comment.content)}</div>
      </div>
    `;
  }

  async function submitComment(e) {
    e.preventDefault();
    const form = e.target;
    const textarea = form.querySelector('textarea');
    const content = textarea.value.trim();

    if (!content) return;

    const btn = form.querySelector('button');
    btn.disabled = true;
    btn.textContent = 'Posting...';

    try {
      const res = await fetch(`/api/reader/posts/${config.slug}/comments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content })
      });

      if (res.status === 401) {
        showAuthPrompt('comments');
        return;
      }

      const comment = await res.json();
      const list = document.querySelector('.comments-list');
      const noComments = list.querySelector('.no-comments');
      if (noComments) noComments.remove();

      list.insertAdjacentHTML('beforeend', renderComment(comment));
      textarea.value = '';
    } catch (e) {
      console.error('Failed to post comment', e);
    } finally {
      btn.disabled = false;
      btn.textContent = 'Post Comment';
    }
  }

  function showAuthPrompt(feature) {
    alert(`Please sign in to use ${feature}`);
  }

  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  return { init };
})();