Merge pull request #1454 from processing/1391-2

Fix Wrong Page Underlined as Current Page in Left Nav Bar [2.0]

Author: ksen0

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") },

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 "@styles/global.css";
 import type { CollectionEntry } from "astro:content";
@@ -23,6 +24,7 @@ interface Props {
   variant?: "root" | "item" | "search" | "homepage";
   topic?: PageTopic;
   mainContentParentClass?: string;
+  jumpToState?: JumpToState | null;
   /* Only needed for the homepage */
   homepageConfig?: CollectionEntry<"homepage">;
 }
@@ -36,6 +38,7 @@ const {
   variant = "root",
   mainContentParentClass = "mx-5 md:mx-lg mt-md",
   homepageConfig,
+  jumpToState
 } = Astro.props;
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
@@ -89,7 +92,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)]"}>
         {

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">

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

src/layouts/ContributorDocLayout.astro

@@ -4,11 +4,7 @@ import { render } 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 {
@@ -32,8 +28,6 @@ const jumpToState = {
   links: jumpToLinks as JumpToLink[],
   heading: t("Contributor Docs"),
 } as JumpToState;
-
-setJumpToState(jumpToState);
 ---
 
 <Head title={entry.data.title} locale={currentLocale} />
@@ -44,6 +38,7 @@ setJumpToState(jumpToState);
   subtitle={null}
   topic="contribute"
   className="contribute"
+  jumpToState={jumpToState}
 >
   <section class="rendered-markdown">
     <Content />

src/layouts/EventLayout.astro

@@ -6,7 +6,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";
 
@@ -18,8 +17,6 @@ interface Props {
 const { entry, title } = Astro.props;
 const { Content } = await render(entry);
 
-setJumpToState(null);
-
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 const dayString = new Date(entry.data.date).toLocaleDateString(currentLocale, {
@@ -43,7 +40,7 @@ const relatedEvents =
   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}>
   {
     entry.data.featuredImage && entry.data.featuredImageAlt && (
       <Image

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) => (

src/layouts/ExampleLayout.astro

@@ -2,7 +2,6 @@
 import type { CollectionEntry } from "astro:content";
 import { render } from "astro:content";
 import Head from "@components/Head/index.astro";
-import { setJumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
 import {
   generateJumpToState,
@@ -31,8 +30,6 @@ const jumpToState = await generateJumpToState(
   currentLocale
 );
 
-setJumpToState(jumpToState);
-
 const relatedReferences =
   example.data.relatedReference !== undefined
     ? await getRelatedEntriesinCollection(
@@ -76,6 +73,7 @@ const remixHistoryHasCodeLinks = example.data.remix?.some(
   variant="item"
   topic="examples"
   className="example"
+  jumpToState={jumpToState}
 >
   <div class="mt-xl mb-4xl lg:mb-3xl max-w-[770px]">
     <div class="rendered-markdown">

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) => (
       <section class="grid">

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 = config.data.sketchIds.map(
     curationSketches.find((sk) => id === sk.visualID) ??
     curationSketches[i]
 );
-
-setJumpToState(null);
 ---
 
 <Head
@@ -35,8 +32,8 @@ 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>
 
   <div class="content-grid-simple mb-xl">