content: add faq page

src/components/Home/index.tsx

@@ -72,6 +72,7 @@ export const Home: FC = () => {
         <SC.Menu>
           <MenuItem to="/about">about</MenuItem>
           <MenuItem to="/rules">rules</MenuItem>
+          <MenuItem to="/faq">faq</MenuItem>
           <MenuItem to="/resources">resources</MenuItem>
           <MenuItem to="/archives">tech spotlights</MenuItem>
         </SC.Menu>

src/components/Sidebar/index.tsx

@@ -38,6 +38,7 @@ export const Sidebar: FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> = (
           <SC.Menu className={cx({ "has-border": Boolean(children) })}>
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
+            <MenuItem to="/faq">faq</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>
             <MenuItem to="/archives">tech spotlights</MenuItem>
           </SC.Menu>

src/content/site/faq.md

@@ -0,0 +1,33 @@
+---
+path: /faq
+---
+
+## What are the roles and what do they mean?
+
+### Community-Member, Active Contributor, Chatterbox, Super-Talky-Guy, Bepis-Drinker, Conke-Commander, 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.
+
+### Wizard
+
+This is for helpful members who have shown exceptional aptitude or expertise in some field. This is given out at the discretion of the Admin team, though other staff members may suggest someone by using ModMail. Less than 0.001% of users get this role.
+
+### Solid Contributor
+
+This role recognizes people who contribute their time and knowledge to the server completely out of their own volition. Again you can nominate someone for this role by using ModMail.
+
+### Staff roles
+
+ChatMod/Moderator/Senior Moderator/Admin/Owner - These people ensure that the usage of this environment reflects the guidelines as illustrated in the rules. Staff is occasionally handpicked, and sometimes there is an application process. There is a trial period for all new staff of 2-4 weeks (sometimes more, sometimes less) which comes with a trial role, however, they are treated as full staff members during this time. Please respect all staff equally; if you have an issue with a specific staff member, talk to an administrator.
+
+## Why can’t I change my nickname?
+
+On TPH, we enforce a nickname policy - this means that if your nickname is deemed too NSFW (not safe for work), or hard to read/tag (it uses weird characters, it's blank or it contains numbers), we can and will forcibly nickname you to something else.
+
+We like to play around with nicknames, so expect to be nicknamed something silly from time to time.
+
+This is harmless fun, if you just accept it, laugh and move on, no problem.
+
+If you get annoyed that you don't have your name and make a big deal out of it, you're gonna have a bad time. Everyone, including the staff, follows nickname trends and jokes.
+
+5.8% of people (yes, we have actually polled for this) dislike it, and much less actually leave because of it. Don't be the sour apple if you get nicknamed something funny.

src/pages/faq.tsx

@@ -0,0 +1,42 @@
+import { graphql } from "gatsby"
+import React, { Fragment } from "react"
+import cx from "classnames"
+import { MarkdownRemark } from "../../generated/graphql"
+import { ComponentQuery } from "../../typings"
+import { Markdown } from "../components/Markdown"
+import { SEO } from "../components/SEO"
+import { PageContent } from "../components/PageContent"
+import { HeaderBarebone } from "../components/HeaderBarebone"
+import { buildToc } from "../utils"
+
+function FaqPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) {
+  const { md } = data
+
+  const toc = buildToc(md.headings!)
+
+  return (
+    <Fragment>
+      <SEO title="FAQ" />
+      <HeaderBarebone
+        title="Frequently Asked Questions"
+        className={cx({ shifted: toc.length })}
+      />
+
+      <PageContent content={<Markdown content={md.html!} />} toc={toc} />
+    </Fragment>
+  )
+}
+
+export const query = graphql`
+  query FaqPage {
+    md: markdownRemark(frontmatter: { path: { eq: "/faq" } }) {
+      html
+      headings {
+        depth
+        value
+      }
+    }
+  }
+`
+
+export default FaqPage