From 5eb20d641e12c0ea7389724e978fc266c29c7949 Mon Sep 17 00:00:00 2001 From: Joseph Rios Date: Tue, 8 Dec 2020 16:17:28 -0800 Subject: [PATCH 1/6] added go_to config --- website/sidebars.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/sidebars.js b/website/sidebars.js index 2866dcae1de8..b21d5aff4499 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -15,12 +15,14 @@ module.exports = { { type: 'category', label: 'Getting Started', + go_to: 'configuration', collapsed: false, items: ['installation', 'configuration', 'typescript-support'], }, { type: 'category', label: 'Guides', + go_to: 'deployment', items: [ 'guides/creating-pages', 'styling-layout', @@ -37,6 +39,7 @@ module.exports = { { type: 'category', label: 'Advanced Guides', + go_to: 'using-themes', items: ['using-plugins', 'using-themes', 'presets'], }, ], From 112ec81c9ca46cf53581fafab2c57d73535f354f Mon Sep 17 00:00:00 2001 From: Joseph Rios Date: Tue, 8 Dec 2020 16:17:40 -0800 Subject: [PATCH 2/6] This is temp --- packages/docusaurus-theme-classic/src/types.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index d76e5a3f4dc1..37941dcf15c4 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/packages/docusaurus-theme-classic/src/types.d.ts @@ -73,11 +73,11 @@ declare module '@theme/DocPaginator' { } declare module '@theme/DocSidebar' { - import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types'; + // import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types'; export type Props = { readonly path: string; - readonly sidebar: readonly PropSidebarItem[]; + readonly sidebar: any; readonly sidebarCollapsible?: boolean; readonly onCollapse: () => void; readonly isHidden: boolean; From 6ba1686769cd0bd2d52e122f6b083ef2f263820b Mon Sep 17 00:00:00 2001 From: Joseph Rios Date: Tue, 8 Dec 2020 22:02:27 -0800 Subject: [PATCH 3/6] added go_to functionality --- .../src/theme/DocSidebar/index.tsx | 89 ++++++++++++++----- 1 file changed, 66 insertions(+), 23 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx index fa7a51b8301e..80e33b5c7fe9 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx @@ -29,6 +29,10 @@ function usePrevious(value) { return ref.current; } +function sleep(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + const isActiveSidebarItem = (item, activePath) => { if (item.type === 'link') { return isSamePath(item.href, activePath); @@ -46,6 +50,7 @@ function DocSidebarItemCategory({ onItemClick, collapsible, activePath, + goTo, ...props }) { const {items, label} = item; @@ -61,6 +66,8 @@ function DocSidebarItemCategory({ } return isActive ? false : item.collapsed; }); + const [goToLink, setGoToLink] = useState(false); + const [intitalHref, setIntitalHref] = useState(''); const menuListRef = useRef(null); const [menuListHeight, setMenuListHeight] = useState( @@ -78,20 +85,30 @@ function DocSidebarItemCategory({ if (justBecameActive && collapsed) { setCollapsed(false); } - }, [isActive, wasActive, collapsed]); - - const handleItemClick = useCallback( - (e) => { - e.preventDefault(); - - if (!menuListHeight) { - handleMenuListHeight(); + if (goTo && collapsed) { + for (const i in items) { + if (items.hasOwnProperty(i)) { + const childItem = items[i]; + if (childItem.type === 'link') { + if (goTo.includes(childItem.label.toLowerCase())) { + setIntitalHref(childItem.href); + setGoToLink(true); + } + } + } } + } + }, [isActive, wasActive, collapsed]); - setTimeout(() => setCollapsed((state) => !state), 100); - }, - [menuListHeight], - ); + const handleItemClick = useCallback(async () => { + if (!menuListHeight) { + handleMenuListHeight(); + } + setCollapsed((state) => { + return !state; + }); + await sleep(100); + }, [menuListHeight]); if (items.length === 0) { return null; @@ -103,17 +120,41 @@ function DocSidebarItemCategory({ 'menu__list-item--collapsed': collapsed, })} key={label}> - - {label} - + {goToLink && collapsed ? ( + + {label} + + ) : ( + + {label} + + )}
    { e.target.blur(); setShowResponsiveSidebar(false); From 7765199a711305329fc2d405f498a8a800a9d8d3 Mon Sep 17 00:00:00 2001 From: Joseph Rios Date: Thu, 10 Dec 2020 12:26:29 -0800 Subject: [PATCH 4/6] updates from pull request --- .../src/theme/DocPage/index.tsx | 2 +- .../src/theme/DocSidebar/index.tsx | 96 +++++++++---------- website/sidebars.js | 6 +- 3 files changed, 47 insertions(+), 57 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index 187cbee809d3..defe49b14c43 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -38,7 +38,7 @@ function DocPageContent({ const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata; const sidebarName = permalinkToSidebar[currentDocRoute.path]; const sidebar = docsSidebars[sidebarName]; - + console.log(sidebar); const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); const [hiddenSidebar, setHiddenSidebar] = useState(false); const toggleSidebar = useCallback(() => { diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx index 80e33b5c7fe9..9b77aac3fc54 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx @@ -50,7 +50,7 @@ function DocSidebarItemCategory({ onItemClick, collapsible, activePath, - goTo, + link, ...props }) { const {items, label} = item; @@ -66,8 +66,7 @@ function DocSidebarItemCategory({ } return isActive ? false : item.collapsed; }); - const [goToLink, setGoToLink] = useState(false); - const [intitalHref, setIntitalHref] = useState(''); + const [initialLink, setInitialLink] = useState(''); const menuListRef = useRef(null); const [menuListHeight, setMenuListHeight] = useState( @@ -85,14 +84,13 @@ function DocSidebarItemCategory({ if (justBecameActive && collapsed) { setCollapsed(false); } - if (goTo && collapsed) { + if (link && !collapsed) { for (const i in items) { if (items.hasOwnProperty(i)) { const childItem = items[i]; if (childItem.type === 'link') { - if (goTo.includes(childItem.label.toLowerCase())) { - setIntitalHref(childItem.href); - setGoToLink(true); + if (link.id.includes(childItem.label.toLowerCase())) { + setInitialLink(childItem.href); } } } @@ -100,15 +98,21 @@ function DocSidebarItemCategory({ } }, [isActive, wasActive, collapsed]); - const handleItemClick = useCallback(async () => { - if (!menuListHeight) { - handleMenuListHeight(); - } - setCollapsed((state) => { - return !state; - }); - await sleep(100); - }, [menuListHeight]); + const handleItemClick = useCallback( + async (e) => { + if (!collapsed) { + e.preventDefault(); + } + if (!menuListHeight) { + handleMenuListHeight(); + } + setCollapsed((state) => { + return !state; + }); + await sleep(100); + }, + [menuListHeight], + ); if (items.length === 0) { return null; @@ -120,41 +124,27 @@ function DocSidebarItemCategory({ 'menu__list-item--collapsed': collapsed, })} key={label}> - {goToLink && collapsed ? ( - - {label} - - ) : ( - - {label} - - )} + + {label} +
      { e.target.blur(); setShowResponsiveSidebar(false); diff --git a/website/sidebars.js b/website/sidebars.js index b21d5aff4499..b07f47fedd6e 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -15,14 +15,14 @@ module.exports = { { type: 'category', label: 'Getting Started', - go_to: 'configuration', + link: {type: 'doc', id: 'introduction'}, collapsed: false, items: ['installation', 'configuration', 'typescript-support'], }, { type: 'category', label: 'Guides', - go_to: 'deployment', + link: {type: 'doc', id: 'deployment'}, items: [ 'guides/creating-pages', 'styling-layout', @@ -39,7 +39,7 @@ module.exports = { { type: 'category', label: 'Advanced Guides', - go_to: 'using-themes', + link: {type: 'doc', id: 'presets'}, items: ['using-plugins', 'using-themes', 'presets'], }, ], From 40dac3d0cd1eae466f466563602b44911a127dbc Mon Sep 17 00:00:00 2001 From: Ben <57039667+ben-qnimble@users.noreply.github.com> Date: Sat, 27 Feb 2021 12:55:56 -0500 Subject: [PATCH 5/6] Cleanup code per code review comments on pull request #3898 --- packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx | 1 - packages/docusaurus-theme-classic/src/types.d.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index 2452055f7bc8..f53d3356dc41 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -40,7 +40,6 @@ function DocPageContent({ const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata; const sidebarName = permalinkToSidebar[currentDocRoute.path]; const sidebar = docsSidebars[sidebarName]; - console.log(sidebar); const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); const [hiddenSidebar, setHiddenSidebar] = useState(false); const toggleSidebar = useCallback(() => { diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index 8a54708a5691..b83e03729a28 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/packages/docusaurus-theme-classic/src/types.d.ts @@ -77,7 +77,7 @@ declare module '@theme/DocSidebar' { export type Props = { readonly path: string; - readonly sidebar: any; + readonly sidebar: readonly PropSidebarItem[]; readonly sidebarCollapsible?: boolean; readonly onCollapse: () => void; readonly isHidden: boolean; From a6876024a79f0827189ed41a4a3689b6eaa7e30d Mon Sep 17 00:00:00 2001 From: Ben <57039667+ben-qnimble@users.noreply.github.com> Date: Sat, 27 Feb 2021 16:03:03 -0500 Subject: [PATCH 6/6] Fix build issues --- .../src/plugin-content-docs.d.ts | 1 + .../src/sidebars.ts | 2 +- .../src/types.ts | 1 + .../src/theme/DocPage/index.tsx | 1 + .../src/theme/DocSidebar/index.tsx | 27 ++++++++++--------- .../docusaurus-theme-classic/src/types.d.ts | 4 +-- website/docusaurus.config.js | 1 + website/sidebars.js | 5 ++-- 8 files changed, 24 insertions(+), 18 deletions(-) diff --git a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts index 258b9b22c285..1722952b86ea 100644 --- a/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts +++ b/packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts @@ -34,6 +34,7 @@ declare module '@docusaurus/plugin-content-docs-types' { export type PropSidebarItemCategory = PropsSidebarItemBase & { type: 'category'; label: string; + link?: object; items: PropSidebarItem[]; collapsed?: boolean; }; diff --git a/packages/docusaurus-plugin-content-docs/src/sidebars.ts b/packages/docusaurus-plugin-content-docs/src/sidebars.ts index 2353a642b54e..e50766932c31 100644 --- a/packages/docusaurus-plugin-content-docs/src/sidebars.ts +++ b/packages/docusaurus-plugin-content-docs/src/sidebars.ts @@ -97,7 +97,7 @@ function assertItem( function assertIsCategory( item: unknown, ): asserts item is SidebarItemCategoryJSON { - assertItem(item, ['items', 'label', 'collapsed', 'customProps']); + assertItem(item, ['items', 'label', 'collapsed', 'link', 'customProps']); if (typeof item.label !== 'string') { throw new Error( `Error loading ${JSON.stringify(item)}. "label" must be a string.`, diff --git a/packages/docusaurus-plugin-content-docs/src/types.ts b/packages/docusaurus-plugin-content-docs/src/types.ts index be171ee7793f..6fcded13711c 100644 --- a/packages/docusaurus-plugin-content-docs/src/types.ts +++ b/packages/docusaurus-plugin-content-docs/src/types.ts @@ -108,6 +108,7 @@ export type SidebarItemCategory = SidebarItemBase & { label: string; items: SidebarItem[]; collapsed: boolean; + link?: object; }; export type SidebarItem = diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx index f53d3356dc41..df33dcf7a40d 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx @@ -40,6 +40,7 @@ function DocPageContent({ const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata; const sidebarName = permalinkToSidebar[currentDocRoute.path]; const sidebar = docsSidebars[sidebarName]; + const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false); const [hiddenSidebar, setHiddenSidebar] = useState(false); const toggleSidebar = useCallback(() => { diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx index 0c3f5d0cc1c0..37dd821924dd 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx @@ -87,15 +87,19 @@ function DocSidebarItemCategory({ if (justBecameActive && collapsed) { setCollapsed(false); } - if (link && !collapsed) { - for (const i in items) { - if (items.hasOwnProperty(i)) { - const childItem = items[i]; - if (childItem.type === 'link') { - if (link.id.includes(childItem.label.toLowerCase())) { - setInitialLink(childItem.href); - } - } + + if (link) { + if (Object.hasOwnProperty.call(link, 'type')) { + switch (link.type) { + case 'doc': + setInitialLink(link.id); + break; + case 'link': + setInitialLink(link.href); + break; + default: + setInitialLink(''); + break; } } } @@ -132,12 +136,11 @@ function DocSidebarItemCategory({ className={clsx('menu__link', { 'menu__link--sublist': collapsible, 'menu__link--active': collapsible && isActive, - [styles.menuLinkText]: !collapsible, + [styles.menuLinkText]: !collapsible && initialLink === '', })} {...(isInternalUrl(initialLink) ? { isNavLink: true, - exact: true, onClick: onItemClick, } : { @@ -300,7 +303,7 @@ function DocSidebar({ { e.target.blur(); setShowResponsiveSidebar(false); diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index b83e03729a28..20d59e7352b9 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/packages/docusaurus-theme-classic/src/types.d.ts @@ -73,11 +73,11 @@ declare module '@theme/DocPaginator' { } declare module '@theme/DocSidebar' { - // import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types'; + import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types'; export type Props = { readonly path: string; - readonly sidebar: readonly PropSidebarItem[]; + readonly sidebar: PropSidebarItem[]; readonly sidebarCollapsible?: boolean; readonly onCollapse: () => void; readonly isHidden: boolean; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f83ea28561f8..07c65a1be6c2 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -282,6 +282,7 @@ const LocaleConfigs = isI18nStaging ], themeConfig: { hideableSidebar: true, + sidebarCollapsible: true, colorMode: { defaultMode: 'light', disableSwitch: false, diff --git a/website/sidebars.js b/website/sidebars.js index 4343e1f39deb..db2adffd60a7 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -15,14 +15,14 @@ module.exports = { { type: 'category', label: 'Getting Started', - link: {type: 'doc', id: 'introduction'}, + link: {type: 'link', href: 'https://google.com'}, collapsed: false, items: ['installation', 'configuration', 'typescript-support'], }, { type: 'category', label: 'Guides', - link: {type: 'doc', id: 'deployment'}, + link: {type: 'doc', id: 'creating-pages'}, items: [ 'guides/creating-pages', { @@ -69,7 +69,6 @@ module.exports = { { type: 'category', label: 'Advanced Guides', - link: {type: 'doc', id: 'presets'}, items: ['using-plugins', 'using-themes', 'presets'], }, {