diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index c209636..4849eb8 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,12 +1,9 @@ -import React from "react" +import React, { PropsWithChildren } from "react" import * as SC from "./styles" -interface ContainerProps { - children: React.ReactNode +export function Container({ + children, + ...restProps +}: PropsWithChildren<{}>): JSX.Element { + return {children} } - -const Container = ({ children, ...restProps }: ContainerProps): JSX.Element => ( - {children} -) - -export default Container diff --git a/src/components/DocsLayout/index.tsx b/src/components/DocsLayout/index.tsx index 34ee9f7..119dd2e 100644 --- a/src/components/DocsLayout/index.tsx +++ b/src/components/DocsLayout/index.tsx @@ -8,13 +8,11 @@ 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" +import { DocsSidebar } from "../DocsSidebar" +import { Footer } from "../Footer" +import * as SC from "./styles" -const DocsLayout = ({ children }: PropsWithChildren<{}>) => { +export function DocsLayout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { @@ -27,20 +25,14 @@ const DocsLayout = ({ children }: PropsWithChildren<{}>) => { return (
-
+ - +

{data.site.siteMetadata.title}

{children} - -
- + + +
) } - -export default DocsLayout diff --git a/src/components/DocsLayout/layout.scss b/src/components/DocsLayout/layout.scss deleted file mode 100644 index e033dcd..0000000 --- a/src/components/DocsLayout/layout.scss +++ /dev/null @@ -1,41 +0,0 @@ -// 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; -} diff --git a/src/components/DocsSidebar/index.tsx b/src/components/DocsSidebar/index.tsx index e3245ca..81d7478 100644 --- a/src/components/DocsSidebar/index.tsx +++ b/src/components/DocsSidebar/index.tsx @@ -1,99 +1,25 @@ -import * as R from "ramda" import React, { useState } from "react" import Tree from "react-treeview" import { useStaticQuery, graphql } from "gatsby" +import useBuildTree from "./useBuildTree" import * as SC from "./styles" -interface IFile { +export interface IFile { title: string type: "file" path: string } -interface IFolder { +export interface IFolder { title: string type: "folder" path: string children: IFileOrFolder[] } -type IFileOrFolder = IFile | IFolder +export type IFileOrFolder = IFile | IFolder -const traverse = ( - [head, ...tail]: string[], - basePath = "/docs" -): IFileOrFolder => { - const path = basePath + "/" + head - const isFile = !tail.length - if (isFile) { - // probably not more than one dot - const [name] = head.split(".") - return { - title: name, - type: "file", - path, - } - } - return { - title: head, - type: "folder", - path, - children: [traverse(tail, path)], - } -} - -const generateFolder = ({ - title, - path, - targets, -}: { - title: IFolder["title"] - path: IFile["path"] - targets: IFolder[] -}): IFolder => { - const children = join(R.chain(target => target.children, targets)) - - return { - title, - type: "folder", - path, - children, - } -} - -const generateFile = ({ - title, - path, -}: { - title: IFile["title"] - path: IFile["path"] -}): IFile => { - return { - title, - path, - type: "file", - } -} - -const join = ([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] => { - if (!head) return [] - - const [similarFs, remaining] = R.partition( - obj => obj.title === head.title && obj.type === head.type, - tail - ) - const targets = [head, ...similarFs] - const { title, path } = head - - const current = - head.type === "folder" - ? generateFolder({ title, path, targets: targets as IFolder[] }) - : generateFile({ title, path }) - - return [current, ...join(remaining)] -} - -interface IFileQuery { +export interface IFileQuery { node: { relativePath: string childMarkdownRemark: { @@ -105,7 +31,7 @@ interface IFileQuery { } } -interface IAllDocsQuery { +export interface IAllDocsQuery { allFile: { edges: IFileQuery[] } @@ -129,7 +55,7 @@ const ALL_DOCS = graphql` } ` -const plantTree = (item: IFileOrFolder) => { +function plantTree(item: IFileOrFolder) { if (item.type === "file") { return ( @@ -158,21 +84,13 @@ function Folder({ item }: { item: IFolder }) { ) } -const DocsSidebar = () => { +export function DocsSidebar() { const docs = useStaticQuery(ALL_DOCS) - - const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) => - traverse(file.relativePath.split("/")) - ) - const results = join(objects) - - console.log(results) + const tree = useBuildTree(docs) return ( - {results.map(node => plantTree(node))} + {tree.map(node => plantTree(node))} ) } - -export default DocsSidebar diff --git a/src/components/DocsSidebar/useBuildTree.tsx b/src/components/DocsSidebar/useBuildTree.tsx new file mode 100644 index 0000000..9395195 --- /dev/null +++ b/src/components/DocsSidebar/useBuildTree.tsx @@ -0,0 +1,90 @@ +import * as R from "ramda" +import { + IFileOrFolder, + IFile, + IFolder, + IAllDocsQuery, + IFileQuery, +} from "./index" + +function traverse( + [head, ...tail]: string[], + basePath = "/docs" +): IFileOrFolder { + const path = basePath + "/" + head + const isFile = !tail.length + if (isFile) { + // probably not more than one dot + const [name] = head.split(".") + return { + title: name, + type: "file", + path, + } + } + return { + title: head, + type: "folder", + path, + children: [traverse(tail, path)], + } +} + +function generateFolder({ + title, + path, + targets, +}: { + title: IFolder["title"] + path: IFile["path"] + targets: IFolder[] +}): IFolder { + const children = join(R.chain(target => target.children, targets)) + + return { + title, + type: "folder", + path, + children, + } +} + +function generateFile({ + title, + path, +}: { + title: IFile["title"] + path: IFile["path"] +}): IFile { + return { + title, + type: "file", + path, + } +} + +function join([head, ...tail]: IFileOrFolder[]): IFileOrFolder[] { + if (!head) return [] + + const [similarFs, remaining] = R.partition( + obj => obj.title === head.title && obj.type === head.type, + tail + ) + const targets = [head, ...similarFs] + const { title, path } = head + + const current = + head.type === "folder" + ? generateFolder({ title, path, targets: targets as IFolder[] }) + : generateFile({ title, path }) + + return [current, ...join(remaining)] +} + +export default function useBuildTree(docs: IAllDocsQuery) { + const objects = docs.allFile.edges.map(({ node: file }: IFileQuery) => + traverse(file.relativePath.split("/")) + ) + + return join(objects) +} diff --git a/src/components/DocsSidebarSection/index.tsx b/src/components/DocsSidebarSection/index.tsx index e04e899..8396c06 100644 --- a/src/components/DocsSidebarSection/index.tsx +++ b/src/components/DocsSidebarSection/index.tsx @@ -1,20 +1,18 @@ -import React from "react" -import { SidebarTitle } from "./style" +import React, { PropsWithChildren } from "react" +import * as SC from "./styles" export interface DocsSidebarSectionProps { readonly title: string } -const DocsSidebarSection = ({ +export function DocsSidebarSection({ title, children, -}: React.PropsWithChildren) => { +}: PropsWithChildren) { return (
- {title} + {title} {children}
) } - -export default DocsSidebarSection diff --git a/src/components/DocsSidebarSection/style.tsx b/src/components/DocsSidebarSection/styles.tsx similarity index 62% rename from src/components/DocsSidebarSection/style.tsx rename to src/components/DocsSidebarSection/styles.tsx index 41ebe9d..398a8fd 100644 --- a/src/components/DocsSidebarSection/style.tsx +++ b/src/components/DocsSidebarSection/styles.tsx @@ -1,5 +1,5 @@ -import styled from "styled-components"; +import styled from "styled-components" export const SidebarTitle = styled.h3` text-transform: uppercase; -`; \ No newline at end of file +` diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx new file mode 100644 index 0000000..ec60265 --- /dev/null +++ b/src/components/Footer/index.tsx @@ -0,0 +1,15 @@ +import React from "react" +import * as SC from "./styles" +import { Container } from "../Container" + +export function Footer() { + return ( + + + © {new Date().getFullYear()}, Built with + {` `} + Gatsby + + + ) +} diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx new file mode 100644 index 0000000..7afaac6 --- /dev/null +++ b/src/components/Footer/styles.tsx @@ -0,0 +1,4 @@ +import { Link } from "gatsby" +import styled from "styled-components" + +export const FooterWrapper = styled.footer`` diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 68d9645..796e261 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -8,15 +8,15 @@ import React, { PropsWithChildren } from "react" import { useStaticQuery, graphql } from "gatsby" -import Container from "../Container" -import Navbar from "../Navbar" -import Sidebar from "../Sidebar" +import { Container } from "../Container" +import { Footer } from "../Footer" +import { Sidebar } from "../Sidebar" import "./layout.scss" -import { Main, MainContent } from "./styles" +import * as SC from "./styles" import Scrollbar from "react-perfect-scrollbar" import "react-perfect-scrollbar/dist/css/styles.css" -const Layout = ({ children }: PropsWithChildren<{}>) => { +export function Layout({ children }: PropsWithChildren<{}>) { const data = useStaticQuery(graphql` query { site { @@ -30,23 +30,15 @@ const Layout = ({ children }: PropsWithChildren<{}>) => { return ( -
+ - +

{data.site.siteMetadata.title}

{children} - -
+ + -
- - © {new Date().getFullYear()}, Built with - {` `} - Gatsby - -
+