Sidenav items do not (always) show active when they should, using cleanUrls: false

[rossmills99]

There seem to be two issues but I assume they are related.

1. Sidenav items do not show correct active state when running from the dev server, when cleanUrls: false configuration is used

To reproduce, set cleanUrls: false in configuration, then run the dev server. Notice the sidenav items never show the correct active state.

I tried to fix this myself, in render.ts:

-function renderListItem(page: Page, path: string, normalizeLink: (href: string) => string): Html {
+function renderListItem(page: Page, path: string, normalizeLink: (href: string) => string, cleanUrls: boolean = true): Html {
   return html`\n    <li class="observablehq-link${
-    normalizePath(page.path) === path ? " observablehq-link-active" : ""
+    normalizePath(page.path) + (cleanUrls ? "" : ".html") === path ? " observablehq-link-active" : ""
   }"><a href="${normalizeLink(relativePath(path, page.path))}">${page.name}</a></li>`;
 }

It seemed to work running from the dev server, but unfortunately when I build the project (yarn docs:build) and serve the resulting dist files, it doesn't work.

2. Some sidenav items do not show correct active state when running the built files, when cleanUrls: false configuration is used

When I removed my local changes and ran docs:build, with no changes other than the config entry cleanUrls: false, I found that the correct active state does seem to be applied for most nav items - but not all of them! For example, /javascript.html seems rendered properly:

Whereas /reactivity.html is not:

[Fil]

I can't reproduce the second part of this issue: when I build the documentation with cleanUrls: false I have the correct highlights.

Is it an OS or browser issue? Can you try and publish the broken site somewhere so we can see how it's rendering?

[mbostock]

The fact that it’s not applied consistently suggests that in build it is a browser caching issue, not a Framework bug. But we should fix preview for sure.

[rossmills99]

@Fil @mbostock Thanks for looking into it. Today I'm also unable to reproduce so I guess the theory must be I was seeing a cached copy of the page from when it was served in preview. If it happens again I'll check for that, cheers!