From 40947d3799ec9ee6c3a8c5e222935cb6907e9ec5 Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Mon, 29 May 2023 19:26:20 +0330 Subject: [PATCH] fix: remove hardcoded footer links and ejected components, apply styles in the custom.scss file --- .../docusaurus.config.js | 98 +++++++++++++++- .../src/client/css/custom.scss | 77 +++++++++++- .../src/client/css/lsd.scss | 5 + .../src/client/theme/Footer/Layout/index.tsx | 110 ------------------ .../theme/Footer/Layout/style.module.css | 25 ---- .../client/theme/Footer/LinkItem/index.tsx | 30 ----- .../theme/Footer/LinkItem/style.module.scss | 3 - .../theme/Footer/Links/MultiColumn/index.tsx | 37 ------ .../src/client/theme/Footer/Links/index.tsx | 11 -- .../src/client/theme/Footer/Logo/index.tsx | 36 ------ .../theme/Footer/Logo/styles.module.css | 9 -- .../src/client/theme/Footer/index.tsx | 22 ---- 12 files changed, 172 insertions(+), 291 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/css/lsd.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/style.module.scss delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Links/MultiColumn/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Links/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/index.tsx delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/styles.module.css delete mode 100644 packages/logos-docusaurus-theme/src/client/theme/Footer/index.tsx diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js index 0793a48..57d7104 100644 --- a/packages/docusaurus-playground/docusaurus.config.js +++ b/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
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 diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index b5bc45d..41791b8 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/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 { diff --git a/packages/logos-docusaurus-theme/src/client/css/lsd.scss b/packages/logos-docusaurus-theme/src/client/css/lsd.scss new file mode 100644 index 0000000..2e95d5b --- /dev/null +++ b/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); +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx deleted file mode 100644 index e79829a..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx +++ /dev/null @@ -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 ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css deleted file mode 100644 index 6f82a7b..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css +++ /dev/null @@ -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; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/index.tsx deleted file mode 100644 index 58e5aed..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/index.tsx +++ /dev/null @@ -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 ( - - {label} - {href && !isInternalUrl(href) && } - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/style.module.scss b/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/style.module.scss deleted file mode 100644 index 9351d22..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/LinkItem/style.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.linkItem { - text-decoration: underline; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/MultiColumn/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/MultiColumn/index.tsx deleted file mode 100644 index bf8b308..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/MultiColumn/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import LinkItem from '@theme/Footer/LinkItem' -function ColumnLinkItem({ item }) { - return item.html ? ( -
  • - ) : ( -
  • - -
    • - ) -} -function Column({ column }) { - return ( -
    -
    {column.title}
    -
      - {column.items.map((item, i) => ( - - ))} -
    -
    - ) -} -export default function FooterLinksMultiColumn({ columns }) { - return ( -
    - {columns.map((column, i) => ( - - ))} -
    - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/index.tsx deleted file mode 100644 index 3680596..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Links/index.tsx +++ /dev/null @@ -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) ? ( - - ) : ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/index.tsx deleted file mode 100644 index 9228cb0..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/index.tsx +++ /dev/null @@ -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 ( - - ) -} -export default function FooterLogo({ logo }) { - return logo.href ? ( - - - - ) : ( - - ) -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/styles.module.css deleted file mode 100644 index faf0e60..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Logo/styles.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.footerLogoLink { - opacity: 0.5; - transition: opacity var(--ifm-transition-fast) - var(--ifm-transition-timing-default); -} - -.footerLogoLink:hover { - opacity: 1; -} diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/index.tsx deleted file mode 100644 index 4586803..0000000 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/index.tsx +++ /dev/null @@ -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 ( - 0 && } - logo={logo && } - copyright={copyright && } - /> - ) -} -export default React.memo(Footer)