Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOP-4967: Contextualize headings in method selector for "On This Page" list #1237

Merged
merged 8 commits into from
Sep 20, 2024

Conversation

mayaraman19
Copy link
Collaborator

@mayaraman19 mayaraman19 commented Sep 16, 2024

Stories/Links:

DOP-4967

Update headings to show up when relevant method option is selected. Also, updated collapsible headings to reflect their section depth (i.e. if collapsible is nested it won't have h2 styling)

Current Behavior:

Current method selector behavior

Staging Links:

Staging (content depth 2) - check out collapsible as well
Staging - content depth 1
Non-nested collapsible

Notes:

To test, ensure that the correct headings show up when selecting different methods on the method selector, and also make sure that they reflect where you are on the page (i.e. bolded) and that clicking different headings takes you to the correct spot on the page. Also check out some other pages to ensure their behavior is unchanged.

README updates

    • This PR introduces changes that should be reflected in the README, and I have made those updates.
    • This PR does not introduce changes that should be reflected in the README

@mayaraman19 mayaraman19 changed the title DOP-4967 DOP-4967: Contextualize headings in method selector for "On This Page" list Sep 16, 2024
src/components/RootProvider.js Outdated Show resolved Hide resolved
src/components/MethodSelector/MethodSelector.js Outdated Show resolved Hide resolved
src/components/Contents/index.js Outdated Show resolved Hide resolved
src/components/Collapsible/index.js Show resolved Hide resolved
src/components/Contents/index.js Outdated Show resolved Hide resolved
Copy link

netlify bot commented Sep 19, 2024

Deploy Preview for mongodb-snooty failed. Why did it fail? →

Name Link
🔨 Latest commit c95f893
🔍 Latest deploy log https://app.netlify.com/sites/mongodb-snooty/deploys/66ed9fc4b4a78200084bb704

Copy link
Collaborator

@rayangler rayangler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this! Works great

@@ -68,7 +68,8 @@ const Collapsible = ({ nodeData: { children, options }, ...rest }) => {
<Box className={cx('collapsible', collapsibleStyle)}>
<Box className={cx(headerContainerStyle)}>
<Box>
<Heading className={cx(headerStyle)} sectionDepth={2} nodeData={headingNodeData}>
{/* Adding 1 to reflect logic in parser, but want to show up as H2 for SEO reasons */}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for this comment! I was a bit confused why we would want to render as an h2 with h3 styling if a writer is placing it under an h2 😕

@mayaraman19 mayaraman19 merged commit 190cfff into main Sep 20, 2024
4 of 8 checks passed
@mayaraman19 mayaraman19 deleted the DOP-4967 branch September 20, 2024 18:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants