footer with column addition flexibility + responsive

docusaurus.config.js

@@ -116,7 +116,7 @@ const config = {
             ],
           },
           {
-            title: "Follow Us",
+            title: "Followww Us",
             items: [
               {
                 label: "Twitter",

src/css/custom.css

@@ -34,3 +34,75 @@
 .navbar__logo {
   margin-right: 0;
 }
+
+.footer {
+  padding: 2rem 2rem; /* Reduced horizontal padding */
+  background-color: var(--ifm-footer-background-color, #f9f9f9);
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center footer content horizontally */
+  box-sizing: border-box; /* Ensures consistent padding calculation */
+}
+
+.footer__links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adaptive grid */
+  gap: 2rem; /* Space between columns */
+  max-width: 1200px; /* Limit max width for better alignment */
+  width: 100%; /* Occupy full width of parent container */
+  margin: 0 auto; /* Center the content within the footer */
+  padding: 0; /* Remove additional padding from the grid container */
+}
+
+.footer__link-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center-align column content */
+}
+
+.footer__link-column h4 {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+}
+
+.footer__link-column ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.footer__link-column li {
+  margin-bottom: 0.5rem;
+}
+
+.footer__link-column a {
+  text-decoration: none;
+  color: var(--ifm-link-color, #12a588);
+}
+
+.footer__link-column a:hover {
+  text-decoration: underline;
+}
+
+.footer__copyright {
+  text-align: center;
+  margin-top: 2rem;
+  font-size: 0.9rem;
+  width: 100%; /* Stretch across the full width of the footer */
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .footer__links {
+    grid-template-columns: 1fr; /* Stack columns vertically */
+    gap: 1.5rem; /* Reduced gap */
+  }
+
+  .footer {
+    padding: 1.5rem; /* Adjust overall padding for mobile */
+  }
+
+  .footer__copyright {
+    font-size: 0.8rem;
+  }
+}

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,44 @@
+import React from "react";
+
+export default function Footer(props) {
+  const footerColumns = [
+    {
+      title: "Community",
+      links: [
+        { label: "Discord", href: "https://discord.gg/7QMraJUsQt" },
+        { label: "GitHub", href: "https://github.com/trypear/pearai-app" },
+      ],
+    },
+    {
+      title: "Follow Us",
+      links: [
+        { label: "Twitter", href: "https://x.com/trypearai" },
+        { label: "LinkedIn", href: "https://linkedin.com/company/trypearai" },
+      ],
+    }
+  ];
+
+  return (
+    <footer className="footer">
+      <div className="footer__links">
+        {footerColumns.map((column, index) => (
+          <div key={index} className="footer__link-column">
+            <h4>{column.title}</h4>
+            <ul>
+              {column.links.map((link, linkIndex) => (
+                <li key={linkIndex}>
+                  <a href={link.href} target="_blank" rel="noopener noreferrer">
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      <div className="footer__copyright">
+        Copyright © {new Date().getFullYear()} PearAI Dev, Inc.
+      </div>
+    </footer>
+  );
+}