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

@@ -1,6 +1,5 @@
 ---
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
-import { jumpToState } from "@/src/globals/state";
 import styles from "./styles.module.scss";
 import { NavPanels } from "./NavPanels";
 
@@ -10,6 +9,8 @@ const pathMinusLocale = Astro.url.pathname.replace(`/${currentLocale}`, "");
 const isHomepage = pathMinusLocale === "/";
 const t = await getUiTranslator(currentLocale);
 
+const jumpToState = Astro.locals.jumpToState ?? null;
+
 const mainLinks = [
   { url: "/reference/", label: t("Reference") },
   { url: "/tutorials/", label: t("Tutorials") },
@@ -30,13 +31,13 @@ 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}
-    client:load
   />
-</nav>
+</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;
 ---
 
 <div class={`${styles.container} ${jumpToState ? "" : "noJumpTo"}`}>
@@ -98,4 +99,4 @@ const { hideSearch } = Astro.props;
     }
   </div>
 </div>
-<script src="./script.js"></script>
+<script src="./script.js"></script>

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;
@@ -11,13 +11,4 @@ export type JumpToLink = {
 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

@@ -6,7 +6,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">;
@@ -41,9 +40,9 @@ const pageJumpToLinks = [
   },
 ];
 
-setJumpToState({
+Astro.locals.jumpToState = {
   links: [...markdownJumpToLinks, ...pageJumpToLinks],
-});
+};
 
 const people = await getCollectionInLocaleWithFallbacks(
   "people",
@@ -99,7 +98,7 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
         <a href="https://github.com/processing/p5.js">GitHub</a>,{` `}
         <a href="https://www.instagram.com/p5xjs/">Instagram</a>,{` `}
         <a href="https://twitter.com/p5xjs">X</a>,{` `}
-        <a href="https://www.youtube.com/@ProcessingFoundation">YouTube</a>,{` `}    
+        <a href="https://www.youtube.com/@ProcessingFoundation">YouTube</a>,{` `}  
         <a href="https://discord.p5js.org">Discord</a>,{` `}
         <a href="https://discourse.processing.org/c/p5js">{t("Forum")}</a>{` `}
       </div>
@@ -139,4 +138,4 @@ const displayedFeaturedPeople = sortedFeaturedPeople.slice(0, 6);
   a {
     @apply text-type-magenta-dark;
   }
-</style>
+</style>

src/layouts/CommunityLayout.astro

@@ -7,7 +7,6 @@ import GridItemSketch from "@components/GridItem/Sketch.astro";
 import GridItemLibrary from "@components/GridItem/Library.astro";
 import GridItemEvent from "@components/GridItem/Event.astro";
 import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
-import { setJumpToState } from "../globals/state";
 import { type OpenProcessingCurationResponse } from "../api/OpenProcessing";
 
 interface Props {
@@ -32,13 +31,13 @@ const sketches = Astro.props.sketches.slice(0, sketchesLimit),
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 
-setJumpToState({
+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" },
   ],
-});
+};
 ---
 
 <Head title={"Community"} locale={currentLocale} />
@@ -117,4 +116,4 @@ setJumpToState({
       >
     </div>
   </section>
-</BaseLayout>
+</BaseLayout>

src/layouts/ContributeLayout.astro

@@ -6,7 +6,7 @@ import ContributeImage from "@content/ui/images/contribute.png";
 import BaseLayout from "./BaseLayout.astro";
 import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
 import GridItemContributorDoc from "@components/GridItem/ContributorDoc.astro";
-import { setJumpToState, type JumpToLink } from "../globals/state";
+import { type JumpToLink } from "../globals/state";
 
 interface Props {
   entries: CollectionEntry<"contributor-docs">[];
@@ -40,9 +40,9 @@ const jumpToLinks = [
   },
 ];
 
-setJumpToState({
+Astro.locals.jumpToState = {
   links: jumpToLinks as JumpToLink[],
-});
+};
 ---
 
 <Head
@@ -102,4 +102,4 @@ setJumpToState({
       }
     </ul>
   </section>
-</BaseLayout>
+</BaseLayout>

src/layouts/ContributorDocLayout.astro

@@ -4,7 +4,6 @@ import BaseLayout from "./BaseLayout.astro";
 import Head from "@components/Head/index.astro";
 import type { MarkdownHeading } from "astro";
 import {
-  setJumpToState,
   type JumpToLink,
   type JumpToState,
 } from "../globals/state";
@@ -27,12 +26,10 @@ const jumpToLinks = headings
     url: `#${heading.slug}`,
   }));
 
