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

[MDX] Add getHeadings + generate anchor links #4095

Merged
merged 26 commits into from
Aug 1, 2022
Merged

Conversation

bholmesdev
Copy link
Contributor

@bholmesdev bholmesdev commented Jul 29, 2022

Changes

  • Generates anchor ids on all MDX headings via a rehype plugin
    • Plugin can be removed via the rehypePlugins config option
  • Adds getHeadings to MDX file exports

Testing

Add test for ID generation and getHeadings with and without JSX expressions

Docs

Add generated exports to MDX README

@changeset-bot
Copy link

changeset-bot bot commented Jul 29, 2022

🦋 Changeset detected

Latest commit: d061b9e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@astrojs/mdx Minor
@e2e/preact-component Patch
@e2e/react-component Patch
@e2e/solid-component Patch
@e2e/svelte-component Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: integration Related to any renderer integration (scope) label Jul 29, 2022
Copy link
Contributor

@tony-sull tony-sull left a comment

Choose a reason for hiding this comment

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

Looks good! Just one note related to a bit of extra test coverage 👍

let fixture;

before(async () => {
fixture = await loadFixture({
Copy link
Contributor

Choose a reason for hiding this comment

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

Would you mind adding a suite to test removing the default plugin as well?

Would be great to know CI will catch if we accidentally break that code path later assuming the headings are always added

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Copy link
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

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

Thank you for running the anchor leg on the MDX relay @bholmesdev! Left a few README comments but this is heading in the right direction!

packages/integrations/mdx/README.md Outdated Show resolved Hide resolved

export default {
integrations: [mdx({
rehypePlugins: { extends: [rehypeMinifyHtml] },
Copy link
Member

Choose a reason for hiding this comment

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

Does this syntax also work in markdown.rehypePlugins? I currently do something like this to preserve defaults:

import { DEFAULT_REHYPE_PLUGINS } from '@astrojs/markdown-remark';

export default {
  markdown: {
    rehypePlugins: [...DEFAULT_REHYPE_PLUGINS, myExtraPlugin()],
  },
}

I like the extends format, but might be smart to make sure these APIs are consistent?

Copy link
Member

Choose a reason for hiding this comment

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

Strong agree on this!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It doesn't work yet, no! I introduced extends to workshop a new API. I'll make an issue to update Markdown now that we like it 😁

packages/integrations/mdx/README.md Outdated Show resolved Hide resolved

export default {
integrations: [mdx({
rehypePlugins: { extends: [rehypeMinifyHtml] },
Copy link
Member

Choose a reason for hiding this comment

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

Strong agree on this!

packages/integrations/mdx/src/rehype-collect-headings.ts Outdated Show resolved Hide resolved
packages/integrations/mdx/src/rehype-collect-headings.ts Outdated Show resolved Hide resolved
@bholmesdev bholmesdev merged commit 40ef43a into main Aug 1, 2022
@bholmesdev bholmesdev deleted the feat/mdx-get-headings branch August 1, 2022 21:23
@astrobot-houston astrobot-houston mentioned this pull request Aug 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: integration Related to any renderer integration (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants