standalone structure data component

docs/about/faq.mdx

@@ -6,6 +6,7 @@ sidebar_position: 3
 ---
 
 import { FaqAccordion } from "/src/components/FaqAccordion";
+import { FaqStructuredData } from "/src/components/FaqStructuredData";
 
 export const Faq = {
   "general": [
@@ -26,11 +27,11 @@ export const Faq = {
     {
       title: "What does the icon next to the message mean?",
       content: `
-        - Cloud with an up arrow - Queued on the app to be sent to your device.
+  - Cloud with an up arrow - Queued on the app to be sent to your device.
-        - Cloud only - Queued on the device to be sent over the mesh.
+  - Cloud only - Queued on the device to be sent over the mesh.
-        - Cloud with a check mark - At least one other node on the mesh acknowledged the message.
+  - Cloud with a check mark - At least one other node on the mesh acknowledged the message.
-        - Person with a check mark - The intended recipient of your direct message acknowledged the message.
+  - Person with a check mark - The intended recipient of your direct message acknowledged the message.
-        - Cloud crossed out - Not acknowledged or message error.`,
+  - Cloud crossed out - Not acknowledged or message error.`,
     },
     {
       title: "How can I clear the message history?",
@@ -130,19 +131,19 @@ export const Faq = {
     {
       title: "What is the benefit of using a ham license with Meshtastic?",
       content: `
-        If you use your ham radio license with Meshtastic, consider both the privileges and restrictions:
+If you use your ham radio license with Meshtastic, consider both the privileges and restrictions:
-        #### Privileges
+#### Privileges
 
-        - Increased Transmit Power
+- Increased Transmit Power
-          - Up to 10W transmit power in the United States! [47 CFR 97.313(j)](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97#p-97.313(j))
+  - Up to 10W transmit power in the United States! [47 CFR 97.313(j)](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97#p-97.313(j))
-        - Higher Gain Antennas
+- Higher Gain Antennas
 
-        #### Restrictions
+#### Restrictions
 
-        - Plain-Text Only
+- Plain-Text Only
-          - On amateur radio bands, encryption is illegal. [FCC Part 97.113.A.4](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97/subpart-B/section-97.113#p-97.113(a)(4))
+  - On amateur radio bands, encryption is illegal. [FCC Part 97.113.A.4](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97/subpart-B/section-97.113#p-97.113(a)(4))
-        - Lack of Privacy
+- Lack of Privacy
-          - As a ham operator, it is a requirement that you identify yourself by your call sign periodically when transmitting. Your call sign will be publicly transmitted at least once every 10 minutes at minimum. [FCC Part 97.119.A](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97/subpart-B/section-97.119#p-97.119(a))
+  - As a ham operator, it is a requirement that you identify yourself by your call sign periodically when transmitting. Your call sign will be publicly transmitted at least once every 10 minutes at minimum. [FCC Part 97.119.A](https://www.ecfr.gov/current/title-47/chapter-I/subchapter-D/part-97/subpart-B/section-97.119#p-97.119(a))
     `,
     },
     {
@@ -184,10 +185,11 @@ export const Faq = {
   ],
 };
 
+<FaqStructuredData faqs={Faq} />
 
 ## Overview
 
-{<FaqAccordion rows={Faq.general} slug="general" />}
+<FaqAccordion rows={Faq.general} slug="general" />
 
 ## Android Client
 

src/components/FaqAccordion.tsx

@@ -67,53 +67,30 @@ export const FaqAccordion = ({
   rows,
   slug,
 }: { rows: Faq[]; slug: string }): JSX.Element => {
-  // Set the faq structured data
-  const faqStructuredData = {
-    "@context": "https://schema.org",
-    "@type": "FAQPage",
-    mainEntity: rows.map((row) => ({
-      "@type": "Question",
-      name: row.title,
-      acceptedAnswer: {
-        "@type": "Answer",
-        text: row.content,
-      },
-    })),
-  };
-
   return (
     <BrowserOnly fallback={<div>Loading FAQ's...</div>}>
       {() => {
         return (
-          <>
+          <Accordion
-            <script
+            allowMultipleExpanded={true}
-              type="application/ld+json"
+            allowZeroExpanded={true}
-              // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
+            onChange={(itemUuids) => {
-              dangerouslySetInnerHTML={{
+              handleChange(itemUuids, slug);
-                __html: JSON.stringify(faqStructuredData),
+            }}
-              }}
+            preExpanded={getOpenFaqItemsFromUrl(slug)}
-            />
+          >
-            <Accordion
+            {rows.map((row, index) => (
-              allowMultipleExpanded={true}
+              // biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
-              allowZeroExpanded={true}
+              <AccordionItem key={index}>
-              onChange={(itemUuids) => {
+                <AccordionItemHeading aria-level="3">
-                handleChange(itemUuids, slug);
+                  <AccordionItemButton>{row.title}</AccordionItemButton>
-              }}
+                </AccordionItemHeading>
-              preExpanded={getOpenFaqItemsFromUrl(slug)}
+                <AccordionItemPanel>
-            >
+                  <ReactMarkdown>{row.content}</ReactMarkdown>
-              {rows.map((row, index) => (
+                </AccordionItemPanel>
-                // biome-ignore lint/suspicious/noArrayIndexKey: React complains if there is no key
+              </AccordionItem>
-                <AccordionItem key={index}>
+            ))}
-                  <AccordionItemHeading aria-level="3">
+          </Accordion>
-                    <AccordionItemButton>{row.title}</AccordionItemButton>
-                  </AccordionItemHeading>
-                  <AccordionItemPanel>
-                    <ReactMarkdown>{row.content}</ReactMarkdown>
-                  </AccordionItemPanel>
-                </AccordionItem>
-              ))}
-            </Accordion>
-          </>
         );
       }}
     </BrowserOnly>

src/components/FaqStructuredData.tsx

@@ -0,0 +1,20 @@
+export const FaqStructuredData = ({ faqs }) => {
+  const allFaqs = Object.values(faqs).flat();
+
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: allFaqs.map((faq) => ({
+      "@type": "Question",
+      name: faq.title,
+      acceptedAnswer: {
+        "@type": "Answer",
+        text: faq.content,
+      },
+    })),
+  };
+
+  return (
+    <script type="application/ld+json">{JSON.stringify(structuredData)}</script>
+  );
+};