Use custom api dropdown and fix compatibility for firefox (#39)

- Used custom api dropdown for changing label dynamically. Used method discussed in [this post](https://github.com/facebook/docusaurus/pull/7231). `ComponentTypes` is ejected safely.

  ![Screen Shot 2023-07-05 at 16.21.43](/attachments/b4bc8ae4-6a8a-406c-98b7-f739b13c32ba)

- Fixed dropdowns missing on chrome docs page

  ![Screen Shot 2023-07-05 at 16.44.08](/attachments/1e5315b4-a057-4325-990f-1cbc35fb475f)

-  Fixed `:has` selector compatibility problem on firefox. After (Screenshots from firefox):

  ![Screen Shot 2023-07-05 at 16.10.23](/attachments/76475fb6-fd58-42ec-b4be-6a774553a887)

  ![Screen Shot 2023-07-05 at 16.10.35](/attachments/956f623a-afdb-4ab4-8aa2-beb9420727fb)

  ![Screen Shot 2023-07-05 at 16.15.35](/attachments/af840f31-def4-4f72-8340-f29b72a748bd)

  ![Screen Shot 2023-07-05 at 16.09.30](/attachments/42fa2394-962d-4594-8ef3-c594d3c1e777)

Reviewed-on: https://gitea.com/gitea/gitea-docusaurus/pulls/39
Co-authored-by: HesterG <hestergong@gmail.com>
Co-committed-by: HesterG <hestergong@gmail.com>

.gitignore

@@ -24,9 +24,9 @@ docs/
 versioned_docs/
 static/_headers
 static/_redirects
-static/latest-swagger.json
-static/19-swagger.json
-static/20-swagger.json
+static/swagger-latest.json
+static/swagger-19.json
+static/swagger-20.json
 i18n/zh-cn/docusaurus-plugin-content-docs/current
 i18n/zh-cn/docusaurus-plugin-content-docs/version-1.19
 i18n/zh-cn/docusaurus-plugin-content-docs/version-1.20

docusaurus.config.js

@@ -13,13 +13,13 @@ function sortItemsByCategory(items) {
   return sortedItems;
 }
 
-const includeAPI = process.env.INCLUDE_API !== 'false';
+const renderApiSSR = process.env.API_SSR !== 'false';
 
 const apiConfig = [
   'redocusaurus',
   {
     // Plugin Options for loading OpenAPI files
-    specs: includeAPI ? [
+    specs: renderApiSSR ? [
       {
         spec: 'static/swagger-latest.json',
         route: '/api/next/',
@@ -41,7 +41,7 @@ const apiConfig = [
   },
 ]
 
-const pageConfig = includeAPI ? {
+const pageConfig = renderApiSSR ? {
   exclude: [
     'api/**',
   ],
@@ -167,15 +167,14 @@ const config = {
             activeBaseRegex: 'api/(1.19|1.20|next)/',
           },
           {
-            type: 'dropdown',
+            type: 'custom-apiDropdown',
             label: 'API Version',
             position: 'right',
             items: [
               {to: '/api/next/', label: '1.21-dev' },
-              {to: '/api/1.20/', label: '1.20.0-rc0' },
+              {to: '/api/1.20/', label: '1.20.0-rc2' },
               {to: '/api/1.19/', label: '1.19.4' },
             ],
-            className: 'api-dropdown',
           },
           {
             href: 'https://github.com/go-gitea/gitea',

package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "start-CSRApi": "cross-env INCLUDE_API='false' docusaurus start",
+    "start-CSRApi": "cross-env API_SSR='false' docusaurus start",
     "build": "docusaurus build",
-    "build-CSRApi": "cross-env INCLUDE_API='false' docusaurus build",
+    "build-CSRApi": "cross-env API_SSR='false' docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",

src/components/APIDropDown.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import {useLocation} from '@docusaurus/router';
+
+export default function APIDropDown(props) {
+  const {pathname} = useLocation();
+  let newLabel = props.label;
+  // isAPI indicates if the current page is a api page
+  let isAPI = false;
+  for (const item of props.items) {
+    // paths like /zh-cn/api/{version}/ are also api pages
+    if (pathname === item.to || pathname === `/zh-cn${item.to}`) {
+      if (!props.mobile) newLabel = item.label;
+      isAPI = true;
+      break;
+    }
+  }
+  const newProps = {...props, label: newLabel};
+  // Hide api dropdown on non api pages
+  return (
+    <DropdownNavbarItem {...newProps} className={`api-dropdown${isAPI? '': ' gt-hidden'}`}></DropdownNavbarItem>
+  );
+}

src/css/custom.css

@@ -63,52 +63,52 @@
   top: 70px !important;
   height: calc(100vh - 70px) !important;
 }
-/* The following css is for toggling API version dropdown/menu,
-selectors like :first-of-type are for browsers those do not support :has */
-/* Do not show doc search on api pages */
-body:has(.redocusaurus) [class*='searchBox'],
-.plugin-redoc [class*='searchBox'],
-.plugin-pages [class*='searchBox'] {
+
+.gt-hidden {
   display: none;
 }
+/* The following css is for toggling API version dropdown/menu,
+  TODO: need to find a proper way to customize the classname
+*/
+@supports selector(:has(*)) {
+  /* Do not show doc search on api pages */
+  body:has(.redocusaurus) [class*='searchBox'] {
+    display: none;
+  }
 
-@media (min-width: 996px) {
-  /* hide api-dropdown on other pages */
-  .navbar__item.dropdown:not(:has(.api-dropdown)),
-  .navbar__item.dropdown:first-of-type {
-    display: none;
+  @media (min-width: 996px) {
+    /* hide other dropdowns except for api dropdown on api pages */
+    body:has(.redocusaurus) .navbar__item.dropdown:not(:has(.api-dropdown)) {
+      display: none;
+    }
   }
-  /* show api-dropdown dropdown and hide other dropdowns on api pages */
-  body:has(.redocusaurus) .navbar__item.dropdown:not(:has(.api-dropdown)),
-  .plugin-redoc .navbar__item.dropdown:not(:first-of-type),
-  .plugin-pages .navbar__item.dropdown:not(:first-of-type) {
-    display: none;
-  }
-  body:has(.redocusaurus) .navbar__item.dropdown:has(.api-dropdown),
-  .plugin-redoc .navbar__item.dropdown:first-of-type,
-  .plugin-pages .navbar__item.dropdown:first-of-type {
-    display: block;
+
+  @media (max-width: 996px) {
+    /* on mobile, dropdown becomes menu list */
+    /* Hide collapsible menus except for API menu on API pages */
+    body:has(.redocusaurus) .menu__list-item.menu__list-item--collapsed:not(:has(.api-dropdown)) {
+      display: none;
+    }
   }
 }
+/* selectors like :first-of-type are for browsers those do not support :has */
+@supports not (selector(:has(*))) {
+  .plugin-redoc [class*='searchBox'],
+  .plugin-pages [class*='searchBox'] {
+    display: none;
+  }
 
-@media (max-width: 996px) {
-  /* need to find a way to customize the classname */
-  /* on mobile, dropdown becomes menu list */
-  /* Hide api version menu on other pages */
-  .menu__list-item.menu__list-item--collapsed:has(.api-dropdown),
-  .menu__list-item.menu__list-item--collapsed:nth-of-type(3) {
-    display: none;
+  @media (min-width: 996px) {
+    .plugin-redoc .navbar__item.dropdown:not(:first-of-type),
+    .plugin-pages .navbar__item.dropdown:not(:first-of-type) {
+      display: none;
+    }
   }
-  /* Hide collapsible menus except for API menu on API pages */
-  body:has(.redocusaurus) .menu__list-item.menu__list-item--collapsed:not(:has(.api-dropdown)),
-  .plugin-redoc .menu__list-item.menu__list-item--collapsed:not(:first-of-type),
-  .plugin-pages .menu__list-item.menu__list-item--collapsed:not(:first-of-type) {
-    display: none;
-  }
-  /* Show collapsible API menu on API pages */
-  body:has(.redocusaurus) .menu__list-item:has(.api-dropdown),
-  .plugin-redoc .menu__list-item:nth-of-type(3),
-  .plugin-pages .menu__list-item:nth-of-type(3) {
-    display: list-item !important;
+
+  @media (max-width: 996px) {
+    .plugin-redoc .menu__list-item.menu__list-item--collapsed:not(:nth-of-type(3)),
+    .plugin-pages .menu__list-item.menu__list-item--collapsed:not(:nth-of-type(3)) {
+      display: none;
+    }
   }
 }

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,24 @@
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
+import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem';
+import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem';
+import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem';
+import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem';
+import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+import APIDropDown from '@site/src/components/APIDropDown';
+
+const ComponentTypes = {
+  default: DefaultNavbarItem,
+  localeDropdown: LocaleDropdownNavbarItem,
+  search: SearchNavbarItem,
+  dropdown: DropdownNavbarItem,
+  html: HtmlNavbarItem,
+  doc: DocNavbarItem,
+  docSidebar: DocSidebarNavbarItem,
+  docsVersion: DocsVersionNavbarItem,
+  docsVersionDropdown: DocsVersionDropdownNavbarItem,
+  'custom-apiDropdown': APIDropDown,
+};
+export default ComponentTypes;