mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
Merge branch 'fix-footer' into implement-lsd
This commit is contained in:
Hossein Mehrabi
@@ -50,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
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@use './utils';
|
||||
@use './lsd';
|
||||
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
@@ -427,9 +428,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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
import React from 'react'
|
||||
import clsx from 'clsx'
|
||||
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',
|
||||
})}
|
||||
>
|
||||
<div className={clsx('grid', 'footer-grid')}>
|
||||
<div className={clsx('grid-item', 'w-6', styles.footerInfo)}>
|
||||
<Typography component="div" variant="body2">
|
||||
Copyright © 2023 Logos
|
||||
</Typography>
|
||||
<Typography component="div" variant="body2">
|
||||
Built with Docusaurus.
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={clsx('grid-item', 'w-1', 'desktop')} />
|
||||
<div className={clsx('grid-item', '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>
|
||||
</div>
|
||||
<div className={clsx('grid-item', 'w-1')} />
|
||||
<div className={clsx('grid-item', '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>
|
||||
</div>
|
||||
<div className={clsx('grid-item', 'w-4')} />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
.flexRow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 997px) {
|
||||
.section {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footerInfo {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.linkItem {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
@@ -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} />
|
||||
)
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
.footerLogoLink {
|
||||
opacity: 0.5;
|
||||
transition: opacity var(--ifm-transition-fast)
|
||||
var(--ifm-transition-timing-default);
|
||||
}
|
||||
|
||||
.footerLogoLink:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -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)
|
||||
Reference in New Issue
Block a user