Merge pull request #1041 from tekstrand/faq-scroll

FAQ accordion open sets nearest heading hash in url

docs/about/faq.mdx

@@ -190,38 +190,38 @@ If you use your ham radio license with Meshtastic, consider both the privileges
 
 ## Overview
 
-<FaqAccordion rows={Faq.general} slug="general" />
+<FaqAccordion rows={Faq.general} />
 
 ## Android Client
 
-<FaqAccordion rows={Faq.android} slug="android" />
+<FaqAccordion rows={Faq.android} />
 
 ## Apple Clients
 
-<FaqAccordion rows={Faq.apple} slug="apple" />
+<FaqAccordion rows={Faq.apple} />
 
 ## Channels
 
-<FaqAccordion rows={Faq.channels} slug="channels" />
+<FaqAccordion rows={Faq.channels} />
 
 ## Python CLI
 
-<FaqAccordion rows={Faq.python} slug="python" />
+<FaqAccordion rows={Faq.python} />
 
 ## Devices
 
-<FaqAccordion rows={Faq.devices} slug="devices" />
+<FaqAccordion rows={Faq.devices} />
 
 ## Amateur Radio (ham)
 
 Meshtastic can be used by both unlicensed people and licensed HAM operators.
 
-<FaqAccordion rows={Faq.ham} slug="ham" />
+<FaqAccordion rows={Faq.ham} />
 
 ## Mesh
 
-<FaqAccordion rows={Faq.mesh} slug="mesh" />
+<FaqAccordion rows={Faq.mesh} />
 
 ## Modules
 
-<FaqAccordion rows={Faq.modules} slug="modules" />
+<FaqAccordion rows={Faq.modules} />

src/components/FaqAccordion.tsx

@@ -1,4 +1,3 @@
-import BrowserOnly from "@docusaurus/BrowserOnly";
 import {
   Accordion,
   AccordionItem,
@@ -16,83 +15,84 @@ export interface Faq {
 }
 
 /**
- * Gets the query parameter `openFaqItems` which is an array of
- * faq items that should be pre-opened
- * @type {Function}
+ * Finds the nearest heading to an element
+ * @param  {Element} null The element to find the nearest heading to
+ * @return {Element|null} The heading or null
  */
-const getOpenFaqItemsFromUrl = (slug: string): string[] => {
-  if (typeof window !== "undefined") {
-    // Use URLSearchParams to parse the query parameters from the current URL
-    const searchParams = new URLSearchParams(window.location.search);
+const findNearestHeading = (element: Element): Element | null => {
+  const isHeading = (element: Element): boolean =>
+    /^H[1-6]$/.test(element.tagName);
+  let currentElement: Element | null = element;
 
-    // Get the 'openFaqItems' parameter as a comma-separated string
-    const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
+  while (currentElement !== null) {
+    // Check previous siblings
+    let prevSibling: Element | null = currentElement.previousElementSibling;
+    while (prevSibling) {
+      if (isHeading(prevSibling)) {
+        return prevSibling;
+      }
+      prevSibling = prevSibling.previousElementSibling;
+    }
 
-    // If the parameter exists, split it by commas into an array; otherwise, return an empty array
-    return openFaqItemsString ? openFaqItemsString.split(",") : [];
+    // If no heading is found among siblings, move to the parent node
+    currentElement = currentElement.parentElement;
   }
+
+  return null;
 };
 
 /**
- * Updates query parameters in the url when items are opened
- * so that a link can be shared with the faq item already opened
+ * Takes in uuids from react-accessible-accordion onchange event
+ * and updates the browser url with the nearest heading's id
+ * @param  {[type]} void [description]
+ * @return {[type]}      [description]
  */
-const handleChange = (
-  openFaqItems: (string | number)[],
-  slug: string,
-): void => {
-  const searchParams = new URLSearchParams(window.location.search);
+const updateUrlWithNearestHeadingId = (targetElementUuid: string): void => {
+  const targetElement: HTMLElement | null = document.getElementById(
+    `accordion__heading-${targetElementUuid[0]}`,
+  );
 
-  if (openFaqItems.length > 0) {
-    // Create comma-separated string and update/add the parameter
-    searchParams.set(
-      `openFaqItems-${slug}`,
-      openFaqItems.map(String).join(","),
-    );
-  } else {
-    // If openFaqItems is empty, remove the parameter from the URL
-    searchParams.delete(`openFaqItems-${slug}`);
+  const nearestHeading: Element | null = targetElement
+    ? findNearestHeading(targetElement)
+    : null;
+
+  // Add the hash without scrolling the page
+  if (nearestHeading?.id) {
+    window.history.pushState({}, "", `#${nearestHeading.id}`);
   }
 
-  // Construct the new URL, preserve existing parameters
-  const newUrl = `${window.location.protocol}//${window.location.host}${
-    window.location.pathname
-  }?${searchParams.toString()}`;
-
-  // Change the URL without reloading the page
-  window.history.pushState({ path: newUrl }, "", newUrl);
+  // If they're all collapsed, remove the hash
+  if (!targetElement) {
+    history.pushState(
+      null,
+      null,
+      window.location.origin +
+        window.location.pathname +
+        window.location.search,
+    );
+  }
 };
 
-export const FaqAccordion = ({
-  rows,
-  slug,
-}: { rows: Faq[]; slug: string }): JSX.Element => {
+export const FaqAccordion = ({ rows }: { rows: Faq[] }): JSX.Element => {
   return (
-    <BrowserOnly fallback={<div>Loading FAQ's...</div>}>
-      {() => {
-        return (
-          <Accordion
-            allowMultipleExpanded={true}
-            allowZeroExpanded={true}
-            onChange={(itemUuids) => {
-              handleChange(itemUuids, slug);
-            }}
-            preExpanded={getOpenFaqItemsFromUrl(slug)}
-          >
-            {rows.map((row, index) => (
-              // biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
-              <AccordionItem key={index}>
-                <AccordionItemHeading aria-level="3">
-                  <AccordionItemButton>{row.title}</AccordionItemButton>
-                </AccordionItemHeading>
-                <AccordionItemPanel>
-                  <ReactMarkdown>{row.content}</ReactMarkdown>
-                </AccordionItemPanel>
-              </AccordionItem>
-            ))}
-          </Accordion>
-        );
+    <Accordion
+      allowMultipleExpanded={true}
+      allowZeroExpanded={true}
+      onChange={(itemUuids) => {
+        updateUrlWithNearestHeadingId(itemUuids);
       }}
-    </BrowserOnly>
+    >
+      {rows.map((row, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
+        <AccordionItem key={index}>
+          <AccordionItemHeading aria-level="3">
+            <AccordionItemButton>{row.title}</AccordionItemButton>
+          </AccordionItemHeading>
+          <AccordionItemPanel>
+            <ReactMarkdown>{row.content}</ReactMarkdown>
+          </AccordionItemPanel>
+        </AccordionItem>
+      ))}
+    </Accordion>
   );
 };