From 007e018ac5fcf22364ffd9c7960e4406d8a9db3f Mon Sep 17 00:00:00 2001 From: "Brian M. Carlson" Date: Wed, 17 Jul 2019 23:15:48 -0500 Subject: [PATCH] Quick and dirty nav sorting --- src/components/sidebar.js | 40 ++------------- src/nav.js | 100 -------------------------------------- src/sortNavItems.js | 52 ++++++++++++++++++++ src/templates/docs.js | 38 ++------------- 4 files changed, 61 insertions(+), 169 deletions(-) delete mode 100644 src/nav.js create mode 100644 src/sortNavItems.js diff --git a/src/components/sidebar.js b/src/components/sidebar.js index 80e91e0..3f4f010 100644 --- a/src/components/sidebar.js +++ b/src/components/sidebar.js @@ -5,9 +5,7 @@ import { ExternalLink } from 'react-feather' import Link from './link' import './styles.css' import config from '../../config' -import { DH_NOT_SUITABLE_GENERATOR } from 'constants' - -const forcedNavOrder = config.sidebar.forcedNavOrder +import getSortedNavItems from '../sortNavItems' const Sidebar = styled('aside')` width: 100%; @@ -143,41 +141,11 @@ const SidebarLayout = ({ location }) => ( } `} render={({ allMdx }) => { - const navItems = allMdx.edges - .map(({ node }) => node.fields) - .reduce( - (acc, fields) => { - const { slug: cur } = fields - const newItem = { slug: cur, filename: fields.filename.name } - if (forcedNavOrder.find(url => url === cur)) { - return { ...acc, [cur]: [newItem] } - } - - const prefix = cur.split('/')[1] - - if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) { - return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], newItem] } - } else { - return { ...acc, items: [...acc.items, newItem] } - } - }, - { items: [] } - ) - - const allFields = allMdx.edges.map(({ node }) => node.fields || {}) - const sortedTree = forcedNavOrder - .reduce((acc, cur) => { - return acc.concat(navItems[cur]) - }, []) - .concat(navItems.items) + const sortedTree = getSortedNavItems(allMdx) - const nav = sortedTree.map(({ slug }) => { + const nav = sortedTree.map(({ slug, hasChildren }) => { const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug) - const containingSlug = allFields.find(({ slug: otherSlug }) => { - // is this slug contained within another one (e.g. is this a 'header' slug?) - return slug !== '/' && slug !== otherSlug && otherSlug.indexOf(slug) === 0 - }) - if (containingSlug) { + if (hasChildren) { // nested path return {node.fields.title} } diff --git a/src/nav.js b/src/nav.js deleted file mode 100644 index 41058ab..0000000 --- a/src/nav.js +++ /dev/null @@ -1,100 +0,0 @@ -export default [ - { - items: [ - { - title: 'Welcome', - file: '', - }, - { - title: 'Announcements', - file: 'announcements', - }, - ], - }, - { - title: 'Features', - folder: 'features', - items: [ - { - title: 'Connecting', - file: 'connecting', - }, - { - title: 'Queries', - file: 'queries', - }, - { - title: 'Pooling', - file: 'pooling', - }, - { - title: 'Transactions', - file: 'transactions', - }, - { - title: 'Data Types', - file: 'types', - }, - { - title: 'SSL/TLS', - file: 'ssl', - }, - { - title: 'Native Bindings', - file: 'native', - }, - ], - }, - { - title: 'Guides', - folder: 'guides', - items: [ - { - title: 'Project Structure', - file: 'project-structure', - }, - { - title: 'Express + async/await', - file: 'async-express', - }, - { - title: 'Upgrading to 7.0', - file: 'upgrading', - }, - ], - }, - { - title: 'API Docs', - folder: 'api', - items: [ - { - title: 'pg.Pool', - file: 'pool', - }, - { - title: 'pg.Client', - file: 'client', - }, - { - title: 'pg.Result', - file: 'result', - }, - { - title: 'types', - file: 'types', - }, - { - title: 'Cursor', - file: 'cursor', - }, - { - title: 'QueryStream', - file: 'query-stream', - }, - { - title: 'Copy Streams', - file: 'copy-streams', - }, - ], - }, -] diff --git a/src/sortNavItems.js b/src/sortNavItems.js new file mode 100644 index 0000000..cb81e5f --- /dev/null +++ b/src/sortNavItems.js @@ -0,0 +1,52 @@ +import config from '../config' +const forcedNavOrder = config.sidebar.forcedNavOrder + +// TODO(bmc) this entire file makes me sad - need to refactor this when I have more time +// most of this was forked from the open source repo I cloned and quickly banged into shape +export default function getSortedNavItems(allMdx) { + const allFields = allMdx.edges.map(({ node }) => node.fields || {}) + const navItems = allMdx.edges + .map(({ node }) => node.fields) + .reduce( + (acc, fields) => { + const { slug: cur, title } = fields + + const containingSlug = allFields.find(({ slug: otherSlug }) => { + // is this slug contained within another one (e.g. is this a 'header' slug?) + return cur !== '/' && cur !== otherSlug && otherSlug.indexOf(cur) === 0 + }) + + const newItem = { + title, + hasChildren: Boolean(containingSlug), + url: cur, + slug: cur, + filename: fields.filename.name, + } + if (forcedNavOrder.find(url => url === cur)) { + return { ...acc, [cur]: [newItem] } + } + + const prefix = cur.split('/')[1] + + if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) { + return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], { ...newItem }] } + } else { + return { ...acc, items: [...acc.items, newItem] } + } + }, + { items: [] } + ) + + const sortedTree = forcedNavOrder + .reduce((acc, cur) => { + const things = navItems[cur].sort((a, b) => { + if (!a.hasChildren && !b.hasChildren) { + return a.filename.localeCompare(b.filename) + } + }) + return acc.concat(things) + }, []) + .concat(navItems.items) + return sortedTree +} diff --git a/src/templates/docs.js b/src/templates/docs.js index df1de20..a63a394 100644 --- a/src/templates/docs.js +++ b/src/templates/docs.js @@ -8,8 +8,7 @@ import { Layout, Link } from '$components' import NextPrevious from '../components/NextPrevious' import '../components/styles.css' import config from '../../config' - -const forcedNavOrder = config.sidebar.forcedNavOrder +import getSortedNavItems from '../sortNavItems' injectGlobal` * { @@ -82,37 +81,7 @@ export default class MDXRuntimeTest extends Component { } = data const gitHub = require('../components/images/github.svg') - const navItems = allMdx.edges - .map(({ node }) => node.fields.slug) - //.filter(slug => slug !== '/') - .sort() - .reduce( - (acc, cur) => { - if (forcedNavOrder.find(url => url === cur)) { - return { ...acc, [cur]: [cur] } - } - - const prefix = cur.split('/')[1] - - if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) { - return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], cur] } - } else { - return { ...acc, items: [...acc.items, cur] } - } - }, - { items: [] } - ) - - const nav = forcedNavOrder - .reduce((acc, cur) => { - return acc.concat(navItems[cur]) - }, []) - .concat(navItems.items) - .map(slug => { - const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug) - - return { title: node.fields.title, url: node.fields.slug } - }) + const nav = getSortedNavItems(allMdx).filter(x => !x.hasChildren) // meta tags const metaTitle = mdx.frontmatter.metaTitle @@ -186,6 +155,9 @@ export const pageQuery = graphql` fields { slug title + filename { + name + } } } }