Fix Wrong Page Underlined as Current Page in Left Nav Bar

[esu-skoopin]

Resolves #1304

Perceived Cause Behind Bug

The main issue, as far as we know, is the combination of a build configuration that allows for the site to be built concurrently two pages at a time and the use of the global variable, jumpToState.

This is the relevant build setting:

// Code location: astro.config.mjs

build: {
  format: "directory",
  concurrency: 2
},

We can take a simulated look at what's happening to better understand the problem:

Step	What Happens	Page Associated with jumpToState
0	Pages A and B are being built at the same time	—
1	Set jumpToState for page A	A
2	Set jumpToState for page B	B
3	Read from jumpToState for page A	B
4	Read from jumpToState for page B	B

Because the site is being built concurrently two pages at a time, it's possible for jumpToState to be overwritten by page B before page A can read from jumpToState.

This can result in the visual bug, as seen below.

Current page incorrectly underlined as "Map"

Current page correctly underlined as "Map"

*The assumption is that these pages were built concurrently at build time and "Map" overwrote jumpToState before "Linear Interpolation" could read from it

Our Solution

For our solution, we didn't want to simply change the build config for the site, as we believe that this config setting was most likely put in place for a good reason, so we instead decided to replace the use of the global jumpToState variable with a "jumpToState" prop for the <BaseLayout> and <Nav> components.

Old Approach	New Approach
Set global jumpToState variable ↓ Global jumpToState variable potentially gets overwritten by another page ↓ <Nav jumpToState={global jumpToState variable}>	<BaseLayout jumpToState={page}> ↓ <Nav jumpToState={page}>

Screenshots of our solution working as expected locally:

• "Linear Interpolation" page

 

• "Variables and Change" page

 

Feedback welcome!