From 3a69ae528d955220bd97cb5e85d62aba7e281665 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Wed, 9 Oct 2019 00:38:40 -0700 Subject: [PATCH 1/3] feat(v2): make sidebar collapsible --- .../src/theme/DocLegacyPage/index.js | 6 +- .../src/theme/DocLegacySidebar/index.js | 131 +++++++++++++----- website/src/css/custom.css | 6 - 3 files changed, 101 insertions(+), 42 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js index 4db6a9406372..0d0eac1cfb8b 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js @@ -24,7 +24,11 @@ function DocLegacyPage(props) {
- +
diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js index af0768b3a925..44456fcd16a8 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js @@ -14,49 +14,102 @@ import styles from './styles.module.css'; const MOBILE_TOGGLE_SIZE = 24; +function DocSidebarItem({item, onItemClick}) { + const {items, href, label, type} = item; + const [collapsed, setCollapsed] = useState(item.collapsed); + const [prevCollapsedProp, setPreviousCollapsedProp] = useState(null); + + // If the collapsing state from props changed, probably a navigation event + // occurred. Overwrite the component's collapsed state with the props' + // collapsed value. + if (item.collapsed !== prevCollapsedProp) { + setPreviousCollapsedProp(item.collapsed); + setCollapsed(item.collapsed); + } + + switch (type) { + case 'category': + return ( +
  • + setCollapsed(!collapsed)}> + {label} + +
      + {items.map(childItem => ( + + ))} +
    +
    • + ); + + case 'link': + default: + return ( +
  • + + {label} + +
    • + ); + } +} + +// Calculate the category collapsing state when a page navigation occurs. +// We want to automatically expand the categories which contains the current page. +function mutateSidebarCollapsingState(item, location) { + const {items, href, type} = item; + switch (type) { + case 'category': { + const anyChildItemsActive = + items + .map(childItem => mutateSidebarCollapsingState(childItem, location)) + .filter(val => val).length > 0; + // eslint-disable-next-line no-param-reassign + item.collapsed = !anyChildItemsActive; + return anyChildItemsActive; + } + + case 'link': + default: + return href === location.pathname; + } +} + function DocLegacySidebar(props) { const [showResponsiveSidebar, setShowResponsiveSidebar] = useState(false); - const {docsSidebars, sidebar} = props; - if (!sidebar) { + const {docsSidebars, location, sidebar: currentSidebar} = props; + + if (!currentSidebar) { return null; } - const thisSidebar = docsSidebars[sidebar]; + const sidebarData = docsSidebars[currentSidebar]; - if (!thisSidebar) { - throw new Error(`Can not find ${sidebar} config`); + if (!sidebarData) { + throw new Error(`Can not find ${currentSidebar} config`); } - const renderItem = item => { - switch (item.type) { - case 'category': - return ( -
  • - - {item.label} - -
      {item.items.map(renderItem)}
    -
    • - ); - - case 'link': - default: - return ( -
  • - { - setShowResponsiveSidebar(false); - }}> - {item.label} - -
    • - ); - } - }; + sidebarData.forEach(sidebarItem => + mutateSidebarCollapsingState(sidebarItem, location), + ); return (
    @@ -100,7 +153,15 @@ function DocLegacySidebar(props) { )}
      - {thisSidebar.map(item => renderItem(item, {root: true}))} + {sidebarData.map(item => ( + { + setShowResponsiveSidebar(false); + }} + /> + ))}
    diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 785c2455ac45..6db7827f4baf 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -31,9 +31,3 @@ html[data-theme='dark'] { --ifm-font-size-base: 17px; } } - -.menu__list .menu__list .menu__list .menu__link { - font-size: 0.75em; - font-weight: normal; - color: #999; -} From 636daaafd31e8255a479663fdb6c7e5a9492aaad Mon Sep 17 00:00:00 2001 From: endiliey Date: Wed, 9 Oct 2019 18:12:14 +0700 Subject: [PATCH 2/3] fix first page load sidebar category not collapsed --- .../src/theme/DocLegacySidebar/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js index 44456fcd16a8..045a940c1543 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js @@ -88,7 +88,10 @@ function mutateSidebarCollapsingState(item, location) { case 'link': default: - return href === location.pathname; + return ( + href === location.pathname || + href === location.pathname.replace(/\/$/, '') + ); } } From e975f38500adf4bb42a60d6052d9d36bf818ca2c Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Wed, 9 Oct 2019 08:08:37 -0700 Subject: [PATCH 3/3] misc(v2): nit --- CHANGELOG-2.x.md | 12 +++++++----- .../src/theme/DocLegacySidebar/index.js | 5 +---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md index 4c076a51f0f1..b35ea12eb8cc 100644 --- a/CHANGELOG-2.x.md +++ b/CHANGELOG-2.x.md @@ -1,14 +1,16 @@ # Docusaurus 2 Changelog ## Unreleased -- Docs plugin is rewritten in TypeScript -- Docs sidebar can now be more than one level deep, theoretically up to infinity. -- more documentation ... + +- Docs, pages plugin is rewritten in TypeScript +- Docs sidebar can now be more than one level deep, theoretically up to infinity +- Collapsible docs sidebar! +- More documentation ... ## 2.0.0-alpha.25 - Blog plugin is rewritten in TypeScript and can now support CJK -- Upgrade key direct dependencies such as webpack, mdx and babel to latest +- Upgrade key direct dependencies such as webpack, mdx and babel to latest - Do not escape html and body attributes - For devices with very small viewport width, the searchbar is replaced with a search icon. On tap of the search icon the searchbar is expanded and the text beside the logo is hidden and remains hidden while the search bar is expanded. - Add `date` frontMatter support for blog plugin @@ -20,7 +22,7 @@ - Remove unused metadata for pages. This minimize number of http request & smaller bundle size. - Upgrade dependencies of css-loader from 2.x to 3.x. Css modules localIdentName hash now only use the last 4 characters instead of 8. - Fix broken markdown linking replacement for mdx files -- Fix potential security vulnerability because we're exposing the directory structure of the host machine. Instead of absolute path, we use relative path from site directory. Resulting in shorter webpack chunk naming and smaller bundle size. +- Fix potential security vulnerability because we're exposing the directory structure of the host machine. Instead of absolute path, we use relative path from site directory. Resulting in shorter webpack chunk naming and smaller bundle size. - Use contenthash instead of chunkhash for better long term caching - Allow user to customize generated heading from MDX. Swizzle `@theme/Heading` diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js index 045a940c1543..b8adfe78d160 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocLegacySidebar/index.js @@ -88,10 +88,7 @@ function mutateSidebarCollapsingState(item, location) { case 'link': default: - return ( - href === location.pathname || - href === location.pathname.replace(/\/$/, '') - ); + return href === location.pathname.replace(/\/$/, ''); } }