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 all 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
21 changes: 21 additions & 0 deletions packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js
View file
Open in desktop
Expand Up @@ -345,6 +345,27 @@ describe('themeConfig', () => {
});
});

test('should allow width and height specification for logo ', () => {
const altTagConfig = {
navbar: {
logo: {
alt: '',
src: '/arbitrary-logo.png',
srcDark: '/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
19 changes: 16 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/Footer/index.tsx
View file
Open in desktop
Expand Up @@ -52,8 +52,16 @@ function FooterLink({
const FooterLogo = ({
sources,
alt,
}: Pick<ThemedImageProps, 'sources' | 'alt'>) => (
<ThemedImage className="footer__logo" alt={alt} sources={sources} />
width,
height,
}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
<ThemedImage
className="footer__logo"
alt={alt}
sources={sources}
width={width}
height={height}
/>
);

function Footer(): JSX.Element | null {
Expand Down Expand Up @@ -115,7 +123,12 @@ function Footer(): JSX.Element | null {
<div className="margin-bottom--sm">
{logo.href ? (
<Link href={logo.href} className={styles.footerLogoLink}>
<FooterLogo alt={logo.alt} sources={sources} />
<FooterLogo
alt={logo.alt}
sources={sources}
width={logo.width}
height={logo.height}
/>
</Link>
) : (
<FooterLogo alt={logo.alt} sources={sources} />
Expand Down
7 changes: 6 additions & 1 deletion packages/docusaurus-theme-classic/src/theme/Logo/index.tsx
View file
Open in desktop
Expand Up @@ -29,7 +29,12 @@ const Logo = (props: Props): JSX.Element => {
dark: useBaseUrl(logo.srcDark || logo.src),
};
const themedImage = (
<ThemedImage sources={sources} alt={logo.alt || navbarTitle || title} />
<ThemedImage
sources={sources}
height={logo.height}
width={logo.width}
alt={logo.alt || navbarTitle || title}
/>
);

return (
Expand Down
5 changes: 5 additions & 0 deletions packages/docusaurus-theme-classic/src/validateThemeConfig.ts
View file
Open in desktop
Expand Up @@ -290,6 +290,8 @@ const ThemeConfigSchema = Joi.object({
alt: Joi.string().allow(''),
src: Joi.string().required(),
srcDark: Joi.string(),
width: Joi.alternatives().try(Joi.string(), Joi.number()),
height: Joi.alternatives().try(Joi.string(), Joi.number()),
href: Joi.string(),
target: Joi.string(),
}),
Expand All @@ -300,6 +302,9 @@ const ThemeConfigSchema = Joi.object({
alt: Joi.string().allow(''),
src: Joi.string(),
srcDark: Joi.string(),
// TODO infer this from reading the image
width: Joi.alternatives().try(Joi.string(), Joi.number()),
height: Joi.alternatives().try(Joi.string(), Joi.number()),
href: Joi.string(),
}),
copyright: Joi.string(),
Expand Down
4 changes: 4 additions & 0 deletions packages/docusaurus-theme-common/src/utils/useThemeConfig.ts
View file
Open in desktop
Expand Up @@ -22,6 +22,8 @@ export type NavbarItem = {
export type NavbarLogo = {
src: string;
srcDark?: string;
width?: string | number;
height?: string | number;
href?: string;
target?: string;
alt?: string;
Expand Down Expand Up @@ -80,6 +82,8 @@ export type Footer = {
alt?: string;
src?: string;
srcDark?: string;
width?: string | number;
height?: string | number;
href?: string;
};
copyright?: string;
Expand Down
4 changes: 4 additions & 0 deletions website/docs/api/docusaurus.config.js.md
View file
Open in desktop
Expand Up @@ -264,6 +264,8 @@ module.exports = {
logo: {
alt: 'Site Logo',
src: 'img/logo.svg',
width: 32,
height: 32,
},
items: [
{
Expand Down Expand Up @@ -292,6 +294,8 @@ module.exports = {
logo: {
alt: 'Facebook Open Source Logo',
src: 'https://docusaurus.io/img/oss_logo.png',
width: 160,
height: 51,
},
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
},
Expand Down
6 changes: 6 additions & 0 deletions website/docs/api/themes/theme-configuration.md
View file
Open in desktop
Expand Up @@ -187,6 +187,8 @@ Accepted fields:
| `src` | `string` | **Required** | URL to the logo image. Base URL is appended by default. |
| `srcDark` | `string` | `logo.src` | An alternative image URL to use in dark mode. |
| `href` | `string` | `siteConfig.baseUrl` | Link to navigate to when the logo is clicked. |
| `width` | <code>string \| number</code> | `undefined` | Specifies the `width` attribute. |
| `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. |
| `target` | `string` | Calculated based on `href` (external links will open in a new tab, all others in the current one). | The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise. |

</small>
Expand All @@ -205,6 +207,8 @@ module.exports = {
srcDark: 'img/logo_dark.svg',
href: 'https://docusaurus.io/',
target: '_self',
width: 32,
height: 32,
},
// highlight-end
},
Expand Down Expand Up @@ -679,6 +683,8 @@ module.exports = {
alt: 'Facebook Open Source Logo',
src: 'img/oss_logo.png',
href: 'https://opensource.facebook.com',
width: 160,
height: 51,
},
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
Expand Down
4 changes: 4 additions & 0 deletions website/docusaurus.config.js
View file
Open in desktop
Expand Up @@ -334,6 +334,8 @@ const config = {
alt: 'Docusaurus Logo',
src: 'img/docusaurus.svg',
srcDark: 'img/docusaurus_keytar.svg',
width: 32,
height: 32,
},
items: [
{
Expand Down Expand Up @@ -487,6 +489,8 @@ const config = {
logo: {
alt: 'Facebook Open Source Logo',
src: 'img/oss_logo.png',
width: 160,
height: 51,
href: 'https://opensource.facebook.com',
},
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc. Built with Docusaurus.`,
Expand Down