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": [
@@ -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>
+  );
+};