add support for markdown

app/faq/page.tsx

@@ -1,3 +1,4 @@
+import { AppMarkdown } from "@/components/AppMarkdown";
 import { AppContainer } from "../../components/AppContainer";
 import { Section } from "../../components/Section";
 import { Accordion } from "../../components/ui/Accordion";
@@ -14,7 +15,19 @@ export default function FAQPage() {
             {FAQS.map(({ answer, question }, index) => {
               return (
                 <Accordion label={question} key={index}>
-                  {answer}
+                  <AppMarkdown
+                    customComponents={{
+                      p: ({ ...props }) => (
+                        <p
+                          className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal"
+                          {...props}
+                        />
+                      ),
+                      strong: ({ ...props }) => <span className="font-bold" {...props} />,
+                    }}
+                  >
+                    {answer}
+                  </AppMarkdown>
                 </Accordion>
               );
             })}

components/AppMarkdown.tsx

@@ -43,12 +43,14 @@ const REACT_MARKDOWN_CONFIG: Components = {
 
 interface MarkdownProps {
   children: string;
+  customComponents?: Components;
 }
-export const AppMarkdown = ({ children }: MarkdownProps) => {
+
+export const AppMarkdown = ({ children, customComponents, ...props }: MarkdownProps) => {
   return (
     <ReactMarkdown
       skipHtml={false}
-      components={REACT_MARKDOWN_CONFIG}
+      components={{ ...REACT_MARKDOWN_CONFIG, ...customComponents }}
       remarkPlugins={[remarkGfm]}
       rehypePlugins={[rehypeRaw]}
     >

components/ui/Accordion.tsx

@@ -33,7 +33,13 @@ const Accordion = ({ label, children }: AccordionProps) => {
             isOpen ? "grid-rows-[1fr] opacity-100 max-h-full" : "grid-rows-[0fr] opacity-0"
           )}
         >
-          <p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal">{children}</p>
+          {typeof children === "string" ? (
+            <p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal">
+              {children}
+            </p>
+          ) : (
+            children
+          )}
         </div>
       </div>
     </div>

components/ui/Label.tsx

@@ -1,16 +1,10 @@
 import { classed } from "@tw-classed/react";
 
-const Title = classed.h1(
-  "text-5xl font-black leading-1 text-primary md:text-6xl lg:text-8xl lg:leading-[108px]"
-);
+const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-8xl lg:leading-[108px]");
 
-const Subtitle = classed.h6(
-  "text-brown-50 font-bold text-lg leading-none md:text-2xl md:leading-6"
-);
+const Subtitle = classed.h6("text-brown-50 font-bold text-lg leading-none md:text-2xl md:leading-6");
 
-const SectionTitle = classed.h6(
-  "font-semibold text-primary text-2xl leading-[24px] md:text-[32px] leading-[32px]"
-);
+const SectionTitle = classed.h6("font-semibold text-primary text-2xl leading-[24px] md:text-[32px] leading-[32px]");
 
 const Paragraph = classed.span("text-primary text-sm md:text-xl leading-6");
 

content/faq.tsx

@@ -25,7 +25,7 @@ export const FAQS: FAQItem[] = [
   {
     question: "What is the overhead of using TLSNotary?",
     answer:
-      "The Multi-Party Computation (MPC) between the Prover and the Verifier requires significant bandwidth, orders of magnitude more than the Server’s data size."
+      "The Multi-Party Computation (MPC) between the Prover and the Verifier requires significant bandwidth, orders of magnitude more than the Server's data size.",
   },
   {
     question: "Can the server detect that a TLS session is being notarized?",
@@ -44,8 +44,7 @@ export const FAQS: FAQItem[] = [
   },
   {
     question: "Which TLS versions are supported?",
-    answer:
-      "TLSNotary currently supports TLS 1.2. Support for TLS 1.3 is on the roadmap.",
+    answer: "TLSNotary currently supports TLS 1.2. Support for TLS 1.3 is on the roadmap.",
   },
   {
     question: "How can I use TLSNotary to verify data on-chain?",
@@ -58,8 +57,7 @@ export const FAQS: FAQItem[] = [
       "A TLSNotary proof is trustworthy because of its cryptographic integrity and its inclusion of an ephemeral key, allowing verifiers to confirm the data's origin from the claimed domain. This trust also hinges on the verifier's confidence in the data source (the server) and the validity of any redactions. Additionally, if the verifier did not conduct the TLS-MPC process themselves, they must trust in the notary's neutrality, ensuring it has not been influenced or compromised by the Prover.",
   },
   {
-    question:
-      "How does TLSNotary differ from other TLS portability approaches?",
+    question: "How does TLSNotary differ from other TLS portability approaches?",
     answer:
       "TLSNotary distinguishes itself with its dedication to open-source development and a strong emphasis on trustlessness. Developed as a public good without a business model, it fosters transparency and allows for community-driven improvements.   Unlike other solutions, TLSNotary is designed to prioritize trustlessness, thereby guaranteeing superior levels of privacy and security. It achieves this without depending on particular network assumptions or compromising on privacy or security to enhance performance. This strategy positions TLSNotary as the go-to choice for projects that place a high value on security and privacy in their TLS portability needs.",
   },