@docusaurus/theme-classic 0.0.0-4138 → 0.0.0-4151
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/__tests__/validateThemeConfig.test.js +21 -0
- package/lib/theme/Footer/index.js +5 -3
- package/lib/theme/Logo/index.js +1 -1
- package/lib/validateThemeConfig.js +5 -0
- package/lib-next/__tests__/validateThemeConfig.test.js +21 -0
- package/lib-next/theme/Footer/index.js +14 -3
- package/lib-next/theme/Logo/index.js +6 -1
- package/lib-next/validateThemeConfig.js +5 -0
- package/package.json +12 -12
- package/src/__tests__/validateThemeConfig.test.js +21 -0
- package/src/theme/Footer/index.tsx +16 -3
- package/src/theme/Logo/index.tsx +6 -1
- package/src/validateThemeConfig.ts +5 -0
|
@@ -345,6 +345,27 @@ describe('themeConfig', () => {
|
|
|
345
345
|
});
|
|
346
346
|
});
|
|
347
347
|
|
|
348
|
+
test('should allow width and height specification for logo ', () => {
|
|
349
|
+
const altTagConfig = {
|
|
350
|
+
navbar: {
|
|
351
|
+
logo: {
|
|
352
|
+
alt: '',
|
|
353
|
+
src: '/arbitrary-logo.png',
|
|
354
|
+
srcDark: '/arbitrary-dark-logo.png',
|
|
355
|
+
width: '20px',
|
|
356
|
+
height: '20%',
|
|
357
|
+
},
|
|
358
|
+
},
|
|
359
|
+
};
|
|
360
|
+
expect(testValidateThemeConfig(altTagConfig)).toEqual({
|
|
361
|
+
...DEFAULT_CONFIG,
|
|
362
|
+
navbar: {
|
|
363
|
+
...DEFAULT_CONFIG.navbar,
|
|
364
|
+
...altTagConfig.navbar,
|
|
365
|
+
},
|
|
366
|
+
});
|
|
367
|
+
});
|
|
368
|
+
|
|
348
369
|
test('should accept valid prism config', () => {
|
|
349
370
|
const prismConfig = {
|
|
350
371
|
prism: {
|
|
@@ -56,8 +56,10 @@ function FooterLink({
|
|
|
56
56
|
|
|
57
57
|
const FooterLogo = ({
|
|
58
58
|
sources,
|
|
59
|
-
alt
|
|
60
|
-
|
|
59
|
+
alt,
|
|
60
|
+
width,
|
|
61
|
+
height
|
|
62
|
+
}) => <_ThemedImage.default className="footer__logo" alt={alt} sources={sources} width={width} height={height} />;
|
|
61
63
|
|
|
62
64
|
function Footer() {
|
|
63
65
|
const {
|
|
@@ -98,7 +100,7 @@ function Footer() {
|
|
|
98
100
|
{(logo || copyright) && <div className="footer__bottom text--center">
|
|
99
101
|
{logo && (logo.src || logo.srcDark) && <div className="margin-bottom--sm">
|
|
100
102
|
{logo.href ? <_Link.default href={logo.href} className={_stylesModule.default.footerLogoLink}>
|
|
101
|
-
<FooterLogo alt={logo.alt} sources={sources} />
|
|
103
|
+
<FooterLogo alt={logo.alt} sources={sources} width={logo.width} height={logo.height} />
|
|
102
104
|
</_Link.default> : <FooterLogo alt={logo.alt} sources={sources} />}
|
|
103
105
|
</div>}
|
|
104
106
|
{copyright ? <div className="footer__copyright" // Developer provided the HTML, so assume it's safe.
|
package/lib/theme/Logo/index.js
CHANGED
|
@@ -49,7 +49,7 @@ const Logo = props => {
|
|
|
49
49
|
light: (0, _useBaseUrl.default)(logo.src),
|
|
50
50
|
dark: (0, _useBaseUrl.default)(logo.srcDark || logo.src)
|
|
51
51
|
};
|
|
52
|
-
const themedImage = <_ThemedImage.default sources={sources} alt={logo.alt || navbarTitle || title} />;
|
|
52
|
+
const themedImage = <_ThemedImage.default sources={sources} height={logo.height} width={logo.width} alt={logo.alt || navbarTitle || title} />;
|
|
53
53
|
return <_Link.default to={logoLink} {...propsRest} {...logo.target && {
|
|
54
54
|
target: logo.target
|
|
55
55
|
}}>
|
|
@@ -239,6 +239,8 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
|
|
|
239
239
|
alt: _utilsValidation.Joi.string().allow(''),
|
|
240
240
|
src: _utilsValidation.Joi.string().required(),
|
|
241
241
|
srcDark: _utilsValidation.Joi.string(),
|
|
242
|
+
width: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),
|
|
243
|
+
height: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),
|
|
242
244
|
href: _utilsValidation.Joi.string(),
|
|
243
245
|
target: _utilsValidation.Joi.string()
|
|
244
246
|
})
|
|
@@ -249,6 +251,9 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
|
|
|
249
251
|
alt: _utilsValidation.Joi.string().allow(''),
|
|
250
252
|
src: _utilsValidation.Joi.string(),
|
|
251
253
|
srcDark: _utilsValidation.Joi.string(),
|
|
254
|
+
// TODO infer this from reading the image
|
|
255
|
+
width: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),
|
|
256
|
+
height: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),
|
|
252
257
|
href: _utilsValidation.Joi.string()
|
|
253
258
|
}),
|
|
254
259
|
copyright: _utilsValidation.Joi.string(),
|
|
@@ -345,6 +345,27 @@ describe('themeConfig', () => {
|
|
|
345
345
|
});
|
|
346
346
|
});
|
|
347
347
|
|
|
348
|
+
test('should allow width and height specification for logo ', () => {
|
|
349
|
+
const altTagConfig = {
|
|
350
|
+
navbar: {
|
|
351
|
+
logo: {
|
|
352
|
+
alt: '',
|
|
353
|
+
src: '/arbitrary-logo.png',
|
|
354
|
+
srcDark: '/arbitrary-dark-logo.png',
|
|
355
|
+
width: '20px',
|
|
356
|
+
height: '20%',
|
|
357
|
+
},
|
|
358
|
+
},
|
|
359
|
+
};
|
|
360
|
+
expect(testValidateThemeConfig(altTagConfig)).toEqual({
|
|
361
|
+
...DEFAULT_CONFIG,
|
|
362
|
+
navbar: {
|
|
363
|
+
...DEFAULT_CONFIG.navbar,
|
|
364
|
+
...altTagConfig.navbar,
|
|
365
|
+
},
|
|
366
|
+
});
|
|
367
|
+
});
|
|
368
|
+
|
|
348
369
|
test('should accept valid prism config', () => {
|
|
349
370
|
const prismConfig = {
|
|
350
371
|
prism: {
|
|
@@ -42,8 +42,14 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
|
|
|
42
42
|
);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
const FooterLogo = ({sources, alt}) => (
|
|
46
|
-
<ThemedImage
|
|
45
|
+
const FooterLogo = ({sources, alt, width, height}) => (
|
|
46
|
+
<ThemedImage
|
|
47
|
+
className="footer__logo"
|
|
48
|
+
alt={alt}
|
|
49
|
+
sources={sources}
|
|
50
|
+
width={width}
|
|
51
|
+
height={height}
|
|
52
|
+
/>
|
|
47
53
|
);
|
|
48
54
|
|
|
49
55
|
function Footer() {
|
|
@@ -103,7 +109,12 @@ function Footer() {
|
|
|
103
109
|
<div className="margin-bottom--sm">
|
|
104
110
|
{logo.href ? (
|
|
105
111
|
<Link href={logo.href} className={styles.footerLogoLink}>
|
|
106
|
-
<FooterLogo
|
|
112
|
+
<FooterLogo
|
|
113
|
+
alt={logo.alt}
|
|
114
|
+
sources={sources}
|
|
115
|
+
width={logo.width}
|
|
116
|
+
height={logo.height}
|
|
117
|
+
/>
|
|
107
118
|
</Link>
|
|
108
119
|
) : (
|
|
109
120
|
<FooterLogo alt={logo.alt} sources={sources} />
|
|
@@ -30,7 +30,12 @@ const Logo = (props) => {
|
|
|
30
30
|
dark: useBaseUrl(logo.srcDark || logo.src),
|
|
31
31
|
};
|
|
32
32
|
const themedImage = (
|
|
33
|
-
<ThemedImage
|
|
33
|
+
<ThemedImage
|
|
34
|
+
sources={sources}
|
|
35
|
+
height={logo.height}
|
|
36
|
+
width={logo.width}
|
|
37
|
+
alt={logo.alt || navbarTitle || title}
|
|
38
|
+
/>
|
|
34
39
|
);
|
|
35
40
|
return (
|
|
36
41
|
<Link
|
|
@@ -268,6 +268,8 @@ const ThemeConfigSchema = Joi.object({
|
|
|
268
268
|
alt: Joi.string().allow(''),
|
|
269
269
|
src: Joi.string().required(),
|
|
270
270
|
srcDark: Joi.string(),
|
|
271
|
+
width: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
272
|
+
height: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
271
273
|
href: Joi.string(),
|
|
272
274
|
target: Joi.string(),
|
|
273
275
|
}),
|
|
@@ -278,6 +280,9 @@ const ThemeConfigSchema = Joi.object({
|
|
|
278
280
|
alt: Joi.string().allow(''),
|
|
279
281
|
src: Joi.string(),
|
|
280
282
|
srcDark: Joi.string(),
|
|
283
|
+
// TODO infer this from reading the image
|
|
284
|
+
width: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
285
|
+
height: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
281
286
|
href: Joi.string(),
|
|
282
287
|
}),
|
|
283
288
|
copyright: Joi.string(),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docusaurus/theme-classic",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-4151",
|
|
4
4
|
"description": "Classic theme for Docusaurus",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "src/types.d.ts",
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
"update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@docusaurus/core": "0.0.0-
|
|
27
|
-
"@docusaurus/plugin-content-blog": "0.0.0-
|
|
28
|
-
"@docusaurus/plugin-content-docs": "0.0.0-
|
|
29
|
-
"@docusaurus/plugin-content-pages": "0.0.0-
|
|
30
|
-
"@docusaurus/theme-common": "0.0.0-
|
|
31
|
-
"@docusaurus/types": "0.0.0-
|
|
32
|
-
"@docusaurus/utils": "0.0.0-
|
|
33
|
-
"@docusaurus/utils-common": "0.0.0-
|
|
34
|
-
"@docusaurus/utils-validation": "0.0.0-
|
|
26
|
+
"@docusaurus/core": "0.0.0-4151",
|
|
27
|
+
"@docusaurus/plugin-content-blog": "0.0.0-4151",
|
|
28
|
+
"@docusaurus/plugin-content-docs": "0.0.0-4151",
|
|
29
|
+
"@docusaurus/plugin-content-pages": "0.0.0-4151",
|
|
30
|
+
"@docusaurus/theme-common": "0.0.0-4151",
|
|
31
|
+
"@docusaurus/types": "0.0.0-4151",
|
|
32
|
+
"@docusaurus/utils": "0.0.0-4151",
|
|
33
|
+
"@docusaurus/utils-common": "0.0.0-4151",
|
|
34
|
+
"@docusaurus/utils-validation": "0.0.0-4151",
|
|
35
35
|
"@mdx-js/mdx": "^1.6.21",
|
|
36
36
|
"@mdx-js/react": "^1.6.21",
|
|
37
37
|
"chalk": "^4.1.2",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"rtlcss": "^3.3.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@docusaurus/module-type-aliases": "0.0.0-
|
|
53
|
+
"@docusaurus/module-type-aliases": "0.0.0-4151",
|
|
54
54
|
"@types/mdx-js__react": "^1.5.4",
|
|
55
55
|
"@types/parse-numeric-range": "^0.0.1",
|
|
56
56
|
"@types/rtlcss": "^3.1.1",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"engines": {
|
|
65
65
|
"node": ">=14"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "77e558648976442ceaeb55bb6e3585fbe79db91d"
|
|
68
68
|
}
|
|
@@ -345,6 +345,27 @@ describe('themeConfig', () => {
|
|
|
345
345
|
});
|
|
346
346
|
});
|
|
347
347
|
|
|
348
|
+
test('should allow width and height specification for logo ', () => {
|
|
349
|
+
const altTagConfig = {
|
|
350
|
+
navbar: {
|
|
351
|
+
logo: {
|
|
352
|
+
alt: '',
|
|
353
|
+
src: '/arbitrary-logo.png',
|
|
354
|
+
srcDark: '/arbitrary-dark-logo.png',
|
|
355
|
+
width: '20px',
|
|
356
|
+
height: '20%',
|
|
357
|
+
},
|
|
358
|
+
},
|
|
359
|
+
};
|
|
360
|
+
expect(testValidateThemeConfig(altTagConfig)).toEqual({
|
|
361
|
+
...DEFAULT_CONFIG,
|
|
362
|
+
navbar: {
|
|
363
|
+
...DEFAULT_CONFIG.navbar,
|
|
364
|
+
...altTagConfig.navbar,
|
|
365
|
+
},
|
|
366
|
+
});
|
|
367
|
+
});
|
|
368
|
+
|
|
348
369
|
test('should accept valid prism config', () => {
|
|
349
370
|
const prismConfig = {
|
|
350
371
|
prism: {
|
|
@@ -52,8 +52,16 @@ function FooterLink({
|
|
|
52
52
|
const FooterLogo = ({
|
|
53
53
|
sources,
|
|
54
54
|
alt,
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
width,
|
|
56
|
+
height,
|
|
57
|
+
}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) => (
|
|
58
|
+
<ThemedImage
|
|
59
|
+
className="footer__logo"
|
|
60
|
+
alt={alt}
|
|
61
|
+
sources={sources}
|
|
62
|
+
width={width}
|
|
63
|
+
height={height}
|
|
64
|
+
/>
|
|
57
65
|
);
|
|
58
66
|
|
|
59
67
|
function Footer(): JSX.Element | null {
|
|
@@ -115,7 +123,12 @@ function Footer(): JSX.Element | null {
|
|
|
115
123
|
<div className="margin-bottom--sm">
|
|
116
124
|
{logo.href ? (
|
|
117
125
|
<Link href={logo.href} className={styles.footerLogoLink}>
|
|
118
|
-
<FooterLogo
|
|
126
|
+
<FooterLogo
|
|
127
|
+
alt={logo.alt}
|
|
128
|
+
sources={sources}
|
|
129
|
+
width={logo.width}
|
|
130
|
+
height={logo.height}
|
|
131
|
+
/>
|
|
119
132
|
</Link>
|
|
120
133
|
) : (
|
|
121
134
|
<FooterLogo alt={logo.alt} sources={sources} />
|
package/src/theme/Logo/index.tsx
CHANGED
|
@@ -29,7 +29,12 @@ const Logo = (props: Props): JSX.Element => {
|
|
|
29
29
|
dark: useBaseUrl(logo.srcDark || logo.src),
|
|
30
30
|
};
|
|
31
31
|
const themedImage = (
|
|
32
|
-
<ThemedImage
|
|
32
|
+
<ThemedImage
|
|
33
|
+
sources={sources}
|
|
34
|
+
height={logo.height}
|
|
35
|
+
width={logo.width}
|
|
36
|
+
alt={logo.alt || navbarTitle || title}
|
|
37
|
+
/>
|
|
33
38
|
);
|
|
34
39
|
|
|
35
40
|
return (
|
|
@@ -290,6 +290,8 @@ const ThemeConfigSchema = Joi.object({
|
|
|
290
290
|
alt: Joi.string().allow(''),
|
|
291
291
|
src: Joi.string().required(),
|
|
292
292
|
srcDark: Joi.string(),
|
|
293
|
+
width: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
294
|
+
height: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
293
295
|
href: Joi.string(),
|
|
294
296
|
target: Joi.string(),
|
|
295
297
|
}),
|
|
@@ -300,6 +302,9 @@ const ThemeConfigSchema = Joi.object({
|
|
|
300
302
|
alt: Joi.string().allow(''),
|
|
301
303
|
src: Joi.string(),
|
|
302
304
|
srcDark: Joi.string(),
|
|
305
|
+
// TODO infer this from reading the image
|
|
306
|
+
width: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
307
|
+
height: Joi.alternatives().try(Joi.string(), Joi.number()),
|
|
303
308
|
href: Joi.string(),
|
|
304
309
|
}),
|
|
305
310
|
copyright: Joi.string(),
|