@docusaurus/theme-classic 0.0.0-4685 → 0.0.0-4687

package/lib/index.js

@@ -112,25 +112,22 @@ function getInfimaCSSFile(direction) {
 
 function docusaurusThemeClassic(context, options) {
   const {
-    siteConfig: {
-      themeConfig: roughlyTypedThemeConfig
-    },
     i18n: {
       currentLocale,
       localeConfigs
     }
   } = context;
-  const themeConfig = roughlyTypedThemeConfig || {};
+  const themeConfig = context.siteConfig.themeConfig;
   const {
     announcementBar,
     colorMode,
     prism: {
-      additionalLanguages = []
-    } = {}
+      additionalLanguages
+    }
   } = themeConfig;
   const {
     customCss
-  } = options || {};
+  } = options ?? {};
   const {
     direction
   } = localeConfigs[currentLocale];

package/lib/validateThemeConfig.js

@@ -257,7 +257,7 @@ const ThemeConfigSchema = _utilsValidation.Joi.object({
     style: _utilsValidation.Joi.string().equal('dark', 'light').default('light'),
     logo: _utilsValidation.Joi.object({
       alt: _utilsValidation.Joi.string().allow(''),
-      src: _utilsValidation.Joi.string(),
+      src: _utilsValidation.Joi.string().required(),
       srcDark: _utilsValidation.Joi.string(),
       // TODO infer this from reading the image
       width: _utilsValidation.Joi.alternatives().try(_utilsValidation.Joi.string(), _utilsValidation.Joi.number()),

package/lib-next/theme/BlogArchivePage/index.js

@@ -45,7 +45,7 @@ function YearsSection({years}) {
 function listPostsByYears(blogPosts) {
   const postsByYear = blogPosts.reduceRight((posts, post) => {
     const year = post.metadata.date.split('-')[0];
-    const yearPosts = posts.get(year) || [];
+    const yearPosts = posts.get(year) ?? [];
     return posts.set(year, [post, ...yearPosts]);
   }, new Map());
   return Array.from(postsByYear, ([year, posts]) => ({

package/lib-next/theme/Footer/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
 import ThemedImage from '@theme/ThemedImage';
@@ -42,16 +42,37 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}) {
   );
 }
 
-function FooterLogo({sources, alt, width, height}) {
-  return (
+function FooterLogo({logo}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+
+  if (!logo?.src) {
+    return null;
+  }
+
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  const image = (
     <ThemedImage
       className="footer__logo"
-      alt={alt}
+      alt={logo.alt}
       sources={sources}
-      width={width}
-      height={height}
+      width={logo.width}
+      height={logo.height}
     />
   );
+  return (
+    <div className="margin-bottom--sm">
+      {logo.href ? (
+        <Link href={logo.href} className={styles.footerLogoLink}>
+          {image}
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  );
 }
 
 function MultiColumnLinks({links}) {
@@ -115,16 +136,12 @@ function isMultiColumnFooterLinks(links) {
 
 function Footer() {
   const {footer} = useThemeConfig();
-  const {copyright, links = [], logo = {}} = footer || {};
-  const sources = {
-    light: useBaseUrl(logo.src),
-    dark: useBaseUrl(logo.srcDark || logo.src),
-  };
 
   if (!footer) {
     return null;
   }
 
+  const {copyright, links, logo} = footer;
   return (
     <footer
       className={clsx('footer', {
@@ -144,28 +161,8 @@ function Footer() {
           ))}
         {(logo || copyright) && (
           <div className="footer__bottom text--center">
-            {logo && (logo.src || logo.srcDark) && (
-              <div className="margin-bottom--sm">
-                {logo.href ? (
-                  <Link href={logo.href} className={styles.footerLogoLink}>
-                    <FooterLogo
-                      alt={logo.alt}
-                      sources={sources}
-                      width={logo.width}
-                      height={logo.height}
-                    />
-                  </Link>
-                ) : (
-                  <FooterLogo
-                    alt={logo.alt}
-                    sources={sources}
-                    width={logo.width}
-                    height={logo.height}
-                  />
-                )}
-              </div>
-            )}
-            {copyright ? (
+            <FooterLogo logo={logo} />
+            {copyright && (
               <div
                 className="footer__copyright" // Developer provided the HTML, so assume it's safe.
                 // eslint-disable-next-line react/no-danger
@@ -173,7 +170,7 @@ function Footer() {
                   __html: copyright,
                 }}
               />
-            ) : null}
+            )}
           </div>
         )}
       </div>

package/lib-next/theme/ThemedImage/index.js

@@ -12,7 +12,7 @@ import styles from './styles.module.css';
 export default function ThemedImage(props) {
   const isBrowser = useIsBrowser();
   const {isDarkTheme} = useColorMode();
-  const {sources, className, alt = '', ...propsRest} = props;
+  const {sources, className, alt, ...propsRest} = props;
   const clientThemes = isDarkTheme ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser
     ? clientThemes // We need to render both images on the server to avoid flash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4685",
+  "version": "0.0.0-4687",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4685",
-    "@docusaurus/plugin-content-blog": "0.0.0-4685",
-    "@docusaurus/plugin-content-docs": "0.0.0-4685",
-    "@docusaurus/plugin-content-pages": "0.0.0-4685",
-    "@docusaurus/theme-common": "0.0.0-4685",
-    "@docusaurus/theme-translations": "0.0.0-4685",
-    "@docusaurus/utils": "0.0.0-4685",
-    "@docusaurus/utils-common": "0.0.0-4685",
-    "@docusaurus/utils-validation": "0.0.0-4685",
+    "@docusaurus/core": "0.0.0-4687",
+    "@docusaurus/plugin-content-blog": "0.0.0-4687",
+    "@docusaurus/plugin-content-docs": "0.0.0-4687",
+    "@docusaurus/plugin-content-pages": "0.0.0-4687",
+    "@docusaurus/theme-common": "0.0.0-4687",
+    "@docusaurus/theme-translations": "0.0.0-4687",
+    "@docusaurus/utils": "0.0.0-4687",
+    "@docusaurus/utils-common": "0.0.0-4687",
+    "@docusaurus/utils-validation": "0.0.0-4687",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4685",
-    "@docusaurus/types": "0.0.0-4685",
+    "@docusaurus/module-type-aliases": "0.0.0-4687",
+    "@docusaurus/types": "0.0.0-4687",
     "@types/mdx-js__react": "^1.5.5",
     "@types/prismjs": "^1.26.0",
     "@types/rtlcss": "^3.1.2",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "3a492428ff3bf2051bc6b660803a735d67c8ae66"
+  "gitHead": "07732e16aa86d21c9c5713e03c7159201c2457de"
 }

package/src/index.ts

@@ -97,16 +97,15 @@ export default function docusaurusThemeClassic(
   options: Options,
 ): Plugin<void> {
   const {
-    siteConfig: {themeConfig: roughlyTypedThemeConfig},
     i18n: {currentLocale, localeConfigs},
   } = context;
-  const themeConfig = (roughlyTypedThemeConfig || {}) as ThemeConfig;
+  const themeConfig = context.siteConfig.themeConfig as ThemeConfig;
   const {
     announcementBar,
     colorMode,
-    prism: {additionalLanguages = []} = {},
+    prism: {additionalLanguages},
   } = themeConfig;
-  const {customCss} = options || {};
+  const {customCss} = options ?? {};
   const {direction} = localeConfigs[currentLocale]!;
 
   return {

package/src/theme/BlogArchivePage/index.tsx

@@ -50,14 +50,11 @@ function YearsSection({years}: {years: YearProp[]}) {
 }
 
 function listPostsByYears(blogPosts: readonly ArchiveBlogPost[]): YearProp[] {
-  const postsByYear: Map<string, ArchiveBlogPost[]> = blogPosts.reduceRight(
-    (posts, post) => {
-      const year = post.metadata.date.split('-')[0];
-      const yearPosts = posts.get(year) || [];
-      return posts.set(year, [post, ...yearPosts]);
-    },
-    new Map(),
-  );
+  const postsByYear = blogPosts.reduceRight((posts, post) => {
+    const year = post.metadata.date.split('-')[0]!;
+    const yearPosts = posts.get(year) ?? [];
+    return posts.set(year, [post, ...yearPosts]);
+  }, new Map<string, ArchiveBlogPost[]>());
 
   return Array.from(postsByYear, ([year, posts]) => ({
     year,

package/src/theme/Footer/index.tsx

@@ -15,10 +15,10 @@ import {
   type MultiColumnFooter,
   type SimpleFooter,
 } from '@docusaurus/theme-common';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import styles from './styles.module.css';
-import ThemedImage, {type Props as ThemedImageProps} from '@theme/ThemedImage';
+import ThemedImage from '@theme/ThemedImage';
 import IconExternalLink from '@theme/IconExternalLink';
 
 function FooterLink({
@@ -54,21 +54,35 @@ function FooterLink({
   );
 }
 
-function FooterLogo({
-  sources,
-  alt,
-  width,
-  height,
-}: Pick<ThemedImageProps, 'sources' | 'alt' | 'width' | 'height'>) {
-  return (
+function FooterLogo({logo}: {logo: SimpleFooter['logo']}) {
+  const {withBaseUrl} = useBaseUrlUtils();
+  if (!logo?.src) {
+    return null;
+  }
+  const sources = {
+    light: withBaseUrl(logo.src),
+    dark: withBaseUrl(logo.srcDark ?? logo.src),
+  };
+  const image = (
     <ThemedImage
       className="footer__logo"
-      alt={alt}
+      alt={logo.alt}
       sources={sources}
-      width={width}
-      height={height}
+      width={logo.width}
+      height={logo.height}
     />
   );
+  return (
+    <div className="margin-bottom--sm">
+      {logo.href ? (
+        <Link href={logo.href} className={styles.footerLogoLink}>
+          {image}
+        </Link>
+      ) : (
+        image
+      )}
+    </div>
+  );
 }
 
 function MultiColumnLinks({links}: {links: MultiColumnFooter['links']}) {
@@ -136,16 +150,10 @@ function isMultiColumnFooterLinks(
 
 function Footer(): JSX.Element | null {
   const {footer} = useThemeConfig();
-
-  const {copyright, links = [], logo = {}} = footer || {};
-  const sources = {
-    light: useBaseUrl(logo.src),
-    dark: useBaseUrl(logo.srcDark || logo.src),
-  };
-
   if (!footer) {
     return null;
   }
+  const {copyright, links, logo} = footer;
 
   return (
     <footer
@@ -166,28 +174,8 @@ function Footer(): JSX.Element | null {
           ))}
         {(logo || copyright) && (
           <div className="footer__bottom text--center">
-            {logo && (logo.src || logo.srcDark) && (
-              <div className="margin-bottom--sm">
-                {logo.href ? (
-                  <Link href={logo.href} className={styles.footerLogoLink}>
-                    <FooterLogo
-                      alt={logo.alt}
-                      sources={sources}
-                      width={logo.width}
-                      height={logo.height}
-                    />
-                  </Link>
-                ) : (
-                  <FooterLogo
-                    alt={logo.alt}
-                    sources={sources}
-                    width={logo.width}
-                    height={logo.height}
-                  />
-                )}
-              </div>
-            )}
-            {copyright ? (
+            <FooterLogo logo={logo} />
+            {copyright && (
               <div
                 className="footer__copyright"
                 // Developer provided the HTML, so assume it's safe.
@@ -196,7 +184,7 @@ function Footer(): JSX.Element | null {
                   __html: copyright,
                 }}
               />
-            ) : null}
+            )}
           </div>
         )}
       </div>

package/src/theme/ThemedImage/index.tsx

@@ -17,7 +17,7 @@ import styles from './styles.module.css';
 export default function ThemedImage(props: Props): JSX.Element {
   const isBrowser = useIsBrowser();
   const {isDarkTheme} = useColorMode();
-  const {sources, className, alt = '', ...propsRest} = props;
+  const {sources, className, alt, ...propsRest} = props;
 
   type SourceName = keyof Props['sources'];
 

package/src/validateThemeConfig.ts

@@ -304,7 +304,7 @@ export const ThemeConfigSchema = Joi.object({
     style: Joi.string().equal('dark', 'light').default('light'),
     logo: Joi.object({
       alt: Joi.string().allow(''),
-      src: Joi.string(),
+      src: Joi.string().required(),
       srcDark: Joi.string(),
       // TODO infer this from reading the image
       width: Joi.alternatives().try(Joi.string(), Joi.number()),