@docusaurus/theme-classic 2.0.0-beta.8bda3b2db → 2.0.0-beta.9

package/src/{validateThemeConfig.js → validateThemeConfig.ts}

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const {Joi, URISchema} = require('@docusaurus/utils-validation');
+import {Joi, URISchema} from '@docusaurus/utils-validation';
+import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
 
 const DEFAULT_DOCS_CONFIG = {
   versionPersistence: 'localStorage',
@@ -40,84 +41,56 @@ const DEFAULT_CONFIG = {
     items: [],
   },
   hideableSidebar: false,
+  tableOfContents: {
+    minHeadingLevel: 2,
+    maxHeadingLevel: 3,
+  },
 };
 exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
 const NavbarItemPosition = Joi.string().equal('left', 'right').default('left');
 
-const BaseNavbarItemSchema = Joi.object({
-  to: Joi.string(),
-  href: URISchema,
+const NavbarItemBaseSchema = Joi.object({
   label: Joi.string(),
   className: Joi.string(),
-  prependBaseUrlToHref: Joi.bool(),
 })
   // We allow any unknown attributes on the links
   // (users may need additional attributes like target, aria-role, data-customAttribute...)
   .unknown();
 
-// TODO we should probably create a custom navbar item type "dropdown"
-// having this recursive structure is bad because we only support 2 levels
-// + parent/child don't have exactly the same props
-const DefaultNavbarItemSchema = BaseNavbarItemSchema.append({
-  items: Joi.array().optional().items(BaseNavbarItemSchema),
-  position: NavbarItemPosition,
+const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
+  to: Joi.string(),
+  href: URISchema,
   activeBasePath: Joi.string(),
   activeBaseRegex: Joi.string(),
-});
-// TODO the dropdown parent item can have no href/to
-// should check should not apply to dropdown parent item
-// .xor('href', 'to');
+  prependBaseUrlToHref: Joi.bool(),
+  // This is only triggered in case of a nested dropdown
+  items: Joi.forbidden().messages({
+    'any.unknown': 'Nested dropdowns are not allowed',
+  }),
+})
+  .xor('href', 'to')
+  .messages({
+    'object.xor': 'One and only one between "to" and "href" should be provided',
+  });
 
