fix: remove hardcoded footer links and ejected components, apply styles in the custom.scss file

packages/docusaurus-playground/docusaurus.config.js

@@ -35,12 +35,14 @@ const config = {
             customCss: [require.resolve('./src/css/custom.scss')],
           },
         },
-        versions: {
-          current: {
-            label: 'current',
+        docs: {
+          versions: {
+            current: {
+              label: 'current',
+            },
           },
+          lastVersion: 'current',
         },
-        lastVersion: 'current',
       }),
     ],
   ],
@@ -48,7 +50,93 @@ const config = {
 
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
-    ({}),
+    ({
+      footer: {
+        copyright: 'Copyright @2023 Logos <br/> Built with Docusaurus.',
+        links: [
+          {
+            title: 'Learn',
+            items: [
+              {
+                href: '/',
+                label: 'Introduction',
+              },
+              {
+                href: '/',
+                label: 'Installation',
+              },
+              {
+                href: '/',
+                label: 'Migrate from v1 to v2',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                href: '/',
+                label: 'Blog',
+              },
+              {
+                href: '/',
+                label: 'Changelog',
+              },
+              {
+                href: '/',
+                label: 'Github',
+              },
+              {
+                href: '/',
+                label: 'Twitter',
+              },
+            ],
+          },
+          {
+            title: 'Community',
+            items: [
+              {
+                href: '/',
+                label: 'Stack Overflow',
+              },
+              {
+                href: '/',
+                label: 'Feature Requests',
+              },
+              {
+                href: '/',
+                label: 'Discord',
+              },
+              {
+                href: '/',
+                label: 'Help',
+              },
+            ],
+          },
+          {
+            title: 'Legal',
+            items: [
+              {
+                href: '/',
+                label: 'Privacy',
+              },
+              {
+                href: '/',
+                label: 'Terms',
+              },
+              {
+                href: '/',
+                label: 'Data policy',
+              },
+              {
+                href: '/',
+                label: 'Cookie policy',
+              },
+            ],
+          },
+        ],
+      },
+    }),
 }
 
 module.exports = config

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -1,4 +1,5 @@
 @use './utils';
