From d95c2e20ba90f7bb03b47aa937f56ce25178747d Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Sat, 30 Apr 2022 18:40:18 +0800 Subject: [PATCH] refactor(theme-classic): move all sidebar-related config options to docs.sidebar --- .../__snapshots__/translations.test.ts.snap | 1 - .../src/__tests__/translations.test.ts | 1 - .../src/__tests__/validateThemeConfig.test.ts | 20 ++++++++++++++++ .../src/theme/DocSidebar/Desktop/index.tsx | 6 +++-- .../src/theme/DocSidebarItem/Category.tsx | 16 ++++++------- .../src/validateThemeConfig.ts | 24 ++++++++++++++----- .../src/utils/useThemeConfig.ts | 7 +++--- website/docs/api/docusaurus.config.js.md | 8 +++++-- website/docs/guides/docs/sidebar/index.md | 19 +++++++++++---- website/docusaurus.config.js | 8 +++++-- 10 files changed, 79 insertions(+), 31 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap index 084840bf3967..d36f4e69596b 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap +++ b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap @@ -133,7 +133,6 @@ exports[`translateThemeConfig returns translated themeConfig 1`] = ` ], "style": "light", }, - "hideableSidebar": true, "navbar": { "hideOnScroll": false, "items": [ diff --git a/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts b/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts index ebb3040de540..1c530f978e86 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts +++ b/packages/docusaurus-theme-classic/src/__tests__/translations.test.ts @@ -16,7 +16,6 @@ const ThemeConfigSample: ThemeConfig = { docs: { versionPersistence: 'none', }, - hideableSidebar: true, navbar: { title: 'navbar title', style: 'dark', diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts index ac986bd0dfda..c80aeec5d118 100644 --- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts +++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts @@ -37,6 +37,13 @@ describe('themeConfig', () => { defaultLanguage: 'javascript', additionalLanguages: ['kotlin', 'java'], }, + docs: { + versionPersistence: 'localStorage', + sidebar: { + hideable: true, + autoCollapseCategories: false, + }, + }, announcementBar: { id: 'supports', content: 'pls support', @@ -101,6 +108,19 @@ describe('themeConfig', () => { }); }); + it('rejects outdated sidebar options', () => { + expect(() => + testValidateThemeConfig({hideableSidebar: true}), + ).toThrowErrorMatchingInlineSnapshot( + `"themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable."`, + ); + expect(() => + testValidateThemeConfig({autoCollapseSidebarCategories: true}), + ).toThrowErrorMatchingInlineSnapshot( + `"themeConfig.autoCollapseSidebarCategories has been moved to themeConfig.docs.sidebar.autoCollapseCategories."`, + ); + }); + it('allows possible types of navbar items', () => { const config = { navbar: { diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx index b2b9357d9195..845fd8943999 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/index.tsx @@ -18,7 +18,9 @@ import styles from './styles.module.css'; function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) { const { navbar: {hideOnScroll}, - hideableSidebar, + docs: { + sidebar: {hideable}, + }, } = useThemeConfig(); return ( @@ -30,7 +32,7 @@ function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}: Props) { )}> {hideOnScroll && } - {hideableSidebar && } + {hideable && } ); } diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx index c3d5ed9fc41c..7a9a52e0e884 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category.tsx @@ -127,23 +127,21 @@ export default function DocSidebarItemCategory({ setExpandedItem(toCollapsed ? null : index); setCollapsed(toCollapsed); } - const {autoCollapseSidebarCategories} = useThemeConfig(); + const { + docs: { + sidebar: {autoCollapseCategories}, + }, + } = useThemeConfig(); useEffect(() => { if ( collapsible && expandedItem && expandedItem !== index && - autoCollapseSidebarCategories + autoCollapseCategories ) { setCollapsed(true); } - }, [ - collapsible, - expandedItem, - index, - setCollapsed, - autoCollapseSidebarCategories, - ]); + }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]); return (
  • ; - sidebarCollapsible: boolean; tableOfContents: TableOfContents; }; diff --git a/website/docs/api/docusaurus.config.js.md b/website/docs/api/docusaurus.config.js.md index 932dd352ea4f..cd20f8854f8d 100644 --- a/website/docs/api/docusaurus.config.js.md +++ b/website/docs/api/docusaurus.config.js.md @@ -283,8 +283,12 @@ Example: ```js title="docusaurus.config.js" module.exports = { themeConfig: { - hideableSidebar: false, - autoCollapseSidebarCategories: false, + docs: { + sidebar: { + hideable: false, + autoCollapseCategories: false, + }, + }, colorMode: { defaultMode: 'light', disableSwitch: false, diff --git a/website/docs/guides/docs/sidebar/index.md b/website/docs/guides/docs/sidebar/index.md index 9634f4853cac..74d601cb9256 100644 --- a/website/docs/guides/docs/sidebar/index.md +++ b/website/docs/guides/docs/sidebar/index.md @@ -121,13 +121,17 @@ type SidebarsFile = { ### Hideable sidebar {#hideable-sidebar} -By enabling the `themeConfig.hideableSidebar` option, you can make the entire sidebar hideable, allowing users to better focus on the content. This is especially useful when content is consumed on medium-sized screens (e.g. tablets). +By enabling the `themeConfig.docs.sidebar.hideable` option, you can make the entire sidebar hideable, allowing users to better focus on the content. This is especially useful when content is consumed on medium-sized screens (e.g. tablets). ```js title="docusaurus.config.js" module.exports = { themeConfig: { // highlight-start - hideableSidebar: true, + docs: { + sidebar: { + hideable: true, + }, + }, // highlight-end }, }; @@ -135,13 +139,18 @@ module.exports = { ### Auto-collapse sidebar categories {#auto-collapse-sidebar-categories} -The `themeConfig.autoCollapseSidebarCategories` option would collapse all sibling categories when expanding one category. This saves the user from having too many categories open and helps them focus on the selected section. +The `themeConfig.docs.sidebar.autoCollapseCategories` option would collapse all sibling categories when expanding one category. This saves the user from having too many categories open and helps them focus on the selected section. ```js title="docusaurus.config.js" module.exports = { themeConfig: { - // highlight-next-line - autoCollapseSidebarCategories: true, + // highlight-start + docs: { + sidebar: { + autoCollapseCategories: true, + }, + }, + // highlight-end }, }; ``` diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 54fbf4d0af74..4df73427f39f 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -354,8 +354,12 @@ const config = { liveCodeBlock: { playgroundPosition: 'bottom', }, - hideableSidebar: true, - autoCollapseSidebarCategories: true, + docs: { + sidebar: { + hideable: true, + autoCollapseCategories: true, + }, + }, colorMode: { defaultMode: 'light', disableSwitch: false,