refactor: migrate jumpToState to Astro.licals to prevent build-time state leakage

src/components/Nav/NavPanels.tsx

@@ -1,4 +1,4 @@
-import type { JumpToState } from "@/src/globals/state";
+import type { JumpToState } from "../../globals/state";
 import { JumpToLinks } from "./JumpToLinks";
 import { MainNavLinks } from "./MainNavLinks";
 import { useEffect, useState } from "preact/hooks";

src/components/Nav/index.astro

@@ -8,8 +8,7 @@ const currentLocale = getCurrentLocale(Astro.url.pathname);
 const pathMinusLocale = Astro.url.pathname.replace(`/${currentLocale}`, "");
 const isHomepage = pathMinusLocale === "/";
 const t = await getUiTranslator(currentLocale);
-const { jumpToState } = Astro.props;
-
+const jumpToState = Astro.locals.jumpToState ?? null;
 const mainLinks = [
   { url: "/reference/", label: t("Reference") },
   { url: "/tutorials/", label: t("Tutorials") },
@@ -51,14 +50,14 @@ const jumpToLabel = t("Jump To");
     {t("Skip to main content")}
   </a>
   <NavPanels
+    client:load
     mainLinks={mainLinks}
     isHomepage={isHomepage}
+    jumpToState={jumpToState}
     editorButtonLabel={editorButtonLabel as string}
     donateButtonLabel={donateButtonLabel as string}
     mobileMenuLabel={mobileMenuLabel as string}
     jumpToLabel={jumpToLabel as string}
-    jumpToState={jumpToState}
-    currentPath={currentPath} 
-    client:load
+    currentPath={currentPath}
   />
 </nav>

src/components/Settings/index.astro

@@ -5,7 +5,6 @@ import {
   removeLocalePrefix,
   getUiTranslator,
 } from "@/src/i18n/utils";
-import { jumpToState } from "@/src/globals/state";
 import { AccessibilitySettings } from "@components/AccessibilitySettings/";
 import SearchForm from "@components/SearchForm/index.astro";
 import { LocaleSelect } from "@components/LocaleSelect";
@@ -73,6 +72,8 @@ const a11ySettingsProps = [
 ] as DropdownOption[];
 
 const { hideSearch } = Astro.props;
+
+const jumpToState = Astro.locals.jumpToState;
 ---
 
 <aside class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`} aria-label="Settings">

src/env.d.ts

@@ -1,3 +1,10 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+
+declare namespace App {
+  interface Locals {
+    // We import the type directly from your state file so it knows what shape the data is
+    jumpToState?: import('./globals/state').JumpToState | null;
+  }
+}

src/globals/state.ts

@@ -1,5 +1,5 @@
 /**
- * This file is used to store global state that is shared across the application during built.
+ * This file is used to store global state types that are shared across the application.
  */
 export type JumpToLink = {
   label: string;
@@ -12,12 +12,3 @@ export type JumpToState = {
   heading?: string;
   links?: JumpToLink[];
 };
-/**
- * This object is used to store the jump to links for the current page.
- * Set to an empty object for pages without jump to links.
- */
-export let jumpToState: JumpToState | null = null;
-
-export const setJumpToState = (newJumpToState: JumpToState | null = null) => {
-  jumpToState = newJumpToState;
-};

src/layouts/AboutLayout.astro

@@ -7,7 +7,6 @@ import LinkButton from "@components/LinkButton/index.astro";
 import GridItemPerson from "@components/GridItem/Person.astro";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { getCollectionInLocaleWithFallbacks } from "../pages/_utils";
-import { setJumpToState } from "../globals/state";
 
 interface Props {
   entry: CollectionEntry<"text-detail">;
@@ -42,9 +41,9 @@ const pageJumpToLinks = [
   },
 ];
 
-setJumpToState({
+Astro.locals.jumpToState = {
   links: [...markdownJumpToLinks, ...pageJumpToLinks],
-});
+};
 
 const people = await getCollectionInLocaleWithFallbacks(
   "people",

src/layouts/BaseLayout.astro

@@ -41,6 +41,8 @@ const {
   jumpToState
 } = Astro.props;
 
+Astro.locals.jumpToState = jumpToState !== undefined ? jumpToState : Astro.locals.jumpToState;
+
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
 const slug = title.toLowerCase().split(/\s+|\./).join('-');
@@ -92,7 +94,7 @@ const headerTopic = topic
   </head>
   <body>
     <div class="top-layout-grid">
-      <Nav jumpToState={jumpToState} />
+      <Nav />
       <Settings hideSearch={variant === "search"} />
       <header class={homepageConfig && "h-[100vh] md:min-h-[calc(378px+50vh)]"}>
         {

src/layouts/CommunityLayout.astro

@@ -31,18 +31,18 @@ const sketches = Astro.props.sketches.slice(0, sketchesLimit),
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 
-const jumpToState = {
+Astro.locals.jumpToState = {
   links: [
     { label: t("Sketches") as string, url: "#sketches" },
     { label: t("Libraries") as string, url: "#libraries" },
-    { label: t("Events") as string, url: "#events" }
-  ]
+    { label: t("Events") as string, url: "#events" },
+  ],
 };
 ---
 
 <Head title={"Community"} locale={currentLocale} />
 
-<BaseLayout title="Community" jumpToState={jumpToState}>
+<BaseLayout title="Community">
   <section>
     <h2>{t("Sketches")}<a id="sketches"></a></h2>
     <ul class="content-grid-simple">

src/layouts/ContributeLayout.astro

@@ -39,6 +39,9 @@ const jumpToLinks = [
     url: "#donate",
   },
 ];
+Astro.locals.jumpToState = {
+  links: jumpToLinks as JumpToLink[],
+};
 ---
 
 <Head
@@ -47,7 +50,7 @@ const jumpToLinks = [
   featuredImageSrc={ContributeImage.src}
 />
 
-<BaseLayout title="Contribute" jumpToState={{ links: jumpToLinks as JumpToLink[] }}>
+<BaseLayout title="Contribute">
   <section>
     <h2 id="docs">{t("Contributor Docs")}</h2>
     <div

src/layouts/ContributorDocLayout.astro

@@ -24,7 +24,7 @@ const jumpToLinks = headings
     url: `#${heading.slug}`,
   }));
 
