Add heading anchors to @keystone-next/website

[gwyneplaine]

Description

This PR contains the following:

• Direct port of the Heading component from @keystone/website with a few tweaks.
• Remove back ticks from headings in mdx

Heading component port

Besides a few changes this is an almost identical port of the Heading component in the @keystone/website package.

Changes

First, the id isn't passed in as a prop, as this isn't information immediately available to the MDX parser. Instead we deduce the id from the children of the heading component. We make two assumptions here:
a) There is only one child
b) The child is a string value. This means that heading values in mdx should only be formatted as such. Any additional tags like bold, code or pre will result in no id being appended to that heading.

Second, previously the heading LinkIcon would replace the url directly on click. I've modified this behaviour slightly to be inline with the common user experience. Namely, onClick of a Link, the anchor path is copied to the users clipboard. We use the toast component here to give users proper feedback.

Copy to clipboard functionality:

As of early last year, document.execCommand has been deprecated for all (most) major browsers in favor of the asynchronous navigator.clipboard API.

Our implementation accounts for this by doing the following:

• leverage the navigator api if it exists
• If it doesn't (in the case of older versions of IE) we fallback to the copy-to-clipboard library, which operates on top of the old document.execCommand API.

Remove back ticks from headings in mdx

As per above, we do this because back ticks add additional mark up to children, which makes it difficult to resolve to the text node without a noticeable time differential.

As of writing this, @timleslie is ok with this change.

Important to note that this implementation similar to all other implementations of anchor links in our repo are subject to the same bug. As the id is at the moment extrapolated from the id, headings must be unique.

Non-unique headings occurring in the same page will not produce the desired anchoring result.

Demo:

demo.mov

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/keystonejs/keystone-next-docs/63fozams8
✅ Preview: https://keystone-next-docs-git-docsnext-add-anchors.keystonejs.vercel.app

[changeset-bot]

🦋 Changeset detected

Latest commit: f822227

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

This PR includes changesets to release 1 package

Name	Type
@keystone-next/website	Minor

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

[JedWatson]

Just leaving this here for later - @gwyneplaine the remark-heading-id plugin looks handy if we ever have clashes in the heading ids