diff --git a/gatsby-config.js b/gatsby-config.js index 5a932e3..b61de85 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -27,6 +27,7 @@ module.exports = { }, }, `gatsby-transformer-sharp`, + `gatsby-plugin-react-svg`, `gatsby-plugin-sharp`, `gatsby-plugin-sass`, { diff --git a/package-lock.json b/package-lock.json index fff5c21..96ede04 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d5af87e..144058f 100644 --- a/package.json +++ b/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", diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx new file mode 100644 index 0000000..c209636 --- /dev/null +++ b/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 => ( + {children} +) + +export default Container diff --git a/src/components/Container/styles.tsx b/src/components/Container/styles.tsx new file mode 100644 index 0000000..7c6616c --- /dev/null +++ b/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; + } +` diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 52359df..bfe4f70 100644 --- a/src/components/Layout/index.tsx +++ b/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 ( - -
- {children} -
+ + ) } diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss index 0536a75..e033dcd 100644 --- a/src/components/Layout/layout.scss +++ b/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; -} \ No newline at end of file +} diff --git a/src/components/Layout/styles.tsx b/src/components/Layout/styles.tsx index ce77c09..5bc63b3 100644 --- a/src/components/Layout/styles.tsx +++ b/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; + } +` diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx deleted file mode 100644 index f391816..0000000 --- a/src/components/Navbar/index.tsx +++ /dev/null @@ -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 = ""}) => ( - - - {/* */} -

- - {siteTitle} - -

- - - - - - -) - -export default Navbar; diff --git a/src/components/Navbar/styles.tsx b/src/components/Navbar/styles.tsx deleted file mode 100644 index 37dd501..0000000 --- a/src/components/Navbar/styles.tsx +++ /dev/null @@ -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; -` \ No newline at end of file diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx new file mode 100644 index 0000000..d30938c --- /dev/null +++ b/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 ( + + {children} + + ) +} + +const Sidebar = () => { + return ( + + + + + about + rules + faq + hotbot + documentation + tech spotlight + + + ) +} + +export default Sidebar diff --git a/src/components/Sidebar/styles.tsx b/src/components/Sidebar/styles.tsx new file mode 100644 index 0000000..fd9488d --- /dev/null +++ b/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; + } +` diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg new file mode 100644 index 0000000..d84390b --- /dev/null +++ b/src/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/tph-logo.png b/src/images/tph-logo.png new file mode 100644 index 0000000..a30f363 Binary files /dev/null and b/src/images/tph-logo.png differ diff --git a/typings.d.ts b/typings.d.ts new file mode 100644 index 0000000..677e3d5 --- /dev/null +++ b/typings.d.ts @@ -0,0 +1 @@ +declare module "*.svg"