Add sidebar item classname for method (#104)

cloud-annotations · Dec 18, 2021 · 843f8ea · 843f8ea
1 parent 162bf0a
commit 843f8ea
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/docusaurus-plugin-openapi/package.json b/packages/docusaurus-plugin-openapi/package.json
@@ -29,6 +29,7 @@
     "@docusaurus/utils": "^2.0.0-beta.13",
     "@docusaurus/utils-validation": "^2.0.0-beta.13",
     "chalk": "^4.1.2",
+    "clsx": "^1.1.1",
     "fs-extra": "^9.0.1",
     "js-yaml": "^4.1.0",
     "json-refs": "^3.0.15",

diff --git a/packages/docusaurus-plugin-openapi/src/sidebars/index.ts b/packages/docusaurus-plugin-openapi/src/sidebars/index.ts
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
+import clsx from "clsx";
+
 import { ApiMetadata, ApiPageMetadata } from "../types";
 
 interface Options {
@@ -60,14 +62,17 @@ function groupByTags(
             return item.api.tags?.includes(tag);
           })
           .map((item) => {
+            const apiPage = item as ApiPageMetadata; // TODO: we should have filtered out all info pages, but I don't like this
             return {
               type: "link",
-              label: item.title,
-              href: item.permalink,
-              docId: item.id,
-              className: (item as ApiPageMetadata).api.deprecated // TODO: we should have filtered out all info pages, but I don't like this
-                ? "menu__list-item--deprecated"
-                : undefined,
+              label: apiPage.title,
+              href: apiPage.permalink,
+              docId: apiPage.id,
+              className: clsx({
+                "menu__list-item--deprecated": apiPage.api.deprecated,
+                "api-method": !!apiPage.api.method,
+                [apiPage.api.method]: !!apiPage.api.method,
+              }),
             };
           }),
       };
@@ -93,14 +98,17 @@ function groupByTags(
           return false;
         })
         .map((item) => {
+          const apiPage = item as ApiPageMetadata; // TODO: we should have filtered out all info pages, but I don't like this
           return {
             type: "link",
-            label: item.title,
-            href: item.permalink,
-            docId: item.id,
-            className: (item as ApiPageMetadata).api.deprecated // TODO: we should have filtered out all info pages, but I don't like this
-              ? "menu__list-item--deprecated"
-              : undefined,
+            label: apiPage.title,
+            href: apiPage.permalink,
+            docId: apiPage.id,
+            className: clsx({
+              "menu__list-item--deprecated": apiPage.api.deprecated,
+              "api-method": !!apiPage.api.method,
+              [apiPage.api.method]: !!apiPage.api.method,
+            }),
           };
         }),
     },