-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add right sidebar content for prismic content (#2795)
* Add right sidebar content for prismic content * Use slugify package * Add comments * Fix useEffect listener * Only add anchor for heading1 and heading2 * Code refactor * Add tests for right sidebar contents anchors * Remove useEffect * Move tests to navigation
- Loading branch information
Showing
6 changed files
with
191 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import React from 'react'; | ||
| import slugify from 'slugify'; | ||
|
|
||
| const getText = (children) => { | ||
| // Recursively find all text nodes in the children | ||
| let text = ''; | ||
|
|
||
| React.Children.forEach(children, (child) => { | ||
| if (typeof child === 'string') { | ||
| text += child; | ||
| } else if (child.props && child.props.children) { | ||
| text += getText(child.props.children); | ||
| } | ||
| }); | ||
| return text; | ||
| }; | ||
|
|
||
| const Heading = ({ level, children }) => { | ||
| const text = getText(children); | ||
|
|
||
| const id = slugify(text, { lower: true }); | ||
|
|
||
| const HeadingComponent = `h${level}`; | ||
|
|
||
| return <HeadingComponent id={id}>{children}</HeadingComponent>; | ||
| }; | ||
|
|
||
| export const Heading1 = ({ children }) => <Heading level={1}>{children}</Heading>; | ||
| export const Heading2 = ({ children }) => <Heading level={2}>{children}</Heading>; | ||
| export const Heading3 = ({ children }) => <Heading level={3}>{children}</Heading>; | ||
| export const Heading4 = ({ children }) => <Heading level={4}>{children}</Heading>; | ||
| export const Heading5 = ({ children }) => <Heading level={5}>{children}</Heading>; | ||
| export const Heading6 = ({ children }) => <Heading level={6}>{children}</Heading>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from 'react'; | ||
|
|
||
| const PrismicSidebarLayout = ({ tableOfContents }) => { | ||
| let navItems; | ||
|
|
||
| if (tableOfContents.length > 0) { | ||
| navItems = tableOfContents.map((item) => { | ||
| return ( | ||
| <li key={item.id} className="list-none"> | ||
| <a | ||
| href={`#${item.id}`} | ||
| className="text-[#5c6975] no-underline font-normal py-2 pr-0 block relative hover:text-blue-500" | ||
| > | ||
| {item.title} | ||
| </a> | ||
| </li> | ||
| ); | ||
| }); | ||
| } | ||
|
|
||
| return ( | ||
| <aside className="sidebar right"> | ||
| <ul data-cy="outline" className="rightSideBarUL list-revert pl-8"> | ||
| {navItems?.length > 0 && ( | ||
| <> | ||
| <li className="rightSideTitle">CONTENTS</li> | ||
| {navItems} | ||
| </> | ||
| )} | ||
| </ul> | ||
| </aside> | ||
| ); | ||
| }; | ||
|
|
||
| export default PrismicSidebarLayout; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import slugify from 'slugify'; | ||
|
|
||
| // Extract headers from a content object | ||
| export const extractHeaders = (content) => { | ||
| const headers = []; | ||
|
|
||
| let richText; | ||
|
|
||
| if (content.length > 0) { | ||
| content.forEach((block) => { | ||
| richText = block.text.richText; | ||
| headers.push(...extractHeadersFromRichText(richText)); | ||
| }); | ||
| } else { | ||
| richText = content.richText; | ||
| headers.push(...extractHeadersFromRichText(richText)); | ||
| } | ||
|
|
||
| return headers; | ||
| }; | ||
|
|
||
| // Extract headers from a rich text object and return an array of headers with id and title | ||
| const extractHeadersFromRichText = (richText) => { | ||
| const headers = []; | ||
|
|
||
| richText.forEach((block) => { | ||
| if (block.type === 'heading1' || block.type === 'heading2') { | ||
| headers.push({ | ||
| id: slugify(block.text, { lower: true }), | ||
| title: block.text, | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| return headers; | ||
| }; |