diff --git a/gatsby-config.js b/gatsby-config.js index 1c98cb4..2b348d2 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -23,6 +23,7 @@ module.exports = { ], }, }, + `gatsby-plugin-layout`, { resolve: `gatsby-transformer-remark`, plugins: [`gatsby-remark-prismjs`], diff --git a/gatsby-node.js b/gatsby-node.js index 31093c5..d07b343 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -6,6 +6,9 @@ const fs = require("fs") const requiredArticleFrontmatter = ["authors", "date"] +const LAYOUT_RESOURCES = "resources" +const LAYOUT_REGULAR = "regular" + let users = [] try { users = JSON.parse(fs.readFileSync("./users.json", "utf-8")) @@ -51,6 +54,7 @@ const createResources = async ({ createPage, graphql }) => { component: languageResources, context: { file: node.relativePath, + layout: LAYOUT_RESOURCES, }, }) }) @@ -84,6 +88,15 @@ exports.onCreateNode = async ({ node, getNode, actions }) => { } } +exports.onCreatePage = ({ page, actions }) => { + const { createPage } = actions + + page.context.layout = page.path.match(/resources/) + ? LAYOUT_RESOURCES + : LAYOUT_REGULAR + createPage(page) +} + exports.createPages = ({ actions, graphql }) => { const { createPage } = actions return createResources({ createPage, graphql }) diff --git a/package-lock.json b/package-lock.json index 0ad0246..6d47f9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7729,6 +7729,14 @@ "slash": "^1.0.0" } }, + "gatsby-plugin-layout": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/gatsby-plugin-layout/-/gatsby-plugin-layout-1.1.2.tgz", + "integrity": "sha512-nXtF5SJbx+qcSQBXLnpq3YeaPN0LEbkkH3HOJcoFfynzY0cKH4o09+IO3WGxoV/XLBjcxc3OxZFwBqQaeL6Keg==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, "gatsby-plugin-manifest": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.2.4.tgz", @@ -14117,14 +14125,6 @@ "shallowequal": "^1.0.1" } }, - "react-treeview": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/react-treeview/-/react-treeview-0.4.7.tgz", - "integrity": "sha1-9kfgT3BJbrEfsJEsNRh+gOtg1Fg=", - "requires": { - "prop-types": "^15.5.8" - } - }, "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", diff --git a/package.json b/package.json index b941770..16d9004 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dependencies": { "gatsby": "^2.13.39", "gatsby-image": "^2.2.6", + "gatsby-plugin-layout": "^1.1.2", "gatsby-plugin-manifest": "^2.2.4", "gatsby-plugin-mdx": "^1.0.17", "gatsby-plugin-offline": "^2.2.4", @@ -27,7 +28,6 @@ "react-dom": "^16.8.6", "react-helmet": "^5.2.1", "react-perfect-scrollbar": "^1.5.3", - "react-treeview": "^0.4.7", "styled-components": "^4.3.2" }, "devDependencies": { diff --git a/src/components/ResourcesSidebar/index.tsx b/src/components/ResourcesSidebar/index.tsx index 6c68493..5baea42 100644 --- a/src/components/ResourcesSidebar/index.tsx +++ b/src/components/ResourcesSidebar/index.tsx @@ -1,9 +1,9 @@ -import React, { useState } from "react" -import Tree from "react-treeview" -import { useStaticQuery, graphql } from "gatsby" +import React, { useState, PropsWithChildren } from "react" +import { useStaticQuery, graphql, Link } from "gatsby" import useBuildTree from "./useBuildTree" import useSidebar from "./../../hooks/useSidebar" import banner from "../../images/tph-banner.png" +import TriangleDown from "../../icons/triangle-down.svg" import * as SC from "./styles" export interface IFile { @@ -82,13 +82,11 @@ function Folder({ item }: { item: IFolder }) { } return ( - - {item.title}} - > - {item.children.map(node => plantTree(node))} - + + + {item.title} + + {item.children.map(node => plantTree(node))} ) } @@ -98,35 +96,47 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) { const collapsed = current !== index return ( - - setCurrent(index)} - > - {item.title} - - - } + + setCurrent(index)} > - {item.children.map(node => plantTree(node))} - + {item.title} + + + {item.children.map(node => plantTree(node))} ) } +function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) { + return ( + + {children} + + ) +} + export function ResourcesSidebar() { const resources = useStaticQuery(ALL_RESOURCES) const tree = useBuildTree(resources) return ( - + + + {tree.map((node, index) => plantTree(node, index, true))} + + + about + rules + faq + hotbot + resources + tech + ) diff --git a/src/components/ResourcesSidebar/styles.tsx b/src/components/ResourcesSidebar/styles.tsx index 0bd74f8..8a3de9e 100644 --- a/src/components/ResourcesSidebar/styles.tsx +++ b/src/components/ResourcesSidebar/styles.tsx @@ -4,7 +4,7 @@ import ChevronUp from "../../icons/chevron-up.svg" export const ResourcesSidebarWrapper = styled.div` box-sizing: border-box; - flex: 0 0 300px; + flex: 0 0 320px; background: #f9f9f9; ` @@ -13,25 +13,41 @@ export const Banner = styled.img` width: 100%; ` -export const TreeWrapper = styled.div` - width: 100%; - - & + & { - border-top: 1px solid #dbdbdb; - } +export const Children = styled.div` + padding-left: 16px; + padding-bottom: 8px; + display: flex; + flex-direction: column; + align-items: flex-start; + overflow: hidden; ` export const Label = styled.div` - padding: 4px 0; + user-select: none; + position: relative; + padding: 8px 0; + cursor: pointer; + display: flex; + align-items: center; + + svg { + position: absolute; + right: 100%; + margin-right: 4px; + width: 10px; + } ` export const FirstLabel = styled.div` + user-select: none; display: flex; align-items: center; width: 100%; + box-sizing: border-box; padding: 12px 15px 12px 0; font-weight: 700; color: #a9a9a9; + cursor: pointer; &.active { color: #000; @@ -56,62 +72,68 @@ export const FirstLabel = styled.div` } ` +export const TreeWrapper = styled.div<{ collapsed: boolean }>` + width: 100%; + font-size: 20px; + + &.firstLevel { + overflow: hidden; + } + + & + & { + border-top: 1px solid #dbdbdb; + } + + ${Children} { + display: ${props => (props.collapsed ? "none" : "block")}; + /* height: ${props => (props.collapsed ? 0 : "auto")}; */ + } + + & > ${Label} svg { + transform: rotate(${props => (props.collapsed ? -90 : 0)}deg); + } +` + export const CollapseToggler = styled(ChevronUp)`` export const Inner = styled.div` padding-top: 30px; padding-left: 20px; - - .tree-view { - overflow-y: hidden; - } - - .tree-view_item { - display: flex; - cursor: pointer; - } - - .tree-view_children { - margin-left: 16px; - display: flex; - flex-direction: column; - align-items: flex-start; - } - - .tree-view_children-collapsed { - height: 0px; - } - - .tree-view_arrow { - cursor: pointer; - margin-right: 6px; - display: inline-block; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - .tree-view_arrow:after { - content: "▾"; - } - - .tree-view_arrow.firstLevel { - display: none; - } - - .tree-view_arrow-collapsed { - -webkit-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - transform: rotate(-90deg); - } ` export const PageLink = styled(Link)` display: block; padding: 4px 0; - color: #1c61df; + color: #000; + text-decoration: none; + + & + & { + margin-top: 4px; + } + + &.active { + font-weight: 700; + } +` + +export const Menu = styled.nav` + display: flex; + flex-direction: column; + border-top: 1px dashed #a5a5a5; + margin-top: 20px; + padding-top: 20px; +` + +export const MenuItem = styled(Link)` + padding: 4px 0; + font-size: 20px; + color: #000; + text-decoration: none; + + &:hover, + &:active { + text-decoration: underline; + } &.active { font-weight: 700; diff --git a/src/icons/triangle-down.svg b/src/icons/triangle-down.svg new file mode 100644 index 0000000..33f1f64 --- /dev/null +++ b/src/icons/triangle-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx new file mode 100644 index 0000000..06f1b38 --- /dev/null +++ b/src/layouts/index.tsx @@ -0,0 +1,18 @@ +import React, { PropsWithChildren } from "react" +import { Layout } from "../components/Layout" +import { ResourcesLayout } from "../components/ResourcesLayout" + +export default function BaseLayout({ + children, + pageContext, +}: PropsWithChildren<{ + pageContext: { + layout?: string + } +}>) { + if (pageContext.layout === "resources") { + return {children} + } + + return {children} +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 788f166..4891f4f 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,15 +1,14 @@ -import React from "react" +import React, { Fragment } from "react" -import { Layout } from "../components/Layout" import { SEO } from "../components/SEO" function NotFoundPage() { return ( - +

