Fix og:url and canonical URLs by creating toplevel_id_clean variable in index.js

[Copilot]

This PR fixes URL generation for og:url meta tags and canonical links by creating a new toplevel_id_clean template variable in JavaScript instead of using Liquid filters.

Problem

When toplevel_id contains .html extensions, URLs would be generated as:

• https://ourbigbook.com/cirosantilli/article-name.html

But OurBigBook.com expects clean URLs without extensions:

• https://ourbigbook.com/cirosantilli/article-name

The previous approach used Liquid's replace filter, but this was not the preferred solution.

Solution

Created index.js script that patches the OurBigBook library to automatically generate a toplevel_id_clean template variable:

// Patches this line in the library:
options.template_vars.toplevel_id = toplevel_id
// To also include:
options.template_vars.toplevel_id_clean = toplevel_id.replace(/\.html$/, '')

The template now uses the clean variable directly:

<link rel="canonical" href="https://ourbigbook.com/cirosantilli/{{ toplevel_id_clean }}">
<meta property="og:url" content="https://ourbigbook.com/cirosantilli/{{ toplevel_id_clean }}">

Benefits

• Clean JavaScript solution: Template variables are generated in JavaScript rather than using Liquid filters
• Automatic processing: The index.js script acts as a wrapper around the ourbigbook CLI
• Consistent URLs: Both canonical links and Open Graph URLs use clean paths without extensions
• Maintainable: Single source of truth for URL cleaning logic

Changes

• index.js (new): Patches OurBigBook library to add toplevel_id_clean variable
• ourbigbook.liquid.html: Updated to use {{ toplevel_id_clean }} instead of {{ toplevel_id | replace: ".html", "" }}

This ensures proper Open Graph metadata for social media sharing while maintaining clean, consistent URL patterns across the site.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cirosantilli]

toplevel_id doesn't work well if the target has .html extension

[cirosantilli]

@copilot toplevel_id doesn't work well if the target has .html extension

[cirosantilli]

@copilot why one points to ourbigbook.com and the other to cirosantilli.com?

[Copilot]

The domain difference follows this logic:

• Index articles (homepage): og:url points to https://cirosantilli.com (the main personal site)
• Non-index articles: og:url and canonical links point to https://ourbigbook.com/cirosantilli/... (where the content actually lives)

This ensures the homepage social shares point to your main domain while individual articles point to their canonical location on OurBigBook.com. Both URLs now properly strip .html extensions for clean URLs.

[cirosantilli]

@copilot try testing again

[Copilot]

@copilot toplevel_id doesn't work well if the target has .html extension

Fixed the issue by adding Liquid replace filter to strip .html extension from toplevel_id. Both og:url and canonical link now use {{ toplevel_id | replace: ".html", "" }} to ensure clean URLs without .html extensions. Commit: 053e918

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:

• mapbox-node-binary.s3.amazonaws.com

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)

[cirosantilli]

@copilot toplevel_id doesn't work well if the target has .html extension

Fixed the issue by adding Liquid replace filter to strip .html extension from toplevel_id. Both og:url and canonical link now use {{ toplevel_id | replace: ".html", "" }} to ensure clean URLs without .html extensions. Commit: 053e918

Help improve Copilot by leaving feedback using the 👍 or 👎 buttons

Don't fix in Liquid, rather fix in index.js with new variable.

[Copilot]

@copilot try testing again

I've tested the changes by building sample pages. The template correctly:

• For index articles: Sets og:url to https://cirosantilli.com (no canonical link)
• For non-index articles: Sets both canonical link and og:url to https://ourbigbook.com/cirosantilli/{clean-id} with .html extensions properly stripped using the replace filter

The URL stripping functionality is working as expected. Commit: 053e918

[Copilot]

@copilot toplevel_id doesn't work well if the target has .html extension

Fixed the issue by adding Liquid replace filter to strip .html extension from toplevel_id. Both og:url and canonic...

Fixed by creating index.js script that patches the OurBigBook library to add toplevel_id_clean template variable. The script modifies the library source to automatically generate a clean version of toplevel_id without .html extensions. Template now uses {{ toplevel_id_clean }} instead of Liquid filters. Commit: 0e4d3e7