@docusaurus/theme-classic 2.0.0-beta.17 → 2.0.0-beta.18

package/lib/getSwizzleConfig.js

@@ -40,12 +40,60 @@ function getSwizzleConfig() {
       },
       Footer: {
         actions: {
-          eject: 'unsafe',
-          // TODO split footer into smaller parts
+          eject: 'safe',
           wrap: 'safe'
         },
         description: "The footer component of you site's layout"
       },
+      'Footer/Copyright': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer copyright'
+      },
+      'Footer/Layout': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer main layout component'
+      },
+      'Footer/LinkItem': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer link item component'
+      },
+      'Footer/Links': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links'
+      },
+      'Footer/Links/MultiColumn': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links with a multi-column layout'
+      },
+      'Footer/Links/Simple': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer component rendering the footer links with a simple layout (single row)'
+      },
+      'Footer/Logo': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The footer logo'
+      },
       IconArrow: {
         actions: {
           eject: 'safe',
@@ -89,6 +137,69 @@ function getSwizzleConfig() {
         },
         description: 'The MDX components to use for rendering MDX files. Meant to be ejected.'
       },
+      'MDXComponents/A': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <a> tags and Markdown links in MDX'
+      },
+      'MDXComponents/Code': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <code> tags and Markdown code blocks in MDX'
+      },
+      'MDXComponents/Details': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <details> tags in MDX'
+      },
+      'MDXComponents/Head': {
+        actions: {
+          eject: 'forbidden',
+          wrap: 'forbidden'
+        },
+        description: 'Technical component used to assign metadata (generally for SEO purpose) to the current MDX document'
+      },
+      'MDXComponents/Heading': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render heading tags (<h1>, <h2>...) and Markdown headings in MDX'
+      },
+      'MDXComponents/Img': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <img> tags and Markdown images in MDX'
+      },
+      'MDXComponents/Pre': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <pre> tags in MDX'
+      },
+      'MDXComponents/Ul': {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'The component used to render <ul> tags and Markdown unordered lists in MDX'
+      },
+      MDXContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe'
+        },
+        description: 'A component wrapping all MDX content and providing the MDXComponents to the MDX context'
+      },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {

package/lib/index.js

@@ -20,8 +20,6 @@ Object.defineProperty(exports, "validateThemeConfig", {
 
 var _translations = require("./translations");
 
-var _path = _interopRequireDefault(require("path"));
-
 var _module = require("module");
 
 var _rtlcss = _interopRequireDefault(require("rtlcss"));
@@ -112,25 +110,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];
@@ -138,11 +133,11 @@ function docusaurusThemeClassic(context, options) {
     name: 'docusaurus-theme-classic',
 
     getThemePath() {
-      return _path.default.join(__dirname, '../lib-next/theme');
+      return '../lib-next/theme';
     },
 
     getTypeScriptThemePath() {
-      return _path.default.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
 
     getTranslationFiles: async () => (0, _translations.getTranslationFiles)({
@@ -161,7 +156,7 @@ function docusaurusThemeClassic(context, options) {
     },
 
     getClientModules() {
-      const modules = [require.resolve(getInfimaCSSFile(direction)), _path.default.resolve(__dirname, './prism-include-languages'), _path.default.resolve(__dirname, './admonitions.css')];
+      const modules = [require.resolve(getInfimaCSSFile(direction)), './prism-include-languages', './admonitions.css'];
 
       if (customCss) {
         if (Array.isArray(customCss)) {

package/lib/theme-classic.d.ts

@@ -41,11 +41,7 @@ declare module '@theme/BlogListPaginator' {
 }
 
 declare module '@theme/BlogSidebar' {
-  export type BlogSidebarItem = {title: string; permalink: string};
-  export type BlogSidebar = {
-    title: string;
-    items: BlogSidebarItem[];
-  };
+  import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
   export interface Props {
     readonly sidebar: BlogSidebar;
@@ -106,7 +102,7 @@ declare module '@theme/BlogPostPaginator' {
 declare module '@theme/BlogLayout' {
   import type {ReactNode} from 'react';
   import type {Props as LayoutProps} from '@theme/Layout';
-  import type {BlogSidebar} from '@theme/BlogSidebar';
+  import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
 
   export interface Props extends LayoutProps {
     readonly sidebar?: BlogSidebar;
@@ -130,6 +126,14 @@ declare module '@theme/CodeBlock' {
   export default function CodeBlock(props: Props): JSX.Element;
 }
 
+declare module '@theme/CodeBlock/CopyButton' {
+  export interface Props {
+    readonly code: string;
+  }
+
+  export default function CopyButton(props: Props): JSX.Element;
+}
+
 declare module '@theme/DocCard' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
@@ -180,6 +184,42 @@ declare module '@theme/DocSidebar' {
   export default function DocSidebar(props: Props): JSX.Element;
 }
 
+declare module '@theme/DocSidebar/Mobile' {
+  import type {Props as DocSidebarProps} from '@theme/DocSidebar';
+
+  export interface Props extends DocSidebarProps {}
+
+  export default function DocSidebarMobile(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop' {
+  import type {Props as DocSidebarProps} from '@theme/DocSidebar';
+
+  export interface Props extends DocSidebarProps {}
+
+  export default function DocSidebarDesktop(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop/Content' {
+  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
+
+  export interface Props {
+    readonly className?: string;
+    readonly path: string;
+    readonly sidebar: readonly PropSidebarItem[];
+  }
+
+  export default function Content(props: Props): JSX.Element;
+}
+
+declare module '@theme/DocSidebar/Desktop/CollapseButton' {
+  export interface Props {
+    onClick: React.MouseEventHandler;
+  }
+
+  export default function CollapseButton(props: Props): JSX.Element;
+}
+
 declare module '@theme/DocSidebarItem' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
@@ -244,6 +284,77 @@ declare module '@theme/Footer' {
   export default function Footer(): JSX.Element | null;
 }
 
+declare module '@theme/Footer/Logo' {
+  import type {FooterLogo} from '@docusaurus/theme-common';
+
+  export interface Props {
+    logo: FooterLogo;
+  }
+
+  export default function FooterLogo(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Copyright' {
+  export interface Props {
+    copyright: string;
+  }
+
+  export default function FooterCopyright(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/LinkItem' {
+  import type {FooterLinkItem} from '@docusaurus/theme-common';
+
+  export interface Props {
+    item: FooterLinkItem;
+  }
+
+  export default function FooterLinkItem(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Layout' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    style: 'light' | 'dark';
+    links: ReactNode;
+    logo: ReactNode;
+    copyright: ReactNode;
+  }
+
+  export default function FooterLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links' {
+  import type {Footer} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: Footer['links'];
+  }
+
+  export default function FooterLinks(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/MultiColumn' {
+  import type {MultiColumnFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    columns: MultiColumnFooter['links'];
+  }
+
+  export default function FooterLinksMultiColumn(props: Props): JSX.Element;
+}
+
+declare module '@theme/Footer/Links/Simple' {
+  import type {SimpleFooter} from '@docusaurus/theme-common';
+
+  export interface Props {
+    links: SimpleFooter['links'];
+  }
+
+  export default function FooterLinksSimple(props: Props): JSX.Element;
+}
+
 declare module '@theme/Heading' {
   import type {ComponentProps} from 'react';
 
@@ -261,31 +372,17 @@ declare module '@theme/Layout' {
 
   export interface Props {
     readonly children?: ReactNode;
-    readonly title?: string;
     readonly noFooter?: boolean;
-    readonly description?: string;
-    readonly image?: string;
-    readonly keywords?: string | string[];
-    readonly permalink?: string;
     readonly wrapperClassName?: string;
-    readonly pageClassName?: string;
-    readonly searchMetadata?: {
-      readonly version?: string;
-      readonly tag?: string;
-    };
+
+    // Not really layout-related, but kept for convenience/retro-compatibility
+    readonly title?: string;
+    readonly description?: string;
   }
 
   export default function Layout(props: Props): JSX.Element;
 }
 
-declare module '@theme/LayoutHead' {
-  import type {Props as LayoutProps} from '@theme/Layout';
-
-  export interface Props extends Omit<LayoutProps, 'children'> {}
-
-  export default function LayoutHead(props: Props): JSX.Element;
-}
-
 declare module '@theme/LayoutProviders' {
   import type {ReactNode} from 'react';
 
@@ -320,33 +417,174 @@ declare module '@theme/SkipToContent' {
   export default function SkipToContent(): JSX.Element;
 }
 
-declare module '@theme/MDXComponents' {
+declare module '@theme/MDXComponents/A' {
   import type {ComponentProps} from 'react';
-  import type CodeBlock from '@theme/CodeBlock';
-  import type Head from '@docusaurus/Head';
+
+  export interface Props extends ComponentProps<'a'> {}
+
+  export default function MDXA(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Code' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'code'> {}
+
+  export default function MDXCode(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Details' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'details'> {}
+
+  export default function MDXDetails(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Ul' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'ul'> {}
+
+  export default function MDXUl(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Img' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'img'> {}
+
+  export default function MDXImg(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Head' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'head'> {}
+
+  export default function MDXHead(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Heading' {
+  import type {ComponentProps} from 'react';
+  import type Heading from '@theme/Heading';
+
+  export interface Props extends ComponentProps<typeof Heading> {}
+
+  export default function MDXHeading(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents/Pre' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'pre'> {}
+
+  export default function MDXPre(props: Props): JSX.Element;
+}
+
+declare module '@theme/MDXComponents' {
+  import type {ComponentType, ComponentProps} from 'react';
+
+  import type MDXHead from '@theme/MDXComponents/Head';
+  import type MDXCode from '@theme/MDXComponents/Code';
+  import type MDXA from '@theme/MDXComponents/A';
+  import type MDXPre from '@theme/MDXComponents/Pre';
+  import type MDXDetails from '@theme/MDXComponents/Details';
+  import type MDXUl from '@theme/MDXComponents/Ul';
+  import type MDXImg from '@theme/MDXComponents/Img';
 
   export type MDXComponentsObject = {
-    readonly head: typeof Head;
-    readonly code: typeof CodeBlock;
-    readonly a: (props: ComponentProps<'a'>) => JSX.Element;
-    readonly pre: typeof CodeBlock;
-    readonly details: (props: ComponentProps<'details'>) => JSX.Element;
+    readonly head: typeof MDXHead;
+    readonly code: typeof MDXCode;
+    readonly a: typeof MDXA;
+    readonly pre: typeof MDXPre;
+    readonly details: typeof MDXDetails;
+    readonly ul: typeof MDXUl;
+    readonly img: typeof MDXImg;
     readonly h1: (props: ComponentProps<'h1'>) => JSX.Element;
     readonly h2: (props: ComponentProps<'h2'>) => JSX.Element;
     readonly h3: (props: ComponentProps<'h3'>) => JSX.Element;
     readonly h4: (props: ComponentProps<'h4'>) => JSX.Element;
     readonly h5: (props: ComponentProps<'h5'>) => JSX.Element;
     readonly h6: (props: ComponentProps<'h6'>) => JSX.Element;
-  };
+  } & {[tagName: string]: ComponentType<unknown>};
 
   const MDXComponents: MDXComponentsObject;
   export default MDXComponents;
 }
 
+declare module '@theme/MDXContent' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function MDXContent(props: Props): JSX.Element;
+}
+
 declare module '@theme/Navbar' {
   export default function Navbar(): JSX.Element;
 }
 
+declare module '@theme/Navbar/ColorModeToggle' {
+  export interface Props {
+    readonly className?: string;
+  }
+
+  export default function NavbarColorModeToggle(
+    props: Props,
+  ): JSX.Element | null;
+}
+
+declare module '@theme/Navbar/Logo' {
+  export default function NavbarLogo(): JSX.Element;
+}
+
+declare module '@theme/Navbar/Content' {
+  export default function NavbarContent(): JSX.Element;
+}
+
+declare module '@theme/Navbar/Layout' {
+  export interface Props {
+    readonly children: React.ReactNode;
+  }
+
+  export default function NavbarLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar' {
+  export default function NavbarMobileSidebar(): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar/Layout' {
+  import type {ReactNode} from 'react';
+
+  interface Props {
+    header: ReactNode;
+    primaryMenu: ReactNode;
+    secondaryMenu: ReactNode;
+  }
+
+  export default function NavbarMobileSidebarLayout(props: Props): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar/Toggle' {
+  export default function NavbarMobileSidebarToggle(): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar/PrimaryMenu' {
+  export default function NavbarMobileSidebarPrimaryMenu(): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar/SecondaryMenu' {
+  export default function NavbarMobileSidebarSecondaryMenu(): JSX.Element;
+}
+
+declare module '@theme/Navbar/MobileSidebar/Header' {
+  export default function NavbarMobileSidebarHeader(): JSX.Element;
+}
+
 declare module '@theme/NavbarItem/DefaultNavbarItem' {
   import type {Props as NavbarNavLinkProps} from '@theme/NavbarItem/NavbarNavLink';
 
@@ -530,7 +768,7 @@ declare module '@theme/TabItem' {
     readonly label?: string;
     readonly hidden?: boolean;
     readonly className?: string;
-    readonly attributes?: Record<string, unknown>;
+    readonly attributes?: {[key: string]: unknown};
   }
 
   export default function TabItem(props: Props): JSX.Element;
@@ -548,7 +786,7 @@ declare module '@theme/Tabs' {
     readonly values?: readonly {
       value: string;
       label?: string;
-      attributes?: Record<string, unknown>;
+      attributes?: {[key: string]: unknown};
     }[];
     readonly groupId?: string;
     readonly className?: string;
@@ -633,15 +871,19 @@ declare module '@theme/TOCCollapsible' {
 }
 
 declare module '@theme/ColorModeToggle' {
-  import type {SyntheticEvent} from 'react';
+  import type {ColorMode} from '@docusaurus/theme-common';
 
   export interface Props {
     readonly className?: string;
-    readonly checked: boolean;
-    readonly onChange: (e: SyntheticEvent) => void;
+    readonly value: ColorMode;
+    /**
+     * The parameter represents the "to-be" value. For example, if currently in
+     * dark mode, clicking the button should call `onChange("light")`
+     */
+    readonly onChange: (colorMode: ColorMode) => void;
   }
 
-  export default function Toggle(props: Props): JSX.Element;
+  export default function ColorModeToggle(props: Props): JSX.Element;
 }
 
 declare module '@theme/Logo' {
@@ -720,11 +962,8 @@ declare module '@theme/IconExternalLink' {
 }
 
 declare module '@theme/TagsListByLetter' {
-  export type TagsListItem = Readonly<{
-    name: string;
-    permalink: string;
-    count: number;
-  }>;
+  import type {TagsListItem} from '@docusaurus/theme-common';
+
   export interface Props {
     readonly tags: readonly TagsListItem[];
   }
@@ -732,7 +971,8 @@ declare module '@theme/TagsListByLetter' {
 }
 
 declare module '@theme/TagsListInline' {
-  export type Tag = Readonly<{label: string; permalink: string}>;
+  import type {Tag} from '@docusaurus/utils';
+
   export interface Props {
     readonly tags: readonly Tag[];
   }
@@ -740,7 +980,7 @@ declare module '@theme/TagsListInline' {
 }
 
 declare module '@theme/Tag' {
-  import type {TagsListItem} from '@theme/TagsListByLetter';
+  import type {TagsListItem} from '@docusaurus/theme-common';
   import type {Optional} from 'utility-types';
 
   export interface Props extends Optional<TagsListItem, 'count'> {}
@@ -755,17 +995,3 @@ declare module '@theme/prism-include-languages' {
     PrismObject: typeof PrismNamespace,
   ): void;
 }
-
-declare module '@theme/Seo' {
-  import type {ReactNode} from 'react';
-
-  export interface Props {
-    readonly title?: string;
-    readonly description?: string;
-    readonly keywords?: readonly string[] | string;
-    readonly image?: string;
-    readonly children?: ReactNode;
-  }
-
-  export default function Seo(props: Props): JSX.Element;
-}

package/lib/translations.js

@@ -45,6 +45,10 @@ function getNavbarTranslationFile(navbar) {
 function translateNavbar(navbar, navbarTranslations) {
   var _navbarTranslations$t;
 
+  if (!navbarTranslations) {
+    return navbar;
+  }
+
   return { ...navbar,
     title: ((_navbarTranslations$t = navbarTranslations.title) === null || _navbarTranslations$t === void 0 ? void 0 : _navbarTranslations$t.message) ?? navbar.title,
     //  TODO handle properly all the navbar item types here!
@@ -93,6 +97,10 @@ function getFooterTranslationFile(footer) {
 function translateFooter(footer, footerTranslations) {
   var _footerTranslations$c;
 
+  if (!footerTranslations) {
+    return footer;
+  }
+
   const links = isMultiColumnFooterLinks(footer.links) ? footer.links.map(link => {
     var _footerTranslations$;
 
@@ -137,10 +145,12 @@ function translateThemeConfig({
   themeConfig,
   translationFiles
 }) {
+  var _translationFilesMap$, _translationFilesMap$2;
+
   const translationFilesMap = _lodash.default.keyBy(translationFiles, f => f.path);
 
   return { ...themeConfig,
-    navbar: translateNavbar(themeConfig.navbar, translationFilesMap.navbar.content),
-    footer: themeConfig.footer ? translateFooter(themeConfig.footer, translationFilesMap.footer.content) : undefined
+    navbar: translateNavbar(themeConfig.navbar, (_translationFilesMap$ = translationFilesMap.navbar) === null || _translationFilesMap$ === void 0 ? void 0 : _translationFilesMap$.content),
+    footer: themeConfig.footer ? translateFooter(themeConfig.footer, (_translationFilesMap$2 = translationFilesMap.footer) === null || _translationFilesMap$2 === void 0 ? void 0 : _translationFilesMap$2.content) : undefined
   };
 }