3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-18 11:36:53 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): themed logo in footer (#3993)

Browse source 
* feat: attempt 1 at themedlogo in footer

* Add srcDark to website for temp debug

* typo fix

* Got it now! except for centering

* style: centered new themed image logo

* style: change ThemedImage styleing to center footer logo

* style: Change ThemeImage Style to initial

This was my mistake.

Removed temp `srcDark` footer logo
This commit is contained in:
Sean Campbell 2021-01-06 10:10:44 -05:00 • committed by GitHub
parent 8a9dfcf96c
commit 5dfa665281
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
View file

@ -12,6 +12,7 @@ import Link from '@docusaurus/Link';
import {useThemeConfig} from '@docusaurus/theme-common'; import {useThemeConfig} from '@docusaurus/theme-common';
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css'; import styles from './styles.module.css';
import ThemedImage from '@theme/ThemedImage';
function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) { function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
const toUrl = useBaseUrl(to); const toUrl = useBaseUrl(to);
@ -35,15 +36,18 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
); );
} }
const FooterLogo = ({url, alt}) => ( const FooterLogo = ({sources, alt}) => (
<img className="footer__logo" alt={alt} src={url} /> <ThemedImage className="footer__logo" alt={alt} sources={sources} />
); );
function Footer(): JSX.Element | null { function Footer(): JSX.Element | null {
const {footer} = useThemeConfig(); const {footer} = useThemeConfig();
const {copyright, links = [], logo = {}} = footer || {}; const {copyright, links = [], logo = {}} = footer || {};
const logoUrl = useBaseUrl(logo.src); const sources = {
light: useBaseUrl(logo.src),
dark: useBaseUrl(logo.srcDark || logo.src),
};
if (!footer) { if (!footer) {
return null; return null;
@ -91,7 +95,7 @@ function Footer(): JSX.Element | null {
)} )}
{(logo || copyright) && ( {(logo || copyright) && (
<div className="footer__bottom text--center"> <div className="footer__bottom text--center">
{logo && logo.src && ( {logo && (logo.src || logo.srcDark) && (
<div className="margin-bottom--sm"> <div className="margin-bottom--sm">
{logo.href ? ( {logo.href ? (
<a <a
@ -99,10 +103,10 @@ function Footer(): JSX.Element | null {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={styles.footerLogoLink}> className={styles.footerLogoLink}>
<FooterLogo alt={logo.alt} url={logoUrl} /> <FooterLogo alt={logo.alt} sources={sources} />
</a> </a>
) : ( ) : (
<FooterLogo alt={logo.alt} url={logoUrl} /> <FooterLogo alt={logo.alt} sources={sources} />
)} )}
</div> </div>
)} )}

4
packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css
View file

@ -3,9 +3,9 @@
} }
html[data-theme='light'] .themedImage--light { html[data-theme='light'] .themedImage--light {
display: block; display: initial;
} }
html[data-theme='dark'] .themedImage--dark { html[data-theme='dark'] .themedImage--dark {
display: block; display: initial;
} }

1
packages/docusaurus-theme-classic/src/validateThemeConfig.js
View file

@ -265,6 +265,7 @@ const ThemeConfigSchema = Joi.object({
logo: Joi.object({ logo: Joi.object({
alt: Joi.string().allow(''), alt: Joi.string().allow(''),
src: Joi.string(), src: Joi.string(),
srcDark: Joi.string(),
href: Joi.string(), href: Joi.string(),
}), }),
copyright: Joi.string(), copyright: Joi.string(),

1
packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
View file

@ -46,6 +46,7 @@ export type Footer = {
logo?: { logo?: {
alt?: string; alt?: string;
src?: string; src?: string;
srcDark?: string;
href?: string; href?: string;
}; };
copyright?: string; copyright?: string;