ui: prepare base layout

gatsby-config.js

@@ -27,6 +27,7 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
+    `gatsby-plugin-react-svg`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-sass`,
     {

package-lock.json

@@ -4089,6 +4089,24 @@
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@@ -6295,7 +6313,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6313,11 +6332,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6330,15 +6351,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6441,7 +6465,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6451,6 +6476,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6463,17 +6489,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -6490,6 +6519,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6562,7 +6592,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6572,6 +6603,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6647,7 +6679,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6677,6 +6710,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6694,6 +6728,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6732,11 +6767,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -7288,6 +7325,14 @@
         "@babel/runtime": "^7.0.0"
       }
     },
+    "gatsby-plugin-react-svg": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-2.1.1.tgz",
+      "integrity": "sha512-aWG283AvueCS0U4yZ+QujQnz4GDNoIBYMQ8MpQEvB+k6o+5DPZ473Cz+rlEejoevVxVeCVwuuu4K9phGIGk+7Q==",
+      "requires": {
+        "svg-react-loader": "^0.4.4"
+      }
+    },
     "gatsby-plugin-sass": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-2.1.3.tgz",
@@ -8736,12 +8781,14 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "optional": true
         },
         "slice-ansi": {
           "version": "1.0.0",
@@ -8767,6 +8814,7 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "optional": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -9864,7 +9912,8 @@
         "ansi-regex": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "2.0.0",
@@ -9887,6 +9936,7 @@
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
           "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "optional": true,
           "requires": {
             "ansi-regex": "^4.1.0"
           }
@@ -12710,6 +12760,11 @@
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz",
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA=="
     },
+    "ramda": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.21.0.tgz",
+      "integrity": "sha1-oAGr7bP/YQd9T/HVd9RN536NCjU="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -13549,6 +13604,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rx": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
+      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -15071,6 +15131,58 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-react-loader": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/svg-react-loader/-/svg-react-loader-0.4.6.tgz",
+      "integrity": "sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==",
+      "requires": {
+        "css": "2.2.4",
+        "loader-utils": "1.1.0",
+        "ramda": "0.21.0",
+        "rx": "4.1.0",
+        "traverse": "0.6.6",
+        "xml2js": "0.4.17"
+      },
+      "dependencies": {
+        "big.js": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+        },
+        "json5": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+          "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+        },
+        "loader-utils": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
+          "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
+          "requires": {
+            "big.js": "^3.1.3",
+            "emojis-list": "^2.0.0",
+            "json5": "^0.5.0"
+          }
+        },
+        "xml2js": {
+          "version": "0.4.17",
+          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz",
+          "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=",
+          "requires": {
+            "sax": ">=0.6.0",
+            "xmlbuilder": "^4.1.0"
+          }
+        },
+        "xmlbuilder": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz",
+          "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=",
+          "requires": {
+            "lodash": "^4.0.0"
+          }
+        }
+      }
+    },
     "svgo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
@@ -15446,6 +15558,11 @@
         }
       }
     },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
     "trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",

package.json

@@ -13,6 +13,7 @@
     "gatsby-plugin-manifest": "^2.2.4",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-react-helmet": "^3.1.2",
+    "gatsby-plugin-react-svg": "^2.1.1",
     "gatsby-plugin-sass": "^2.1.3",
     "gatsby-plugin-sharp": "^2.2.9",
     "gatsby-plugin-styled-components": "^3.1.2",

src/components/Container/index.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import * as SC from "./styles"
+
+interface ContainerProps {
+  children: React.ReactNode
+}
+
+const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => (
+  <SC.ContainerWrapper {...restProps}>{children}</SC.ContainerWrapper>
+)
+
+export default Container

src/components/Container/styles.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components"
+
+export const ContainerWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 32px;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1015px;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+`

src/components/Layout/index.tsx

@@ -8,11 +8,13 @@
 import React, { PropsWithChildren } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
+import Container from "../Container"
 import Navbar from "../Navbar"
+import Sidebar from "../Sidebar"
 import "./layout.scss"
-import { MainContent } from "./styles";
+import { Main, MainContent } from "./styles"
 import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css";
