docs: document embedding generated index in doc page (#6453)

* docs: document embedding generated index in doc page

* fix

website/docs/guides/docs/sidebar/index.md

@@ -31,6 +31,15 @@ module.exports = {
 };
 ```
 
+This section serves as an overview of miscellaneous features of the doc sidebar. In the following sections, we will more systematically introduce the following concepts:
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items}/>
+```
+
 ## Default sidebar {#default-sidebar}
 
 If the `sidebarPath` is unspecified, Docusaurus [automatically generates a sidebar](autogenerated.md) for you, by using the filesystem structure of the `docs` folder:

website/docs/guides/docs/sidebar/items.md

@@ -223,6 +223,21 @@ Use `generated-index` links as a quick way to get an introductory document.
 
 :::
 
+#### Embedding generated index in doc page
+
+You can embed the generated cards list in a normal doc page as well, as long as the doc is used as a category index page. To do so, you need to use the `DocCardList` component, paired with the `useCurrentSidebarCategory` hook.
+
+```jsx title="a-category-index-page.md"
+import DocCardList from '@theme/DocCardList';
+import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
+
+In this section, we will introduce the following concepts:
+
+<DocCardList items={useCurrentSidebarCategory().items}/>
+```
+
+See this in action on the [sidebar guides page](index.md).
+
 ### Collapsible categories {#collapsible-categories}
 
 We support the option to expand/collapse categories. Categories are collapsible by default, but you can disable collapsing with `collapsible: false`.

website/src/pages/showcase/_components/ShowcaseCard/styles.module.css

@@ -42,7 +42,7 @@
 }
 
 .showcaseCardHeader .svgIconFavorite {
-  color: var(--site-color-svgIcon-favorite);
+  color: var(--site-color-svg-icon-favorite);
 }
 
 .showcaseCardSrcBtn {