From f53c469980c1f3b94458a48f60bcfc93f1250a5d Mon Sep 17 00:00:00 2001
From: Toby Larone <10854475+Toby-Larone@users.noreply.github.com>
Date: Sat, 17 Oct 2020 16:38:30 +0100
Subject: [PATCH] feat: Add bots page to website menus

---
 src/components/Home/index.tsx    |  1 +
 src/components/Sidebar/index.tsx |  1 +
 src/pages/bots.tsx               | 42 ++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 src/pages/bots.tsx

diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index b28b90d..0d4d819 100644
--- a/src/components/Home/index.tsx
+++ b/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>
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index a06425b..557b4e8 100644
--- a/src/components/Sidebar/index.tsx
+++ b/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>
diff --git a/src/pages/bots.tsx b/src/pages/bots.tsx
new file mode 100644
index 0000000..a90b7fa
--- /dev/null
+++ b/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