Add badges to headers (or text)

[pdimens]

Hello,

Is there a way to provide inline badges/tags of some kind to headers or body text? The use case may be pointing out a deprecation in a section, or specifying that a section is documenting a plugin from a different repo, etc. I looked through the remark library and didn't see anything that fit the bill, however I'm not really a web developer so maybe I overlooked it.

[slorber]

I don't understand what you mean here.

Please show an example of what you want from another site/doc, or draw some mock-ups and give a more concrete example with real label/data/use-case.

If you want to render a badge, you can create your own React-based badge and use it in md docs thanks to MDX

[pdimens]

Here is a mockup of adding a simple "experimental" badge (or tag?) to a header

[slorber]

The ReactNative site does it:

https://reactnative.dev/docs/next/accessibilityinfo#getrecommendedtimeoutmillis-android

Not sure how though, maybe @Simek can tell you ;)

[Simek]

The implementation if quite simple, we just place div with the text and custom class in the header line:

• https://github.com/facebook/react-native-website/blame/main/docs/accessibilityinfo.md#L189

Then we use CSS (with pseudo-elements) to style it:

• https://github.com/facebook/react-native-website/blob/main/website/src/css/customTheme.scss#L1120

"Tags" added this way will also be visible in the ToC, so you need to style them too in there or hide them out, if it's not what you are looking for.

[slorber]

Thanks :) that looks like a nice solution, wonder how we could make it easier without introducing some new fancy md syntax