-const jumpToState = {
+Astro.locals.jumpToState = {
   links: jumpToLinks as JumpToLink[],
   heading: t("Contributor Docs"),
 } as JumpToState;
-
-setJumpToState(jumpToState);
 ---
 
 <Head title={entry.data.title} locale={currentLocale} />
@@ -47,4 +44,4 @@ setJumpToState(jumpToState);
   <section class="rendered-markdown">
     <Content />
   </section>
-</BaseLayout>
+</BaseLayout>

src/layouts/EventLayout.astro

@@ -5,7 +5,6 @@ import BaseLayout from "./BaseLayout.astro";
 import Image from "@components/Image/index.astro";
 import FreeRatioImage from "@components/Image/FreeRatioImage.astro";
 import RelatedItems from "@components/RelatedItems/index.astro";
-import { setJumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { getRelatedEntriesinCollection } from "../pages/_utils";
 import OutdatedTranslationBanner from "@components/OutdatedTranslationBanner/index.astro";
@@ -19,7 +18,7 @@ interface Props {
 const { entry, title } = Astro.props;
 const { Content } = await entry.render();
 
-setJumpToState(null);
+Astro.locals.jumpToState = null;
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
@@ -80,4 +79,4 @@ const { showBanner, englishUrl } = checkTranslationBanner(
       />
     )
   }
-</BaseLayout>
+</BaseLayout>

src/layouts/EventsLayout.astro

@@ -5,7 +5,6 @@ import BaseLayout from "./BaseLayout.astro";
 import GridItemEvent from "@components/GridItem/Event.astro";
 import PaginationNav from "@components/PaginationNav/index.astro";
 import { eventsPerPage } from "../globals/globals";
-import { setJumpToState } from "../globals/state";
 import { getCurrentLocale } from "../i18n/utils";
 
 interface Props {
@@ -17,7 +16,7 @@ interface Props {
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
 const { entries, totalNumEvents, currentPage } = Astro.props;
-setJumpToState(null);
+Astro.locals.jumpToState = null;
 ---
 
 <Head title={"Events"} locale={currentLocale} />
@@ -38,4 +37,4 @@ setJumpToState(null);
       sectionUrlPrefix="/events"
     />
   </section>
-</BaseLayout>
+</BaseLayout>

src/layouts/ExampleLayout.astro

@@ -1,7 +1,6 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import Head from "@components/Head/index.astro";
-import { setJumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import {
   generateJumpToState,
@@ -32,7 +31,7 @@ const jumpToState = await generateJumpToState(
   currentLocale
 );
 
-setJumpToState(jumpToState);
+Astro.locals.jumpToState = jumpToState;
 
 const relatedReferences =
   example.data.relatedReference !== undefined
@@ -186,4 +185,4 @@ const { showBanner, englishUrl } = checkTranslationBanner(
       items={relatedExamples}
     />
   </div>
-</BaseLayout>
+</BaseLayout>

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 { setJumpToState } from "../globals/state";
 import type { CollectionEntry } from "astro:content";
 
 interface Props {
@@ -49,7 +48,7 @@ const jumpToState = {
   links: jumpToLinks,
 };
 
-setJumpToState(jumpToState);
+Astro.locals.jumpToState = jumpToState;
 ---
 
 <Head title={"Examples"} locale={currentLocale} />
@@ -71,4 +70,4 @@ setJumpToState(jumpToState);
       </section>
     ))
   }
-</BaseLayout>
+</BaseLayout>

src/layouts/HomepageLayout.astro

@@ -5,7 +5,6 @@ import GridItemSketch from "@components/GridItem/Sketch.astro";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { getCurationSketches } from "../api/OpenProcessing";
 import BaseLayout from "./BaseLayout.astro";
-import { setJumpToState } from "../globals/state";
 import Head from "../components/Head/index.astro";
 
 interface Props {
@@ -26,7 +25,7 @@ const sketches = data.sketchIds.map(
     curationSketches[i]
 );
 
-setJumpToState(null);
+Astro.locals.jumpToState = null;
 ---
 
 <Head
@@ -111,4 +110,4 @@ setJumpToState(null);
       font-size: 3.5rem;
     }
   }
-</style>
+</style>

src/layouts/LibrariesLayout.astro

@@ -4,7 +4,7 @@ import Head from "@components/Head/index.astro";
 import BaseLayout from "./BaseLayout.astro";
 import GridItemLibrary from "@components/GridItem/Library.astro";
 import LibraryListing from "@components/LibraryListing/index.astro";
-import { setJumpToState, type JumpToLink } from "../globals/state";
+import { type JumpToLink } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import { categories } from "../content/libraries/config";
 import Button from "@components/Button/index.astro";
@@ -87,10 +87,10 @@ const pageJumpToLinks = categories.map((category) => ({
   label: t("libraryCategories", category),
 }));
 
-setJumpToState({
+Astro.locals.jumpToState = {
   heading: t("Libraries") as string,
   links: pageJumpToLinks as JumpToLink[],
-});
+};
 ---
 
 <Head title="Libraries" locale={currentLocale} />
@@ -131,4 +131,4 @@ setJumpToState({
       </section>
     ))
   }
-</BaseLayout>
+</BaseLayout>

src/layouts/PeopleLayout.astro

@@ -3,7 +3,6 @@ import Image from "@components/Image/index.astro";
 import Head from "@components/Head/index.astro";
 import BaseLayout from "./BaseLayout.astro";
 import type { CollectionEntry } from "astro:content";
-import { setJumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import lodash from "lodash";
 import { removeLocaleAndExtension } from "../pages/_utils";
@@ -52,7 +51,7 @@ const contributorEntries = {
   members: filteredEntries.contributor,
 };
 
-setJumpToState(null);
+Astro.locals.jumpToState = null;
 ---
 
 <Head title={"People"} locale={currentLocale} />
@@ -117,4 +116,4 @@ setJumpToState(null);
       }
     </ul>
   </section>
-</BaseLayout>
+</BaseLayout>