@docusaurus/theme-classic 2.0.0-beta.2 → 2.0.0-beta.22

package/lib/theme/TagsListByLetter/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tag {
+  display: inline-block;
+  margin: 0.5rem 0.5rem 0 1rem;
+}

package/lib/theme/TagsListInline/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/TagsListInline';
+export default function TagsListInline({ tags }: Props): JSX.Element;

package/lib/theme/TagsListInline/index.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import Tag from '@theme/Tag';
+import styles from './styles.module.css';
+export default function TagsListInline({tags}) {
+  return (
+    <>
+      <b>
+        <Translate
+          id="theme.tags.tagsListLabel"
+          description="The label alongside a tag list">
+          Tags:
+        </Translate>
+      </b>
+      <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
+        {tags.map(({label, permalink: tagPermalink}) => (
+          <li key={tagPermalink} className={styles.tag}>
+            <Tag label={label} permalink={tagPermalink} />
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/lib/theme/TagsListInline/styles.module.css

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.tags {
+  display: inline;
+}
+
+.tag {
+  margin: 0 0.4rem 0.5rem 0;
+  display: inline-block;
+}

package/lib/theme/ThemedImage/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+import type { Props } from '@theme/ThemedImage';
+export default function ThemedImage(props: Props): JSX.Element;

package/lib/theme/ThemedImage/index.js

@@ -1,49 +1,39 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _useDocusaurusContext = _interopRequireDefault(require("@docusaurus/useDocusaurusContext"));
-
-var _useThemeContext = _interopRequireDefault(require("@theme/hooks/useThemeContext"));
-
-var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const ThemedImage = props => {
-  const {
-    isClient
-  } = (0, _useDocusaurusContext.default)();
-  const {
-    isDarkTheme
-  } = (0, _useThemeContext.default)();
-  const {
-    sources,
-    className,
-    alt = '',
-    ...propsRest
-  } = props;
-  const clientThemes = isDarkTheme ? ['dark'] : ['light'];
-  const renderedSourceNames = isClient ? clientThemes : // We need to render both images on the server to avoid flash
-  // See https://github.com/facebook/docusaurus/pull/3730
-  ['light', 'dark'];
-  return <>
-      {renderedSourceNames.map(sourceName => <img key={sourceName} src={sources[sourceName]} alt={alt} className={(0, _clsx.default)(_stylesModule.default.themedImage, _stylesModule.default[`themedImage--${sourceName}`], className)} {...propsRest} />)}
-    </>;
-};
-
-var _default = ThemedImage;
-exports.default = _default;
+import React from 'react';
+import clsx from 'clsx';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import {useColorMode} from '@docusaurus/theme-common';
+import styles from './styles.module.css';
+export default function ThemedImage(props) {
+  const isBrowser = useIsBrowser();
+  const {colorMode} = useColorMode();
+  const {sources, className, alt, ...propsRest} = props;
+  const clientThemes = colorMode === 'dark' ? ['dark'] : ['light'];
+  const renderedSourceNames = isBrowser
+    ? clientThemes
+    : // We need to render both images on the server to avoid flash
+      // See https://github.com/facebook/docusaurus/pull/3730
+      ['light', 'dark'];
+  return (
+    <>
+      {renderedSourceNames.map((sourceName) => (
+        <img
+          key={sourceName}
+          src={sources[sourceName]}
+          alt={alt}
+          className={clsx(
+            styles.themedImage,
+            styles[`themedImage--${sourceName}`],
+            className,
+          )}
+          {...propsRest}
+        />
+      ))}
+    </>
+  );
+}

package/lib/theme/ThemedImage/styles.module.css

@@ -9,10 +9,10 @@
   display: none;
 }
 
-html[data-theme='light'] .themedImage--light {
+[data-theme='light'] .themedImage--light {
   display: initial;
 }
 
-html[data-theme='dark'] .themedImage--dark {
+[data-theme='dark'] .themedImage--dark {
   display: initial;
 }

package/lib/theme/prism-include-languages.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type * as PrismNamespace from 'prismjs';
+export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void;

package/lib/theme/prism-include-languages.js

@@ -1,39 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/ExecutionEnvironment"));
-
-var _docusaurus = _interopRequireDefault(require("@generated/docusaurus.config"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const prismIncludeLanguages = PrismObject => {
-  if (_ExecutionEnvironment.default.canUseDOM) {
-    const {
-      themeConfig: {
-        prism: {
-          additionalLanguages = []
-        } = {}
-      }
-    } = _docusaurus.default;
-    window.Prism = PrismObject;
-    additionalLanguages.forEach(lang => {
-      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
-
-    });
-    delete window.Prism;
-  }
-};
-
-var _default = prismIncludeLanguages;
-exports.default = _default;
+import siteConfig from '@generated/docusaurus.config';
+export default function prismIncludeLanguages(PrismObject) {
+  const {
+    themeConfig: {prism},
+  } = siteConfig;
+  const {additionalLanguages} = prism;
+  // Prism components work on the Prism instance on the window, while prism-
+  // react-renderer uses its own Prism instance. We temporarily mount the
+  // instance onto window, import components to enhance it, then remove it to
+  // avoid polluting global namespace.
+  // You can mutate PrismObject: registering plugins, deleting languages... As
+  // long as you don't re-assign it
+  globalThis.Prism = PrismObject;
+  additionalLanguages.forEach((lang) => {
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    require(`prismjs/components/prism-${lang}`);
+  });
+  delete globalThis.Prism;
+}

package/lib/translations.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { TranslationFile } from '@docusaurus/types';
+import type { ThemeConfig } from '@docusaurus/theme-common';
+export declare function getTranslationFiles({ themeConfig, }: {
+    themeConfig: ThemeConfig;
+}): TranslationFile[];
+export declare function translateThemeConfig({ themeConfig, translationFiles, }: {
+    themeConfig: ThemeConfig;
+    translationFiles: TranslationFile[];
+}): ThemeConfig;

package/lib/translations.js

@@ -1,140 +1,140 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTranslationFiles = getTranslationFiles;
-exports.translateThemeConfig = translateThemeConfig;
-
-var _lodash = require("lodash");
-
-var _utils = require("@docusaurus/utils");
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateThemeConfig = exports.getTranslationFiles = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("@docusaurus/utils");
 function getNavbarTranslationFile(navbar) {
-  // TODO handle properly all the navbar item types here!
-  function flattenNavbarItems(items) {
-    const subItems = (0, _lodash.flatten)(items.map(item => {
-      var _item$items;
-
-      const allSubItems = (0, _lodash.flatten)([(_item$items = item.items) !== null && _item$items !== void 0 ? _item$items : []]);
-      return flattenNavbarItems(allSubItems);
-    }));
-    return [...items, ...subItems];
-  }
-
-  const allNavbarItems = flattenNavbarItems(navbar.items);
-  const navbarItemsTranslations = (0, _lodash.chain)(allNavbarItems.filter(navbarItem => !!navbarItem.label)).keyBy(navbarItem => `item.label.${navbarItem.label}`).mapValues(navbarItem => ({
-    message: navbarItem.label,
-    description: `Navbar item with label ${navbarItem.label}`
-  })).value();
-  const titleTranslations = navbar.title ? {
-    title: {
-      message: navbar.title,
-      description: 'The title in the navbar'
+    // TODO handle properly all the navbar item types here!
+    function flattenNavbarItems(items) {
+        const subItems = items.flatMap((item) => {
+            const allSubItems = [item.items ?? []].flat();
+            return flattenNavbarItems(allSubItems);
+        });
+        return [...items, ...subItems];
     }
-  } : {};
-  return (0, _utils.mergeTranslations)([titleTranslations, navbarItemsTranslations]);
+    const allNavbarItems = flattenNavbarItems(navbar.items);
+    const navbarItemsTranslations = Object.fromEntries(allNavbarItems
+        .filter((navbarItem) => navbarItem.label)
+        .map((navbarItem) => [
+        `item.label.${navbarItem.label}`,
+        {
+            message: navbarItem.label,
+            description: `Navbar item with label ${navbarItem.label}`,
+        },
+    ]));
+    const titleTranslations = navbar.title
+        ? { title: { message: navbar.title, description: 'The title in the navbar' } }
+        : {};
+    return (0, utils_1.mergeTranslations)([titleTranslations, navbarItemsTranslations]);
 }
-
 function translateNavbar(navbar, navbarTranslations) {
-  var _navbarTranslations$t, _navbarTranslations$t2;
-
-  return { ...navbar,
-    title: (_navbarTranslations$t = (_navbarTranslations$t2 = navbarTranslations.title) === null || _navbarTranslations$t2 === void 0 ? void 0 : _navbarTranslations$t2.message) !== null && _navbarTranslations$t !== void 0 ? _navbarTranslations$t : navbar.title,
-    //  TODO handle properly all the navbar item types here!
-    items: navbar.items.map(item => {
-      var _item$items2, _navbarTranslations$$2, _navbarTranslations$2;
-
-      const subItems = (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.map(subItem => {
-        var _navbarTranslations$$, _navbarTranslations$;
-
-        return { ...subItem,
-          label: (_navbarTranslations$$ = (_navbarTranslations$ = navbarTranslations[`item.label.${subItem.label}`]) === null || _navbarTranslations$ === void 0 ? void 0 : _navbarTranslations$.message) !== null && _navbarTranslations$$ !== void 0 ? _navbarTranslations$$ : subItem.label
-        };
-      });
-      return { ...item,
-        label: (_navbarTranslations$$2 = (_navbarTranslations$2 = navbarTranslations[`item.label.${item.label}`]) === null || _navbarTranslations$2 === void 0 ? void 0 : _navbarTranslations$2.message) !== null && _navbarTranslations$$2 !== void 0 ? _navbarTranslations$$2 : item.label,
-        ...(subItems ? {
-          items: subItems
-        } : undefined)
-      };
-    })
-  };
-}
-
-function getFooterTranslationFile(footer) {
-  // TODO POC code
-  const footerLinkTitles = (0, _lodash.chain)(footer.links.filter(link => !!link.title)).keyBy(link => `link.title.${link.title}`).mapValues(link => ({
-    message: link.title,
-    description: `The title of the footer links column with title=${link.title} in the footer`
-  })).value();
-  const footerLinkLabels = (0, _lodash.chain)((0, _lodash.flatten)(footer.links.map(link => link.items)).filter(link => !!link.label)).keyBy(linkItem => `link.item.label.${linkItem.label}`).mapValues(linkItem => {
-    var _linkItem$to;
-
+    if (!navbarTranslations) {
+        return navbar;
+    }
     return {
-      message: linkItem.label,
-      description: `The label of footer link with label=${linkItem.label} linking to ${(_linkItem$to = linkItem.to) !== null && _linkItem$to !== void 0 ? _linkItem$to : linkItem.href}`
+        ...navbar,
+        title: navbarTranslations.title?.message ?? navbar.title,
+        //  TODO handle properly all the navbar item types here!
+        items: navbar.items.map((item) => {
+            const subItems = item.items?.map((subItem) => ({
+                ...subItem,
+                label: navbarTranslations[`item.label.${subItem.label}`]?.message ??
+                    subItem.label,
+            }));
+            return {
+                ...item,
+                label: navbarTranslations[`item.label.${item.label}`]?.message ?? item.label,
+                ...(subItems ? { items: subItems } : undefined),
+            };
+        }),
     };
-  }).value();
-  const copyright = footer.copyright ? {
-    copyright: {
-      message: footer.copyright,
-      description: 'The footer copyright'
-    }
-  } : {};
-  return (0, _utils.mergeTranslations)([footerLinkTitles, footerLinkLabels, copyright]);
 }
-
+function isMultiColumnFooterLinks(links) {
+    return links.length > 0 && 'title' in links[0];
+}
+function getFooterTranslationFile(footer) {
+    const footerLinkTitles = Object.fromEntries((isMultiColumnFooterLinks(footer.links)
+        ? footer.links.filter((link) => link.title)
+        : []).map((link) => [
+        `link.title.${link.title}`,
+        {
+            message: link.title,
+            description: `The title of the footer links column with title=${link.title} in the footer`,
+        },
+    ]));
+    const footerLinkLabels = Object.fromEntries((isMultiColumnFooterLinks(footer.links)
+        ? footer.links.flatMap((link) => link.items).filter((link) => link.label)
+        : footer.links.filter((link) => link.label)).map((link) => [
+        `link.item.label.${link.label}`,
+        {
+            message: link.label,
+            description: `The label of footer link with label=${link.label} linking to ${link.to ?? link.href}`,
+        },
+    ]));
+    const copyright = footer.copyright
+        ? {
+            copyright: {
+                message: footer.copyright,
+                description: 'The footer copyright',
+            },
+        }
+        : {};
+    return (0, utils_1.mergeTranslations)([footerLinkTitles, footerLinkLabels, copyright]);
+}
 function translateFooter(footer, footerTranslations) {
-  var _footerTranslations$c, _footerTranslations$c2;
-
-  const links = footer.links.map(link => {
-    var _footerTranslations$$, _footerTranslations$;
-
-    return { ...link,
-      title: (_footerTranslations$$ = (_footerTranslations$ = footerTranslations[`link.title.${link.title}`]) === null || _footerTranslations$ === void 0 ? void 0 : _footerTranslations$.message) !== null && _footerTranslations$$ !== void 0 ? _footerTranslations$$ : link.title,
-      items: link.items.map(linkItem => {
-        var _footerTranslations$$2, _footerTranslations$2;
-
-        return { ...linkItem,
-          label: (_footerTranslations$$2 = (_footerTranslations$2 = footerTranslations[`link.item.label.${linkItem.label}`]) === null || _footerTranslations$2 === void 0 ? void 0 : _footerTranslations$2.message) !== null && _footerTranslations$$2 !== void 0 ? _footerTranslations$$2 : linkItem.label
-        };
-      })
+    if (!footerTranslations) {
+        return footer;
+    }
+    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;
+    return {
+        ...footer,
+        links,
+        copyright,
     };
-  });
-  const copyright = (_footerTranslations$c = (_footerTranslations$c2 = footerTranslations.copyright) === null || _footerTranslations$c2 === void 0 ? void 0 : _footerTranslations$c2.message) !== null && _footerTranslations$c !== void 0 ? _footerTranslations$c : footer.copyright;
-  return { ...footer,
-    links,
-    copyright
-  };
 }
-
-function getTranslationFiles({
-  themeConfig
-}) {
-  const translationFiles = [{
-    path: 'navbar',
-    content: getNavbarTranslationFile(themeConfig.navbar)
-  }, themeConfig.footer ? {
-    path: 'footer',
-    content: getFooterTranslationFile(themeConfig.footer)
-  } : undefined];
-  return translationFiles.filter(Boolean);
+function getTranslationFiles({ themeConfig, }) {
+    const translationFiles = [
+        { path: 'navbar', content: getNavbarTranslationFile(themeConfig.navbar) },
+        themeConfig.footer
+            ? {
+                path: 'footer',
+                content: getFooterTranslationFile(themeConfig.footer),
+            }
+            : undefined,
+    ];
+    return translationFiles.filter(Boolean);
+}
+exports.getTranslationFiles = getTranslationFiles;
+function translateThemeConfig({ themeConfig, translationFiles, }) {
+    const translationFilesMap = lodash_1.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,
+    };
 }
-
-function translateThemeConfig({
-  themeConfig,
-  translationFiles
-}) {
-  const translationFilesMap = (0, _lodash.keyBy)(translationFiles, f => f.path);
-  return { ...themeConfig,
-    navbar: translateNavbar(themeConfig.navbar, translationFilesMap.navbar.content),
-    footer: themeConfig.footer ? translateFooter(themeConfig.footer, translationFilesMap.footer.content) : undefined
-  };
-}
+exports.translateThemeConfig = translateThemeConfig;

package/lib/validateThemeConfig.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Joi } from '@docusaurus/utils-validation';
+import type { ThemeConfig } from '@docusaurus/theme-common';
+import type { ThemeConfigValidationContext } from '@docusaurus/types';
+export declare const DEFAULT_CONFIG: ThemeConfig;
+export declare const ThemeConfigSchema: Joi.ObjectSchema<ThemeConfig>;
+export declare function validateThemeConfig({ validate, themeConfig, }: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig;