Skip to content

chore: use rehype plugin for heading id generation #7701

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

Merged
merged 6 commits into from
Jun 4, 2024
Merged

Conversation

hbuchel
Copy link
Contributor

@hbuchel hbuchel commented Jun 3, 2024

Description of changes:

This PR adds a rehype-slug plugin that generates a unique ID for headings. Duplicate headings will have an incremented number attached to them; i.e. #options and #options-1. This fixes an issue where some H3 table of content links with the same name would link to the same heading because we were generating the same id for that heading.

Pages to test:

Related GitHub issue #, if available:

Fixes: #6748

Instructions

If this PR should not be merged upon approval for any reason, please submit as a DRAFT

Which product(s) are affected by this PR (if applicable)?

  • amplify-cli
  • amplify-ui
  • amplify-studio
  • amplify-hosting
  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS
  • Swift
  • Android
  • Flutter
  • React Native

Please add the product(s)/platform(s) affected to the PR title

Checks

  • Does this PR conform to the styleguide?

  • Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.

  • Are any files being deleted with this PR? If so, have the needed redirects been created?

  • Are all links in MDX files using the MDX link syntax rather than HTML link syntax?

    ref: MDX: [link](https://docs.amplify.aws/)
    HTML: <a href="https://docs.amplify.aws/">link</a>

When this PR is ready to merge, please check the box below

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We're not using this anywhere else.

@@ -50,33 +53,4 @@ describe('MDXHeading', () => {
expect(heading).toHaveTextContent(props.children);
expect(link).not.toBeInTheDocument();
});

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We're not handling the ID generation anymore so I removed these tests.

Copy link
Contributor Author

@hbuchel hbuchel Jun 3, 2024

Choose a reason for hiding this comment

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

This page was using a work around to generate H3's with a unique ID using another component. But now we can use normal markdown headings. Also changes some headings to h4. Preview

@hbuchel hbuchel marked this pull request as ready for review June 3, 2024 20:17
@hbuchel hbuchel requested review from a team and josefaidt as code owners June 3, 2024 20:17
@hbuchel hbuchel merged commit ab5d6c9 into main Jun 4, 2024
10 checks passed
@hbuchel hbuchel deleted the H3UniqueId branch June 4, 2024 15:29
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.

When two headings have the same name the anchor links always link to the first one
4 participants