feat: bootstrap docs layout & sidebar

src/components/DocsLayout/index.tsx

@@ -0,0 +1,46 @@
+/**
+ * Layout component that queries for data
+ * with Gatsby's useStaticQuery component
+ *
+ * See: https://www.gatsbyjs.org/docs/use-static-query/
+ */
+
+import React, { PropsWithChildren } from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+import Container from "../Container"
+import DocsSidebar from "../DocsSidebar"
+import { Main, MainContent } from "./styles"
+import Scrollbar from "react-perfect-scrollbar"
+import "react-perfect-scrollbar/dist/css/styles.css"
+
+const DocsLayout = ({ children }: PropsWithChildren<{}>) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return (
+    <Scrollbar>
+      <Main>
+        <DocsSidebar />
+        <MainContent>
+          <h1>{data.site.siteMetadata.title}</h1>
+          {children}
+        </MainContent>
+      </Main>
+      <footer>
+        © {new Date().getFullYear()}, Built with
+        {` `}
+        <a href="https://www.gatsbyjs.org">Gatsby</a>
+      </footer>
+    </Scrollbar>
+  )
+}
+
+export default DocsLayout

src/components/DocsLayout/layout.scss

@@ -0,0 +1,41 @@
+// TODO: refactor this into styled components
+
+html {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/**
+ * If you already use line highlighting
+ */
+
+/* Adjust the position of the line numbers */
+.gatsby-highlight pre[class*="language-"].line-numbers {
+  padding-left: 2.8em;
+}
+
+/**
+ * If you only want to use line numbering
+ */
+
+.gatsby-highlight {
+  background-color: #fdf6e3;
+  border-radius: 0.3em;
+  margin: 0.5em 0;
+  padding: 1em;
+  overflow: auto;
+}
+
+.gatsby-highlight pre[class*="language-"].line-numbers {
+  padding: 0;
+  padding-left: 2.8em;
+  overflow: initial;
+}

src/components/DocsLayout/styles.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components"
+
+export const Main = styled.div`
+  display: flex;
+  margin: 128px auto 64px !important;
+  width: 100%;
+`
+
+export const MainContent = styled.main`
+  flex: 1 0 auto;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+`