Merge pull request #871 from push-protocol/864-the-footer-bottom

Fix Footer Position in 404-page

src/theme/NotFound/Content/index.tsx

@@ -12,16 +12,19 @@ import type { Props } from '@theme/NotFound/Content';
 import Heading from '@theme/Heading';
 import { Content, Section } from '@site/src/css/SharedStyling';
 import { useLocation } from '@docusaurus/router';
+import styled from 'styled-components';
 
 // Internal Components
 import Footer from '@site/src/segments/Footer';
 
 export default function NotFoundContent({ className }: Props): JSX.Element {
  const location = useLocation();
- const pathname = location.pathname;
+
+ // Determine if the pathname starts with '/docs'
+ const isDocsPage = location.pathname.startsWith('/docs');
 
  return (
- <>
+ <PageContainer isDocsPage={isDocsPage!}>
  <Section>
  <Content>
  <main className={clsx('container margin-vert--xl', className)}>
@@ -58,7 +61,13 @@ export default function NotFoundContent({ className }: Props): JSX.Element {
  </Content>
  </Section>
 
- {location.pathname.startsWith('/docs') && <Footer />}
- </>
+ {isDocsPage && <Footer />}
+ </PageContainer>
  );
 }
+
+const PageContainer = styled.div<{ isDocsPage?: boolean }>`
+ display: flex;
+ flex-direction: column;
+ ${({ isDocsPage }) => isDocsPage && 'min-height: 100vh;'};
+`;

src/theme/NotFound/index.tsx

@@ -5,19 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// External Components
 import React from 'react';
+
+// Internal Components
 import { translate } from '@docusaurus/Translate';
 import { PageMetadata } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import NotFoundContent from '@theme/NotFound/Content';
 import { useLocation } from '@docusaurus/router';
 
-// Internal Components
-import Footer from '@site/src/segments/Footer';
-
 export default function Index(): JSX.Element {
  const location = useLocation();
- const pathname = location.pathname;
 
  const title = translate({
  id: 'theme.NotFound.title',

src/theme/Root.js

@@ -4,6 +4,7 @@ import React from 'react';
 
 // External Components
 import i18nInitialize from '@site/src/utils/i18n';
+import styled from 'styled-components';
 
 // Internal Components
 import Footer from '@site/src/segments/Footer';
@@ -60,7 +61,7 @@ export default function Root({ children }) {
  }
 
  // check if location path exists
- function locationPathExists(pathname, condition, comingfrom = null) {
+ function locationPathExists(pathname, condition) {
  let result = false;
  pathname = pathname.toUpperCase();
 
@@ -98,11 +99,11 @@ export default function Root({ children }) {
  }
 
  return (
- <div className={returnAdditionalClasses(superimposedConditions)}>
+ <PageContainer className={returnAdditionalClasses(superimposedConditions)}>
  <ServerStyle from={children} />
 
  {/* Main react children */}
- {children}
+ <Content>{children}</Content>
 
  {excludeDefaultConfigAt('/BRB') &&
  excludeDefaultConfigAt('/DOCS') &&
@@ -112,6 +113,17 @@ export default function Root({ children }) {
  <CookieComponent />
  </>
  )}
- </div>
+ </PageContainer>
  );
 }
+
+const PageContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+`;
+
+// The main content should take up all remaining space
+const Content = styled.div`
+ flex: 1;
+`;