Merge branch 'master' into storeForward

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