@docusaurus/theme-classic 2.0.0-beta.16 → 2.0.0-beta.19

package/src/translations.ts

@@ -50,8 +50,11 @@ function getNavbarTranslationFile(navbar: Navbar): TranslationFileContent {
 }
 function translateNavbar(
   navbar: Navbar,
-  navbarTranslations: TranslationFileContent,
+  navbarTranslations: TranslationFileContent | undefined,
 ): Navbar {
+  if (!navbarTranslations) {
+    return navbar;
+  }
   return {
     ...navbar,
     title: navbarTranslations.title?.message ?? navbar.title,
@@ -76,7 +79,7 @@ function translateNavbar(
 function isMultiColumnFooterLinks(
   links: MultiColumnFooter['links'] | SimpleFooter['links'],
 ): links is MultiColumnFooter['links'] {
-  return links.length > 0 && 'title' in links[0];
+  return links.length > 0 && 'title' in links[0]!;
 }
 
 function getFooterTranslationFile(footer: Footer): TranslationFileContent {
@@ -121,8 +124,11 @@ function getFooterTranslationFile(footer: Footer): TranslationFileContent {
 }
 function translateFooter(
   footer: Footer,
-  footerTranslations: TranslationFileContent,
+  footerTranslations: TranslationFileContent | undefined,
 ): Footer {
+  if (!footerTranslations) {
+    return footer;
+  }
   const links = isMultiColumnFooterLinks(footer.links)
     ? footer.links.map((link) => ({
         ...link,
@@ -178,7 +184,7 @@ export function translateThemeConfig({
   themeConfig: ThemeConfig;
   translationFiles: TranslationFile[];
 }): ThemeConfig {
-  const translationFilesMap: Record<string, TranslationFile> = _.keyBy(
+  const translationFilesMap: {[fileName: string]: TranslationFile} = _.keyBy(
     translationFiles,
     (f) => f.path,
   );
@@ -187,10 +193,10 @@ export function translateThemeConfig({
     ...themeConfig,
     navbar: translateNavbar(
       themeConfig.navbar,
-      translationFilesMap.navbar.content,
+      translationFilesMap.navbar?.content,
     ),
     footer: themeConfig.footer
-      ? translateFooter(themeConfig.footer, translationFilesMap.footer.content)
+      ? translateFooter(themeConfig.footer, translationFilesMap.footer?.content)
       : undefined,
   };
 }

package/src/validateThemeConfig.ts

@@ -5,28 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import defaultPrismTheme from 'prism-react-renderer/themes/palenight';
 import {Joi, URISchema} from '@docusaurus/utils-validation';
-import type {ThemeConfig, Validate, ValidationResult} from '@docusaurus/types';
+import type {
+  ThemeConfig,
+  ThemeConfigValidationContext,
+} from '@docusaurus/types';
 
 const DEFAULT_DOCS_CONFIG = {
   versionPersistence: 'localStorage',
+  sidebar: {
+    hideable: false,
+    autoCollapseCategories: false,
+  },
 };
 const DocsSchema = Joi.object({
   versionPersistence: Joi.string()
     .equal('localStorage', 'none')
     .default(DEFAULT_DOCS_CONFIG.versionPersistence),
+  sidebar: Joi.object({
+    hideable: Joi.bool().default(DEFAULT_DOCS_CONFIG.sidebar.hideable),
+    autoCollapseCategories: Joi.bool().default(
+      DEFAULT_DOCS_CONFIG.sidebar.autoCollapseCategories,
+    ),
+  }).default(DEFAULT_DOCS_CONFIG.sidebar),
 }).default(DEFAULT_DOCS_CONFIG);
 
 const DEFAULT_COLOR_MODE_CONFIG = {
   defaultMode: 'light',
   disableSwitch: false,
   respectPrefersColorScheme: false,
-  switchConfig: {
-    darkIcon: '🌜',
-    darkIconStyle: {},
-    lightIcon: '🌞',
-    lightIconStyle: {},
-  },
 };
 
 export const DEFAULT_CONFIG = {
@@ -35,13 +43,19 @@ export const DEFAULT_CONFIG = {
   metadata: [],
   prism: {
     additionalLanguages: [],
+    theme: defaultPrismTheme,
+    magicComments: [
+      {
+        className: 'theme-code-block-highlighted-line',
+        line: 'highlight-next-line',
+        block: {start: 'highlight-start', end: 'highlight-end'},
+      },
+    ],
   },
   navbar: {
     hideOnScroll: false,
     items: [],
   },
-  hideableSidebar: false,
-  autoCollapseSidebarCategories: false,
   tableOfContents: {
     minHeadingLevel: 2,
     maxHeadingLevel: 3,
@@ -52,8 +66,10 @@ const NavbarItemPosition = Joi.string().equal('left', 'right').default('left');
 
 const NavbarItemBaseSchema = Joi.object({
   label: Joi.string(),
+  html: Joi.string(),
   className: Joi.string(),
 })
+  .nand('html', 'label')
   // We allow any unknown attributes on the links (users may need additional
   // attributes like target, aria-role, data-customAttribute...)
   .unknown();
@@ -92,11 +108,28 @@ const DocSidebarItemSchema = NavbarItemBaseSchema.append({
   docsPluginId: Joi.string(),
 });
 
-const itemWithType = (type: string | undefined) => {
-  // because equal(undefined) is not supported :/
-  const typeSchema = type
-    ? Joi.string().required().equal(type)
-    : Joi.string().forbidden();
+const HtmlNavbarItemSchema = Joi.object({
+  className: Joi.string(),
+  type: Joi.string().equal('html').required(),
+  value: Joi.string().required(),
+});
+
+// A temporary workaround to allow users to add custom navbar items
+// See https://github.com/facebook/docusaurus/issues/7227
+const CustomNavbarItemRegexp = /custom-.*/;
+const CustomNavbarItemSchema = Joi.object({
+  type: Joi.string().regex(CustomNavbarItemRegexp).required(),
+}).unknown();
+
+const itemWithType = (type: string | RegExp | undefined) => {
+  // Because equal(undefined) is not supported :/
+  const typeSchema =
+    // eslint-disable-next-line no-nested-ternary
+    type instanceof RegExp
+      ? Joi.string().required().regex(type)
+      : type
+      ? Joi.string().required().equal(type)
+      : Joi.string().forbidden();
   return Joi.object({
     type: typeSchema,
   })
@@ -124,6 +157,14 @@ const DropdownSubitemSchema = Joi.object({
       is: itemWithType(undefined),
       then: DefaultNavbarItemSchema,
     },
+    {
+      is: itemWithType('html'),
+      then: HtmlNavbarItemSchema,
+    },
+    {
+      is: itemWithType(CustomNavbarItemRegexp),
+      then: CustomNavbarItemSchema,
+    },
     {
       is: Joi.alternatives().try(
         itemWithType('dropdown'),
@@ -195,6 +236,14 @@ const NavbarItemSchema = Joi.object({
       is: itemWithType('search'),
       then: SearchItemSchema,
     },
+    {
+      is: itemWithType('html'),
+      then: HtmlNavbarItemSchema,
+    },
+    {
+      is: itemWithType(CustomNavbarItemRegexp),
+      then: CustomNavbarItemSchema,
+    },
     {
       is: itemWithType(undefined),
       then: Joi.object().when('.', {
@@ -220,23 +269,12 @@ const ColorModeSchema = Joi.object({
   respectPrefersColorScheme: Joi.bool().default(
     DEFAULT_COLOR_MODE_CONFIG.respectPrefersColorScheme,
   ),
-  switchConfig: Joi.object({
-    darkIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIcon,
-    ),
-    darkIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.darkIconStyle,
-    ),
-    lightIcon: Joi.string().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIcon,
-    ),
-    lightIconStyle: Joi.object().default(
-      DEFAULT_COLOR_MODE_CONFIG.switchConfig.lightIconStyle,
-    ),
-  }).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig),
+  switchConfig: Joi.any().forbidden().messages({
+    'any.unknown':
+      'colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.',
+  }),
 }).default(DEFAULT_COLOR_MODE_CONFIG);
 
-// schema can probably be improved
 const HtmlMetadataSchema = Joi.object({
   id: Joi.string(),
   name: Joi.string(),
@@ -320,7 +358,7 @@ export const ThemeConfigSchema = Joi.object({
     style: Joi.string().equal('dark', 'light').default('light'),
     logo: Joi.object({
       alt: Joi.string().allow(''),
-      src: Joi.string(),
+      src: Joi.string().required(),
       srcDark: Joi.string(),
       // TODO infer this from reading the image
       width: Joi.alternatives().try(Joi.string(), Joi.number()),
@@ -346,7 +384,7 @@ export const ThemeConfigSchema = Joi.object({
     theme: Joi.object({
       plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
       styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
-    }),
+    }).default(DEFAULT_CONFIG.prism.theme),
     darkTheme: Joi.object({
       plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
       styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
@@ -355,13 +393,29 @@ export const ThemeConfigSchema = Joi.object({
     additionalLanguages: Joi.array()
       .items(Joi.string())
       .default(DEFAULT_CONFIG.prism.additionalLanguages),
+    magicComments: Joi.array()
+      .items(
+        Joi.object({
+          className: Joi.string().required(),
+          line: Joi.string(),
+          block: Joi.object({
+            start: Joi.string().required(),
+            end: Joi.string().required(),
+          }),
+        }).or('line', 'block'),
+      )
+      .default(DEFAULT_CONFIG.prism.magicComments),
   })
     .default(DEFAULT_CONFIG.prism)
     .unknown(),
-  hideableSidebar: Joi.bool().default(DEFAULT_CONFIG.hideableSidebar),
-  autoCollapseSidebarCategories: Joi.bool().default(
-    DEFAULT_CONFIG.autoCollapseSidebarCategories,
-  ),
+  hideableSidebar: Joi.forbidden().messages({
+    'any.unknown':
+      'themeConfig.hideableSidebar has been moved to themeConfig.docs.sidebar.hideable.',
+  }),
+  autoCollapseSidebarCategories: Joi.forbidden().messages({
+    'any.unknown':
+      'themeConfig.autoCollapseSidebarCategories has been moved to themeConfig.docs.sidebar.autoCollapseCategories.',
+  }),
   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',
@@ -389,9 +443,6 @@ export const ThemeConfigSchema = Joi.object({
 export function validateThemeConfig({
   validate,
   themeConfig,
-}: {
-  validate: Validate<ThemeConfig>;
-  themeConfig: ThemeConfig;
-}): ValidationResult<ThemeConfig> {
+}: ThemeConfigValidationContext<ThemeConfig>): ThemeConfig {
   return validate(ThemeConfigSchema, themeConfig);
 }

package/lib/types.d.ts

@@ -1,11 +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.
- */
-
-/// <reference types="@docusaurus/module-type-aliases" />
-/// <reference types="@docusaurus/plugin-content-blog" />
-/// <reference types="@docusaurus/plugin-content-docs" />
-/// <reference types="@docusaurus/plugin-content-pages" />

package/lib-next/theme/DocPage/styles.module.css

@@ -1,86 +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.
- */
-
-:root {
-  --doc-sidebar-width: 300px;
-  --doc-sidebar-hidden-width: 30px;
-}
-
-:global(.docs-wrapper) {
-  display: flex;
-}
-
-.docPage,
-.docMainContainer {
-  display: flex;
-  width: 100%;
-}
-
-.docSidebarContainer {
-  display: none;
-}
-
-@media (min-width: 997px) {
-  .docMainContainer {
-    flex-grow: 1;
-    max-width: calc(100% - var(--doc-sidebar-width));
-  }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docSidebarContainer {
-    display: block;
-    width: var(--doc-sidebar-width);
-    margin-top: calc(-1 * var(--ifm-navbar-height));
-    border-right: 1px solid var(--ifm-toc-border-color);
-    will-change: width;
-    transition: width var(--ifm-transition-fast) ease;
-    clip-path: inset(0);
-  }
-
-  .docSidebarContainerHidden {
-    width: var(--doc-sidebar-hidden-width);
-    cursor: pointer;
-  }
-
-  .collapsedDocSidebar {
-    position: sticky;
-    top: 0;
-    height: 100%;
-    max-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color var(--ifm-transition-fast) ease;
-  }
-
-  .collapsedDocSidebar:hover,
-  .collapsedDocSidebar:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-
-  .expandSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [dir='rtl'] .expandSidebarButtonIcon {
-    transform: rotate(180deg);
-  }
-
-  [data-theme='dark'] .collapsedDocSidebar:hover,
-  [data-theme='dark'] .collapsedDocSidebar:focus {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  }
-}

package/lib-next/theme/DocSidebar/styles.module.css

@@ -1,107 +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.
- */
-
-:root {
-  --collapse-button-bg-color-dark: #2e333a;
-}
-
-@media (min-width: 997px) {
-  .sidebar {
-    display: flex;
-    flex-direction: column;
-    max-height: 100vh;
-    height: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: var(--ifm-navbar-height);
-    width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
-  }
-
-  .sidebarWithHideableNavbar {
-    padding-top: 0;
-  }
-
-  .sidebarHidden {
-    opacity: 0;
-    height: 0;
-    overflow: hidden;
-    visibility: hidden;
-  }
-
-  .sidebarLogo {
-    display: flex !important;
-    align-items: center;
-    margin: 0 var(--ifm-navbar-padding-horizontal);
-    min-height: var(--ifm-navbar-height);
-    max-height: var(--ifm-navbar-height);
-    color: inherit !important;
-    text-decoration: none !important;
-  }
-
-  .sidebarLogo img {
-    margin-right: 0.5rem;
-    height: 2rem;
-  }
-
-  .menu {
-    flex-grow: 1;
-    padding: 0.5rem;
-  }
-
-  .menuWithAnnouncementBar {
-    margin-bottom: var(--docusaurus-announcement-bar-height);
-  }
-
-  .collapseSidebarButton {
-    display: block !important;
-    background-color: var(--ifm-button-background-color);
-    height: 40px;
-    position: sticky;
-    bottom: 0;
-    border-radius: 0;
-    border: 1px solid var(--ifm-toc-border-color);
-  }
-
-  .collapseSidebarButtonIcon {
-    transform: rotate(180deg);
-    margin-top: 4px;
-  }
-
-  [dir='rtl'] .collapseSidebarButtonIcon {
-    transform: rotate(0);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton {
-    background-color: var(--collapse-button-bg-color-dark);
-  }
-
-  [data-theme='dark'] .collapseSidebarButton:hover,
-  [data-theme='dark'] .collapseSidebarButton:focus {
-    background-color: var(--ifm-color-emphasis-200);
-  }
-}
-
-.sidebarLogo,
-.collapseSidebarButton {
-  display: none;
-}
-
-.sidebarMenuIcon {
-  vertical-align: middle;
-}
-
-.sidebarMenuCloseIcon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 24px;
-  font-size: 1.5rem;
-  font-weight: var(--ifm-font-weight-bold);
-  line-height: 0.9;
-  width: 24px;
-}

package/lib-next/theme/Seo/index.js

@@ -1,40 +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.
- */
-import React from 'react';
-import Head from '@docusaurus/Head';
-import {useTitleFormatter} from '@docusaurus/theme-common';
-import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
-export default function Seo({title, description, keywords, image, children}) {
-  const pageTitle = useTitleFormatter(title);
-  const {withBaseUrl} = useBaseUrlUtils();
-  const pageImage = image
-    ? withBaseUrl(image, {
-        absolute: true,
-      })
-    : undefined;
-  return (
-    <Head>
-      {title && <title>{pageTitle}</title>}
-      {title && <meta property="og:title" content={pageTitle} />}
-
-      {description && <meta name="description" content={description} />}
-      {description && <meta property="og:description" content={description} />}
-
-      {keywords && (
-        <meta
-          name="keywords"
-          content={Array.isArray(keywords) ? keywords.join(',') : keywords}
-        />
-      )}
-
-      {pageImage && <meta property="og:image" content={pageImage} />}
-      {pageImage && <meta name="twitter:image" content={pageImage} />}
-
-      {children}
-    </Head>
-  );
-}

package/lib-next/theme/Toggle/index.js

@@ -1,100 +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.
- */
-import React, {useState, useRef, useEffect, memo} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {translate} from '@docusaurus/Translate';
-import clsx from 'clsx';
-import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
-
-const ToggleComponent = memo(
-  ({className, switchConfig, checked: defaultChecked, disabled, onChange}) => {
-    const {darkIcon, darkIconStyle, lightIcon, lightIconStyle} = switchConfig;
-    const [checked, setChecked] = useState(defaultChecked);
-    const [focused, setFocused] = useState(false);
-    const inputRef = useRef(null);
-    useEffect(() => {
-      setChecked(defaultChecked);
-    }, [defaultChecked]);
-    return (
-      <div
-        className={clsx(styles.toggle, className, {
-          [styles.toggleChecked]: checked,
-          [styles.toggleFocused]: focused,
-          [styles.toggleDisabled]: disabled,
-        })}>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          className={styles.toggleTrack}
-          role="button"
-          tabIndex={-1}
-          onClick={() => inputRef.current?.click()}>
-          <div className={styles.toggleTrackCheck}>
-            <span className={styles.toggleIcon} style={darkIconStyle}>
-              {darkIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackX}>
-            <span className={styles.toggleIcon} style={lightIconStyle}>
-              {lightIcon}
-            </span>
-          </div>
-          <div className={styles.toggleTrackThumb} />
-        </div>
-
-        <input
-          ref={inputRef}
-          checked={checked}
-          type="checkbox"
-          className={styles.toggleScreenReader}
-          aria-label={translate(
-            {
-              message: 'Switch between dark and light mode (currently {mode})',
-              id: 'theme.colorToggle.ariaLabel',
-              description: 'The ARIA label for the navbar color mode toggle',
-            },
-            {
-              mode: checked
-                ? translate({
-                    message: 'dark mode',
-                    id: 'theme.colorToggle.ariaLabel.mode.dark',
-                    description: 'The name for the dark color mode',
-                  })
-                : translate({
-                    message: 'light mode',
-                    id: 'theme.colorToggle.ariaLabel.mode.light',
-                    description: 'The name for the light color mode',
-                  }),
-            },
-          )}
-          onChange={onChange}
-          onClick={() => setChecked(!checked)}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              inputRef.current?.click();
-            }
-          }}
-        />
-      </div>
-    );
-  },
-);
-export default function Toggle(props) {
-  const {
-    colorMode: {switchConfig},
-  } = useThemeConfig();
-  const isBrowser = useIsBrowser();
-  return (
-    <ToggleComponent
-      switchConfig={switchConfig}
-      disabled={!isBrowser}
-      {...props}
-    />
-  );
-}