+@use './lsd';
 
 /**
  * Any CSS included here will be global. The classic template
@@ -319,9 +320,79 @@ small {
 
 .footer {
   border-top: 1px solid rgb(var(--lsd-text-primary));
-  width: 100vw;
-  margin-left: -32px;
-  padding: 24px 32px;
+  margin-bottom: 40px;
+
+  > div {
+    max-width: unset;
+    padding: unset;
+    margin: unset;
+    width: 100% !important;
+
+    display: grid;
+    grid-template-columns: repeat(24, 1fr);
+    gap: 1rem;
+  }
+}
+
+.footer__title {
+  @include lsd.typography('label1');
+  margin-bottom: 4px;
+}
+
+.footer__links {
+  margin-bottom: 0;
+  grid-column: 8 / 25;
+  grid-row: 1 / 1;
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem 1rem;
+}
+
+.footer__col {
+  grid-template-columns: span 1;
+}
+
+.footer__items {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.footer__item {
+  display: inline-block;
+
+  &,
+  a {
+    @include lsd.typography('label1');
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  &:not(:last-child) {
+    &::after {
+      content: '•';
+      margin-left: 8px;
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+}
+
+.footer__bottom {
+  text-align: unset;
+  grid-column: 1 / 4;
+  grid-row: 1 / 1;
+
+  & > div:first-of-type {
+    display: none;
+  }
+}
+
+.footer__copyright {
+  @include lsd.typography('body2');
 }
 
 .footer__logo {

packages/logos-docusaurus-theme/src/client/css/lsd.scss

@@ -0,0 +1,5 @@
+@mixin typography($variant) {
+  font-size: var(--lsd-#{$variant}-fontSize);
+  line-height: var(--lsd-#{$variant}-lineHeight);
+  font-family: var(--lsd-typography-generic-font-family);
+}

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
-import { Typography } from '@acid-info/lsd-react'
-import styles from './style.module.css'
-
-export default function FooterLayout({ style, copyright }) {
-  return (
-    <footer
-      className={clsx('footer', {
-        'footer--dark': style === 'dark',
-      })}
-    >
-      <Grid>
-        <GridItem className="w-6">
-          <Typography component="div" variant="body2">
-            Copyright © 2023 Logos
-          </Typography>
-          <Typography component="div" variant="body2">
-            Built with Docusaurus.
-          </Typography>
-        </GridItem>
-        <GridItem className="w-1" />
-        <GridItem className="w-6">
-          <div className={styles.section}>
-            <div>
-              <Typography component="div" variant="body2">
-                Learn
-              </Typography>
-              <div className={styles.flexRow}>
-                <Typography component="a" href="/" variant="body2">
-                  Introduction
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Installation
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Migrate from v1 to v2
-                </Typography>
-              </div>
-            </div>
-            <div>
-              <Typography component="div" variant="body2">
-                Community
-              </Typography>
-              <div className={styles.flexRow}>
-                <Typography component="a" href="/" variant="body2">
-                  Stack Overflow
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Feature Requests
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Discord
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Help
-                </Typography>
-              </div>
-            </div>
-          </div>
-        </GridItem>
-        <GridItem className="w-1" />
-        <GridItem className="w-6">
-          <div className={styles.section}>
-            <div>
-              <Typography component="div" variant="body2">
-                More
-              </Typography>
-              <div className={styles.flexRow}>
-                <Typography component="a" href="/" variant="body2">
-                  Blog
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Changelog
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Github
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Twitter
-                </Typography>
-              </div>
-            </div>
-            <div>
-              <Typography component="div" variant="body2">
-                Legal
-              </Typography>
-              <div className={styles.flexRow}>
-                <Typography component="a" href="/" variant="body2">
-                  Privacy
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Terms
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Data policy
-                </Typography>
-                <Typography component="a" href="/" variant="body2">
-                  Cookie policy
-                </Typography>
-              </div>
-            </div>
-          </div>
-        </GridItem>
-        <GridItem className="w-4" />
-      </Grid>
-    </footer>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css

@@ -1,25 +0,0 @@
-.flexRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-}
-
-.flexRow a:not(:last-child) {
-  &:after {
-    content: '•';
-    margin-left: 8px;
-    text-decoration: none;
-    display: inline-block;
-  }
-}
-
-.flexRow a {
-  text-decoration: underline;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/index.tsx

@@ -1,30 +0,0 @@
-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'
-import styles from './style.module.scss'
-import clsx from 'clsx'
-
-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={clsx('footer__link-item', styles.linkItem)}
-      {...(href
-        ? {
-            href: prependBaseUrlToHref ? normalizedHref : href,
-          }
-        : {
-            to: toUrl,
-          })}
-      {...props}
-    >
-      {label}
-      {href && !isInternalUrl(href) && <IconExternalLink />}
-    </Link>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/style.module.scss

@@ -1,3 +0,0 @@
-.linkItem {
-  text-decoration: underline;
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/Links/MultiColumn/index.tsx

@@ -1,37 +0,0 @@
-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>
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/Links/index.tsx

@@ -1,11 +0,0 @@
-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} />
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/index.tsx

@@ -1,36 +0,0 @@
-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} />
-  )
-}

packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/styles.module.css

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

packages/logos-docusaurus-theme/src/client/theme/Footer/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { useThemeConfig } from '@docusaurus/theme-common'
-import FooterLinks from '@theme/Footer/Links'
-import FooterLogo from '@theme/Footer/Logo'
-import FooterCopyright from '@theme/Footer/Copyright'
-import FooterLayout from '@theme/Footer/Layout'
-function Footer() {
-  const { footer } = useThemeConfig()
-  if (!footer) {
-    return null
-  }
-  const { copyright, links, logo, style } = footer
-  return (
-    <FooterLayout
-      style={style}
-      links={links && links.length > 0 && <FooterLinks links={links} />}
-      logo={logo && <FooterLogo logo={logo} />}
-      copyright={copyright && <FooterCopyright copyright={copyright} />}
-    />
-  )
-}
-export default React.memo(Footer)