docs: add link from every category index page to the guide page

[Josh-Cena]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

I've seen many people asking how to implement the generated index page. Let's make it even more visible.

Also a dogfooding for wrap swizzling.

Test Plan

Test links

Deploy preview: https://deploy-preview-7665--docusaurus-2.netlify.app/docs/category/getting-started/

Related issues/PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	72003e7
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62b43f0a03a97f00089f1dc8
😎 Deploy Preview	https://deploy-preview-7665--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟢 93	🟢 100	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 86	🟢 100	🟢 100	🟢 100	🟢 90	Report

[github-actions]

Size Change: +349 B (0%)

Total Size: 802 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	107 kB	+152 B (0%)
website/build/assets/js/main.********.js	604 kB	+211 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/globalData.json	52.6 kB	0 B
website/build/index.html	38.9 kB	-14 B (0%)

_{compressed-size-action}

[slorber]

LGTM 👍

Something to consider: I think the "category generated index" name may not be very clear and users might not understand how it looks like visually.

Can we display an example index on that page?

https://deploy-preview-7665--docusaurus-2.netlify.app/docs/sidebar/items/#generated-index-page

Like <BrowserWindow><SampleGeneratedIndex/></BrowserWindow>

Just to make it clear what it looks like?

---

Separate PR but I'd also like to have a global plugin option so that all categories can have an index by default (instead of using additional config on each category => not convenient)

[slorber]

Suggested change

	<Link to={`${docPath}#category-link`}>
	<Link to={`${docPath}#generated-index-page`}>

Should it link to the parent of child heading? 🤔 not really sure what is best

[Josh-Cena]

I deliberately linked to this section, and even reordered the headings, because I added an extra tip at the top about how this should be implemented with autogenerated.

[Josh-Cena]

Can we display an example index on that page?

Directly beneath that there's a link to an actual page, though. A demo for the entire page would take up quite some space.

I'd also like to have a global plugin option so that all categories can have an index by default

I think that makes sense

[Josh-Cena]

Ref #7402 a DocLink component will make this a bit easier

[slorber]

Directly beneath that there's a link to an actual page, though. A demo for the entire page would take up quite some space.

That can be enough for now

I was thinking of something simpler though, like

<BrowserWindow>
  <DocCardList items={useCurrentSidebarCategory().items}/>
</BrowserWindow>

Or just a hardcoded list eventually.