-const jumpToState = {
+Astro.locals.jumpToState = {
   links: jumpToLinks as JumpToLink[],
   heading: t("Contributor Docs"),
 } as JumpToState;
@@ -38,7 +38,6 @@ const jumpToState = {
   subtitle={null}
   topic="contribute"
   className="contribute"
-  jumpToState={jumpToState}
 >
   <section class="rendered-markdown">
     <Content />

src/layouts/EventLayout.astro

@@ -18,6 +18,7 @@ interface Props {
 
 const { entry, title } = Astro.props;
 const { Content } = await render(entry);
+Astro.locals.jumpToState = null;
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
@@ -50,7 +51,7 @@ const { showBanner, englishUrl } = checkTranslationBanner(
   featuredImageSrc={entry.data.featuredImage.src}
 />
 
-<BaseLayout title={title} subtitle={dayString} variant="item" topic="community" jumpToState={null}>
+<BaseLayout title={title} subtitle={dayString} variant="item" topic="community">
   {showBanner && <OutdatedTranslationBanner englishUrl={englishUrl} locale={currentLocale} />}
   {
     entry.data.featuredImage && entry.data.featuredImageAlt && (

src/layouts/EventsLayout.astro

@@ -16,11 +16,12 @@ interface Props {
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
 const { entries, totalNumEvents, currentPage } = Astro.props;
+Astro.locals.jumpToState = null;
 ---
 
 <Head title={"Events"} locale={currentLocale} />
 
-<BaseLayout title="Events" variant="item" topic="community" jumpToState={null}>
+<BaseLayout title="Events" variant="item" topic="community">
   <section>
     <ul class="content-grid-simple">
       {entries.map((entry) => (

src/layouts/ExampleLayout.astro

@@ -33,6 +33,7 @@ const jumpToState = await generateJumpToState(
   currentLocale
 );
 
+Astro.locals.jumpToState = jumpToState;
 const relatedReferences =
   example.data.relatedReference !== undefined
     ? await getRelatedEntriesinCollection(
@@ -90,7 +91,6 @@ const { showBanner, englishUrl } = checkTranslationBanner(
   variant="item"
   topic="examples"
   className="example"
-  jumpToState={jumpToState}
 >
   {showBanner && <OutdatedTranslationBanner englishUrl={englishUrl} locale={currentLocale} />}
   <div class="mt-xl mb-4xl lg:mb-3xl max-w-[770px]">

src/layouts/ExamplesLayout.astro

@@ -4,7 +4,6 @@ import Head from "@components/Head/index.astro";
 import GridItemExample from "@components/GridItem/Example.astro";
 import { getExampleCategory } from "../pages/_utils";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
-import { type JumpToLink } from "../globals/state";
 import type { CollectionEntry } from "astro:content";
 
 interface Props {
@@ -44,11 +43,15 @@ const jumpToLinks = Array.from(examplesByCategory).map(({ name }) => ({
   label: name as string,
   url: `/examples/#${name.toLowerCase()}`,
 }));
+const jumpToState = {
+  links: jumpToLinks,
+};
+Astro.locals.jumpToState = jumpToState;
 ---
 
 <Head title={"Examples"} locale={currentLocale} />
 
-<BaseLayout title="Examples" jumpToState={{ links: jumpToLinks as JumpToLink[] }}>
+<BaseLayout title="Examples">
   {
     examplesByCategory.map((category) => (
       <section class="grid">

src/layouts/HomepageLayout.astro

@@ -24,6 +24,7 @@ const sketches = config.data.sketchIds.map(
     curationSketches.find((sk) => id === sk.visualID) ??
     curationSketches[i]
 );
+Astro.locals.jumpToState = null;
 ---
 
 <Head
@@ -32,7 +33,7 @@ const sketches = config.data.sketchIds.map(
   locale={currentLocale}
 />
 
-<BaseLayout title="" variant="homepage" homepageConfig={config} jumpToState={null}>
+<BaseLayout title="" variant="homepage" homepageConfig={config}>
 
   <h1 class="text-5xl font-bold mb-xl col-span-full">{t("Welcome to p5.js")}</h1>
 

src/layouts/LibrariesLayout.astro

@@ -86,6 +86,10 @@ const pageJumpToLinks = categories.map((category) => ({
   url: `/libraries#${category}`,
   label: t("libraryCategories", category),
 }));
+Astro.locals.jumpToState = {
+  heading: t("Libraries") as string,
+  links: pageJumpToLinks as JumpToLink[],
+};
 ---
 
 <Head title="Libraries" locale={currentLocale} />
@@ -95,7 +99,6 @@ const pageJumpToLinks = categories.map((category) => ({
   subtitle={t("briefPageDescriptions", "Libraries") as string}
   variant="item"
   topic="community"
-  jumpToState={{ heading: t("Libraries") as string, links: pageJumpToLinks as JumpToLink[] }}
 >
 
   <div class="flex">

src/layouts/PeopleLayout.astro

@@ -50,11 +50,12 @@ const contributorEntries = {
   label: t("peopleCategories", "contributor"),
   members: filteredEntries.contributor,
 };
+Astro.locals.jumpToState = null;
 ---
 
 <Head title={"People"} locale={currentLocale} />
 
-<BaseLayout title={title} variant="item" topic="about" className="about" jumpToState={null}>
+<BaseLayout title={title} variant="item" topic="about" className="about">
   <p class="mb-xl max-w-[770px] text-h3">
     {t("peoplePage", "PageDescription")}
   </p>

src/layouts/ReferenceItemLayout.astro

@@ -57,7 +57,7 @@ relatedEntriesLinks.unshift({
 });
 // Put related links at top of the list
 jumpToState.links?.unshift(...relatedEntriesLinks);
-
+Astro.locals.jumpToState = jumpToState;
 // get whatever related entries might be specified in the collection entry data
 const relatedReferencesFromEntryData =
   entry.data.relatedContent?.references !== undefined
@@ -107,7 +107,6 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
   variant="item"
   topic="reference"
   className="reference-item"
-  jumpToState={jumpToState}
 >
   {showBanner && <OutdatedTranslationBanner englishUrl={englishUrl} locale={currentLocale} />}
   <div class="content-grid mt-0 max-w-[770px]">

src/layouts/ReferenceLayout.astro

@@ -1,5 +1,5 @@
 ---
-import { type CollectionEntry } from "astro:content";
+import type { CollectionEntry } from "astro:content";
 import Head from "@components/Head/index.astro";
 import BaseLayout from "./BaseLayout.astro";
 import { ReferenceDirectoryWithFilter } from "@components/ReferenceDirectoryWithFilter/";
@@ -149,11 +149,12 @@ const pageJumpToLinks: JumpToLink[] = jumpCategoryData
 const pageJumpToState: JumpToState = {
   links: pageJumpToLinks,
 };
+Astro.locals.jumpToState = pageJumpToState;
 ---
 
 <Head title={Astro.props.title} locale={currentLocale} />
 
-<BaseLayout title={Astro.props.title} mainContentParentClass="mx-0" jumpToState={pageJumpToState}>
+<BaseLayout title={Astro.props.title} mainContentParentClass="mx-0">
   <ReferenceDirectoryWithFilter
     client:load
     categoryData={categoryData as any}

src/layouts/SearchLayout.astro

@@ -7,11 +7,12 @@ import BaseLayout from "./BaseLayout.astro";
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const { title } = Astro.props;
 const uiTranslations = await getUiTranslationWithFallback(currentLocale);
+Astro.locals.jumpToState = null;
 ---
 
 <Head title={"Search"} locale={currentLocale} />
 
-<BaseLayout title={title} variant="search" jumpToState={null}>
+<BaseLayout title={title} variant="search">
   <h1 class="sr-only">Search Results</h1>
   <SearchProvider
     client:only

src/layouts/SketchLayout.astro

@@ -32,6 +32,7 @@ const dateString = new Date(createdOn).toLocaleDateString(currentLocale, {
   day: "numeric",
 });
 
+Astro.locals.jumpToState = null;
 const moreSketches = await getRandomCurationSketches(4);
 const featuredImageURL = makeThumbnailUrl(sketchIdNumber);
 
@@ -59,7 +60,6 @@ const iframeTitle = `OpenProcessing Sketch: ${title} by ${authorName}`;
   subtitle={dateString}
   variant="item"
   topic={"community"}
-  jumpToState={null}
 >
   <div class="max-w-[770px]">
     <div

src/layouts/SketchesLayout.astro

@@ -15,12 +15,13 @@ interface Props {
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
+Astro.locals.jumpToState = null;
 const { entries, totalNumSketches, currentPage } = Astro.props;
 ---
 
 <Head title="Sketches" locale={currentLocale} />
 
-<BaseLayout title="Sketches" variant="item" topic="community" jumpToState={null}>
+<BaseLayout title="Sketches" variant="item" topic="community">
   <section>
     <ul class="content-grid-simple">
       {entries.map((entry) => (

src/layouts/TextDetailLayout.astro

@@ -20,6 +20,7 @@ const pageTopic = Astro.url.pathname.includes("donate")
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
+Astro.locals.jumpToState = null;
 const { showBanner, englishUrl } = checkTranslationBanner(
   'text-detail',
   page.id,
@@ -37,7 +38,6 @@ const { showBanner, englishUrl } = checkTranslationBanner(
   topic={pageTopic}
   className={pageTopic}
   subtitle={null}
-  jumpToState={null}
 >
   {showBanner && <OutdatedTranslationBanner englishUrl={englishUrl} locale={currentLocale} />}
   <div class="max-w-[770px] [&>*:first-child]:mt-0 rendered-markdown pb-[80px]">