+import "react-perfect-scrollbar/dist/css/styles.css"
 
 const Layout = ({ children }: PropsWithChildren<{}>) => {
   const data = useStaticQuery(graphql`
@@ -27,22 +29,22 @@ const Layout = ({ children }: PropsWithChildren<{}>) => {
 
   return (
     <Scrollbar>
-      <Navbar siteTitle={data.site.siteMetadata.title} />
+      <Container>
-      <div
+        <Main>
-        style={{
+          <Sidebar />
-          margin: `0 auto`,
+          <MainContent>
-          maxWidth: 960,
+            <h1>{data.site.siteMetadata.title}</h1>
-          padding: `0px 1.0875rem 1.45rem`,
+            {children}
-          paddingTop: 0,
+          </MainContent>
-        }}
+        </Main>
-      >
+      </Container>
-        <MainContent>{children}</MainContent>
+      <footer>
-        <footer>
+        <Container>
           © {new Date().getFullYear()}, Built with
           {` `}
           <a href="https://www.gatsbyjs.org">Gatsby</a>
-        </footer>
+        </Container>
-      </div>
+      </footer>
     </Scrollbar>
   )
 }

src/components/Layout/layout.scss

@@ -1,7 +1,8 @@
 // TODO: refactor this into styled components
 
 html {
-  font-family: 'Lato', sans-serif;
+  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%;
 }
@@ -37,4 +38,4 @@ body {
   padding: 0;
   padding-left: 2.8em;
   overflow: initial;
-}
+}

src/components/Layout/styles.tsx

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

src/components/Navbar/index.tsx

@@ -1,29 +0,0 @@
-import {Link} from "gatsby";
-import React from "react";
-import icon from "./icon.png";
-import {NavbarWrapper, NavbarItems} from "./styles";
-
-const Navbar = ({siteTitle = ""}) => (
-    <NavbarWrapper>
-        <NavbarItems>
-            {/* <img src={icon} style={{ width: "70px" }} /> */}
-            <h1 style={{margin: 0}}>
-                <Link
-                    to="/"
-                    style={{
-                        color: `white`,
-                        textDecoration: `none`,
-                    }}
-                >
-                    {siteTitle}
-                </Link>
-            </h1>
-        </NavbarItems>
-        <NavbarItems>
-            <button>discord link here</button>
-            <button>reddit (maybe?) link here</button>
-        </NavbarItems>
-    </NavbarWrapper>
-)
-
-export default Navbar;

src/components/Navbar/styles.tsx

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-
-export const NavbarWrapper = styled.header`
-  background: #ba1a2e;
-  marginBottom: 1.45rem;
-  padding: 1.3rem;
-  display: flex;
-  justify-content: space-between;
-`;
-
-export const NavbarItems = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`

src/components/Sidebar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import logo from "../../images/tph-logo.png"
+import * as SC from "./styles"
+import ArrowRight from "../../icons/arrow-right.svg"
+
+function MenuItem({ children }: { children: React.ReactNode }) {
+  return (
+    <SC.MenuItem>
+      {children} <ArrowRight />
+    </SC.MenuItem>
+  )
+}
+
+const Sidebar = () => {
+  return (
+    <SC.SidebarWrapper>
+      <SC.Logo src={logo} />
+
+      <SC.Menu>
+        <MenuItem>about</MenuItem>
+        <MenuItem>rules</MenuItem>
+        <MenuItem>faq</MenuItem>
+        <MenuItem>hotbot</MenuItem>
+        <MenuItem>documentation</MenuItem>
+        <MenuItem>tech spotlight</MenuItem>
+      </SC.Menu>
+    </SC.SidebarWrapper>
+  )
+}
+
+export default Sidebar

src/components/Sidebar/styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components"
+
+export const SidebarWrapper = styled.aside`
+  width: 200px;
+`
+
+export const Logo = styled.img`
+  width: 122px;
+`
+
+export const Menu = styled.nav`
+  margin-top: 16px;
+`
+
+export const MenuItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 22px;
+
+  & + & {
+    margin-top: 8px;
+  }
+
+  svg {
+    margin-left: 6px;
+    width: 8px;
+    height: 15px;
+  }
+`

src/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 8 15">
+  <path fill="#B0B0B0" fill-rule="nonzero" d="M7.76 6.73L1.25.2A.73.73 0 1 0 .21 1.24l6 6-6 6a.73.73 0 1 0 1.04 1.03l6.51-6.51a.74.74 0 0 0 0-1.03z"/>
+</svg>

typings.d.ts

@@ -0,0 +1 @@
+declare module "*.svg"