From f8101fa4393d71cc0c6f08581773421395506fe6 Mon Sep 17 00:00:00 2001
From: dfireBird <aadhishrm11@gmail.com>
Date: Sat, 8 Aug 2020 14:25:49 +0530
Subject: [PATCH] chore: port faq page to mdx

---
 src/content/site/faq.md |  2 +-
 src/pages/faq.tsx       | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/site/faq.md b/src/content/site/faq.md
index a476849..0b087ff 100644
--- a/src/content/site/faq.md
+++ b/src/content/site/faq.md
@@ -4,7 +4,7 @@ path: /faq
 
 ## What are the roles and what do they mean?
 
-### Community-Member,<br>Active Contributor,<br>Chatterbox,<br>Super-Talky-Guy,<br>Bepis-Drinker,<br>Conke-Commander,<br>and Patriotic-Procrastinator
+### Community-Member,<br />Active Contributor,<br />Chatterbox,<br />Super-Talky-Guy,<br />Bepis-Drinker,<br />Conke-Commander,<br />and Patriotic-Procrastinator
 
 These are the activity roles of the server in the order you will be granted them. Different tiers will grant different perks, such as unlocking hidden channels, voice access, and nicknaming privileges. These roles are assigned automatically as you participate in the server, so don't ask for them.
 
diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx
index 5ae52e1..192f4ae 100644
--- a/src/pages/faq.tsx
+++ b/src/pages/faq.tsx
@@ -1,7 +1,7 @@
 import { graphql } from "gatsby"
 import React, { Fragment } from "react"
 import cx from "classnames"
-import { MarkdownRemark } from "../../generated/graphql"
+import { Mdx } from "../../generated/graphql"
 import { ComponentQuery } from "../../typings"
 import { Markdown } from "../components/Markdown"
 import { SEO } from "../components/SEO"
@@ -9,7 +9,7 @@ import { PageContent } from "../components/PageContent"
 import { HeaderBarebone } from "../components/HeaderBarebone"
 import { buildToc } from "../utils"
 
-function FaqPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+function FaqPage({ data }: ComponentQuery<{ md: Mdx }>) {
   const { md } = data
 
   const toc = buildToc(md.headings!)
@@ -22,15 +22,15 @@ function FaqPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
         className={cx({ shifted: toc.length })}
       />
 
-      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
+      <PageContent content={<Markdown content={md.body!} />} toc={toc} />
     </Fragment>
   )
 }
 
 export const query = graphql`
   query FaqPage {
-    md: markdownRemark(frontmatter: { path: { eq: "/faq" } }) {
-      html
+    md: mdx(frontmatter: { path: { eq: "/faq" } }) {
+      body
       headings {
         depth
         value