Add Anchored component

[kazk]

Usage:

import A from "@components/Anchored";
**<A id="foo">foo</A>**

See #157

---

https://deploy-preview-280--reverent-edison-2864ea.netlify.app/authoring/guidelines/kata#.novelty

[hobovsky]

Yay great! It looks soooo nice, but some questions from me:

• Does it have to be styled with a red squiggle? For a moment I thought I am looking at my browser's spell checker being triggered by something i the new docs. If it has to be a squiggle, I'd make it not as similar to existing things (i.e. browser spellcheck mark), or maybe highlighting similar to the one from Chrome (https://www.theverge.com/2020/6/4/21280115/google-search-engine-yellow-highlight-featured-snippet-anchor-text)
• There's a mark to click on to grab the link, cool!
• Would the anchor work when empty, just ID without text? I get nothing would get highlighted then, but would it still be possible to be linked to it, and grab its link?
• I think what when not triggered, initial styling should be neutral. Styling could still be driven by Markdown outside of the anchor, right?

[kazk]

Does it have to be styled with a red squiggle?

No, it's just using the primary brand color at the moment. The wavy line was chosen because it's rarely used on web and stands out while not being too much. I don't have a strong opinion, we can try other styles.

Would the anchor work when empty, just ID without text?

Yeah

I think what when not triggered, initial styling should be neutral. Styling could still be driven by Markdown outside of the anchor, right?

Oh, I didn't realize that's valid. I'll change it.

[kazk]

Yellow/Amber on dark mode makes it difficult to read, so: