Add soft 404 page with trailing slash detection

[Copilot]

GitHub Pages serves 404s when users add trailing slashes to permalink paths (e.g., /transcribe/ vs /transcribe). This creates a poor UX for a common mistake.

Changes

Created /404.html - Jekyll 404 page with client-side logic:

• Detects trailing slash on known permalink paths
• Displays "soft 404" with corrected link preserving query strings and fragments
• Falls back to standard 404 for other errors
• Includes navigation shortcuts

Created /assets/img/ with README documenting required hopeful404.png image

How it works

// Checks current URL against 23 known permalink paths
if (currentPath.endsWith('/') && knownPaths.includes(pathWithoutSlash)) {
    // Show friendly error with corrected link
    suggestedLink.href = pathWithoutSlash + currentSearch + currentHash;
}

Manual step required

Download hopeful404.png to /assets/img/hopeful404.png. Page uses fallback image (404_PageNotFound.jpeg) until added.

Maintenance

Update knownPaths array in 404.html when adding new pages with permalinks.

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:

• github-production-user-asset-6210df.s3.amazonaws.com
  • Triggering command: /usr/bin/curl curl -L -o hopeful404.png REDACTED (dns block)
  • Triggering command: /usr/bin/wget wget -O hopeful404.png REDACTED (dns 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

---

This section details on the original issue you should resolve

<issue_title>Soft 404 for trailing slash errors</issue_title>
<issue_description>app.t-pen.org (this site) uses Github-pages gem (Jekyll fork) to host which includes front matter with permalink paths like "/profile" which alias more deeply buried directories and pages. In this case, going to "https://app.t-pen.org/transcribe" will send you to a page, but "https://app.t-pen.org/transcribe/" (with a trailing slash) will be a 404. Before reaching the 404, if the user is attempting to go to a page which has a permalink and the path looks correct except for that final "/", we should serve a page that:

• briefly explains they almost typed a correct address
• provides a full link to follow that is correctly formatted with all the querystrings and such intact
• recommend that if they followed a link from another site or bookmark that they update it
• simple list of helpful site navigation in case the link is not what you want

hopeful404 .png is in /assets/img/ (or will be when this is accepted and looks like this

It's a great image to integrate into the response.

I actually don't hate that this happens. Trailing slashes have real meanings. If I go to /profile I am looking for that alias on the path (the permalink, most likely). If I go to /profile/ I'm asking for that directory or aliased path and looking for the index.html or index.md document within it. In the second example block, this is even more clear. If I go to /index.html/ I am doing something wrong.

I propose wontfix on this one but I'll leave it open for consideration.

Originally posted by @cubap in #293</issue_description>

<agent_instructions>find the least disruptive place for this change and let me know if there are other changes along a similar vein that should be considered.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Soft 404 for trailing slash errors #349

---

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

[github-actions]

🚀 Deployed on https://694077da325815a831a0d4e6--tpen-interfaces-preview.netlify.app

[cubap]

This is the silliest address I think I'm willing to fix: https://6940537034b5f21a6f3eb3dd--tpen-interfaces-preview.netlify.app/prOflie/?projectPotato=WhoCares&ridiculousPayload=false

• Trailing Slash
• wrongCAseD
• trasnpoesd letters
• pointless post-path debris