Add Utterances comments to blog post popups

[Copilot]

Blog posts loaded in the popup had no comments system. Adds Utterances (GitHub Issues-backed, no ads) comments to each post popup.

Changes

js/markdown-parser.js

• Adds UTTERANCES_REPO / UTTERANCES_THEME config constants at the top with TODO instructions
• Adds addUtterancesComments(filename) — injects the Utterances <script> via createElement (required; scripts via innerHTML don't execute), keyed on issue-term="blog/<filename>" for a stable, unique-per-post GitHub Issue mapping
• Clears any existing Utterances container before re-injecting, so switching posts loads the correct thread
• Called from loadBlogPost() immediately after popupwindowstart(html)

style/popup.css

• #utterances-container: adds a top-border separator and forces the Utterances iframe to 100% popup width

README.md

• New Blog Comments (Utterances) section: repo selection, GitHub App installation, config constants, issue-mapping explanation, and OAuth permissions note

Configuration

// js/markdown-parser.js — set before deploying
const UTTERANCES_REPO = 'Ferretosan/web'; // public repo with Utterances App installed
const UTTERANCES_THEME = 'photon-dark';

Each post maps to a GitHub Issue titled blog/<filename> (e.g. blog/newyear26.md), created automatically on first comment.

Original prompt

Set up Utterances comments for blog posts in Ferretosan/web.

Context:

• Blog posts are stored as Markdown files in blog/*.md.
• Posts are loaded into a popup via loadBlogPost(filename) in js/markdown-parser.js, which fetches blog/${filename}, parses Markdown to HTML, and calls popupwindowstart(html).
• Need a Disqus alternative with no ads; user chose Utterances.

Requirements:

1. Implement Utterances embed so that a comments section appears at the bottom of each blog post popup.
2. Must work even if scripts injected via innerHTML do not execute (common with popup rendering). Therefore, inject Utterances via DOM (createElement('script')).
3. Ensure each blog post maps to a stable, unique Utterances issue. Use a deterministic issue-term mapping strategy based on the blog filename (e.g., issue-term="title" with a stable title like blog/<filename> or issue-term="pathname" if feasible). Avoid relying on the hash alone if it can change.
4. Add configuration constants near the top of js/markdown-parser.js for the Utterances repo and theme, with clear TODO instructions.
5. Update popup behavior so that when a new post is opened, any existing Utterances iframe/widget is removed and re-initialized for the new post.
6. Add minimal CSS if needed to ensure the comments embed fits within the popup and matches existing styling (optional).
7. Update README.md with brief setup instructions:
   • Create or choose a GitHub repo to store comment issues (public)
   • Install/configure the Utterances GitHub App
   • Set UTTERANCES_REPO (and optionally theme)
   • Notes about issue mapping and permissions

Acceptance criteria:

• Opening any blog post shows a "Comments" section and loads the Utterances widget.
• Switching between posts re-renders the correct comments thread.
• No external ads/tracking beyond GitHub/Utterances.

Files likely to change:

• js/markdown-parser.js
• README.md
• (Optional) a CSS file in style/ if needed.

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 append...

This pull request was created from Copilot chat.

---

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

[netlify]

✅ Deploy Preview for ferretosan-web ready!

Name	Link
🔨 Latest commit	bd997ec
🔍 Latest deploy log	https://app.netlify.com/projects/ferretosan-web/deploys/69b5e49b565f32000850e6d9
😎 Deploy Preview	https://deploy-preview-15--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.