Consolidate Utterances integration into single PR using Ferretosan/web-blog-comments

[Copilot]

Two conflicting Utterances PRs existed: #15 (wrong repo Ferretosan/web, had CSS) and #16 (correct repo Ferretosan/web-blog-comments, better JS, no CSS). Neither was a complete superset of the other. This PR merges both into one correct, complete implementation.

Changes

js/markdown-parser.js

• UTTERANCES_REPO = 'Ferretosan/web-blog-comments', UTTERANCES_THEME = 'photon-dark'
• injectUtterances(targetEl, postId) — builds <script> via createElement (survives innerHTML popup resets); uses document.title swap for stable per-post issue mapping (blog/<filename>), restores on load/error
• Injects #utterances-container inside the existing setTimeout in loadBlogPost() so the widget mounts after the popup renders

style/popup.css

• #utterances-container: border-top separator, width: 100% overrides to prevent Utterances iframe from overflowing the popup

README.md

• Setup section pointing to Ferretosan/web-blog-comments with install link for the Utterances GitHub App

Supersedes

• PR Add Utterances comments to blog post popups #15 — wrong repo (Ferretosan/web)
• PR Add Utterances comments to blog posts via Ferretosan/web-blog-comments #16 — missing CSS; close both after merging this PR

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: `/usr/bin/gh gh pr comment 15 --body Closing this PR as it is superseded by PR Consolidate Utterances integration into single PR using Ferretosan/web-blog-comments #17, which consolidates both Utterances PRs into a single, complete implementation.

What this PR had:

• Utterances JS integration and CSS styling ���
• Documentation ���

Why it is being closed:

• It used` (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Resolve confusion from two existing PRs created for Utterances integration in Ferretosan/web.

Task:

• Inspect the two open PRs created by Copilot tasks:
  1. "Add Utterances comments to blog post popup"
  2. "Configure Utterances to use web-blog-comments repo"
• Determine dependency/overlap.
• If the second PR is a superset of the first, close the first PR and keep only the second.
• If the second PR is intended to be applied on top of the first, rebase/retarget by updating the second PR to include all required changes so only one PR needs merging.
• Ensure final state: exactly one PR remains open for the Utterances feature, configured to use repo Ferretosan/web-blog-comments, and documentation updated.

Acceptance:

• User can merge a single PR to get working Utterances comments.
• The obsolete PR is closed with explanation in PR body or comment.

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

User: i use starlink.

Assistant: Starlink is your internet provider, not your website host. For comments, what matters is where the site is hosted and whether you can run a small server.

Tell me which one you use:

1. Neocities / Nekoweb (static only)
2. GitHub Pages (static only)
3. Netlify / Vercel / Cloudflare Pages (static + optional serverless)
4. A VPS / home server where you can run Docker (dynamic)

What to do depending on your answer

• If static-only (1/2): you need an external backend you control (e.g., host Remark42 or Isso on a cheap VPS), then embed it in loadBlogPost().
• If you have a VPS/Docker (4): best path is Remark42 (no ads, reliable, simple embed).

Reply with the host (pick a number) and, if you have it, your site URL. Then I’ll give you the exact embed code to paste into js/markdown-parser.js.

User: netlify

Assistant: Netlify is a good fit for ad-free comments using a self-hosted system like Remark42 or Isso. Netlify will host your static site; the comments “server” must run somewhere else (a small VPS), then you embed it in your popup.

Recommended setup: Remark42 (no ads)

1. Deploy Remark42 on a VPS (Docker is easiest).
2. Embed Remark42 into your blog popup by modifying loadBlogPost() in js/markdown-parser.js.

Patch (what to change in your repo)

Add a helper that appends a Remark42 widget to the post HTML, using the filename as a stable page id.

// Add near the top/bottom of the file (outside functions)
const REMARK42_HOST = 'https://comments.YOURDOMAIN.com'; // TODO: change
const REMARK42_SITE_ID = 'ferretosan-web'; // TODO: change

function withRemark42Comments(postHtml, pageId, pageTitle) {
  const safeTitle = (pageTitle || pageId || '').replace(/</g, '&lt;').replace(/>/g, '&gt;');

  return `
${postHtml}

<hr>
<h2 class="slide-in-right">Comments</h2>
<div id="remark42"></div>

<script>
  window.remark_config = {
    host: "${REMARK42_HOST}",
    site_id: "${REMARK42_SITE_ID}",
    page_id: "${pageId}",
    page_title: "${safeTitle}"
  };
</script>
<script src="${REMARK42_HOST}/web/embed.js" defer></script>
`;
}

Then update loadBlogPost():

const markdown = await response.text();
let html = parseMarkdown(markdown);

// use filename as stable per-post id
html = withRemark42Comments(html, filename, document.title);

// Display in popup
popupwindowstart(html);

Important note about your current popup code

Many popup implementations set innerHTML. If popupwindowstart() uses innerHTML, scripts inside the HTML string may not execute automatically. If that happens, the fix is to:

• insert a <div id="remark42"></div> in the HTML, and
• programmatically add the <script> tags with document.createElement('script') after the popup opens.

If you show me js/popup.js (specifically popupwindowstart()), I’ll tailor the embed so it works 100% with your popup.

What you need to tell me

1. Do you have a place to run Docker (a VPS), or do you need the cheapest option recommendation?
2. Paste your popupwindowstart() function from js/popup.js so I can confirm whether inline scripts will run.

User: im not spending a dime

Assistant: If you won’t spend any money, you cannot run a real “Disqus alternative” backend (Remark42/Isso/Commento) because they need a server you control.

So your realistic $0 options are:

Option A (best $0): Comments via GitHub Issues (no ads)

Works on Netlify + static site. Downsides: commenters need a GitHub account.

How it fits your code: after popupwindowstart(html) you embed a small widget that shows/creates a GitHub Issue per post.

Two ways:

1. Utterances (simplest) – ...

This pull request was created from Copilot chat.

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[netlify]

✅ Deploy Preview for ferretosan-web ready!

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