Stone_Red/website
1
0
Fork 0
mirror of https://github.com/Stone-Red-Code/website.git synced 2026-09-04 09:15:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into feature/sparks/responsiveness-proposal

Browse Source
This commit is contained in:
Xetera
2019-07-30 19:43:30 -07:00
committed by GitHub
parent fc0683a407 3769439821
commit 8d844731e2
14 changed files with 174 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gatsby-config.js
+1
View File
@@ -23,6 +23,7 @@ module.exports = {
],
},
},
`gatsby-plugin-layout`,
{
resolve: `gatsby-transformer-remark`,
plugins: [`gatsby-remark-prismjs`],
gatsby-node.js
+13
View File
@@ -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 })
package-lock.json
Generated
+8 -8
View File
@@ -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",
package.json
+1 -1
View File
@@ -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": {
src/components/ResourcesSidebar/index.tsx
+36 -26
View File
@@ -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 (
<SC.TreeWrapper>
<Tree
collapsed={collapsed}
nodeLabel={<SC.Label onClick={toggleCollapse}>{item.title}</SC.Label>}
>
{item.children.map(node => plantTree(node))}
</Tree>
<SC.TreeWrapper collapsed={collapsed}>
<SC.Label onClick={toggleCollapse}>
<TriangleDown /> {item.title}
</SC.Label>
<SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
</SC.TreeWrapper>
)
}
@@ -98,35 +96,47 @@ function FirstLevelFolder({ item, index }: { item: IFolder; index: number }) {
const collapsed = current !== index
return (
<SC.TreeWrapper>
<Tree
className="firstLevel"
collapsed={collapsed}
nodeLabel={
<SC.FirstLabel
className={!collapsed ? "active" : undefined}
onClick={() => setCurrent(index)}
>
{item.title}
<SC.CollapseToggler />
</SC.FirstLabel>
}
<SC.TreeWrapper className="firstLevel" collapsed={collapsed}>
<SC.FirstLabel
className={!collapsed ? "active" : undefined}
onClick={() => setCurrent(index)}
>
{item.children.map(node => plantTree(node))}
</Tree>
{item.title}
<SC.CollapseToggler />
</SC.FirstLabel>
<SC.Children>{item.children.map(node => plantTree(node))}</SC.Children>
</SC.TreeWrapper>
)
}
function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
return (
<SC.MenuItem to={to} activeClassName="active">
{children}
</SC.MenuItem>
)
}
export function ResourcesSidebar() {
const resources = useStaticQuery<IAllResourcesQuery>(ALL_RESOURCES)
const tree = useBuildTree(resources)
return (
<SC.ResourcesSidebarWrapper>
<SC.Banner src={banner} />
<Link to="/">
<SC.Banner src={banner} />
</Link>
<SC.Inner>
{tree.map((node, index) => plantTree(node, index, true))}
<SC.Menu>
<MenuItem to="/about">about</MenuItem>
<MenuItem to="/rules">rules</MenuItem>
<MenuItem to="/faq">faq</MenuItem>
<MenuItem to="/">hotbot</MenuItem>
<MenuItem to="/resources">resources</MenuItem>
<MenuItem to="/">tech</MenuItem>
</SC.Menu>
</SC.Inner>
</SC.ResourcesSidebarWrapper>
)
src/components/ResourcesSidebar/styles.tsx
+76 -54
View File
@@ -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;
src/icons/triangle-down.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.362 292.362">
<path d="M286.935 69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952 0-9.233 1.807-12.85 5.424C1.807 72.998 0 77.279 0 82.228c0 4.948 1.807 9.229 5.424 12.847l127.907 127.907c3.621 3.617 7.902 5.428 12.85 5.428s9.233-1.811 12.847-5.428L286.935 95.074c3.613-3.617 5.427-7.898 5.427-12.847 0-4.948-1.814-9.229-5.427-12.85z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 413 B

src/layouts/index.tsx
+18
View File
@@ -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 <ResourcesLayout>{children}</ResourcesLayout>
}
return <Layout>{children}</Layout>
}
src/pages/404.tsx
+3 -4
View File
@@ -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 (
<Layout>
<Fragment>
<SEO title="404: Not found" />
<h1>NOT FOUND</h1>
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
</Layout>
</Fragment>
)
}
src/pages/about.tsx
+3 -4
View File
@@ -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 (
<Layout>
<Fragment>
<SEO title="About" />
<Markdown content={md.html!} />
</Layout>
</Fragment>
)
}
src/pages/index.tsx
+3 -4
View File
@@ -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 (
<Layout>
<Fragment>
<SEO title="Home" />
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}></div>
<Link to="/page-2/">Go to page 2</Link>
</Layout>
</Fragment>
)
}
src/pages/resources.tsx
+3 -4
View File
@@ -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 (
<ResourcesLayout>
<Fragment>
<SEO title="Resources" />
the resources
</ResourcesLayout>
</Fragment>
)
}
src/pages/rules.tsx
+3 -4
View File
@@ -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 (
<Layout>
<Fragment>
<SEO title="Rules" />
<Markdown content={md.html!} />
</Layout>
</Fragment>
)
}
src/templates/languagePost.tsx
+3 -4
View File
@@ -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 (
<ResourcesLayout>
<Fragment>
<SEO title={frontmatter.title} />
<ResourceHeader
title={frontmatter.title}
@@ -20,7 +19,7 @@ function LanguagePost({ data }: any) {
recommendedReading={frontmatter.recommended_reading}
/>
<Markdown content={html} />
</ResourcesLayout>
</Fragment>
)
}