Merge pull request #764 from slumbering/bump-up-docusaurus-core-2.0.0-beta.2

website/package.json

@@ -16,8 +16,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.0",
-    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@docusaurus/core": "2.0.0-beta.2",
+    "@docusaurus/preset-classic": "2.0.0-beta.2",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.3.1",

website/src/components/DocPageCustom.js

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import qs from 'querystringify';
+import isEmpty from 'lodash/isEmpty';
+import { checkUserCollaboratorStatus } from '../api/github'
+import Spinner from './Spinner';
+import DocPageAuthentication from './DocPageAuthentication';
+import DocPageRedirect from './DocPageRedirect';
+
+function DocPageCustom({ location, userAccessStatus, setUserAccessStatus }) {
+  const [isLoading, setIsLoading] = useState(true)
+  const [redirectState, setRedirectState] = useState()
+  const authQuery = qs.parse(location.search);
+
+  useEffect(async () => {
+    if (!isEmpty(authQuery) && userAccessStatus === null) { //callback after successful auth with github
+      const user = await checkUserCollaboratorStatus(authQuery.code);
+      setUserAccessStatus(user)
+      if (user?.permission) {
+        window.localStorage.setItem('user', JSON.stringify(user));
+      }
+    }
+    setIsLoading(false)
+  }, [])
+
+  useEffect(() => {
+    import('amplitude-js').then(amplitude => {
+      if (userAccessStatus?.login) {
+        var amplitudeInstance = amplitude.getInstance().init(process.env.REACT_APP_AMPLITUDE_ID, userAccessStatus?.login.toLowerCase(), {
+          apiEndpoint: `${window.location.hostname}/t`
+        });
+        amplitude.getInstance().logEvent('Docs Viewed', { "hostname": window.location.hostname, "path": location.pathname });
+      }
+    })
+  }, [location.pathname, userAccessStatus])
+
+  if (isLoading) return <Spinner />
+
+  if (userAccessStatus?.permission === false) {
+    return <DocPageRedirect />
+  }
+
+  if (userAccessStatus === null) {
+    return <DocPageAuthentication />
+  }
+}
+
+export default DocPageCustom

website/src/css/custom.scss

