From ccd036e6c57280fd502d98aaa1cedeb1161b022e Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Mon, 18 Mar 2024 09:51:03 +0100 Subject: [PATCH 1/4] fix: fix expanding chapters bug --- .../src/hooks/use-sidebar-navigation-items.js | 7 +++- .../src/layouts/internals/sidebar.js | 37 ++++++++++++------- .../src/layouts/internals/sidebar.utils.js | 13 +++++-- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js b/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js index 5f0d6c9e19..17d4bba288 100644 --- a/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js +++ b/packages/gatsby-theme-docs/src/hooks/use-sidebar-navigation-items.js @@ -39,7 +39,12 @@ function createAncestorsTree(data) { function traverse(chapters, parentPath = [], level = 0) { chapters.forEach((chapter, index) => { if (chapter.pages) { - const currentPath = [...parentPath, `${level}-${index}`]; + let newPath = `${parentPath.join('#')}#${level}-${index}`; + if (newPath.startsWith('#')) { + newPath = newPath.substring(1); + } + const currentPath = [...parentPath, newPath]; + ancestorsArray.push(currentPath); if (chapter.pages.length > 0) { diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js index 5beaec5837..5403368bc5 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js @@ -277,18 +277,23 @@ const Title = styled.span` : designSystem.typography.fontWeights.regular}; `; -const ChapterTitle = (props) => ( - props.toggleExpand()}> - - {props.text} - - {props.isExpanded ? ( - - ) : ( - - )} - -); +const ChapterTitle = (props) => { + return ( + props.toggleExpand()} + > + + {props.text} + + {props.isExpanded ? ( + + ) : ( + + )} + + ); +}; ChapterTitle.propTypes = { text: PropTypes.string.isRequired, isExpanded: PropTypes.bool, @@ -326,7 +331,10 @@ const Chapter = (props) => { props.location ); const { ancestorsMap } = useSidebarNavigationItems(); - const chapterId = `${props.level}-${props.index}`; + const chapterId = + props.level === 1 && props.parentChapterId + ? `${props.parentChapterId}#${props.level}-${props.index}` + : `${props.level}-${props.index}`; const { setExpandedChapters } = useContext(SidebarContextApi); const { expandedChapters } = useContext(SidebarContextState); @@ -356,6 +364,7 @@ const Chapter = (props) => { if (expandedChapters?.includes(chapterId)) { // close the chapter (and all its descendants, if any) const descendants = getItemDescendants( + chapterId, props.level, props.index, ancestorsMap @@ -402,6 +411,7 @@ const Chapter = (props) => { index={pageIndex} level={1} chapter={page} + parentChapterId={chapterId} location={props.location} onLinkClick={props.onLinkClick} nextScrollPosition={props.nextScrollPosition} @@ -429,6 +439,7 @@ const Chapter = (props) => { Chapter.propTypes = { index: PropTypes.number.isRequired, level: PropTypes.number.isRequired, + parentChapterId: PropTypes.string, chapter: PropTypes.object.isRequired, onLinkClick: PropTypes.func, nextScrollPosition: PropTypes.number.isRequired, diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js index e0b3ff1005..b77b7c34c2 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js @@ -1,12 +1,19 @@ -export const getItemDescendants = (level, index, ancestorsMap) => { +export const getItemDescendants = ( + subChapterId, + level, + index, + ancestorsMap +) => { const chapterId = `${level}-${index}`; if (level === 1) { - return [chapterId]; + return [subChapterId]; } else { const descendantsArray = ancestorsMap.filter((element) => element.includes(chapterId) ); - return [].concat(...descendantsArray); + return (chapterId.includes('#') ? [subChapterId] : []).concat( + ...descendantsArray + ); } }; From 3c97165f158fec2c7cf8e7618ec7ea4d511c4e3b Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Mon, 18 Mar 2024 10:15:18 +0100 Subject: [PATCH 2/4] chore: make hidrated version working --- packages/gatsby-theme-docs/src/layouts/internals/sidebar.js | 6 +----- .../src/layouts/internals/sidebar.utils.js | 3 +-- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js index 5403368bc5..5a407cdd1a 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.js @@ -340,11 +340,7 @@ const Chapter = (props) => { useEffect(() => { if (isSelectedChapter) { - const initialState = getItemAncestors( - props.level, - props.index, - ancestorsMap - ); + const initialState = getItemAncestors(chapterId, ancestorsMap); const expandedItemsList = initialState.length > 0 ? initialState : [chapterId]; diff --git a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js index b77b7c34c2..9ac318d80a 100644 --- a/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js +++ b/packages/gatsby-theme-docs/src/layouts/internals/sidebar.utils.js @@ -17,8 +17,7 @@ export const getItemDescendants = ( } }; -export const getItemAncestors = (level, index, ancestorsMap) => { - const chapterId = `${level}-${index}`; +export const getItemAncestors = (chapterId, ancestorsMap) => { const ancestorsArray = ancestorsMap.filter( (element) => element.includes(chapterId) && element.indexOf(chapterId) > 0 ); From 178a341b1d36c38521fc534cef49290bb46d1f28 Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Mon, 18 Mar 2024 10:25:13 +0100 Subject: [PATCH 3/4] chore: added further subchapters to cover the issue --- .../empty-pages-2/empty-page-eight.mdx | 3 +++ .../empty-pages-2/empty-page-eleven.mdx | 3 +++ .../content/empty-pages-2/empty-page-five.mdx | 3 +++ .../content/empty-pages-2/empty-page-four.mdx | 3 +++ .../empty-pages-2/empty-page-fourteen.mdx | 3 +++ .../content/empty-pages-2/empty-page-nine.mdx | 3 +++ .../content/empty-pages-2/empty-page-one.mdx | 3 +++ .../empty-pages-2/empty-page-seven.mdx | 3 +++ .../content/empty-pages-2/empty-page-six.mdx | 3 +++ .../content/empty-pages-2/empty-page-ten.mdx | 3 +++ .../empty-pages-2/empty-page-thirteen.mdx | 3 +++ .../empty-pages-2/empty-page-three.mdx | 3 +++ .../empty-pages-2/empty-page-twelve.mdx | 3 +++ .../content/empty-pages-2/empty-page-two.mdx | 3 +++ .../src/content/empty-pages-2/overview-1.mdx | 10 ++++++++ .../src/content/empty-pages-2/overview.mdx | 10 ++++++++ .../docs-smoke-test/src/data/navigation.yaml | 24 +++++++++++++++++++ 17 files changed, 86 insertions(+) create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx create mode 100644 websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eight.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-eleven.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-five.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-four.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-fourteen.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-nine.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-one.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-seven.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-six.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-ten.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-thirteen.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-three.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-twelve.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx new file mode 100644 index 0000000000..a7b6e3b340 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/empty-page-two.mdx @@ -0,0 +1,3 @@ +--- +title: Empty page +--- diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx new file mode 100644 index 0000000000..d8b6ffc819 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/overview-1.mdx @@ -0,0 +1,10 @@ +--- +title: Empty pages +showTimeToRead: false +timeToRead: false +--- + +# Contents of this chapter + +- [PageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-three) +- [BetaPageWithLongNameThatOverflowsBecauseItsOneWord](/empty-pages/empty-page-four) diff --git a/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx b/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx new file mode 100644 index 0000000000..20dd0b9703 --- /dev/null +++ b/websites/docs-smoke-test/src/content/empty-pages-2/overview.mdx @@ -0,0 +1,10 @@ +--- +title: Empty pages +showTimeToRead: false +timeToRead: false +--- + +# Contents of this chapter + +- [Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-one) +- [Beta Page with some very long title too much for our innocent API to handle](/empty-pages/empty-page-two) diff --git a/websites/docs-smoke-test/src/data/navigation.yaml b/websites/docs-smoke-test/src/data/navigation.yaml index 3a1e4bf798..086c50ade0 100644 --- a/websites/docs-smoke-test/src/data/navigation.yaml +++ b/websites/docs-smoke-test/src/data/navigation.yaml @@ -69,6 +69,30 @@ path: /empty-pages/empty-page-ten - title: third level page 3 path: /empty-pages/empty-page-eleven +- chapter-title: Further Subchapters + pages: + - title: Subchapter One + pages: + - title: third level page 1 + path: /empty-pages-2/empty-page-five + - title: third level page 2 + path: /empty-pages-2/empty-page-six + - title: third level page 3 + path: /empty-pages-2/empty-page-seven + - title: Normal Chapter 1 + path: /empty-pages-2/empty-page-twelve + - title: Normal Chapter 2 + path: /empty-pages-2/empty-page-thirteen + - title: Normal Chapter 3 + path: /empty-pages-2/empty-page-fourteen + - title: Subchapter Two + pages: + - title: third level page 1 + path: /empty-pages-2/empty-page-nine + - title: third level page 2 + path: /empty-pages-2/empty-page-ten + - title: third level page 3 + path: /empty-pages-2/empty-page-eleven - chapter-title: Chapter 9999 With a Longer Multi-Word Name that Wraps pages: - title: Page with some very long title too much for our innocent API to handle From 4d3a1dba30b6da3af17793169543452db57ab966 Mon Sep 17 00:00:00 2001 From: Gabriele Antonini Date: Mon, 18 Mar 2024 10:27:31 +0100 Subject: [PATCH 4/4] chore: changeset --- .changeset/fuzzy-planets-explain.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/fuzzy-planets-explain.md diff --git a/.changeset/fuzzy-planets-explain.md b/.changeset/fuzzy-planets-explain.md new file mode 100644 index 0000000000..a0cd0fccf7 --- /dev/null +++ b/.changeset/fuzzy-planets-explain.md @@ -0,0 +1,6 @@ +--- +'@commercetools-docs/gatsby-theme-docs': patch +'@commercetools-website/docs-smoke-test': patch +--- + +Fix issue with multiple expanding chapters working in "tanem" when expanded