diff --git a/gatsby-node.js b/gatsby-node.js index 581203b5..fb4236a5 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -286,7 +286,9 @@ const createSwaggerPages = async (createPage) => { } const createReadTheDocsPage = async (createPage, name, list) => { - const markdownListTemplate = path.resolve('./src/templates/MarkdownList.jsx') + const markdownListTemplate = path.resolve( + './src/templates/Markdown/MarkdownList.jsx' + ) createPage({ path: `/read-the-docs/${name}`, component: markdownListTemplate, diff --git a/src/templates/Markdown/MarkdownList.jsx b/src/templates/Markdown/MarkdownList.jsx new file mode 100644 index 00000000..d5f27572 --- /dev/null +++ b/src/templates/Markdown/MarkdownList.jsx @@ -0,0 +1,118 @@ +import React, { useState } from 'react' +import PropTypes from 'prop-types' +import Layout from '../../components/Layout' +import HeaderSection from '../../components/HeaderSection' +import Content from '../../components/Content' +import styles from '../../templates/Doc.module.scss' +import MarkdownTemplate from '../MarkdownTemplate' +import sidebarStyles from '../../components/Sidebar.module.scss' +import { generatedNestedObject } from './utils' + +export default function MarkdownList({ pageContext }) { + const flattenedModules = {} + const nestedModules = {} + + pageContext.markdownList.map(({ node }) => { + const modulePath = node.frontmatter.module.split('.') + const key = + modulePath.slice(0, modulePath.length - 1).join('.') || + modulePath.join('.') + + if (!flattenedModules[key]) { + flattenedModules[key] = [] + } + flattenedModules[key].push(node) + generatedNestedObject(nestedModules, modulePath, node) + }) + + const moduleKeys = Object.keys(flattenedModules).sort() + const [selectedNodeId, setSelectedNodeId] = useState( + flattenedModules[moduleKeys[0]][0].id + ) + const [selectedModule, setSelectedModule] = useState( + flattenedModules[moduleKeys[0]][0] + ) + + const changeNodeid = (id) => { + setSelectedNodeId(id) + + for (let i = 0; i < pageContext.markdownList.length; i++) { + var { node } = pageContext.markdownList[i] + if (node.id === id) { + setSelectedModule(node) + break + } + } + } + + const generateModuleListElement = (node) => { + const { id } = node + const color = selectedNodeId === id ? 'black' : '#8b98a9' + const className = + selectedNodeId === id ? sidebarStyles.active : sidebarStyles.link + + return ( +
  • + changeNodeid(id)} + style={{ + cursor: 'pointer', + color + }} + > + {node.label} + +
    • + ) + } + + const sidebarList = (title, nestedModules) => { + const { id } = nestedModules + + if (id) return generateModuleListElement(nestedModules) + + const keys = Object.keys(nestedModules).sort() + const children = [] + children.push( +
  • + {title} +
    • + ) + keys.forEach((element) => { + children.push( + + ) + }) + return children + } + + const nestedSidebarList = sidebarList(null, nestedModules) + + return ( + + + +
    + ⚠ + This documentation is a work in progess. Please feel free to report + any issues. +
    +
    + +
    + +
    +
    +     +     + ) +} + +MarkdownList.propTypes = { + pageContext: PropTypes.object.isRequired +} diff --git a/src/templates/Markdown/utils.js b/src/templates/Markdown/utils.js new file mode 100644 index 00000000..3b9f9519 --- /dev/null +++ b/src/templates/Markdown/utils.js @@ -0,0 +1,16 @@ +export const generatedNestedObject = (object, keyPath, node) => { + const lastKeyIndex = keyPath.length - 1 + for (var i = 0; i < lastKeyIndex; ++i) { + var key = keyPath[i] + if (!(key in object)) { + object[key] = {} + } + object = object[key] + } + if (!object[keyPath[lastKeyIndex]]) { + object[keyPath[lastKeyIndex]] = { + id: node.id, + label: node.frontmatter.title + } + } +} diff --git a/src/templates/MarkdownList.jsx b/src/templates/MarkdownList.jsx deleted file mode 100644 index be5ed15a..00000000 --- a/src/templates/MarkdownList.jsx +++ /dev/null @@ -1,129 +0,0 @@ -import React, { useState } from 'react' -import PropTypes from 'prop-types' -import Layout from '../components/Layout' -import HeaderSection from '../components/HeaderSection' -import Content from '../components/Content' -import styles from '../templates/Doc.module.scss' -import MarkdownTemplate from './MarkdownTemplate' -import sidebarStyles from '../components/Sidebar.module.scss' - -export default function MarkdownList({ pageContext }) { - const modules = {} - - const nestedModules = {} - - function generatedNested(obj, keyPath, node) { - var lastKeyIndex = keyPath.length - 1 - for (var i = 0; i < lastKeyIndex; ++i) { - var key = keyPath[i] - if (!(key in obj)) { - obj[key] = {} - } - obj = obj[key] - } - if (!obj[keyPath[lastKeyIndex]]) { - obj[keyPath[lastKeyIndex]] = { - id: node.id, - label: node.frontmatter.title - } - } - } - - pageContext.markdownList.map(({ node }) => { - const modulePath = node.frontmatter.module.split('.') - const key = - modulePath.slice(0, modulePath.length - 1).join('.') || - modulePath.join('.') - - if (!modules[key]) { - modules[key] = [] - } - modules[key].push(node) - - generatedNested(nestedModules, modulePath, node) - }) - - const moduleKeys = Object.keys(modules).sort() - const [selectedNodeId, setSelectedNodeId] = useState( - modules[moduleKeys[0]][0].id - ) - const [elem, setElem] = useState(modules[moduleKeys[0]][0]) - - const changeNodeid = (id) => { - setSelectedNodeId(id) - - for (let i = 0; i < pageContext.markdownList.length; i++) { - var { node } = pageContext.markdownList[i] - if (node.id === id) { - setElem(node) - break - } - } - } - - const generateNestedSidebarList = (title, nestedModules) => { - if (nestedModules.id) { - return ( -
  • - changeNodeid(nestedModules.id)} - style={{ - cursor: 'pointer', - color: selectedNodeId === nestedModules.id ? 'black' : '#8b98a9' - }} - > - {nestedModules.label} - -
    • - ) - } else { - const keys = Object.keys(nestedModules).sort() - const children = [] - children.push( -
  • - {title} -
    • - ) - keys.forEach((element) => { - children.push( - - ) - }) - return children - } - } - - const nestedSidebarList = generateNestedSidebarList(null, nestedModules) - - return ( - - - -
    - ⚠ - This documentation is a work in progess. Please feel free to report - any issues. -
    -
    - -
    - -
    -
    -     -     - ) -} - -MarkdownList.propTypes = { - pageContext: PropTypes.object.isRequired -}