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": [
@@ -130,18 +131,18 @@ 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:
-        #### Privileges
+If you use your ham radio license with Meshtastic, consider both the privileges and restrictions:
+#### 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))
-        - 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))
-        - 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))
     `,
     },
@@ -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,32 +67,10 @@ 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 (
-          <>
-            <script
-              type="application/ld+json"
-              // biome-ignore lint: we need dangerouslySetInnerHTML here, and since we're the ones setting the content it's should be safe
-              dangerouslySetInnerHTML={{
-                __html: JSON.stringify(faqStructuredData),
-              }}
-            />
           <Accordion
             allowMultipleExpanded={true}
             allowZeroExpanded={true}
@@ -113,7 +91,6 @@ export const FaqAccordion = ({
               </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>
+  );
+};