From 711a6fe3d0ce15792f3b73f71153ff4d8f3785cd Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 23 Jan 2022 20:04:34 +0800
Subject: [PATCH] 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         |  9 +++++++++
 website/docs/guides/docs/sidebar/items.md         | 15 +++++++++++++++
 .../_components/ShowcaseCard/styles.module.css    |  2 +-
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/website/docs/guides/docs/sidebar/index.md b/website/docs/guides/docs/sidebar/index.md
index 5a111e2649..a839f6ba8e 100644
--- a/website/docs/guides/docs/sidebar/index.md
+++ b/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:
diff --git a/website/docs/guides/docs/sidebar/items.md b/website/docs/guides/docs/sidebar/items.md
index ebd2aae0f4..30e9471204 100644
--- a/website/docs/guides/docs/sidebar/items.md
+++ b/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`.
diff --git a/website/src/pages/showcase/_components/ShowcaseCard/styles.module.css b/website/src/pages/showcase/_components/ShowcaseCard/styles.module.css
index a0a44c4260..c799d6e3df 100644
--- a/website/src/pages/showcase/_components/ShowcaseCard/styles.module.css
+++ b/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 {