Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(theme-classic): allow specifying width/height in logo #5770

Merged
merged 10 commits into from
Nov 1, 2021
Merged

feat(theme-classic): allow specifying width/height in logo #5770

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
99b3e4c
feat: changed the logo properties to allow width/height specification
cerkiewny Oct 22, 2021
26b265d
fixup! feat: changed the logo properties to allow width/height specif…
cerkiewny Oct 22, 2021
82beea9
fixup! feat: changed the logo properties to allow width/height specif…
cerkiewny Oct 25, 2021
128c6dc
Merge branch 'main' into feature/logo_size
Josh-Cena Nov 1, 2021
0a8a753
Rework: add fields to logo object
Josh-Cena Nov 1, 2021
01d7163
Fix
Josh-Cena Nov 1, 2021
f67a086
More fixes
Josh-Cena Nov 1, 2021
b1555bf
Wrong width!
Josh-Cena Nov 1, 2021
216bf24
No need for optional chaining
Josh-Cena Nov 1, 2021
55c68e3
Doc writeup
Josh-Cena Nov 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 28 additions & 5 deletions packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ describe('themeConfig', () => {
title: 'Docusaurus',
logo: {
alt: 'Docusaurus Logo',
src: 'img/docusaurus.svg',
srcDark: 'img/docusaurus_keytar.svg',
src: {uri: 'img/docusaurus.svg'},
srcDark: {uri: 'img/docusaurus_keytar.svg'},
},
items: [
{
Expand Down Expand Up @@ -86,7 +86,7 @@ describe('themeConfig', () => {
],
logo: {
alt: 'Facebook Open Source Logo',
src: 'img/oss_logo.png',
src: {uri: 'img/oss_logo.png'},
href: 'https://opensource.facebook.com',
},
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
Expand Down Expand Up @@ -311,7 +311,7 @@ describe('themeConfig', () => {
navbar: {
logo: {
alt: '',
src: '/arbitrary-logo.png',
src: {uri: '/arbitrary-logo.png'},
},
hideOnScroll: false,
},
Expand All @@ -330,7 +330,7 @@ describe('themeConfig', () => {
footer: {
logo: {
alt: '',
src: '/arbitrary-logo.png',
src: {uri: '/arbitrary-logo.png'},
},
},
};
Expand All @@ -345,6 +345,29 @@ describe('themeConfig', () => {
});
});

test('should allow width and height specification for logo ', () => {
const altTagConfig = {
navbar: {
logo: {
alt: '',
src: {uri: '/arbitrary-logo.png', width: '30px', height: '30%'},
srcDark: {
uri: '/arbitrary-dark-logo.png',
width: '20px',
height: '20%',
},
},
},
};
expect(testValidateThemeConfig(altTagConfig)).toEqual({
...DEFAULT_CONFIG,
navbar: {
...DEFAULT_CONFIG.navbar,
...altTagConfig.navbar,
},
});
});

test('should accept valid prism config', () => {
const prismConfig = {
prism: {
Expand Down
4 changes: 2 additions & 2 deletions packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,8 @@ function Footer(): JSX.Element | null {

const {copyright, links = [], logo = {}} = footer || {};
const sources = {
light: useBaseUrl(logo.src),
dark: useBaseUrl(logo.srcDark || logo.src),
light: useBaseUrl(logo?.src?.uri),
dark: useBaseUrl(logo?.srcDark?.uri || logo?.src?.uri),
};

if (!footer) {
Expand Down
22 changes: 18 additions & 4 deletions packages/docusaurus-theme-classic/src/theme/Logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,17 +19,31 @@ const Logo = (props: Props): JSX.Element => {
siteConfig: {title},
} = useDocusaurusContext();
const {
navbar: {title: navbarTitle, logo = {src: ''}},
navbar: {title: navbarTitle, logo = {src: {uri: ''}}},
} = useThemeConfig();

const {imageClassName, titleClassName, ...propsRest} = props;
const logoLink = useBaseUrl(logo.href || '/');
const sources = {
light: useBaseUrl(logo.src),
dark: useBaseUrl(logo.srcDark || logo.src),
light: useBaseUrl(logo.src.uri),
dark: useBaseUrl(logo.srcDark?.uri || logo.src.uri),
};
const widths = {
light: logo.src.width || '100%',
dark: logo.src.width || logo.src.width || '100%',
};

const heights = {
light: logo.src.height || '100%',
dark: logo.src.height || logo.src.height || '100%',
};
const themedImage = (
<ThemedImage sources={sources} alt={logo.alt || navbarTitle || title} />
<ThemedImage
sources={sources}
heights={heights}
widths={widths}
alt={logo.alt || navbarTitle || title}
/>
);

return (
Expand Down
4 changes: 3 additions & 1 deletion packages/docusaurus-theme-classic/src/theme/ThemedImage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import styles from './styles.module.css';
const ThemedImage = (props: Props): JSX.Element => {
const isBrowser = useIsBrowser();
const {isDarkTheme} = useThemeContext();
const {sources, className, alt = '', ...propsRest} = props;
const {sources, heights, widths, className, alt = '', ...propsRest} = props;

type SourceName = keyof Props['sources'];

Expand All @@ -36,6 +36,8 @@ const ThemedImage = (props: Props): JSX.Element => {
key={sourceName}
src={sources[sourceName]}
alt={alt}
width={widths && widths[sourceName]}
height={heights && heights[sourceName]}
className={clsx(
styles.themedImage,
styles[`themedImage--${sourceName}`],
Expand Down
8 changes: 8 additions & 0 deletions packages/docusaurus-theme-classic/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,6 +555,14 @@ declare module '@theme/ThemedImage' {
readonly light: string;
readonly dark: string;
};
readonly widths?: {
readonly light: number | string;
readonly dark: number | string;
};
readonly heights?: {
readonly light: number | string;
readonly dark: number | string;
};
}

const ThemedImage: (props: Props) => JSX.Element;
Expand Down
24 changes: 20 additions & 4 deletions packages/docusaurus-theme-classic/src/validateThemeConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,8 +288,16 @@ const ThemeConfigSchema = Joi.object({
title: Joi.string().allow('', null),
logo: Joi.object({
alt: Joi.string().allow(''),
src: Joi.string().required(),
srcDark: Joi.string(),
src: Joi.object({
uri: Joi.string().required(),
width: Joi.string(),
height: Joi.string(),
}),
srcDark: Joi.object({
uri: Joi.string().required(),
width: Joi.string(),
height: Joi.string(),
}),
href: Joi.string(),
target: Joi.string(),
}),
Expand All @@ -298,8 +306,16 @@ const ThemeConfigSchema = Joi.object({
style: Joi.string().equal('dark', 'light').default('light'),
logo: Joi.object({
alt: Joi.string().allow(''),
src: Joi.string(),
srcDark: Joi.string(),
src: Joi.object({
uri: Joi.string().required(),
width: Joi.string(),
height: Joi.string(),
}),
srcDark: Joi.object({
uri: Joi.string().required(),
width: Joi.string(),
height: Joi.string(),
}),
href: Joi.string(),
}),
copyright: Joi.string(),
Expand Down
14 changes: 10 additions & 4 deletions packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@ import {DeepPartial} from 'utility-types';

export type DocsVersionPersistence = 'localStorage' | 'none';

export type ImageSettings = {
uri: string;
width?: string | number;
height?: string | number;
};

// TODO improve types, use unions
export type NavbarItem = {
type?: string | undefined;
Expand All @@ -20,8 +26,8 @@ export type NavbarItem = {
} & Record<string, unknown>;

export type NavbarLogo = {
src: string;
srcDark?: string;
src: ImageSettings;
srcDark?: ImageSettings;
href?: string;
target?: string;
alt?: string;
Expand Down Expand Up @@ -78,8 +84,8 @@ export type Footer = {
style: 'light' | 'dark';
logo?: {
alt?: string;
src?: string;
srcDark?: string;
src?: ImageSettings;
srcDark?: ImageSettings;
href?: string;
};
copyright?: string;
Expand Down
4 changes: 2 additions & 2 deletions website/docs/api/docusaurus.config.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ module.exports = {
title: 'Site Title',
logo: {
alt: 'Site Logo',
src: 'img/logo.svg',
src: {uri: 'img/logo.svg'},
},
items: [
{
Expand Down Expand Up @@ -279,7 +279,7 @@ module.exports = {
],
logo: {
alt: 'Facebook Open Source Logo',
src: 'https://docusaurus.io/img/oss_logo.png',
src: {uri: 'https://docusaurus.io/img/oss_logo.png'},
},
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
},
Expand Down
12 changes: 9 additions & 3 deletions website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,8 +328,12 @@ const config = {
title: 'Docusaurus',
logo: {
alt: 'Docusaurus Logo',
src: 'img/docusaurus.svg',
srcDark: 'img/docusaurus_keytar.svg',
src: {
uri: 'img/docusaurus.svg'
},
srcDark: {
uri: 'img/docusaurus_keytar.svg'
},
},
items: [
{
Expand Down Expand Up @@ -482,7 +486,9 @@ const config = {
],
logo: {
alt: 'Facebook Open Source Logo',
src: 'img/oss_logo.png',
src: {
uri:'img/oss_logo.png'
},
href: 'https://opensource.facebook.com',
},
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
Expand Down