Upgrade Docusaurus for new mobile UX (#515)

* upgrade Docusaurus for mobile UX * upgrade again * SDKs: use activeBaseRegex
temporalio · Jul 14, 2021 · 5380110 · 5380110
1 parent eb36137
commit 5380110
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 167 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -44,7 +44,7 @@ module.exports = {
             },
             {
               to: "/application-development",
-              activeBasePath: "/application-development",
+              activeBaseRegex: "(/application-development)|(/docs/(go|java|php|node))",
               label: "SDKs",
             },
             {

diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.3",
-    "@docusaurus/preset-classic": "2.0.0-beta.3",
+    "@docusaurus/core": "2.0.0-beta.818fb3956",
+    "@docusaurus/preset-classic": "2.0.0-beta.818fb3956",
     "@mdx-js/react": "^1.5.8",
     "clsx": "^1.1.1",
     "mermaid": "^8.10.1",

diff --git a/src/theme/DocItem/index.js b/src/theme/DocItem/index.js
@@ -10,11 +10,13 @@ import DocVersionBanner from "@theme/DocVersionBanner";
 import Seo from "@theme/Seo";
 import LastUpdated from "@theme/LastUpdated";
 import TOC from "@theme/TOC";
+import TOCCollapsible from '@theme/TOCCollapsible';
 import EditThisPage from "@theme/EditThisPage";
 import {MainHeading} from "@theme/Heading";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import {useActivePlugin, useVersions} from "@theme/hooks/useDocs";
+import useWindowSize from '@theme/hooks/useWindowSize';
 
 function DocItem(props) {
   const {content: DocContent, versionMetadata} = props;
@@ -46,6 +48,19 @@ function DocItem(props) {
 
   const shouldAddTitle =
     !hideTitle && typeof DocContent.contentTitle === "undefined";
+
+  const windowSize = useWindowSize();
+
+  const renderTocMobile =
+    !hideTableOfContents &&
+    DocContent.toc &&
+    (windowSize === 'mobile' || windowSize === 'ssr');
+
+  const renderTocDesktop =
+    !hideTableOfContents &&
+    DocContent.toc &&
+    (windowSize === 'desktop' || windowSize === 'ssr');
+
   return (
     <>
       <Seo
@@ -73,6 +88,14 @@ function DocItem(props) {
                   </span>
                 </div>
               )}
+
+              {renderTocMobile && (
+                <TOCCollapsible
+                  toc={DocContent.toc}
+                  className={styles.tocMobile}
+                />
+              )}
+
               <div className="markdown">
                 {/*
                   Title can be declared inside md content or declared through frontmatter and added manually
@@ -107,7 +130,7 @@ function DocItem(props) {
             </div>
           </div>
         </div>
-        {!hideTableOfContents && DocContent.toc && (
+        {renderTocDesktop && (
           <div className="col col--3">
             <TOC toc={DocContent.toc} />
           </div>

diff --git a/src/theme/DocItem/styles.module.css b/src/theme/DocItem/styles.module.css
@@ -19,6 +19,11 @@
   .docItemCol {
     max-width: 75% !important;
   }
+
+  /* Prevent hydration FOUC, as the mobile TOC needs to be server-rendered */
+  .tocMobile {
+    display: none;
+  }
 }
 
 @media only screen and (max-width: 996px) {