processing · esu-skoopin · Apr 29, 2026 · Apr 29, 2026 · May 1, 2026 · May 1, 2026
diff --git a/src/components/Nav/index.astro b/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";
 
@@ -9,6 +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 mainLinks = [
   { url: "/reference/", label: t("Reference") },

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -7,6 +7,7 @@ import ItemPageHeader from "@/src/components/PageHeader/ItemPage.astro";
 import HomePageHeader from "@/src/components/PageHeader/HomePage.astro";
 import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
 import { capitalize, getTopicInfo, type PageTopic } from "../pages/_utils";
+import { type JumpToState } from "@src/globals/state";
 import "@styles/base.scss";
 import type { CollectionEntry } from "astro:content";
 import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
@@ -21,6 +22,7 @@ interface Props {
   variant?: "root" | "item" | "search" | "homepage";
   topic?: PageTopic;
   mainContentParentClass?: string;
+  jumpToState?: JumpToState | null;
   /* Only needed for the homepage */
   homepageConfig?: CollectionEntry<"homepage">;
 }
@@ -34,6 +36,7 @@ const {
   variant = "root",
   mainContentParentClass = "mx-5 md:mx-lg mt-md",
   homepageConfig,
+  jumpToState
 } = Astro.props;
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
@@ -87,7 +90,7 @@ const headerTopic = topic
   </head>
   <body>
     <div class="top-layout-grid">
-      <Nav />
+      <Nav jumpToState={jumpToState} />
       <Settings hideSearch={variant === "search"} />
       <header class={homepageConfig && "h-[100vh] md:min-h-[calc(378px+50vh)]"}>
         {

diff --git a/src/layouts/CommunityLayout.astro b/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,18 +31,18 @@ const sketches = Astro.props.sketches.slice(0, sketchesLimit),
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 
-setJumpToState({
+const 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">
+<BaseLayout title="Community" jumpToState={jumpToState}>
   <section>
     <h2>{t("Sketches")}<a id="sketches"></a></h2>
     <ul class="content-grid-simple">

diff --git a/src/layouts/ContributeLayout.astro b/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">[];
@@ -39,10 +39,6 @@ const jumpToLinks = [
     url: "#donate",
   },
 ];
-
-setJumpToState({
-  links: jumpToLinks as JumpToLink[],
-});
 ---
 
 <Head
@@ -51,7 +47,7 @@ setJumpToState({
   featuredImageSrc={ContributeImage.src}
 />
 
-<BaseLayout title="Contribute">
+<BaseLayout title="Contribute" jumpToState={{ links: jumpToLinks as JumpToLink[] }}>
   <section>
     <h2 id="docs">{t("Contributor Docs")}</h2>
     <div

diff --git a/src/layouts/ContributorDocLayout.astro b/src/layouts/ContributorDocLayout.astro
@@ -3,11 +3,7 @@ import type { CollectionEntry } from "astro:content";
 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";
+import { type JumpToLink, type JumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 
 interface Props {
@@ -31,8 +27,6 @@ const jumpToState = {
   links: jumpToLinks as JumpToLink[],
   heading: t("Contributor Docs"),
 } as JumpToState;
-
-setJumpToState(jumpToState);
 ---
 
 <Head title={entry.data.title} locale={currentLocale} />
@@ -43,6 +37,7 @@ setJumpToState(jumpToState);
   subtitle={null}
   topic="contribute"
   className="contribute"
+  jumpToState={jumpToState}
 >
   <section class="rendered-markdown">
     <Content />

diff --git a/src/layouts/EventLayout.astro b/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,8 +18,6 @@ interface Props {
 const { entry, title } = Astro.props;
 const { Content } = await entry.render();
 
-setJumpToState(null);
-
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 const dayString = new Date(entry.data.date).toLocaleDateString(currentLocale, {
@@ -52,7 +49,7 @@ const { showBanner, englishUrl } = checkTranslationBanner(
   featuredImageSrc={entry.data.featuredImage.src}
 />
 
-<BaseLayout title={title} subtitle={dayString} variant="item" topic="community">
+<BaseLayout title={title} subtitle={dayString} variant="item" topic="community" jumpToState={null}>
   {showBanner && <OutdatedTranslationBanner englishUrl={englishUrl} locale={currentLocale} />}
   {
     entry.data.featuredImage && entry.data.featuredImageAlt && (

diff --git a/src/layouts/EventsLayout.astro b/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,12 +16,11 @@ interface Props {
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 
 const { entries, totalNumEvents, currentPage } = Astro.props;
-setJumpToState(null);
 ---
 
 <Head title={"Events"} locale={currentLocale} />
 
-<BaseLayout title="Events" variant="item" topic="community">
+<BaseLayout title="Events" variant="item" topic="community" jumpToState={null}>
   <section>
     <ul class="content-grid-simple">
       {entries.map((entry) => (

diff --git a/src/layouts/ExampleLayout.astro b/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,8 +31,6 @@ const jumpToState = await generateJumpToState(
   currentLocale
 );
 
-setJumpToState(jumpToState);
-
 const relatedReferences =
   example.data.relatedReference !== undefined
     ? await getRelatedEntriesinCollection(
@@ -84,6 +81,7 @@ 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]">

diff --git a/src/layouts/ExamplesLayout.astro b/src/layouts/ExamplesLayout.astro
@@ -4,7 +4,7 @@ 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 JumpToLink } from "../globals/state";
 import type { CollectionEntry } from "astro:content";
 
 interface Props {
@@ -44,17 +44,11 @@ const jumpToLinks = Array.from(examplesByCategory).map(({ name }) => ({
   label: name as string,
   url: `/examples/#${name.toLowerCase()}`,
 }));
-
-const jumpToState = {
-  links: jumpToLinks,
-};
-
-setJumpToState(jumpToState);
 ---
 
 <Head title={"Examples"} locale={currentLocale} />
 
-<BaseLayout title="Examples">
+<BaseLayout title="Examples" jumpToState={{ links: jumpToLinks as JumpToLink[] }}>
   {
     examplesByCategory.map((category, i) => (
       <section class="grid">

diff --git a/src/layouts/HomepageLayout.astro b/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 {
@@ -25,8 +24,6 @@ const sketches = data.sketchIds.map(
     curationSketches.find((sk) => id === sk.visualID) ??
     curationSketches[i]
 );
-
-setJumpToState(null);
 ---
 
 <Head
@@ -35,7 +32,7 @@ setJumpToState(null);
   locale={currentLocale}
 />
 
-<BaseLayout title="" variant="homepage" homepageConfig={config}>
+<BaseLayout title="" variant="homepage" homepageConfig={config} jumpToState={null}>
 
   <h1 class="text-5xl font-bold mb-xl col-span-full">{t("Welcome to p5.js")}</h1>
 

diff --git a/src/layouts/LibrariesLayout.astro b/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";
@@ -86,11 +86,6 @@ const pageJumpToLinks = categories.map((category) => ({
   url: `/libraries#${category}`,
   label: t("libraryCategories", category),
 }));
-
-setJumpToState({
-  heading: t("Libraries") as string,
-  links: pageJumpToLinks as JumpToLink[],
-});
 ---
 
 <Head title="Libraries" locale={currentLocale} />
@@ -100,6 +95,7 @@ setJumpToState({
   subtitle={t("briefPageDescriptions", "Libraries") as string}
   variant="item"
   topic="community"
+  jumpToState={{ heading: t("Libraries") as string, links: pageJumpToLinks as JumpToLink[] }}
 >
 
   <div class="flex">

diff --git a/src/layouts/PeopleLayout.astro b/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";
@@ -51,13 +50,11 @@ const contributorEntries = {
   label: t("peopleCategories", "contributor"),
   members: filteredEntries.contributor,
 };
-
-setJumpToState(null);
 ---
 
 <Head title={"People"} locale={currentLocale} />
 
-<BaseLayout title={title} variant="item" topic="about" className="about">
+<BaseLayout title={title} variant="item" topic="about" className="about" jumpToState={null}>
   <p class="mb-xl max-w-[770px] text-h3">
     {t("peoplePage", "PageDescription")}
   </p>

diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
@@ -17,7 +17,6 @@ import type {
   ReferenceOverload,
   ReferenceParam,
 } from "@/types/parsers.interface";
-import { setJumpToState } from "../globals/state";
 import { p5Version } from "../globals/p5-version";
 import flask from "@src/content/ui/images/icons/flask.svg?raw"; 
 import warning from "@src/content/ui/images/icons/warning.svg?raw"; 
@@ -59,8 +58,6 @@ relatedEntriesLinks.unshift({
 // Put related links at top of the list
 jumpToState.links?.unshift(...relatedEntriesLinks);
 
-setJumpToState(jumpToState);
-
 // get whatever related entries might be specified in the collection entry data
 const relatedReferencesFromEntryData =
   entry.data.relatedContent?.references !== undefined
@@ -110,6 +107,7 @@ 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]">

diff --git a/src/layouts/ReferenceLayout.astro b/src/layouts/ReferenceLayout.astro
@@ -9,7 +9,6 @@ import {
   normalizeReferenceRoute,
 } from "../pages/_utils";
 import {
-  setJumpToState,
   type JumpToLink,
   type JumpToState,
 } from "../globals/state";
@@ -148,13 +147,11 @@ const pageJumpToLinks: JumpToLink[] = jumpCategoryData
 const pageJumpToState: JumpToState = {
   links: pageJumpToLinks,
 };
-
-setJumpToState(pageJumpToState);
 ---
 
 <Head title={Astro.props.title} locale={currentLocale} />
 
-<BaseLayout title={Astro.props.title} mainContentParentClass="mx-0">
+<BaseLayout title={Astro.props.title} mainContentParentClass="mx-0" jumpToState={pageJumpToState}>
   <ReferenceDirectoryWithFilter
     categoryData={categoryData as any}
   />

diff --git a/src/layouts/SearchLayout.astro b/src/layouts/SearchLayout.astro
@@ -3,17 +3,15 @@ import SearchProvider from "@components/SearchProvider";
 import Head from "@components/Head/index.astro";
 import { getCurrentLocale, getUiTranslationWithFallback } from "@i18n/utils";
 import BaseLayout from "./BaseLayout.astro";
-import { setJumpToState } from "../globals/state";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const { title } = Astro.props;
 const uiTranslations = await getUiTranslationWithFallback(currentLocale);
-setJumpToState(null);
 ---
 
 <Head title={"Search"} locale={currentLocale} />
 
-<BaseLayout title={title} variant="search">
+<BaseLayout title={title} variant="search" jumpToState={null}>
   <h1 class="sr-only">Search Results</h1>
   <SearchProvider
     client:only