docs: redesigned documentation (#2539)

* docs: redesigned navigation bar (#2478)

* docs: redesigned homepage (#2480)

* docs: redesigned homepage

* fixed link

* docs: redesigned notes (#2491)

* docs: Applied Typography redesign rules (#2516)

* changes to typography

* small changes and fixes

* docs: redesigned table of content (#2518)

* redesigning toc

* finalized table of content design

* docs: redesigned code blocks (#2519)

* docs: redesigned code blocks

* removed unused package

* docs: redesigned survey and content footer (#2522)

* fixes to inline code

* redesigned doc footer

* docs: redesigned footer (#2523)

* docs: changed dark mode colors (#2524)

* docs: redesigned sidebar (#2535)

* docs: redesigned search modal (#2537)

* docs: resolved loose ends (#2538)

* added spacing for tabs

* docs: added no-zoom class for deploy images

* fix to tooltip design for inline code

www/docs/src/theme/DocItem/Footer/index.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import Footer from '@theme-original/DocItem/Footer';
 import Feedback from '../../../components/Feedback';
+import { useDoc } from '@docusaurus/theme-common/internal';
 
 export default function FooterWrapper(props) {
+  const { metadata } = useDoc()
+
   return (
-    <div className='docusaurus-mt-lg'>
-      <Feedback />
-      <Footer {...props} />
-    </div>
+    <>
+      {!metadata.frontMatter?.hide_footer && (
+        <div className='docusaurus-mt-lg doc-footer'>
+          <Feedback />
+          <Footer {...props} />
+        </div>
+      )}
+    </>
   );
 }

www/docs/src/theme/DocItem/Layout/index.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import styles from './styles.module.css';
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({children}) {
+  const docTOC = useDocTOC();
+  return (
+    <div className="row markdown-row">
+      <div className={clsx('col', 'markdown-doc-wrapper', !docTOC.hidden && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col toc-wrapper">{docTOC.desktop}</div>}
+    </div>
+  );
+}

www/docs/src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,20 @@
+.docItemContainer {
+  margin-bottom: calc(var(--ifm-base-margin-vertical) * 3);
+}
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media screen and (min-width: 1441px) {
+  .docItemCol {
+    width: calc(10 / 12 * 100%);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .docItemCol {
+    width: calc(9 / 12 * 100%);
+  }
+}