feat(gatsby-remark-autolink-headers): Support {#custom-id} header syntax

[yunabe]

Description

Support custom heading ID syntax in gatsby-remark-autolink-headers (disabled by default)

### My Great Heading {#custom-id}

https://www.markdownguide.org/extended-syntax/#heading-ids

[DSchau]

Great! I know (or thought I know) that reactjs.org uses an approach kind of like this--it'd be nice to bake this into the plugin so everyone can get this benefit, so thanks for taking the initiative here!

Left a few comments/requests 👇

[DSchau]

Sort of a nit: but generally I'd argue we way overuse snapshots and they make future failures more confusing than they need to be.

Could you rather test for a specific id, e.g. something like

const customId = `custom-id`

const markdownAST = remark.parse(`
# Heading With a Custom Id {#${customId}}
`)

// later

visit(transformed, `heading`, node => {
  expect(node.data.id).toBe(customId)
})

Obviously you can scale this however you'd like if there's value in testing for multiple instances.

[yunabe]

I agree. I rewrote this test without using snapshots. Does it look better? If you like this, I will rewrite other tests with this style in another PR.

[wardpeet]

I have added a question as @DSchau is busy spreading the word about gatsby on a conference. This looks pretty good!

Could you also add 3 tests? 1 to check we still generate an id when no {#id} is specified, a second one to check that we don't convert headings with only the {#id} as text and a last one to test that we don't use the custom id from this node {#id} some text

[yunabe]

Added additional tests. Could you take another look?

[wardpeet]

Well done! 👏 Thanks for addressing all comments. Let's ship this! 🚀

all taken care of

[gatsbot]

Holy buckets, @yunabe — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[wardpeet]

published in gatsby-remark-autolink-headers@2.0.17 🎉

[yunabe]

Thank you for the reviewing, Ward.
Also, it's great to see my PR was released so quickly. Amazing😄