NOT FOUND

You just hit a route that doesn't exist... the sadness.

- + ) } diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 8cef3cc..902626b 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,7 +1,6 @@ -import React from "react" +import React, { Fragment } from "react" import { graphql } from "gatsby" import { Markdown } from "../components/Markdown" -import { Layout } from "../components/Layout" import { MarkdownRemark, Query } from "../generated/graphql" import { SEO } from "../components/SEO" @@ -9,10 +8,10 @@ function AboutPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) { const { md } = data return ( - + - + ) } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 589c218..d793505 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,18 @@ -import React from "react" +import React, { Fragment } from "react" import { Link } from "gatsby" -import { Layout } from "../components/Layout" import { SEO } from "../components/SEO" function IndexPage() { return ( - +

Hi people

Welcome to your new Gatsby site.

Now go build something great.

Go to page 2 - + ) } diff --git a/src/pages/resources.tsx b/src/pages/resources.tsx index 36c62be..c171d75 100644 --- a/src/pages/resources.tsx +++ b/src/pages/resources.tsx @@ -1,14 +1,13 @@ -import React from "react" +import React, { Fragment } from "react" -import { ResourcesLayout } from "../components/ResourcesLayout" import { SEO } from "../components/SEO" function ResourcesPage() { return ( - + the resources - + ) } diff --git a/src/pages/rules.tsx b/src/pages/rules.tsx index 7ab8758..d0ddfe2 100644 --- a/src/pages/rules.tsx +++ b/src/pages/rules.tsx @@ -1,7 +1,6 @@ -import React from "react" +import React, { Fragment } from "react" import { graphql } from "gatsby" import { Markdown } from "../components/Markdown" -import { Layout } from "../components/Layout" import { MarkdownRemark, Query } from "../generated/graphql" import { SEO } from "../components/SEO" @@ -9,10 +8,10 @@ function RulesPage({ data }: ComponentQuery<{ md: MarkdownRemark }>) { const { md } = data return ( - + - + ) } diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx index 8d3b15e..c808d59 100644 --- a/src/templates/languagePost.tsx +++ b/src/templates/languagePost.tsx @@ -1,8 +1,7 @@ -import React from "react" +import React, { Fragment } from "react" import { graphql } from "gatsby" import { Markdown } from "../components/Markdown" import { SEO } from "../components/SEO" -import { ResourcesLayout } from "../components/ResourcesLayout" import { ResourceHeader } from "../components/ResourceHeader" // @todo maybe find alternative type for data @@ -10,7 +9,7 @@ function LanguagePost({ data }: any) { const { html, fields, frontmatter, timeToRead } = data.file.post console.log(data) return ( - + - + ) }