Fixes for the footer of the documentation site and other footer specific style changes

src/css/custom.css

@@ -34,3 +34,75 @@
 .navbar__logo {
   margin-right: 0;
 }
+/* Footer container: Add padding to the entire footer */
+.footer {
+  padding: 2rem 4rem; /* Add padding to the top/bottom and left/right */
+}
+
+/* Footer links container: Add padding between columns and edges */
+.footer__links {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem; /* Space between the columns */
+  padding: 0 1rem; /* Horizontal padding inside the footer links container */
+}
+
+/* Footer link columns */
+.footer__link-column {
+  flex: 1;
+  padding: 0 1rem; /* Horizontal padding for each column */
+}
+
+/* Align 'Follow Us' column to the right */
+.footer__link-column:nth-child(2) {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* Style the footer links */
+.footer__link-column ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.footer__link-column li {
+  margin-bottom: 0.5rem;
+}
+
+/* Style for the footer copyright */
+.footer__copyright {
+  text-align: center;
+  padding-top: 1rem;
+  margin-top: 2rem; /* Space between copyright and links */
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  /* Make the footer sections stack vertically */
+  .footer__links {
+    flex-direction: column; /* Stack columns vertically */
+    align-items: flex-start; /* Align them to the left */
+    gap: 1rem; /* Reduced gap between sections */
+  }
+
+  /* Remove any extra padding from individual columns on mobile */
+  .footer__link-column {
+    padding: 0; /* Remove padding for better mobile layout */
+  }
+
+  /* Ensure the 'Follow Us' section aligns to the left on small screens */
+  .footer__link-column:nth-child(2) {
+    margin-left: 0;
+    text-align: left;
+  }
+
+  /* Adjust the overall padding of the footer on mobile */
+  .footer {
+    padding: 1.5rem 2rem; /* Reduced padding for mobile */
+  }
+
+  /* Make the footer copyright more readable on smaller screens */
+  .footer__copyright {
+    font-size: 0.9rem; /* Slightly smaller text size for copyright */
+  }
+}

src/theme/Footer/Copyright/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function FooterCopyright({copyright}) {
+  return (
+    <div
+      className="footer__copyright"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: copyright}}
+    />
+  );
+}

src/theme/Footer/Layout/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import clsx from 'clsx';
+export default function FooterLayout({style, links, logo, copyright}) {
+  return (
+    <footer
+      className={clsx('footer', {
+        'footer--dark': style === 'dark',
+      })}>
+      <div className="container container-fluid">
+        {links}
+        {(logo || copyright) && (
+          <div className="footer__bottom text--center">
+            {logo && <div className="margin-bottom--sm">{logo}</div>}
+            {copyright}
+          </div>
+        )}
+      </div>
+    </footer>
+  );
+}

src/theme/Footer/LinkItem/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+  const {to, href, label, prependBaseUrlToHref, ...props} = item;
+  const toUrl = useBaseUrl(to);
+  const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+  return (
+    <Link
+      className="footer__link-item"
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            to: toUrl,
+          })}
+      {...props}>
+      {label}
+      {href && !isInternalUrl(href) && <IconExternalLink />}
+    </Link>
+  );
+}

src/theme/Footer/Links/MultiColumn/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+  return item.html ? (
+    <li
+      className="footer__item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <li key={item.href ?? item.to} className="footer__item">
+      <LinkItem item={item} />
+    </li>
+  );
+}
+function Column({column}) {
+  return (
+    <div className="col footer__col">
+      <div className="footer__title">{column.title}</div>
+      <ul className="footer__items clean-list">
+        {column.items.map((item, i) => (
+          <ColumnLinkItem key={i} item={item} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+export default function FooterLinksMultiColumn({columns}) {
+  return (
+    <div className="row footer__links">
+      {columns.map((column, i) => (
+        <Column key={i} column={column} />
+      ))}
+    </div>
+  );
+}

src/theme/Footer/Links/Simple/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+  return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+  return item.html ? (
+    <span
+      className="footer__link-item"
+      // Developer provided the HTML, so assume it's safe.
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{__html: item.html}}
+    />
+  ) : (
+    <LinkItem item={item} />
+  );
+}
+export default function FooterLinksSimple({links}) {
+  return (
+    <div className="footer__links text--center">
+      <div className="footer__links">
+        {links.map((item, i) => (
+          <React.Fragment key={i}>
+            <SimpleLinkItem item={item} />
+            {links.length !== i + 1 && <Separator />}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}

src/theme/Footer/Links/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+  return isMultiColumnFooterLinks(links) ? (
+    <FooterLinksMultiColumn columns={links} />
+  ) : (
+    <FooterLinksSimple links={links} />
+  );
+}

src/theme/Footer/Logo/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  return (
+    <ThemedImage
+      className={clsx('footer__logo', logo.className)}
+      alt={logo.alt}
+      sources={sources}
+      width={logo.width}
+      height={logo.height}
+      style={logo.style}
+    />
+  );
+}
+export default function FooterLogo({logo}) {
+  return logo.href ? (
+    <Link
+      href={logo.href}
+      className={styles.footerLogoLink}
+      target={logo.target}>
+      <LogoImage logo={logo} />
+    </Link>
+  ) : (
+    <LogoImage logo={logo} />
+  );
+}

src/theme/Footer/Logo/styles.module.css

@@ -0,0 +1,9 @@
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}

src/theme/Footer/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default function Footer(props) {
+  return (
+    <footer className="footer">
+      <div className="footer__links">
+        <div className="footer__link-column">
+          <h4>Community</h4>
+          <ul>
+            <li>
+              <a href="https://discord.gg/7QMraJUsQt">Discord</a>
+            </li>
+            <li>
+              <a href="https://github.com/trypear/pearai-app">GitHub</a>
+            </li>
+          </ul>
+        </div>
+        <div className="footer__link-column">
+          <h4>Follow Us</h4>
+          <ul>
+            <li>
+              <a href="https://x.com/trypearai">Twitter</a>
+            </li>
+            <li>
+              <a href="https://linkedin.com/company/trypearai">LinkedIn</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="footer__copyright">
+        Copyright © {new Date().getFullYear()} PearAI Dev, Inc.
+      </div>
+    </footer>
+  );
+}