Generate sidebar and autocomplete links matching page URL convention

Add getPageExtension() helper that detects whether the hosting platform
uses .html extensions or extensionless URLs. Use it in sidebar link
generation and autocomplete suggestions so JS-generated links match
the convention of links in the page content.

This fixes the sidebar/content link mismatch on hosts like Netlify
where content links have .html stripped but sidebar links (generated
client-side) retained it, causing unnecessary page reloads.

Fixes erlang/erlang-org#165

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: garazdawi

assets/js/autocomplete/suggestions.js

@@ -1,5 +1,7 @@
 import { getSidebarNodes } from '../globals'
-import { escapeRegexModifiers, escapeHtmlEntities, isBlank } from '../helpers'
+import { escapeRegexModifiers, escapeHtmlEntities, getPageExtension, isBlank } from '../helpers'
+
+const ext = getPageExtension()
 
 /**
  * @typedef Suggestion
@@ -114,7 +116,7 @@ function nodeSuggestion (node, query, category, label) {
   if (!matchesAll(node.title, query)) { return null }
 
   return {
-    link: `${node.id}.html`,
+    link: `${node.id}${ext}`,
     title: highlightMatches(node.title, query),
     description: null,
     matchQuality: matchQuality(node.title, query),
@@ -132,7 +134,7 @@ function childNodeSuggestion (childNode, parentId, query, category, label) {
   if (!matchesAll(childNode.id, query)) { return null }
 
   return {
-    link: `${parentId}.html#${childNode.anchor}`,
+    link: `${parentId}${ext}#${childNode.anchor}`,
     title: highlightMatches(childNode.id, query),
     labels: [label],
     description: parentId,
@@ -151,9 +153,9 @@ function nodeSectionSuggestion (node, section, query, category, label) {
   let link
 
   if (section.anchor === '') {
-    link = `${node.id}.html`
+    link = `${node.id}${ext}`
   } else {
-    link = `${node.id}.html#${section.anchor}`
+    link = `${node.id}${ext}#${section.anchor}`
   }
 
   return {
@@ -194,7 +196,7 @@ function moduleChildNodeSuggestion (childNode, parentId, query, category, label)
   if (!matchesAny(childNode.id, tokenizedQuery)) return null
 
   return {
-    link: `${parentId}.html#${childNode.anchor}`,
+    link: `${parentId}${ext}#${childNode.anchor}`,
     title: highlightMatches(childNode.id, tokenizedQuery),
     label,
     description: parentId,

assets/js/helpers.js

@@ -220,6 +220,23 @@ export function isAppleOS () {
   return document.documentElement.classList.contains('apple-os')
 }
 
+/**
+ * Returns the file extension used by the current page.
+ * Some hosting platforms (e.g. Netlify) strip `.html` from URLs,
+ * so we detect this and match the convention for generated links.
+ * Defaults to `.html` unless the current page is clearly extensionless
+ * (has a multi-segment path without any file extension).
+ */
+export function getPageExtension () {
+  const pathname = window.location.pathname
+  if (pathname.endsWith('.html')) { return '.html' }
+  // Only omit .html if we're clearly on an extensionless doc page
+  // (not the root path, and no file extension in the last segment).
+  const lastSegment = pathname.split('/').pop()
+  if (lastSegment && !lastSegment.includes('.')) { return '' }
+  return '.html'
+}
+
 /**
  * Create element from tag, attributes and children.
  *

assets/js/sidebar/sidebar-list.js

@@ -1,6 +1,8 @@
-import { el, getCurrentPageSidebarType, qs, qsAll } from '../helpers'
+import { el, getCurrentPageSidebarType, getPageExtension, qs, qsAll } from '../helpers'
 import { getSidebarNodes } from '../globals'
 
+const ext = getPageExtension()
+
 // Sidebar list is only rendered when needed.
 // Mobile users may never see the sidebar.
 let init = false
@@ -59,7 +61,7 @@ export function initialize () {
       const items = []
       const hasHeaders = Array.isArray(node.headers)
       const translate = hasHeaders ? undefined : 'no'
-      const href = node?.url || `${node.id}.html`
+      const href = node?.url || `${node.id}${ext}`
 
       // Group header.
       if (node.group !== group) {
@@ -122,7 +124,7 @@ function renderHeaders (node) {
   return node.headers
     .map(({id, anchor}) =>
       el('li', {}, [
-        el('a', {href: `${node.id}.html#${anchor}`}, [id])
+        el('a', {href: `${node.id}${ext}#${anchor}`}, [id])
       ])
     )
 }
@@ -132,12 +134,12 @@ function renderSectionsAndGroups (node) {
 
   if (node.sections?.length) {
     items.push(el('li', {}, [
-      el('a', {href: `${node.id}.html#content`}, ['Sections']),
+      el('a', {href: `${node.id}${ext}#content`}, ['Sections']),
       ...childList(`${node.id}-sections-list`,
         node.sections
           .map(({id, anchor}) =>
             el('li', {}, [
-              el('a', {href: `${node.id}.html#${anchor}`}, [id])
+              el('a', {href: `${node.id}${ext}#${anchor}`}, [id])
             ])
           )
       )
@@ -146,17 +148,17 @@ function renderSectionsAndGroups (node) {
 
   if (node.nodeGroups) {
     items.push(el('li', {}, [
-      el('a', {href: `${node.id}.html#summary`}, ['Summary'])
+      el('a', {href: `${node.id}${ext}#summary`}, ['Summary'])
     ]))
 
     items.push(...node.nodeGroups.map(({key, name, nodes}) =>
       el('li', {}, [
-        el('a', {href: `${node.id}.html#${key}`}, [name]),
+        el('a', {href: `${node.id}${ext}#${key}`}, [name]),
         ...childList(`node-${node.id}-group-${key}-list`,
           nodes
             .map(({anchor, title, id}) =>
               el('li', {}, [
-                el('a', {href: `${node.id}.html#${anchor}`, title, translate: 'no'}, [id])
+                el('a', {href: `${node.id}${ext}#${anchor}`, title, translate: 'no'}, [id])
               ])
             )
         )
@@ -192,8 +194,8 @@ function markCurrentHashInSidebar () {
   const sidebar = document.getElementById('sidebar')
   const {pathname, hash} = window.location
 
-  // All sidebar links are relative and end in .html.
-  const page = pathname.split('/').pop().replace(/\.html$/, '') + '.html'
+  // All sidebar links are relative, with or without .html depending on the hosting platform.
+  const page = pathname.split('/').pop().replace(/\.html$/, '') + ext
 
   // Try find exact link with hash, fall back to page.
   const current = sidebar.querySelector(`li a[href="${page + hash}"]`) || sidebar.querySelector(`li a[href="${page}"]`)

assets/test/helpers.spec.js

@@ -1,9 +1,36 @@
-import { escapeRegexModifiers } from '../js/helpers'
+import { escapeRegexModifiers, getPageExtension } from '../js/helpers'
 
 describe('helpers', () => {
   describe('escapeRegexModifiers', () => {
     it('escapes -', () => {
       expect(escapeRegexModifiers('hello-world')).toBe('hello\\-world')
     })
   })
+
+  describe('getPageExtension', () => {
+    it('returns .html when pathname ends with .html', () => {
+      setPathname('/doc/apps/stdlib/gen_server.html')
+      expect(getPageExtension()).toBe('.html')
+    })
+
+    it('returns empty string for extensionless doc page', () => {
+      setPathname('/doc/apps/stdlib/gen_server')
+      expect(getPageExtension()).toBe('')
+    })
+
+    it('returns .html for root path', () => {
+      setPathname('/')
+      expect(getPageExtension()).toBe('.html')
+    })
+
+    it('returns .html for empty last segment', () => {
+      setPathname('/doc/apps/')
+      expect(getPageExtension()).toBe('.html')
+    })
+  })
 })
+
+function setPathname (path) {
+  delete window.location
+  window.location = new URL('http://localhost' + path)
+}