website/src/theme/DocPage/index.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { useState, useCallback, useEffect } from "react";
import { MDXProvider } from "@mdx-js/react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import renderRoutes from "@docusaurus/renderRoutes";
import Layout from "@theme/Layout";
import DocSidebar from "@theme/DocSidebar";
import MDXComponents from "@theme/MDXComponents";
import NotFound from "@theme/NotFound";
import IconArrow from "@theme/IconArrow";
import { matchPath } from "@docusaurus/router";
import clsx from "clsx";
import styles from "./styles.module.css";
import { docVersionSearchTag } from "@docusaurus/theme-common";

function DocPageContent({ currentDocRoute, versionMetadata, children }) {
  const { siteConfig, isClient } = useDocusaurusContext();
  const {
    pluginId,
    permalinkToSidebar,
    docsSidebars,
    version,
  } = versionMetadata;

  useEffect(() => {
    const currentPage = currentDocRoute.path.split("/")[2] || "";
    switch (currentPage) {
      case "general":
        document.querySelectorAll(".navbar__link--active")[0].text = "General";
        break;
      case "apisix":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX®";
        break;
      case "dashboard":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Dashboard";
        break;
      case "ingress-controller":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Ingress Controller";
        break;
      case "helm-chart":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Helm Chart";
        break;
      case "docker":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Docker";
        break;
      case "java-plugin-runner":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Java Plugin Runner";
        break;
      case "go-plugin-runner":
        document.querySelectorAll(".navbar__link--active")[0].text = "Apache APISIX® Go Plugin Runner";
        break;
    }
    return () => {
      console.log('\u{1F680} documentation changed')
    }
  }, []);

  const sidebarName = permalinkToSidebar[currentDocRoute.path];
  const sidebar = docsSidebars[sidebarName];
  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
  const [hiddenSidebar, setHiddenSidebar] = useState(false);
  const toggleSidebar = useCallback(() => {
    if (hiddenSidebar) {
      setHiddenSidebar(false);
    }
    setHiddenSidebarContainer(!hiddenSidebarContainer);
  }, [hiddenSidebar]);
  return (
    <Layout
      key={isClient}
      searchMetadatas={{
        version,
        tag: docVersionSearchTag(pluginId, version),
      }}
    >
      <div className={styles.docPage}>
        {sidebar && (
          <div
            className={clsx(styles.docSidebarContainer, {
              [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
            })}
            onTransitionEnd={(e) => {
              if (
                !e.currentTarget.classList.contains(styles.docSidebarContainer)
              ) {
                return;
              }

              if (hiddenSidebarContainer) {
                setHiddenSidebar(true);
              }
            }}
            role="complementary"
          >
            <DocSidebar
              key={
                // Reset sidebar state on sidebar changes
                // See https://github.com/facebook/docusaurus/issues/3414
                sidebarName
              }
              sidebar={sidebar}
              path={currentDocRoute.path}
              sidebarCollapsible={
                siteConfig.themeConfig?.sidebarCollapsible ?? true
              }
              onCollapse={toggleSidebar}
              isHidden={hiddenSidebar}
              docPluginId={pluginId}
            />

            {hiddenSidebar && (
              <div
                className={styles.collapsedDocSidebar}
                title="Expand sidebar"
                aria-label="Expand sidebar"
                tabIndex={0}
                role="button"
                onKeyDown={toggleSidebar}
                onClick={toggleSidebar}
              >
                <IconArrow aria-label="Expand sidebar" />
              </div>
            )}
          </div>
        )}
        <main className={styles.docMainContainer}>
          <div
            className={clsx(
              "container padding-vert--lg",
              styles.docItemWrapper,
              {
                [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
              }
            )}
          >
            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
          </div>
        </main>
      </div>
    </Layout>
  );
}

function DocPage(props) {
  const {
    route: { routes: docRoutes },
    versionMetadata,
    location,
  } = props;
  const currentDocRoute = docRoutes.find((docRoute) =>
    matchPath(location.pathname, docRoute)
  );

  if (!currentDocRoute) {
    return <NotFound {...props} />;
  }

  return (
    <DocPageContent
      currentDocRoute={currentDocRoute}
      versionMetadata={versionMetadata}
    >
      {renderRoutes(docRoutes)}
    </DocPageContent>
  );
}

export default DocPage;