add footer to main page

src/css/custom.css

@@ -44,6 +44,10 @@
 
 html,
 body {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
@@ -71,18 +75,6 @@ h3 {
   max-width: 1140px !important;
 }
 
-@media screen and (min-width: 768px) {
-  .container {
-    margin-top: 1.5rem;
-    margin-left: 3rem;
-  }
-
-  footer>.container {
-    margin-top: 2rem;
-    margin-left: auto;
-  }
-}
-
 /* Hide breadcrumbs */
 .theme-doc-breadcrumbs {
   display: none;

src/theme/DocPage/Layout/Main/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+import Footer from '@theme/Footer';
+
+export default function DocPageLayoutMain({hiddenSidebarContainer, children}) {
+  const sidebar = useDocsSidebar();
+  return (
+    <main
+      className={clsx(
+        styles.docMainContainer,
+        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
+      )}>
+      <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
+        <div
+          className={clsx(
+            'container padding-top--md padding-bottom--lg',
+            styles.docItemWrapper,
+            hiddenSidebarContainer && styles.docItemWrapperEnhanced,
+          )}>
+          {children}
+        </div>
+        <Footer />
+      </div>
+    </main>
+  );
+}

src/theme/DocPage/Layout/Main/styles.module.css

@@ -0,0 +1,21 @@
+.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));
+  }
+
+  .docItemWrapperEnhanced {
+    max-width: calc(
+      var(--ifm-container-width) + var(--doc-sidebar-width)
+    ) !important;
+  }
+}

src/theme/Layout/Provider/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {composeProviders} from '@docusaurus/theme-common';
+import {
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  DocsPreferredVersionContextProvider,
+  ScrollControllerProvider,
+  NavbarProvider,
+  PluginHtmlClassNameProvider,
+} from '@docusaurus/theme-common/internal';
+const Provider = composeProviders([
+  ColorModeProvider,
+  AnnouncementBarProvider,
+  ScrollControllerProvider,
+  DocsPreferredVersionContextProvider,
+  PluginHtmlClassNameProvider,
+  NavbarProvider,
+]);
+export default function LayoutProvider({children}) {
+  return <Provider>{children}</Provider>;
+}

src/theme/Layout/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
+import SkipToContent from '@theme/SkipToContent';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import Navbar from '@theme/Navbar';
+import Footer from '@theme/Footer';
+import LayoutProvider from '@theme/Layout/Provider';
+import ErrorPageContent from '@theme/ErrorPageContent';
+import styles from './styles.module.css';
+export default function Layout(props) {
+  const {
+    children,
+    noFooter,
+    wrapperClassName,
+    // Not really layout-related, but kept for convenience/retro-compatibility
+    title,
+    description,
+  } = props;
+  useKeyboardNavigation();
+  return (
+    <LayoutProvider>
+      <PageMetadata title={title} description={description} />
+
+      <SkipToContent />
+
+      <AnnouncementBar />
+
+      <Navbar />
+
+      <div
+        id={SkipToContentFallbackId}
+        className={clsx(
+          ThemeClassNames.wrapper.main,
+          styles.mainWrapper,
+          wrapperClassName,
+        )}>
+        <ErrorBoundary fallback={(params) => <ErrorPageContent {...params} />}>
+          {children}
+        </ErrorBoundary>
+      </div>
+    </LayoutProvider>
+  );
+}

src/theme/Layout/styles.module.css

@@ -0,0 +1,21 @@
+html,
+body {
+  height: 100%;
+}
+
+.mainWrapper {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Docusaurus-specific utility class */
+:global(.docusaurus-mt-lg) {
+  margin-top: 3rem;
+}
+
+:global(#__docusaurus) {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}