@docusaurus/theme-classic 2.0.0-beta.138b4c997 → 2.0.0-beta.14

package/src/translations.ts

@@ -11,20 +11,20 @@ import {
   Navbar,
   NavbarItem,
   Footer,
+  MultiColumnFooter,
+  SimpleFooter,
 } from '@docusaurus/theme-common';
 
-import {keyBy, chain, flatten} from 'lodash';
+import {keyBy, chain} from 'lodash';
 import {mergeTranslations} from '@docusaurus/utils';
 
 function getNavbarTranslationFile(navbar: Navbar): TranslationFileContent {
   // TODO handle properly all the navbar item types here!
   function flattenNavbarItems(items: NavbarItem[]): NavbarItem[] {
-    const subItems = flatten(
-      items.map((item) => {
-        const allSubItems = flatten([item.items ?? []]);
-        return flattenNavbarItems(allSubItems);
-      }),
-    );
+    const subItems = items.flatMap((item) => {
+      const allSubItems = [item.items ?? []].flat();
+      return flattenNavbarItems(allSubItems);
+    });
     return [...items, ...subItems];
   }
 
@@ -71,10 +71,17 @@ function translateNavbar(
   };
 }
 
+function isMultiColumnFooterLinks(
+  links: MultiColumnFooter['links'] | SimpleFooter['links'],
+): links is MultiColumnFooter['links'] {
+  return links.length > 0 && 'title' in links[0];
+}
+
 function getFooterTranslationFile(footer: Footer): TranslationFileContent {
-  // TODO POC code
   const footerLinkTitles: TranslationFileContent = chain(
-    footer.links.filter((link) => !!link.title),
+    isMultiColumnFooterLinks(footer.links)
+      ? footer.links.filter((link) => !!link.title)
+      : [],
   )
     .keyBy((link) => `link.title.${link.title}`)
     .mapValues((link) => ({
@@ -84,9 +91,11 @@ function getFooterTranslationFile(footer: Footer): TranslationFileContent {
     .value();
 
   const footerLinkLabels: TranslationFileContent = chain(
-    flatten(footer.links.map((link) => link.items)).filter(
-      (link) => !!link.label,
-    ),
+    isMultiColumnFooterLinks(footer.links)
+      ? footer.links
+          .flatMap((link) => link.items)
+          .filter((link) => !!link.label)
+      : footer.links.filter((link) => !!link.label),
   )
     .keyBy((linkItem) => `link.item.label.${linkItem.label}`)
     .mapValues((linkItem) => ({
@@ -112,17 +121,24 @@ function translateFooter(
   footer: Footer,
   footerTranslations: TranslationFileContent,
 ): Footer {
-  const links = footer.links.map((link) => ({
-    ...link,
-    title:
-      footerTranslations[`link.title.${link.title}`]?.message ?? link.title,
-    items: link.items.map((linkItem) => ({
-      ...linkItem,
-      label:
-        footerTranslations[`link.item.label.${linkItem.label}`]?.message ??
-        linkItem.label,
-    })),
-  }));
+  const links = isMultiColumnFooterLinks(footer.links)
+    ? footer.links.map((link) => ({
+        ...link,
+        title:
+          footerTranslations[`link.title.${link.title}`]?.message ?? link.title,
+        items: link.items.map((linkItem) => ({
+          ...linkItem,
+          label:
+            footerTranslations[`link.item.label.${linkItem.label}`]?.message ??
+            linkItem.label,
+        })),
+      }))
+    : footer.links.map((link) => ({
+        ...link,
+        label:
+          footerTranslations[`link.item.label.${link.label}`]?.message ??
+          link.label,
+      }));
 
   const copyright = footerTranslations.copyright?.message ?? footer.copyright;
 
@@ -155,6 +171,8 @@ export function translateThemeConfig({
   themeConfig,
   translationFiles,
 }: {
+  // Why partial? To make TS correctly figure out the contravariance in parameter.
+  // In practice it's always normalized
   themeConfig: ThemeConfig;
   translationFiles: TranslationFile[];
 }): ThemeConfig {

package/src/types.d.ts

@@ -5,594 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable import/no-duplicates */
-/* eslint-disable spaced-comment */
 /// <reference types="@docusaurus/module-type-aliases" />
 /// <reference types="@docusaurus/plugin-content-blog" />
 /// <reference types="@docusaurus/plugin-content-docs" />
 /// <reference types="@docusaurus/plugin-content-pages" />
-
-declare module '@theme/AnnouncementBar' {
-  const AnnouncementBar: () => JSX.Element | null;
-  export default AnnouncementBar;
-}
-
-declare module '@theme/BlogListPaginator' {
-  import type {Metadata} from '@theme/BlogListPage';
-
-  export type Props = {readonly metadata: Metadata};
-
-  const BlogListPaginator: (props: Props) => JSX.Element;
-  export default BlogListPaginator;
-}
-
-declare module '@theme/BlogPostItem' {
-  import type {FrontMatter, Metadata} from '@theme/BlogPostPage';
-
-  export type Props = {
-    readonly frontMatter: FrontMatter;
-    readonly metadata: Metadata;
-    readonly truncated?: string | boolean;
-    readonly isBlogPostPage?: boolean;
-    readonly children: JSX.Element;
-  };
-
-  const BlogPostItem: (props: Props) => JSX.Element;
-  export default BlogPostItem;
-}
-
-declare module '@theme/BlogPostPaginator' {
-  type Item = {readonly title: string; readonly permalink: string};
-
-  export type Props = {readonly nextItem?: Item; readonly prevItem?: Item};
-
-  const BlogPostPaginator: (props: Props) => JSX.Element;
-  export default BlogPostPaginator;
-}
-
-declare module '@theme/CodeBlock' {
-  export type Props = {
-    readonly children: string;
-    readonly className?: string;
-    readonly metastring?: string;
-    readonly title?: string;
-  };
-
-  const CodeBlock: (props: Props) => JSX.Element;
-  export default CodeBlock;
-}
-
-declare module '@theme/DocPaginator' {
-  type PageInfo = {readonly permalink: string; readonly title: string};
-
-  export type Props = {
-    readonly metadata: {readonly previous?: PageInfo; readonly next?: PageInfo};
-  };
-
-  const DocPaginator: (props: Props) => JSX.Element;
-  export default DocPaginator;
-}
-
-declare module '@theme/DocSidebar' {
-  import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
-
-  export type Props = {
-    readonly path: string;
-    readonly sidebar: readonly PropSidebarItem[];
-    readonly sidebarCollapsible?: boolean;
-    readonly onCollapse: () => void;
-    readonly isHidden: boolean;
-  };
-
-  const DocSidebar: (props: Props) => JSX.Element;
-  export default DocSidebar;
-}
-
-declare module '@theme/DocVersionSuggestions' {
-  const DocVersionSuggestions: () => JSX.Element;
-  export default DocVersionSuggestions;
-}
-
-declare module '@theme/EditThisPage' {
-  export type Props = {
-    readonly editUrl: string;
-  };
-  const EditThisPage: (props: Props) => JSX.Element;
-  export default EditThisPage;
-}
-
-declare module '@theme/Footer' {
-  const Footer: () => JSX.Element | null;
-  export default Footer;
-}
-
-declare module '@theme/Heading' {
-  import type {ComponentProps} from 'react';
-
-  export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  export type Props = ComponentProps<HeadingType>;
-
-  const Heading: (Tag: HeadingType) => (props: Props) => JSX.Element;
-  export default Heading;
-  export const MainHeading: (props: Props) => JSX.Element;
-}
-
-declare module '@theme/hooks/useHideableNavbar' {
-  export type useHideableNavbarReturns = {
-    readonly navbarRef: (node: HTMLElement | null) => void;
-    readonly isNavbarVisible: boolean;
-  };
-
-  const useHideableNavbar: (hideOnScroll: boolean) => useHideableNavbarReturns;
-  export default useHideableNavbar;
-}
-
-declare module '@theme/hooks/useLocationHash' {
-  import type {Dispatch, SetStateAction} from 'react';
-
-  export type useLocationHashReturns = readonly [
-    string,
-    Dispatch<SetStateAction<string>>,
-  ];
-
-  const useLocationHash: (initialHash: string) => useLocationHashReturns;
-  export default useLocationHash;
-}
-
-declare module '@theme/hooks/useLockBodyScroll' {
-  const useLockBodyScroll: (lock?: boolean) => void;
-  export default useLockBodyScroll;
-}
-
-declare module '@theme/hooks/usePrismTheme' {
-  import defaultTheme from 'prism-react-renderer/themes/palenight';
-
-  const usePrismTheme: () => typeof defaultTheme;
-  export default usePrismTheme;
-}
-
-declare module '@theme/hooks/useScrollPosition' {
-  export type ScrollPosition = {scrollX: number; scrollY: number};
-
-  const useScrollPosition: (
-    effect?: (position: ScrollPosition, lastPosition: ScrollPosition) => void,
-    deps?: unknown[],
-  ) => void;
-  export default useScrollPosition;
-}
-
-declare module '@theme/hooks/useTabGroupChoice' {
-  export type useTabGroupChoiceReturns = {
-    readonly tabGroupChoices: {readonly [groupId: string]: string};
-    readonly setTabGroupChoices: (groupId: string, newChoice: string) => void;
-  };
-
-  const useTabGroupChoice: () => useTabGroupChoiceReturns;
-  export default useTabGroupChoice;
-}
-
-declare module '@theme/hooks/useTheme' {
-  export type useThemeReturns = {
-    readonly isDarkTheme: boolean;
-    readonly setLightTheme: () => void;
-    readonly setDarkTheme: () => void;
-  };
-
-  const useTheme: () => useThemeReturns;
-  export default useTheme;
-}
-
-declare module '@theme/hooks/useThemeContext' {
-  export type ThemeContextProps = {
-    isDarkTheme: boolean;
-    setLightTheme: () => void;
-    setDarkTheme: () => void;
-  };
-
-  export default function useThemeContext(): ThemeContextProps;
-}
-
-declare module '@theme/hooks/useTOCHighlight' {
-  export default function useTOCHighlight(
-    linkClassName: string,
-    linkActiveClassName: string,
-    topOffset: number,
-  ): void;
-}
-
-declare module '@theme/hooks/useUserPreferencesContext' {
-  export type UserPreferencesContextProps = {
-    tabGroupChoices: {readonly [groupId: string]: string};
-    setTabGroupChoices: (groupId: string, newChoice: string) => void;
-  };
-
-  export default function useUserPreferencesContext(): UserPreferencesContextProps;
-}
-
-declare module '@theme/hooks/useWindowSize' {
-  export const windowSizes: {
-    desktop: 'desktop';
-    mobile: 'mobile';
-  };
-
-  export type WindowSize = keyof typeof windowSizes;
-
-  export default function useWindowSize(): WindowSize | undefined;
-}
-
-declare module '@theme/hooks/useKeyboardNavigation' {
-  const useKeyboardNavigation: () => void;
-
-  export default useKeyboardNavigation;
-}
-
-declare module '@theme/Layout' {
-  import type {ReactNode} from 'react';
-
-  export type Props = {
-    children: ReactNode;
-    title?: string;
-    noFooter?: boolean;
-    description?: string;
-    image?: string;
-    keywords?: string | string[];
-    permalink?: string;
-    wrapperClassName?: string;
-    pageClassName?: string;
-    searchMetadatas?: {
-      version?: string;
-      tag?: string;
-    };
-  };
-
-  const Layout: (props: Props) => JSX.Element;
-  export default Layout;
-}
-
-declare module '@theme/LayoutHead' {
-  import type {Props as LayoutProps} from '@theme/Layout';
-
-  export type Props = Omit<LayoutProps, 'children'>;
-
-  const LayoutHead: (props: Props) => JSX.Element;
-  export default LayoutHead;
-}
-
-declare module '@theme/SearchMetadatas' {
-  export type Props = {
-    locale?: string;
-    version?: string;
-    tag?: string;
-  };
-
-  const SearchMetadatas: (props: Props) => JSX.Element;
-  export default SearchMetadatas;
-}
-
-declare module '@theme/LastUpdated' {
-  export type Props = {
-    lastUpdatedAt?: number;
-    formattedLastUpdatedAt?: string;
-    lastUpdatedBy?: string;
-  };
-
-  const LastUpdated: (props: Props) => JSX.Element;
-  export default LastUpdated;
-}
-
-declare module '@theme/SkipToContent' {
-  const SkipToContent: () => JSX.Element;
-  export default SkipToContent;
-}
-
-declare module '@theme/MDXComponents' {
-  import type {ComponentProps} from 'react';
-  import type CodeBlock from '@theme/CodeBlock';
-
-  export type MDXComponentsObject = {
-    readonly code: typeof CodeBlock;
-    readonly a: (props: ComponentProps<'a'>) => JSX.Element;
-    readonly pre: typeof CodeBlock;
-    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;
-  };
-
-  const MDXComponents: MDXComponentsObject;
-  export default MDXComponents;
-}
-
-declare module '@theme/Navbar' {
-  const Navbar: () => JSX.Element;
-  export default Navbar;
-}
-
-declare module '@theme/NavbarItem/DefaultNavbarItem' {
-  import type {ComponentProps, ReactNode} from 'react';
-
-  export type NavLinkProps = {
-    activeBasePath?: string;
-    activeBaseRegex?: string;
-    to?: string;
-    exact?: boolean;
-    href?: string;
-    label?: ReactNode;
-    activeClassName?: string;
-    prependBaseUrlToHref?: string;
-    isActive?: () => boolean;
-  } & ComponentProps<'a'>;
-
-  export type DesktopOrMobileNavBarItemProps = NavLinkProps & {
-    readonly items?: readonly NavLinkProps[];
-    readonly position?: 'left' | 'right';
-    readonly className?: string;
-  };
-
-  export type Props = DesktopOrMobileNavBarItemProps & {
-    readonly mobile?: boolean;
-  };
-
-  const DefaultNavbarItem: (props: Props) => JSX.Element;
-  export default DefaultNavbarItem;
-}
-
-declare module '@theme/NavbarItem/SearchNavbarItem' {
-  export type Props = {readonly mobile?: boolean};
-
-  const SearchNavbarItem: (props: Props) => JSX.Element;
-  export default SearchNavbarItem;
-}
-
-declare module '@theme/NavbarItem/LocaleDropdownNavbarItem' {
-  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
-  import type {NavLinkProps} from '@theme/NavbarItem/DefaultNavbarItem';
-
-  export type Props = DefaultNavbarItemProps & {
-    readonly dropdownItemsBefore: NavLinkProps[];
-    readonly dropdownItemsAfter: NavLinkProps[];
-  };
-
-  const LocaleDropdownNavbarItem: (props: Props) => JSX.Element;
-  export default LocaleDropdownNavbarItem;
-}
-
-declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' {
-  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
-  import type {NavLinkProps} from '@theme/NavbarItem/DefaultNavbarItem';
-
-  export type Props = DefaultNavbarItemProps & {
-    readonly docsPluginId?: string;
-    readonly dropdownActiveClassDisabled?: boolean;
-    readonly dropdownItemsBefore: NavLinkProps[];
-    readonly dropdownItemsAfter: NavLinkProps[];
-  };
-
-  const DocsVersionDropdownNavbarItem: (props: Props) => JSX.Element;
-  export default DocsVersionDropdownNavbarItem;
-}
-
-declare module '@theme/NavbarItem/DocsVersionNavbarItem' {
-  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
-
-  export type Props = DefaultNavbarItemProps & {readonly docsPluginId?: string};
-
-  const DocsVersionNavbarItem: (props: Props) => JSX.Element;
-  export default DocsVersionNavbarItem;
-}
-
-declare module '@theme/NavbarItem/DocNavbarItem' {
-  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
-
-  export type Props = DefaultNavbarItemProps & {
-    readonly docId: string;
-    readonly activeSidebarClassName: string;
-    readonly docsPluginId?: string;
-  };
-
-  const DocsSidebarNavbarItem: (props: Props) => JSX.Element;
-  export default DocsSidebarNavbarItem;
-}
-
-declare module '@theme/NavbarItem' {
-  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
-  import type {Props as DocsVersionDropdownNavbarItemProps} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
-  import type {Props as DocsVersionNavbarItemProps} from '@theme/NavbarItem/DocsVersionNavbarItem';
-  import type {Props as SearchNavbarItemProps} from '@theme/NavbarItem/SearchNavbarItem';
-
-  export type Props =
-    | ({readonly type?: 'default' | undefined} & DefaultNavbarItemProps)
-    | ({
-        readonly type: 'docsVersionDropdown';
-      } & DocsVersionDropdownNavbarItemProps)
-    | ({readonly type: 'docsVersion'} & DocsVersionNavbarItemProps)
-    | ({readonly type: 'search'} & SearchNavbarItemProps);
-
-  const NavbarItem: (props: Props) => JSX.Element;
-  export default NavbarItem;
-}
-
-declare module '@theme/TabItem' {
-  import type {ReactNode} from 'react';
-
-  export type Props = {
-    readonly children: ReactNode;
-    readonly value: string;
-    readonly hidden?: boolean;
-    readonly className?: string;
-  };
-
-  const TabItem: (props: Props) => JSX.Element;
-  export default TabItem;
-}
-
-declare module '@theme/Tabs' {
-  import type {ReactElement} from 'react';
-  import type {Props as TabItemProps} from '@theme/TabItem';
-
-  export type Props = {
-    readonly lazy?: boolean;
-    readonly block?: boolean;
-    readonly children: readonly ReactElement<TabItemProps>[];
-    readonly defaultValue?: string;
-    readonly values: readonly {value: string; label: string}[];
-    readonly groupId?: string;
-    readonly className?: string;
-  };
-
-  const Tabs: (props: Props) => JSX.Element;
-  export default Tabs;
-}
-
-declare module '@theme/ThemedImage' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = {
-    readonly sources: {
-      readonly light: string;
-      readonly dark: string;
-    };
-  } & Omit<ComponentProps<'img'>, 'src'>;
-
-  const ThemedImage: (props: Props) => JSX.Element;
-  export default ThemedImage;
-}
-
-declare module '@theme/ThemeProvider' {
-  import type {ReactNode} from 'react';
-
-  export type Props = {readonly children: ReactNode};
-
-  const ThemeProvider: (props: Props) => JSX.Element;
-  export default ThemeProvider;
-}
-
-declare module '@theme/TOC' {
-  import type {TOCItem} from '@docusaurus/types';
-
-  export type TOCProps = {
-    readonly toc: readonly TOCItem[];
-  };
-
-  const TOC: (props: TOCProps) => JSX.Element;
-  export default TOC;
-}
-
-declare module '@theme/TOCInline' {
-  import type {TOCItem} from '@docusaurus/types';
-
-  export type TOCInlineProps = {
-    readonly toc: readonly TOCItem[];
-  };
-
-  const TOCInline: (props: TOCInlineProps) => JSX.Element;
-  export default TOCInline;
-}
-
-declare module '@theme/Toggle' {
-  import type {SyntheticEvent} from 'react';
-
-  export type Props = {
-    readonly className?: string;
-    readonly checked: boolean;
-    readonly onChange: (e: SyntheticEvent) => void;
-  };
-
-  const Toggle: (props: Props) => JSX.Element;
-  export default Toggle;
-}
-
-declare module '@theme/UserPreferencesProvider' {
-  import type {ReactNode} from 'react';
-
-  export type Props = {readonly children: ReactNode};
-
-  const UserPreferencesProvider: (props: Props) => JSX.Element;
-  export default UserPreferencesProvider;
-}
-
-declare module '@theme/LayoutProviders' {
-  import type {ReactNode} from 'react';
-
-  export type Props = {readonly children: ReactNode};
-
-  const LayoutProviders: (props: Props) => JSX.Element;
-  export default LayoutProviders;
-}
-
-declare module '@theme/ThemeContext' {
-  import type {Context} from 'react';
-  import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
-
-  const ThemeContext: Context<ThemeContextProps | undefined>;
-  export default ThemeContext;
-}
-
-declare module '@theme/UserPreferencesContext' {
-  import type {Context} from 'react';
-  import type {UserPreferencesContextProps} from '@theme/hooks/useUserPreferencesContext';
-
-  const UserPreferencesContext: Context<
-    UserPreferencesContextProps | undefined
-  >;
-  export default UserPreferencesContext;
-}
-
-declare module '@theme/Logo' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = {
-    imageClassName?: string;
-    titleClassName?: string;
-  } & ComponentProps<'a'>;
-
-  const Logo: (props: Props) => JSX.Element;
-  export default Logo;
-}
-
-declare module '@theme/IconArrow' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-
-  const IconArrow: (props: Props) => JSX.Element;
-  export default IconArrow;
-}
-
-declare module '@theme/IconEdit' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-
-  const IconEdit: (props: Props) => JSX.Element;
-  export default IconEdit;
-}
-
-declare module '@theme/IconMenu' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-
-  const IconMenu: (props: Props) => JSX.Element;
-  export default IconMenu;
-}
-
-declare module '@theme/IconLanguage' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-
-  const IconLanguage: (props: Props) => JSX.Element;
-  export default IconLanguage;
-}
-
-declare module '@theme/IconExternalLink' {
-  import type {ComponentProps} from 'react';
-
-  export type Props = ComponentProps<'svg'>;
-
-  const IconExternalLink: (props: Props) => JSX.Element;
-  export default IconExternalLink;
-}