docs: new APITable comp to render large tables

[Josh-Cena]

Motivation

When giving instructions on how to enable a particular option, it usually is quite awkward to give a link to the entire API table instead of pointing them to a specific row.

This PR introduces a new APITable on the website which allows us to direct to a specific row through anchor links. When visitors click on that link, the respective entry will also be highlighted.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

https://deploy-preview-5891--docusaurus-2.netlify.app/docs/api/plugins/@docusaurus/plugin-content-blog#archiveBasePath

[github-actions]

Size Change: +431 B (0%)

Total Size: 882 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	94.2 kB	+244 B (0%)
website/build/assets/js/main.********.js	474 kB	+190 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/globalData.json	38.2 kB	-2 B (0%)
website/build/blog/2017/12/14/introducing-docusaurus/index.html	66.1 kB	0 B
website/build/blog/index.html	36.8 kB	0 B
website/build/docs/index.html	44 kB	+1 B (0%)
website/build/docs/installation/index.html	51.5 kB	-2 B (0%)
website/build/index.html	29.5 kB	0 B
website/build/tests/docs/index.html	25.2 kB	0 B
website/build/tests/docs/standalone/index.html	21.7 kB	0 B

_{compressed-size-action}

[netlify]

✔️ [V2]

🔨 Explore the source changes: 0ebe5dd

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/618b28cc78de4b0008b2b0d7

😎 Browse the preview: https://deploy-preview-5891--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	89
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5891--docusaurus-2.netlify.app/

[Josh-Cena]

box-shadow on the <tr> element is not rendered on Safari🌚 Not sure what we should do

[slorber]

Thanks, LGTM and nice idea.

We can give it a try and improve later if bugs are found

[slorber]

Can you extract an <APITableRow> component, and encapsulate the highlighting logic inside it?

Also use of useHistory rather than DOM APIs that do not trigger re-renders on route changes (in this case it might not produce any weird side effects but is still a bad practice to access window during render execution)

[Josh-Cena]

My React has always been hacky especially for these comps that hook heavily into the context...🌚

[slorber]

LGTM thanks 👍

It's a bit unnatural to use a conditional ref assignation and forwardRef (I would have used useEffect inside the row) but as it's local and may be more optimized, why not

[Josh-Cena]

It's a bit unnatural to use a conditional ref assignation and forwardRef (I would have used useEffect inside the row)

I don't really know... I did intend to make one table responsible for only highlighting one row, hence only one ref being handled, but we can see if in the future we want to use query params and highlight multiple rows (like GitHub lines)