feat: Add bots page to website menus

src/components/Home/index.tsx

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

src/components/Sidebar/index.tsx

@@ -41,6 +41,7 @@ export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
             <MenuItem to="/about">about</MenuItem>
             <MenuItem to="/rules">rules</MenuItem>
             <MenuItem to="/faq">faq</MenuItem>
+            <MenuItem to="/bots">bots</MenuItem>
             <MenuItem to="/resources">resources</MenuItem>
             <MenuItem to="/archives">tech spotlights</MenuItem>
           </SC.Menu>

src/pages/bots.tsx

@@ -0,0 +1,42 @@
+import { graphql } from "gatsby"
+import React, { Fragment } from "react"
+import cx from "classnames"
+import { Mdx } 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 BotPage({ data }: ComponentQuery<{ md: Mdx }>) {
+  const { md } = data
+
+  const toc = buildToc(md.headings!)
+
+  return (
+    <Fragment>
+      <SEO title="BOTS" />
+      <HeaderBarebone
+        title="Bots"
+        className={cx({ shifted: toc.length })}
+      />
+
+      <PageContent content={<Markdown content={md.body!} />} toc={toc} />
+    </Fragment>
+  )
+}
+
+export const query = graphql`
+  query BotPage {
+    md: mdx(frontmatter: { path: { eq: "/bots" } }) {
+      body
+      headings {
+        depth
+        value
+      }
+    }
+  }
+`
+
+export default BotPage