chore: update docusaurus template (#785)

Signed-off-by: aeneasr <aeneasr@users.noreply.github.com>

Co-authored-by: aeneasr <aeneasr@users.noreply.github.com>

docs/docusaurus.config.js

@@ -182,7 +182,8 @@ module.exports = {
         showLastUpdateAuthor: true,
         showLastUpdateTime: true,
         disableVersioning: false,
-        include: ['**/*.md', '**/*.mdx', '**/*.jsx']
+        include: ['**/*.md', '**/*.mdx', '**/*.jsx'],
+        docLayoutComponent: '@theme/RoutedDocPage'
       }
     ],
     '@docusaurus/plugin-content-pages',

docs/src/theme/API.js

@@ -1,24 +1,8 @@
 import React from 'react'
-import useBaseUrl from '@docusaurus/useBaseUrl'
-import { useActiveVersion } from '@theme/hooks/useDocs'
 import Redoc from '@theme/Redoc'
-import styles from './API.module.css'
-
-function join(...args) {
-  return args
-    .map((part, i) => {
-      if (i === 0) {
-        return part.trim().replace(/[\/]*$/g, '')
-      } else {
-        return part.trim().replace(/(^[\/]*|[\/]*$)/g, '')
-      }
-    })
-    .filter((x) => x.length)
-    .join('/')
-}
+import './API.module.css'
 
 function API({ spec }) {
-  const { path } = useActiveVersion()
   return <Redoc spec={spec} />
 }
 

docs/src/theme/API.module.css

@@ -1,13 +1,13 @@
-:global .container {
+:global #route-identifier[data-route*='reference/api'] .container {
   width: 100% !important;
   max-width: 100% !important;
 }
 
-:global .container .col {
+:global #route-identifier[data-route*='reference/api'] .container .col {
   width: 100% !important;
   max-width: 100% !important;
 }
 
-:global .container .col.col--3 {
+:global #route-identifier[data-route*='reference/api'] .container .col.col--3 {
   display: none;
 }

docs/src/theme/RoutedDocPage/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import type {Props} from '@theme/DocPage';
+import DocPage from '@theme/DocPage'
+
+export default function RoutedDocPage(props: Props): JSX.Element {
+  return <div id={"route-identifier"} data-route={props.location.pathname}><DocPage {...props}/></div>
+}

docs/src/theme/RoutedDocPage/styles.module.css

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+
+:root {
+  --doc-sidebar-width: 300px;
+  --doc-sidebar-hidden-width: 30px;
+}
+
+:global(.docs-wrapper) {
+  display: flex;
+}
+
+.docPage,
+.docMainContainer {
+  display: flex;
+  width: 100%;
+}
+
+@media (min-width: 997px) {
+  .docMainContainer {
+    flex-grow: 1;
+    max-width: calc(100% - var(--doc-sidebar-width));
+  }
+
+  .docMainContainerEnhanced {
+    max-width: calc(100% - var(--doc-sidebar-hidden-width));
+  }
+
+  .docSidebarContainer {
+    width: var(--doc-sidebar-width);
+    margin-top: calc(-1 * var(--ifm-navbar-height));
+    border-right: 1px solid var(--ifm-toc-border-color);
+    will-change: width;
+    transition: width var(--ifm-transition-fast) ease;
+    clip-path: inset(0);
+  }
+
+  .docSidebarContainerHidden {
+    width: var(--doc-sidebar-hidden-width);
+    cursor: pointer;
+  }
+
+  .collapsedDocSidebar {
+    position: sticky;
+    top: 0;
+    height: 100%;
+    max-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--ifm-transition-fast) ease;
+  }
+
+  .collapsedDocSidebar:hover,
+  .collapsedDocSidebar:focus {
+    background-color: var(--ifm-color-emphasis-200);
+  }
+
+  .expandSidebarButtonIcon {
+    transform: rotate(0);
+  }
+  html[dir='rtl'] .expandSidebarButtonIcon {
+    transform: rotate(180deg);
+  }
+
+  html[data-theme='dark'] .collapsedDocSidebar:hover,
+  html[data-theme='dark'] .collapsedDocSidebar:focus {
+    background-color: var(--collapse-button-bg-color-dark);
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}