@@ -80,6 +80,7 @@ h2 {
 
 code {
   margin: 0 1px;
+  color: var(--ifm-code-color);
 }
 
 .markdown {
@@ -139,6 +140,7 @@ h1[class^="docTitle"] {
   font-weight: bold;
   display: flex;
   align-items: center;
+  margin: 2rem 0 5rem;
 }
 
 #__docusaurus {
@@ -170,7 +172,7 @@ h1[class^="docTitle"] {
 
 // sidebar
 @media (min-width: 997px) {
-  div[class^="docSidebarContainer"] {
+  aside[class^="docSidebarContainer"] {
     width: 250px;
     margin-right: 3rem;
 
@@ -234,11 +236,15 @@ div[class^="codeBlockContainer"] {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
+
+  pre {
+    border-radius: var(--ifm-global-radius);
+  }
 }
 
-div[class^="codeBlockLines"] {
+code[class^="codeBlockLines"] {
   background-color: var(--ifm-color-primary-dark) !important;
-  margin-bottom: 0;
+  margin: 0;
   .token-line {
     color: var(--ifm-color-primary-light) !important;
   }

website/src/theme/DocPage/index.js

@@ -4,7 +4,7 @@
  * 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, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import renderRoutes from '@docusaurus/renderRoutes';
@@ -18,21 +18,40 @@ import { translate } from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common';
-import { Redirect } from "react-router";
-import qs from 'querystringify';
-import isEmpty from 'lodash/isEmpty';
-import { checkUserCollaboratorStatus } from '../../api/github'
-import { GithubLoginButton } from 'react-social-login-buttons';
-import Spinner from '../../components/Spinner';
-import DocPageAuthentication from '../../components/DocPageAuthentication';
-import DocPageRedirect from '../../components/DocPageRedirect';
+import DocPageCustom from '../../components/DocPageCustom'
 import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
 
+function getSidebar({ versionMetadata, currentDocRoute }) {
+  function addTrailingSlash(str) {
+    return str.endsWith('/') ? str : `${str}/`;
+  }
+
+  function removeTrailingSlash(str) {
+    return str.endsWith('/') ? str.slice(0, -1) : str;
+  }
+
+  const { permalinkToSidebar, docsSidebars } = versionMetadata; // With/without trailingSlash, we should always be able to get the appropriate sidebar
+  // note: docs plugin permalinks currently never have trailing slashes
+  // trailingSlash is handled globally at the framework level, not plugin level
+
+  const sidebarName =
+    permalinkToSidebar[currentDocRoute.path] ||
+    permalinkToSidebar[addTrailingSlash(currentDocRoute.path)] ||
+    permalinkToSidebar[removeTrailingSlash(currentDocRoute.path)];
+  const sidebar = docsSidebars[sidebarName];
+  return {
+    sidebar,
+    sidebarName,
+  };
+}
+
 function DocPageContent({ currentDocRoute, versionMetadata, children }) {
   const { siteConfig, isClient } = useDocusaurusContext();
-  const { pluginId, permalinkToSidebar, docsSidebars, version } = versionMetadata;
-  const sidebarName = permalinkToSidebar[currentDocRoute.path];
-  const sidebar = docsSidebars[sidebarName];
+  const { pluginId, version } = versionMetadata;
+  const { sidebarName, sidebar } = getSidebar({
+    versionMetadata,
+    currentDocRoute,
+  });
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
   const toggleSidebar = useCallback(() => {
@@ -42,7 +61,6 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
 
     setHiddenSidebarContainer(!hiddenSidebarContainer);
   }, [hiddenSidebar]);
-
   return (
     <Layout
       key={isClient}
@@ -54,7 +72,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
       }}>
       <div className={styles.docPage}>
         {sidebar && (
-          <div
+          <aside
             className={clsx(styles.docSidebarContainer, {
               [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
             })}
@@ -68,8 +86,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
               if (hiddenSidebarContainer) {
                 setHiddenSidebar(true);
               }
-            }}
-            role="complementary">
+            }}>
             <DocSidebar
               key={
                 // Reset sidebar state on sidebar changes
@@ -107,7 +124,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
                 <IconArrow className={styles.expandSidebarButtonIcon} />
               </div>
             )}
-          </div>
+          </aside>
         )}
         <main
           className={clsx(styles.docMainContainer, {
@@ -116,7 +133,7 @@ function DocPageContent({ currentDocRoute, versionMetadata, children }) {
           })}>
           <div
             className={clsx(
-              'container padding-vert--lg',
+              'container padding-top--md padding-bottom--lg',
               styles.docItemWrapper,
               {
                 [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
@@ -141,50 +158,15 @@ function DocPage(props) {
   );
   const userAgent = ExecutionEnvironment.canUseDOM ? navigator.userAgent : null;
 
-  // CUSTOM DOCPAGE
-  if (process.env.OAUTH_ENABLE == 'true' && userAgent !== 'Algolia DocSearch Crawler') {
-    const [isLoading, setIsLoading] = useState(true)
-    const [redirectState, setRedirectState] = useState()
-    const authQuery = qs.parse(location.search);
+  // DocPage Swizzle
   const [userAccessStatus, setUserAccessStatus] = useState((() => {
     if (typeof window !== "undefined") return JSON.parse(window.localStorage.getItem('user'))
   })())
 
-    useEffect(async () => {
-      if (!isEmpty(authQuery) && userAccessStatus === null) { //callback after successful auth with github
-        const user = await checkUserCollaboratorStatus(authQuery.code);
-        setUserAccessStatus(user)
-        if (user?.permission) {
-          if (typeof window !== "undefined") window.localStorage.setItem('user', JSON.stringify(user));
+  if (process.env.OAUTH_ENABLE == 'true' && userAccessStatus?.permission !== true && userAgent !== 'Algolia DocSearch Crawler') {
+    return <DocPageCustom location={location} userAccessStatus={userAccessStatus} setUserAccessStatus={setUserAccessStatus} />
   }
-      }
-      setIsLoading(false)
-    }, [])
-
-    useEffect(() => {
-      import('amplitude-js').then(amplitude => {
-        if (userAccessStatus?.login) {
-          var amplitudeInstance = amplitude.getInstance().init(process.env.REACT_APP_AMPLITUDE_ID, userAccessStatus?.login.toLowerCase(), {
-            apiEndpoint: `${window.location.hostname}/t`
-          });
-          amplitude.getInstance().logEvent('Docs Viewed', { "hostname": window.location.hostname, "path": location.pathname });
-        }
-      })
-    }, [location.pathname, userAccessStatus])
-
-    if (isLoading) return <Spinner />
-
-    if (userAccessStatus?.permission === false) {
-      return <DocPageRedirect />
-    }
-
-    if (userAccessStatus === null) {
-      return (
-        <DocPageAuthentication />
-      )
-    }
-  }
-  // END CUSTOM DOCPAGE
+  // End DocPageSwizzle
 
   if (!currentDocRoute) {
     return <NotFound {...props} />;
@@ -194,7 +176,9 @@ function DocPage(props) {
     <DocPageContent
       currentDocRoute={currentDocRoute}
       versionMetadata={versionMetadata}>
-      {renderRoutes(docRoutes)}
+      {renderRoutes(docRoutes, {
+        versionMetadata,
+      })}
     </DocPageContent>
   );
 }

website/src/theme/DocPage/styles.module.css

@@ -7,6 +7,7 @@
 
 :root {
   --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
 }
 
 :global(.docs-wrapper) {
@@ -26,7 +27,7 @@
   }
 
   .docMainContainerEnhanced {
-    max-width: none;
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
   }
 
   .docSidebarContainer {
@@ -39,7 +40,7 @@
   }
 
   .docSidebarContainerHidden {
-    width: 30px;
+    width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
 
@@ -72,27 +73,14 @@
   }
 
   .docItemWrapperEnhanced {
-    max-width: calc(var(--ifm-container-width) + var(--doc-sidebar-width));
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
   }
 }
 
 @media (max-width: 996px) {
   .docSidebarContainer {
-    margin-top: 0;
-  }
-}
-
-@media (min-width: 997px) and (max-width: 1320px) {
-  .docItemWrapper {
-    max-width: calc(
-      var(--ifm-container-width) - var(--doc-sidebar-width) -
-        var(--ifm-spacing-horizontal) * 2
-    );
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) - var(--ifm-spacing-horizontal) * 2
-    );
+    display: none;
   }
 }

website/src/theme/Heading/index.js

@@ -14,7 +14,20 @@ import './styles.css';
 import styles from './styles.module.css';
 import AnchorIcon from "./anchor.svg"
 
-const Heading = (Tag) =>
+export const MainHeading = function MainHeading({...props}) {
+  return (
+    <header>
+      <h1
+        {...props}
+        id={undefined} // h1 headings do not need an id because they don't appear in the TOC
+        className={styles.h1Heading}>
+        {props.children}
+      </h1>
+    </header>
+  );
+};
+
+const createAnchorHeading = (Tag) =>
   function TargetComponent({id, ...props}) {
     const {
       navbar: {hideOnScroll},
@@ -49,4 +62,8 @@ const Heading = (Tag) =>
     );
   };
 
+const Heading = (headingType) => {
+  return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
+};
+
 export default Heading;

website/src/theme/Heading/styles.module.css

@@ -8,3 +8,8 @@
 .enhancedAnchor {
   top: calc(var(--ifm-navbar-height) * -1 - 0.5rem);
 }
+
+.h1Heading {
+  font-size: 3rem;
+  margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading));
+}