Add Utterances comments to blog posts via Ferretosan/web-blog-comments

[Copilot]

Blog posts loaded in the popup had no comments system. This wires up Utterances (GitHub Issues-backed, no ads, $0) using Ferretosan/web-blog-comments as the issue store.

js/markdown-parser.js

• Added UTTERANCES_REPO = "Ferretosan/web-blog-comments" and UTTERANCES_THEME constants
• injectUtterances(targetEl, postId) builds the <script> via createElement — never injected into innerHTML, which is required since popupwindowstart sets innerHTML and inline scripts don't re-execute
• Issue mapping uses issue-term="title" with document.title briefly set to blog/<filename> (e.g. blog/newyear26.md) before the script executes; restored via the script's load/error events — gives a stable, URL-independent thread per post without requiring real page navigation
• Stale widget cleanup: popup content is fully replaced by popupwindowstart on every post open, so no manual removal needed between posts; injectUtterances also removes any lingering .utterances element defensively

// Inside loadBlogPost(), after popup renders:
const comments = document.createElement('div');
comments.id = 'blog-comments';
comments.appendChild(document.createElement('hr'));
const h = document.createElement('h2');
h.className = 'slide-in-right';
h.textContent = 'Comments';
comments.appendChild(h);
popupContent.appendChild(comments);
injectUtterances(comments, `blog/${filename}`);

README.md

Added Comments (Utterances) section with steps to install the GitHub App on Ferretosan/web-blog-comments (required one-time action before comments will work) and how to change the theme.

Required before going live: install the Utterances GitHub App at https://github.com/apps/utterances and grant access to Ferretosan/web-blog-comments.

Original prompt

Update the Utterances comments integration work for Ferretosan/web to use the dedicated comments repository Ferretosan/web-blog-comments.

Context:

• Site is static on Netlify.
• Blog posts are markdown files in blog/*.md loaded via popup using js/markdown-parser.js.
• User wants a no-ads Disqus alternative and chose Utterances.
• A PR/task was started to add Utterances; now user confirms they already have a repo for comments: Ferretosan/web-blog-comments.

Requirements:

1. Ensure the Utterances embed config uses repo="Ferretosan/web-blog-comments".
2. Ensure the embed is injected via DOM scripting (createElement('script')) after popup content is rendered; do not rely on inline scripts inside HTML strings.
3. Ensure stable issue mapping per post based on blog filename (deterministic). Prefer an approach that does not require hacking document.title if possible; if not possible, document why.
4. Remove/replace existing Utterances widget when switching posts.
5. Update README with exact setup steps referencing Ferretosan/web-blog-comments and remind to install the Utterances GitHub App on that repo.

Acceptance criteria:

• Opening any blog post shows a Comments section and loads Utterances thread stored in Ferretosan/web-blog-comments.
• Switching between posts loads the correct thread.

Repository: Ferretosan/web, base branch main.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: @Ferretosan/web i want to add comments to my blog posts. how could i go about doing that? please observe the code first

Assistant: I looked at your repo. Your “blog posts” are Markdown files in blog/*.md, and they get opened in a popup via js/markdown-parser.js (loadBlogPost() fetches blog/${filename} and then calls popupwindowstart(html)). So the simplest place to add comments is right after the post HTML is rendered (inside that popup).

3 practical ways to add comments

1) Easiest (no backend): embed a comment service per post

Add a small “comments” HTML block after popupwindowstart(html) in loadBlogPost(). Common options:

• Giscus (uses GitHub Discussions)
• Utterances (uses GitHub Issues)
• Disqus (external)

This keeps your site static and avoids building your own database/login.

2) Still simple: store comments in a GitHub Issue (write via API)

Each post maps to an issue; users submit comments that become issue comments. You’ll need a small server/proxy to avoid exposing tokens (or accept “open GitHub issue” links instead of inline posting).

3) Full custom comments (hardest): your own backend + database

You’d build endpoints like:

• GET /api/comments?post=newyear26
• POST /api/comments (name + message + anti-spam)

Where to put it in your code

In js/markdown-parser.js, modify loadBlogPost(filename) so it appends a comments container using the post’s hash/filename as the unique ID.

// after you compute `html`:
popupwindowstart(html);

// add comments UI here (container + embed/init)

Quick question (so I recommend the right approach)

Do you want anyone to comment without accounts, or are you okay requiring a GitHub account (Giscus/Utterances)?

User: i dont want ads on my website. and i tried giscus and failed horribly. i need a disqus alternative.

Assistant: If you want no ads, skip Disqus (their free tier is ad-supported) and use a self‑hostable comment system.

Best Disqus alternatives (no ads)

1) Remark42 (recommended)

• Open-source, self-hosted, no ads
• Supports anonymous or social logins
• You embed it with 1 <div> + 1 <script>

2) Isso

• Open-source, self-hosted, no ads
• Very lightweight, simpler than Remark42
• Fewer “modern” features, but solid

3) Commento (community edition)

• Self-hostable, no ads
• Historically had licensing/maintenance shifts, so check current status before committing

How it plugs into your code

Your blog post HTML is injected here:

// Display in popup
popupwindowstart(html);

So you add comments by appending a comments container to html before calling popupwindowstart() (or by inserting into #popup-content right after).

Example (Remark42 embed idea)

You’d do something like:

• const pageId = blogFileToHash[filename] || filename;
• add <div id="remark42"></div> and load the Remark42 script configured with pageId

One question before I give exact code

Where is this site hosted (Neocities / Netlify / GitHub Pages / your own VPS)?

Self-hosted comments (Remark42/Isso) require some server somewhere (even a cheap VPS). If you tell me your hosting + whether you can run Docker, I’ll r...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for ferretosan-web ready!

Name	Link
🔨 Latest commit	e0ebd32
🔍 Latest deploy log	https://app.netlify.com/projects/ferretosan-web/deploys/69b5e4ffca69e30008dc996b
😎 Deploy Preview	https://deploy-preview-16--ferretosan-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.