-const DocsVersionNavbarItemSchema = Joi.object({
+const DocsVersionNavbarItemSchema = NavbarItemBaseSchema.append({
   type: Joi.string().equal('docsVersion').required(),
-  position: NavbarItemPosition,
-  label: Joi.string(),
   to: Joi.string(),
   docsPluginId: Joi.string(),
-  className: Joi.string(),
 });
 
-const DocsVersionDropdownNavbarItemSchema = Joi.object({
-  type: Joi.string().equal('docsVersionDropdown').required(),
-  position: NavbarItemPosition,
-  docsPluginId: Joi.string(),
-  dropdownActiveClassDisabled: Joi.boolean(),
-  dropdownItemsBefore: Joi.array().items(BaseNavbarItemSchema).default([]),
-  dropdownItemsAfter: Joi.array().items(BaseNavbarItemSchema).default([]),
-  className: Joi.string(),
-});
-
-const DocItemSchema = Joi.object({
+const DocItemSchema = NavbarItemBaseSchema.append({
   type: Joi.string().equal('doc').required(),
-  position: NavbarItemPosition,
   docId: Joi.string().required(),
-  label: Joi.string(),
   docsPluginId: Joi.string(),
-  activeSidebarClassName: Joi.string().default('navbar__link--active'),
-  className: Joi.string(),
 });
 
-const LocaleDropdownNavbarItemSchema = Joi.object({
-  type: Joi.string().equal('localeDropdown').required(),
-  position: NavbarItemPosition,
-  dropdownItemsBefore: Joi.array().items(BaseNavbarItemSchema).default([]),
-  dropdownItemsAfter: Joi.array().items(BaseNavbarItemSchema).default([]),
-  className: Joi.string(),
-});
-
-const SearchItemSchema = Joi.object({
-  type: Joi.string().equal('search').required(),
-  position: NavbarItemPosition,
-});
-
-// Can this be made easier? :/
-const isOfType = (type) => {
-  let typeSchema = Joi.string().required();
+const itemWithType = (type: string | undefined) => {
   // because equal(undefined) is not supported :/
-  if (type) {
-    typeSchema = typeSchema.equal(type);
-  }
+  const typeSchema = type
+    ? Joi.string().required().equal(type)
+    : Joi.string().forbidden();
   return Joi.object({
     type: typeSchema,
   })
@@ -125,58 +98,105 @@ const isOfType = (type) => {
     .required();
 };
 
-const NavbarItemSchema = Joi.object().when({
+const DropdownSubitemSchema = Joi.object({
+  position: Joi.forbidden(),
+}).when('.', {
+  switch: [
+    {
+      is: itemWithType('docsVersion'),
+      then: DocsVersionNavbarItemSchema,
+    },
+    {
+      is: itemWithType('doc'),
+      then: DocItemSchema,
+    },
+    {
+      is: itemWithType(undefined),
+      then: DefaultNavbarItemSchema,
+    },
+    {
+      is: Joi.alternatives().try(
+        itemWithType('dropdown'),
+        itemWithType('docsVersionDropdown'),
+        itemWithType('localeDropdown'),
+        itemWithType('search'),
+      ),
+      then: Joi.forbidden().messages({
+        'any.unknown': 'Nested dropdowns are not allowed',
+      }),
+    },
+  ],
+  otherwise: Joi.forbidden().messages({
+    'any.unknown': 'Bad navbar item type {.type}',
+  }),
+});
+
+const DropdownNavbarItemSchema = NavbarItemBaseSchema.append({
+  items: Joi.array().items(DropdownSubitemSchema).required(),
+});
+
+const DocsVersionDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
+  type: Joi.string().equal('docsVersionDropdown').required(),
+  docsPluginId: Joi.string(),
+  dropdownActiveClassDisabled: Joi.boolean(),
+  dropdownItemsBefore: Joi.array().items(DropdownSubitemSchema).default([]),
+  dropdownItemsAfter: Joi.array().items(DropdownSubitemSchema).default([]),
+});
+
+const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
+  type: Joi.string().equal('localeDropdown').required(),
+  dropdownItemsBefore: Joi.array().items(DropdownSubitemSchema).default([]),
+  dropdownItemsAfter: Joi.array().items(DropdownSubitemSchema).default([]),
+});
+
+const SearchItemSchema = Joi.object({
+  type: Joi.string().equal('search').required(),
+});
+
+const NavbarItemSchema = Joi.object({
+  position: NavbarItemPosition,
+}).when('.', {
   switch: [
     {
-      is: isOfType('docsVersion'),
+      is: itemWithType('docsVersion'),
       then: DocsVersionNavbarItemSchema,
     },
     {
-      is: isOfType('docsVersionDropdown'),
+      is: itemWithType('dropdown'),
+      then: DropdownNavbarItemSchema,
+    },
+    {
+      is: itemWithType('docsVersionDropdown'),
       then: DocsVersionDropdownNavbarItemSchema,
     },
     {
-      is: isOfType('doc'),
+      is: itemWithType('doc'),
       then: DocItemSchema,
     },
     {
-      is: isOfType('localeDropdown'),
+      is: itemWithType('localeDropdown'),
       then: LocaleDropdownNavbarItemSchema,
     },
     {
-      is: isOfType('search'),
+      is: itemWithType('search'),
       then: SearchItemSchema,
     },
     {
-      is: isOfType(undefined),
-      then: Joi.forbidden().messages({
-        'any.unknown': 'Bad navbar item type {.type}',
+      is: itemWithType(undefined),
+      then: Joi.object().when('.', {
+        // Dropdown item can be specified without type field
+        is: Joi.object({
+          items: Joi.array().required(),
+        }).unknown(),
+        then: DropdownNavbarItemSchema,
+        otherwise: DefaultNavbarItemSchema,
       }),
     },
   ],
-  otherwise: DefaultNavbarItemSchema,
-});
-
-/*
-const NavbarItemSchema = Joi.object({
-  type: Joi.string().only(['docsVersion'])
-})
-  .when(Joi.object({ type: 'docsVersion' }).unknown(), {
-    then: Joi.object({ pepperoni: Joi.boolean() })
-  })
-  .when(Joi.object().unknown(), {
-    then: Joi.object({ croutons: Joi.boolean() })
-  })
-
- */
-
-/*
-const NavbarItemSchema = Joi.object().when('type', {
-  is: Joi.valid('docsVersion'),
-  then: DocsVersionNavbarItemSchema,
-  otherwise: DefaultNavbarItemSchema,
+  otherwise: Joi.forbidden().messages({
+    'any.unknown': 'Bad navbar item type {.type}',
+  }),
 });
- */
 
 const ColorModeSchema = Joi.object({
   defaultMode: Joi.string()
@@ -231,12 +251,12 @@ const CustomCssSchema = Joi.alternatives()
 
 const ThemeConfigSchema = Joi.object({
   // TODO temporary (@alpha-58)
-  disableDarkMode: Joi.any().forbidden(false).messages({
+  disableDarkMode: Joi.any().forbidden().messages({
     'any.unknown':
       'disableDarkMode theme config is deprecated. Please use the new colorMode attribute. You likely want: config.themeConfig.colorMode.disableSwitch = true',
   }),
   // TODO temporary (@alpha-58)
-  defaultDarkMode: Joi.any().forbidden(false).messages({
+  defaultDarkMode: Joi.any().forbidden().messages({
     'any.unknown':
       'defaultDarkMode theme config is deprecated. Please use the new colorMode attribute. You likely want: config.themeConfig.colorMode.defaultMode = "dark"',
   }),
@@ -249,7 +269,7 @@ const ThemeConfigSchema = Joi.object({
     .default(DEFAULT_CONFIG.metadatas),
   announcementBar: Joi.object({
     id: Joi.string().default('announcement-bar'),
-    content: Joi.string(),
+    content: Joi.string().required(),
     backgroundColor: Joi.string(),
     textColor: Joi.string(),
     isCloseable: Joi.bool().default(true),
@@ -270,6 +290,8 @@ const ThemeConfigSchema = Joi.object({
       alt: Joi.string().allow(''),
       src: Joi.string().required(),
       srcDark: Joi.string(),
+      width: Joi.alternatives().try(Joi.string(), Joi.number()),
+      height: Joi.alternatives().try(Joi.string(), Joi.number()),
       href: Joi.string(),
       target: Joi.string(),
     }),
@@ -280,6 +302,9 @@ const ThemeConfigSchema = Joi.object({
       alt: Joi.string().allow(''),
       src: Joi.string(),
       srcDark: Joi.string(),
+      // TODO infer this from reading the image
+      width: Joi.alternatives().try(Joi.string(), Joi.number()),
+      height: Joi.alternatives().try(Joi.string(), Joi.number()),
       href: Joi.string(),
     }),
     copyright: Joi.string(),
@@ -309,9 +334,38 @@ const ThemeConfigSchema = Joi.object({
     .default(DEFAULT_CONFIG.prism)
     .unknown(),
   hideableSidebar: Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
+  sidebarCollapsible: Joi.forbidden().messages({
+    'any.unknown':
+      'The themeConfig.sidebarCollapsible has been moved to docs plugin options. See: https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs',
+  }),
+  tableOfContents: Joi.object({
+    minHeadingLevel: Joi.number()
+      .default(DEFAULT_CONFIG.tableOfContents.minHeadingLevel)
+      .when('maxHeadingLevel', {
+        is: Joi.exist(),
+        then: Joi.number()
+          .integer()
+          .min(2)
+          .max(6)
+          .max(Joi.ref('maxHeadingLevel')),
+        otherwise: Joi.number().integer().min(2).max(6),
+      }),
+    maxHeadingLevel: Joi.number()
+      .integer()
+      .min(2)
+      .max(6)
+      .default(DEFAULT_CONFIG.tableOfContents.maxHeadingLevel),
+  }).default(DEFAULT_CONFIG.tableOfContents),
 });
-exports.ThemeConfigSchema = ThemeConfigSchema;
 
-exports.validateThemeConfig = ({validate, themeConfig}) => {
+export {ThemeConfigSchema};
+
+export function validateThemeConfig({
+  validate,
+  themeConfig,
+}: {
+  validate: Validate<ThemeConfig>;
+  themeConfig: ThemeConfig;
+}): ValidationResult<ThemeConfig> {
   return validate(ThemeConfigSchema, themeConfig);
-};
+}

package/tsconfig.json

@@ -1,10 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "lib": ["DOM"],
+    "lib": ["DOM", "ES2019"],
     "module": "esnext",
     "noEmit": true,
-    "noImplicitAny": false,
     "jsx": "react",
     "baseUrl": "src"
   },

package/update-code-translations.js

@@ -14,6 +14,7 @@ const {mapValues, pickBy, difference, orderBy} = require('lodash');
 const CodeDirPaths = [
   path.join(__dirname, 'lib-next'),
   // TODO other themes should rather define their own translations in the future?
+  path.join(__dirname, '..', 'docusaurus-theme-common', 'lib'),
   path.join(__dirname, '..', 'docusaurus-theme-search-algolia', 'src', 'theme'),
   path.join(__dirname, '..', 'docusaurus-theme-live-codeblock', 'src', 'theme'),
   path.join(__dirname, '..', 'docusaurus-plugin-pwa', 'src', 'theme'),
@@ -45,7 +46,7 @@ function logSection(title) {
 }
 
 function logKeys(keys) {
-  return `Keys:\n- ${keys.join('\n- ')}\``;
+  return `Keys:\n- ${keys.join('\n- ')}`;
 }
 
 async function extractThemeCodeMessages() {
@@ -53,11 +54,12 @@ async function extractThemeCodeMessages() {
   const {
     globSourceCodeFilePaths,
     extractAllSourceCodeFileTranslations,
+    // eslint-disable-next-line global-require
   } = require('@docusaurus/core/lib/server/translations/translationsExtractor');
 
-  const filePaths = (
-    await globSourceCodeFilePaths(CodeDirPaths)
-  ).filter((filePath) => ['.js', '.jsx'].includes(path.extname(filePath)));
+  const filePaths = (await globSourceCodeFilePaths(CodeDirPaths)).filter(
+    (filePath) => ['.js', '.jsx'].includes(path.extname(filePath)),
+  );
 
   const filesExtractedTranslations = await extractAllSourceCodeFileTranslations(
     filePaths,
@@ -148,10 +150,12 @@ ${logKeys(unknownMessages)}`),
 
   const newBaseMessagesDescriptions = Object.entries(newBaseMessages).reduce(
     (acc, [key]) => {
+      const codeTranslation = codeExtractedTranslations[key];
       return {
         ...acc,
-        [`${key}${DescriptionSuffix}`]: codeExtractedTranslations[key]
-          .description,
+        [`${key}${DescriptionSuffix}`]: codeTranslation
+          ? codeTranslation.description
+          : undefined,
       };
     },
     {},

package/update-code-translations.test.js

@@ -14,7 +14,7 @@ const {mapValues, pickBy} = require('lodash');
 jest.setTimeout(15000);
 
 describe('update-code-translations', () => {
-  test(`to have base.json contain all the translations extracted from the theme. Please run "yarn workspace @docusaurus/theme-classic update-code-translations" to keep base.json up-to-date.`, async () => {
+  test(`to have base.json contain EXACTLY all the translations extracted from the theme. Please run "yarn workspace @docusaurus/theme-classic update-code-translations" to keep base.json up-to-date.`, async () => {
     const baseMessages = pickBy(
       JSON.parse(
         await fs.readFile(

package/update.js

@@ -0,0 +1,151 @@
+const chalk = require('chalk');
+const path = require('path');
+const fs = require('fs-extra');
+const globby = require('globby');
+const {mapValues, pickBy, difference, orderBy} = require('lodash');
+
+async function extractThemeCodeMessages(dirPath) {
+  // Unsafe import, should we create a package for the translationsExtractor ?
+  const {
+    globSourceCodeFilePaths,
+    extractAllSourceCodeFileTranslations,
+    // eslint-disable-next-line global-require
+  } = require('@docusaurus/core/lib/server/translations/translationsExtractor');
+
+  const filePaths = (await globSourceCodeFilePaths([dirPath])).filter(
+    (filePath) => ['.js', '.jsx'].includes(path.extname(filePath)),
+  );
+
+  const filesExtractedTranslations = await extractAllSourceCodeFileTranslations(
+    filePaths,
+    {
+      presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+    },
+  );
+
+  filesExtractedTranslations.forEach((fileExtractedTranslations) => {
+    fileExtractedTranslations.warnings.forEach((warning) => {
+      throw new Error(`
+Please make sure all theme translations are static!
+Some warnings were found!
+
+${warning}
+      `);
+    });
+  });
+
+  const translations = filesExtractedTranslations.reduce(
+    (acc, extractedTranslations) => {
+      return {...acc, ...extractedTranslations.translations};
+    },
+    {},
+  );
+
+  return translations;
+}
+
+function sortObjectKeys(obj) {
+  let keys = Object.keys(obj);
+  // keys = orderBy(keys, [(k) => removeDescriptionSuffix(k)]);
+  return keys.reduce((acc, key) => {
+    acc[key] = obj[key];
+    return acc;
+  }, {});
+}
+
+async function writeMessagesFile(filePath, messages) {
+  const sortedMessages = sortObjectKeys(messages);
+  const content = `${JSON.stringify(sortedMessages, null, 2)}\n`; // \n makes prettier happy
+  await fs.outputFile(filePath, content);
+}
+
+async function main() {
+  const codeTranslationsDir = path.join(__dirname, 'src', 'codeTranslations');
+  const baseFile = path.join(codeTranslationsDir, 'base.json');
+  const localesFiles = (await globby(codeTranslationsDir)).filter(
+    (filepath) => path.extname(filepath) === '.json',
+    // (filepath) => filepath.endsWith('base.json'),
+  );
+  let baseMessages = JSON.parse(await fs.readFile(baseFile));
+
+  const targetDirs = [
+    path.join(
+      __dirname,
+      '..',
+      'docusaurus-theme-search-algolia',
+      'src',
+      // 'theme',
+    ),
+    path.join(
+      __dirname,
+      '..',
+      'docusaurus-theme-live-codeblock',
+      'src',
+      // 'theme',
+    ),
+    path.join(__dirname, '..', 'docusaurus-plugin-pwa', 'src'),
+  ];
+
+  const convertToObject = (array) =>
+    array.reduce((acc, [key, value]) => {
+      return {...acc, ...{[key]: value}};
+    }, {});
+
+  const removePluginMessages = (content, keys) =>
+    Object.entries(content).filter(([key]) => !keys.includes(key));
+
+  for (const targetDir of targetDirs) {
+    console.log(targetDir);
+
+    const pluginExtractedTranslations = await extractThemeCodeMessages(
+      targetDir,
+    );
+
+    for (const localeFile of localesFiles) {
+      console.log(localeFile);
+
+      const targetFile = JSON.parse(await fs.readFile(localeFile));
+      const destFile = path.join(
+        targetDir,
+        'codeTranslations',
+        path.basename(localeFile),
+      );
+
+      const pluginMessages = Object.entries(targetFile).filter(
+        ([key, value]) => {
+          return Object.keys(pluginExtractedTranslations).filter((message) =>
+            key.startsWith(message),
+          ).length;
+        },
+      );
+
+      const pluginMessagesKeys = pluginMessages.map(([key]) => key);
+
+      console.log(1, pluginMessagesKeys);
+
+      // await writeMessagesFile(destFile, convertToObject(pluginMessages));
+
+      const newTargetFile = removePluginMessages(
+        targetFile,
+        pluginMessagesKeys,
+      );
+
+      baseMessages = pickBy(
+        baseMessages,
+        (_, key) => !pluginMessagesKeys.includes(key),
+      );
+      // await writeMessagesFile(localeFile, convertToObject(newTargetFile));
+    }
+  }
+
+  // console.log(baseMessages);
+  // await writeMessagesFile(baseFile, baseMessages);
+}
+
+function run() {
+  main().then(() => {
+    console.log(1);
+  });
+}
+
+exports.run = run;

package/lib/theme/Toggle/styles.css

@@ -1,103 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Styles for React Toggle
- * copied over because we want to allow user to swizzle it and modify the css
- * and also to make sure its compatible with our dark mode
- * https://github.com/aaronshaf/react-toggle/blob/master/style.css
- */
-.react-toggle {
-  touch-action: pan-x;
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.react-toggle-screenreader-only {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  position: absolute;
-  width: 1px;
-}
-
-.react-toggle--disabled {
-  cursor: not-allowed;
-}
-
-.react-toggle-track {
-  width: 50px;
-  height: 24px;
-  border-radius: 30px;
-  background-color: #4d4d4d;
-  transition: all 0.2s ease;
-}
-
-.react-toggle-track-check {
-  position: absolute;
-  width: 14px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  left: 8px;
-  opacity: 0;
-  transition: opacity 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-track-check,
-.react-toggle--checked .react-toggle-track-check {
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-.react-toggle-track-x {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  top: 0px;
-  bottom: 0px;
-  margin: auto 0;
-  right: 10px;
-  opacity: 1;
-  transition: opacity 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-track-x,
-.react-toggle--checked .react-toggle-track-x {
-  opacity: 0;
-}
-
-.react-toggle-thumb {
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  width: 22px;
-  height: 22px;
-  border: 1px solid #4d4d4d;
-  border-radius: 50%;
-  background-color: #fafafa;
-  transition: all 0.25s ease;
-}
-
-[data-theme='dark'] .react-toggle .react-toggle-thumb,
-.react-toggle--checked .react-toggle-thumb {
-  left: 27px;
-}
-
-.react-toggle--focus .react-toggle-thumb,
-.react-toggle:hover .react-toggle-thumb {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
-}
-
-.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
-}