@docusaurus/theme-classic 2.0.0-beta.8e9b829d9 → 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,6 +41,10 @@ const DEFAULT_CONFIG = {
     items: [],
   },
   hideableSidebar: false,
+  tableOfContents: {
+    minHeadingLevel: 2,
+    maxHeadingLevel: 3,
+  },
 };
 exports.DEFAULT_CONFIG = DEFAULT_CONFIG;
 
@@ -79,10 +84,9 @@ const DocItemSchema = NavbarItemBaseSchema.append({
   type: Joi.string().equal('doc').required(),
   docId: Joi.string().required(),
   docsPluginId: Joi.string(),
-  activeSidebarClassName: Joi.string().default('navbar__link--active'),
 });
 
-const itemWithType = (type) => {
+const itemWithType = (type: string | undefined) => {
   // because equal(undefined) is not supported :/
   const typeSchema = type
     ? Joi.string().required().equal(type)
@@ -96,7 +100,7 @@ const itemWithType = (type) => {
 
 const DropdownSubitemSchema = Joi.object({
   position: Joi.forbidden(),
-}).when({
+}).when('.', {
   switch: [
     {
       is: itemWithType('docsVersion'),
@@ -151,7 +155,7 @@ const SearchItemSchema = Joi.object({
 
 const NavbarItemSchema = Joi.object({
   position: NavbarItemPosition,
-}).when({
+}).when('.', {
   switch: [
     {
       is: itemWithType('docsVersion'),
@@ -179,7 +183,7 @@ const NavbarItemSchema = Joi.object({
     },
     {
       is: itemWithType(undefined),
-      then: Joi.object().when({
+      then: Joi.object().when('.', {
         // Dropdown item can be specified without type field
         is: Joi.object({
           items: Joi.array().required(),
@@ -247,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"',
   }),
@@ -265,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),
@@ -286,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(),
     }),
@@ -296,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(),
@@ -329,9 +338,34 @@ const ThemeConfigSchema = Joi.object({
     '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

@@ -4,7 +4,6 @@
     "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() {
@@ -56,9 +57,9 @@ async function extractThemeCodeMessages() {
     // 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,

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);
-}

package/lib/theme/hooks/useScrollPosition.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _ExecutionEnvironment = _interopRequireDefault(require("@docusaurus/ExecutionEnvironment"));
-
-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 getScrollPosition = () => {
-  return _ExecutionEnvironment.default.canUseDOM ? {
-    scrollX: window.pageXOffset,
-    scrollY: window.pageYOffset
-  } : null;
-};
-
-const useScrollPosition = (effect, deps = []) => {
-  const lastPositionRef = (0, _react.useRef)(getScrollPosition());
-
-  const handleScroll = () => {
-    const currentPosition = getScrollPosition();
-
-    if (effect) {
-      effect(currentPosition, lastPositionRef.current);
-    }
-
-    lastPositionRef.current = currentPosition;
-  };
-
-  (0, _react.useEffect)(() => {
-    const opts = {
-      passive: true
-    };
-    handleScroll();
-    window.addEventListener('scroll', handleScroll, opts);
-    return () => window.removeEventListener('scroll', handleScroll, opts);
-  }, deps);
-};
-
-var _default = useScrollPosition;
-exports.default = _default;

package/lib/theme/hooks/useTOCHighlight.js

@@ -1,87 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-/**
- * 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.
- */
-function useTOCHighlight(linkClassName, linkActiveClassName, topOffset) {
-  const [lastActiveLink, setLastActiveLink] = (0, _react.useState)(undefined);
-  (0, _react.useEffect)(() => {
-    function setActiveLink() {
-      function getActiveHeaderAnchor() {
-        const headersAnchors = Array.from(document.getElementsByClassName('anchor'));
-        const firstAnchorUnderViewportTop = headersAnchors.find(anchor => {
-          const {
-            top
-          } = anchor.getBoundingClientRect();
-          return top >= topOffset;
-        });
-
-        if (firstAnchorUnderViewportTop) {
-          // If first anchor in viewport is under a certain threshold, we consider it's not the active anchor.
-          // In such case, the active anchor is the previous one (if it exists), that may be above the viewport
-          if (firstAnchorUnderViewportTop.getBoundingClientRect().top >= topOffset) {
-            const previousAnchor = headersAnchors[headersAnchors.indexOf(firstAnchorUnderViewportTop) - 1];
-            return previousAnchor !== null && previousAnchor !== void 0 ? previousAnchor : firstAnchorUnderViewportTop;
-          } // If the anchor is at the top of the viewport, we consider it's the first anchor
-          else {
-              return firstAnchorUnderViewportTop;
-            }
-        } // no anchor under viewport top? (ie we are at the bottom of the page)
-        else {
-            // highlight the last anchor found
-            return headersAnchors[headersAnchors.length - 1];
-          }
-      }
-
-      const activeHeaderAnchor = getActiveHeaderAnchor();
-
-      if (activeHeaderAnchor) {
-        let index = 0;
-        let itemHighlighted = false; // @ts-expect-error: Must be <a> tags.
-
-        const links = document.getElementsByClassName(linkClassName);
-
-        while (index < links.length && !itemHighlighted) {
-          const link = links[index];
-          const {
-            href
-          } = link;
-          const anchorValue = decodeURIComponent(href.substring(href.indexOf('#') + 1));
-
-          if (activeHeaderAnchor.id === anchorValue) {
-            if (lastActiveLink) {
-              lastActiveLink.classList.remove(linkActiveClassName);
-            }
-
-            link.classList.add(linkActiveClassName);
-            setLastActiveLink(link);
-            itemHighlighted = true;
-          }
-
-          index += 1;
-        }
-      }
-    }
-
-    document.addEventListener('scroll', setActiveLink);
-    document.addEventListener('resize', setActiveLink);
-    setActiveLink();
-    return () => {
-      document.removeEventListener('scroll', setActiveLink);
-      document.removeEventListener('resize', setActiveLink);
-    };
-  });
-}
-
-var _default = useTOCHighlight;
-exports.default = _default;

package/lib-next/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);
-}