@docusaurus/theme-classic 2.0.0-beta.14 → 2.0.0-beta.15

package/lib-next/theme/NavbarItem/NavbarNavLink.js

@@ -0,0 +1,70 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import IconExternalLink from '@theme/IconExternalLink';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import {isRegexpStringMatch} from '@docusaurus/theme-common';
+const dropdownLinkActiveClass = 'dropdown__link--active';
+export default function NavbarNavLink({
+  activeBasePath,
+  activeBaseRegex,
+  to,
+  href,
+  label,
+  activeClassName = '',
+  prependBaseUrlToHref,
+  ...props
+}) {
+  // TODO all this seems hacky
+  // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
+  const toUrl = useBaseUrl(to);
+  const activeBaseUrl = useBaseUrl(activeBasePath);
+  const normalizedHref = useBaseUrl(href, {
+    forcePrependBaseUrl: true,
+  });
+  const isExternalLink = label && href && !isInternalUrl(href);
+  const isDropdownLink = activeClassName === dropdownLinkActiveClass;
+  return (
+    <Link
+      {...(href
+        ? {
+            href: prependBaseUrlToHref ? normalizedHref : href,
+          }
+        : {
+            isNavLink: true,
+            activeClassName: !props.className?.includes(activeClassName)
+              ? activeClassName
+              : '',
+            to: toUrl,
+            ...(activeBasePath || activeBaseRegex
+              ? {
+                  isActive: (_match, location) =>
+                    activeBaseRegex
+                      ? isRegexpStringMatch(activeBaseRegex, location.pathname)
+                      : location.pathname.startsWith(activeBaseUrl),
+                }
+              : null),
+          })}
+      {...props}>
+      {isExternalLink ? (
+        <span>
+          {label}
+          <IconExternalLink
+            {...(isDropdownLink && {
+              width: 12,
+              height: 12,
+            })}
+          />
+        </span>
+      ) : (
+        label
+      )}
+    </Link>
+  );
+}

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

@@ -22,6 +22,7 @@ const NavbarItemComponents = {
   docsVersionDropdown: () =>
     require('@theme/NavbarItem/DocsVersionDropdownNavbarItem').default,
   doc: () => require('@theme/NavbarItem/DocNavbarItem').default,
+  docSidebar: () => require('@theme/NavbarItem/DocSidebarNavbarItem').default,
   /* eslint-enable @typescript-eslint/no-var-requires, global-require */
 };
 
@@ -45,8 +46,6 @@ function getComponentType(type, isDropdown) {
   return type;
 }
 
-export const getInfimaActiveClassName = (mobile) =>
-  mobile ? 'menu__link--active' : 'navbar__link--active';
 export default function NavbarItem({type, ...props}) {
   const componentType = getComponentType(type, props.items !== undefined);
   const NavbarItemComponent = getNavbarItemComponent(componentType);

package/lib-next/theme/{hooks/styles.css → NavbarItem/utils.js}

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-body:not(.navigation-with-keyboard) *:not(input):focus {
-  outline: none;
-}
+// eslint-disable-next-line import/no-named-export
+export const getInfimaActiveClassName = (mobile) =>
+  mobile ? 'menu__link--active' : 'navbar__link--active';

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

@@ -0,0 +1,20 @@
+/**
+ * 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 Link from '@docusaurus/Link';
+
+function PaginatorNavLink(props) {
+  const {permalink, title, subLabel} = props;
+  return (
+    <Link className="pagination-nav__link" to={permalink}>
+      {subLabel && <div className="pagination-nav__sublabel">{subLabel}</div>}
+      <div className="pagination-nav__label">{title}</div>
+    </Link>
+  );
+}
+
+export default PaginatorNavLink;

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

@@ -37,7 +37,7 @@ function SkipToContent() {
     }
   });
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} role="region">
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" className={styles.skipToContent} onClick={handleSkip}>
         <Translate

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

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 .skipToContent {
   position: fixed;
   top: 1rem;

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

@@ -20,7 +20,7 @@
   width: 100%;
 }
 
-.tocCollapsibleButton:after {
+.tocCollapsibleButton::after {
   content: '';
   background: var(--ifm-menu-link-sublist-icon) 50% 50% / 2rem 2rem no-repeat;
   filter: var(--ifm-menu-link-sublist-icon-filter);
@@ -45,6 +45,6 @@
   display: block;
 }
 
-.tocCollapsibleExpanded .tocCollapsibleButton:after {
+.tocCollapsibleExpanded .tocCollapsibleButton::after {
   transform: none;
 }

package/lib-next/theme/Tabs/__tests__/index.test.js

@@ -8,8 +8,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
-import {ScrollControllerProvider} from '@docusaurus/theme-common';
+import {
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+} from '@docusaurus/theme-common';
 describe('Tabs', () => {
   test('Should reject bad Tabs child', () => {
     expect(() => {
@@ -55,7 +57,7 @@ describe('Tabs', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs>
               <TabItem value="v1">Tab 1</TabItem>
               <TabItem value="v2">Tab 2</TabItem>
@@ -112,7 +114,7 @@ describe('Tabs', () => {
                 Tab 2
               </TabItem>
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
@@ -123,7 +125,7 @@ describe('Tabs', () => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs
               values={tabs.map((t, idx) => ({
                 label: t,
@@ -134,7 +136,7 @@ describe('Tabs', () => {
                 <TabItem value={idx}>{t}</TabItem>
               ))}
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow();

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

@@ -6,8 +6,11 @@
  */
 import React, {useState, cloneElement, Children, isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
-import {useScrollPositionBlocker, duplicates} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  duplicates,
+  useTabGroupChoice,
+} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css'; // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
@@ -72,7 +75,7 @@ function TabsComponent(props) {
     );
   }
 
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =

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

@@ -33,8 +33,8 @@
   border-left: 0;
 }
 
-.tagWithCount:before,
-.tagWithCount:after {
+.tagWithCount::before,
+.tagWithCount::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -42,7 +42,7 @@
   transition: inherit;
 }
 
-.tagWithCount:before {
+.tagWithCount::before {
   right: 100%;
   transform: translate(50%, -50%) rotate(-45deg);
   width: 1.18rem;
@@ -51,7 +51,7 @@
   border-bottom: 0;
 }
 
-.tagWithCount:after {
+.tagWithCount::after {
   left: 0;
   transform: translateY(-50%);
   width: 0.5rem;

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

@@ -7,12 +7,12 @@
 import React from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
 function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useThemeContext();
+  const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
   const clientThemes = isDarkTheme ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser

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

@@ -39,16 +39,16 @@
   position: absolute;
   width: 14px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   left: 8px;
   opacity: 0;
   transition: opacity 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackCheck,
-.toggleChecked .toggleTrackCheck {
+.toggleChecked .toggleTrackCheck,
+[data-theme='dark'] .toggle .toggleTrackCheck {
   opacity: 1;
   transition: opacity 0.25s ease;
 }
@@ -57,16 +57,16 @@
   position: absolute;
   width: 10px;
   height: 10px;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   margin: auto 0;
   right: 10px;
   opacity: 1;
   transition: opacity 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackX,
-.toggleChecked .toggleTrackX {
+.toggleChecked .toggleTrackX,
+[data-theme='dark'] .toggle .toggleTrackX {
   opacity: 0;
 }
 
@@ -82,18 +82,19 @@
   transition: all 0.25s ease;
 }
 
-[data-theme='dark'] .toggle .toggleTrackThumb,
-.toggleChecked .toggleTrackThumb {
-  left: 27px;
-}
-
 .toggleFocused .toggleTrackThumb,
 .toggle:hover .toggleTrackThumb {
-  box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
+  box-shadow: 0 0 2px 3px var(--ifm-color-primary);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.toggleChecked .toggleTrackThumb,
+[data-theme='dark'] .toggle .toggleTrackThumb {
+  left: 27px;
 }
 
 .toggle:active:not(.toggleDisabled) .toggleTrackThumb {
-  box-shadow: 0px 0px 5px 5px var(--ifm-color-primary);
+  box-shadow: 0 0 5px 5px var(--ifm-color-primary);
 }
 
 .toggleIcon {

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

@@ -10,12 +10,19 @@ import siteConfig from '@generated/docusaurus.config';
 const prismIncludeLanguages = (PrismObject) => {
   if (ExecutionEnvironment.canUseDOM) {
     const {
-      themeConfig: {prism = {}},
+      themeConfig: {prism},
     } = siteConfig;
-    const {additionalLanguages = []} = prism;
+    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 this object: registering plugins, deleting languages... As
+    // long as you don't re-assign it
+
     window.Prism = PrismObject;
     additionalLanguages.forEach((lang) => {
-      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
+      // eslint-disable-next-line global-require, import/no-dynamic-require
+      require(`prismjs/components/prism-${lang}`);
     });
     delete window.Prism;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.14",
+  "version": "2.0.0-beta.15",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -18,24 +18,21 @@
     "watch": "concurrently --names \"lib,lib-next,tsc\" --kill-others \"yarn babel:lib --watch\" \"yarn babel:lib-next --watch\" \"yarn tsc --watch\"",
     "babel:lib": "cross-env BABEL_ENV=lib babel src -d lib --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
     "babel:lib-next": "cross-env BABEL_ENV=lib-next babel src -d lib-next --extensions \".tsx,.ts\" --ignore \"**/*.d.ts\" --copy-files",
-    "format": "prettier --config ../../.prettierrc --ignore-path ../../.prettierignore --write \"**/*.{js,ts,jsx,tsc}\"",
-    "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\"",
-    "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
+    "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.14",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.14",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.14",
-    "@docusaurus/theme-common": "2.0.0-beta.14",
-    "@docusaurus/theme-translations": "2.0.0-beta.14",
-    "@docusaurus/utils": "2.0.0-beta.14",
-    "@docusaurus/utils-validation": "2.0.0-beta.14",
-    "@mdx-js/mdx": "^1.6.21",
+    "@docusaurus/core": "2.0.0-beta.15",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.15",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.15",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.15",
+    "@docusaurus/theme-common": "2.0.0-beta.15",
+    "@docusaurus/theme-translations": "2.0.0-beta.15",
+    "@docusaurus/utils": "2.0.0-beta.15",
+    "@docusaurus/utils-common": "2.0.0-beta.15",
+    "@docusaurus/utils-validation": "2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "globby": "^11.0.2",
     "infima": "0.2.0-alpha.37",
     "lodash": "^4.17.20",
     "postcss": "^8.3.7",
@@ -45,11 +42,13 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
-    "@docusaurus/types": "2.0.0-beta.14",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
+    "@docusaurus/types": "2.0.0-beta.15",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
+    "@types/prismjs": "^1.16.2",
     "@types/rtlcss": "^3.1.1",
+    "cross-env": "^7.0.3",
     "fs-extra": "^10.0.0",
     "react-test-renderer": "^17.0.2",
     "utility-types": "^3.10.0"
@@ -61,5 +60,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "c4824a8937d8f1aa0806667749cbc74058e2b294"
+  "gitHead": "6cfad16436c07d8d11e5c2e1486dc59afd483e33"
 }

package/src/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {DocusaurusContext, Plugin, PostCssOptions} from '@docusaurus/types';
+import type {LoadContext, Plugin, PostCssOptions} from '@docusaurus/types';
 import type {ThemeConfig} from '@docusaurus/theme-common';
 import {getTranslationFiles, translateThemeConfig} from './translations';
 import path from 'path';
@@ -14,13 +14,13 @@ import type {Plugin as PostCssPlugin} from 'postcss';
 import rtlcss from 'rtlcss';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 import type {Options} from '@docusaurus/theme-classic';
+import type webpack from 'webpack';
 
 const requireFromDocusaurusCore = createRequire(
   require.resolve('@docusaurus/core/package.json'),
 );
-const ContextReplacementPlugin = requireFromDocusaurusCore(
-  'webpack/lib/ContextReplacementPlugin',
-);
+const ContextReplacementPlugin: typeof webpack.ContextReplacementPlugin =
+  requireFromDocusaurusCore('webpack/lib/ContextReplacementPlugin');
 
 // Need to be inlined to prevent dark mode FOUC
 // Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js`
@@ -91,7 +91,7 @@ function getInfimaCSSFile(direction: string) {
 }
 
 export default function docusaurusThemeClassic(
-  context: DocusaurusContext, // TODO: LoadContext is missing some of properties
+  context: LoadContext,
   options: Options,
 ): Plugin<void> {
   const {
@@ -110,22 +110,12 @@ export default function docusaurusThemeClassic(
   return {
     name: 'docusaurus-theme-classic',
 
-    /*
-    Does not seem needed: webpack can already hot reload theme files
-    getPathsToWatch() {
-      return [
-        path.join(__dirname, '..', 'lib'),
-        path.join(__dirname, '..', 'lib-next'),
-      ];
-    },
-     */
-
     getThemePath() {
-      return path.join(__dirname, '..', 'lib-next', 'theme');
+      return path.join(__dirname, '../lib-next/theme');
     },
 
     getTypeScriptThemePath() {
-      return path.resolve(__dirname, '..', 'src', 'theme');
+      return path.resolve(__dirname, '../src/theme');
     },
 
     getTranslationFiles: async () => getTranslationFiles({themeConfig}),
@@ -167,11 +157,10 @@ export default function docusaurusThemeClassic(
         .join('|');
 
       return {
-        ignoreWarnings: [
-          // See https://github.com/facebook/docusaurus/pull/3382
-          (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"),
-        ],
         plugins: [
+          // This allows better optimization by only bundling those components
+          // that the user actually needs, because the modules are dynamically
+          // required and can't be known during compile time.
           new ContextReplacementPlugin(
             /prismjs[\\/]components$/,
             new RegExp(`^./(${prismLanguages})$`),

package/src/theme/Admonition/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import {Props} from '@theme/Admonition';
+import type {Props} from '@theme/Admonition';
 
 const icons = {
   note: (

package/src/theme/BackToTopButton/styles.module.css

@@ -21,7 +21,7 @@
   transform: scale(0);
 }
 
-.backToTopButton:after {
+.backToTopButton::after {
   content: ' ';
   display: inline-block;
   mask: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem no-repeat;

package/src/theme/BlogListPaginator/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogListPaginator';
 
 function BlogListPaginator(props: Props): JSX.Element {
@@ -24,30 +24,30 @@ function BlogListPaginator(props: Props): JSX.Element {
       })}>
       <div className="pagination-nav__item">
         {previousPage && (
-          <Link className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">
-              &laquo;{' '}
+          <PaginatorNavLink
+            permalink={previousPage}
+            title={
               <Translate
                 id="theme.blog.paginator.newerEntries"
                 description="The label used to navigate to the newer blog posts page (previous page)">
                 Newer Entries
               </Translate>
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextPage && (
-          <Link className="pagination-nav__link" to={nextPage}>
-            <div className="pagination-nav__label">
+          <PaginatorNavLink
+            permalink={nextPage}
+            title={
               <Translate
                 id="theme.blog.paginator.olderEntries"
                 description="The label used to navigate to the older blog posts page (next page)">
                 Older Entries
-              </Translate>{' '}
-              &raquo;
-            </div>
-          </Link>
+              </Translate>
+            }
+          />
         )}
       </div>
     </nav>

package/src/theme/BlogPostAuthor/index.tsx

@@ -22,7 +22,7 @@ function BlogPostAuthor({author}: Props): JSX.Element {
       )}
 
       {
-        // Note: only legacy author frontmatter allow empty name (not frontMatter.authors)
+        // Note: only legacy author front matter allow empty name (not frontMatter.authors)
         name && (
           <div
             className="avatar__intro"

package/src/theme/BlogPostAuthors/index.tsx

@@ -21,10 +21,20 @@ export default function BlogPostAuthors({
   if (authorsCount === 0) {
     return null;
   }
+  const imageOnly = authors.every(({name}) => !name);
   return (
-    <div className="row margin-top--md margin-bottom--sm">
+    <div
+      className={clsx(
+        'margin-top--md margin-bottom--sm',
+        imageOnly ? styles.imageOnlyAuthorRow : 'row',
+      )}>
       {authors.map((author, idx) => (
-        <div className={clsx('col col--6', styles.authorCol)} key={idx}>
+        <div
+          className={clsx(
+            !imageOnly && 'col col--6',
+            imageOnly ? styles.imageOnlyAuthorCol : styles.authorCol,
+          )}
+          key={idx}>
           <BlogPostAuthor
             author={{
               ...author,

package/src/theme/BlogPostAuthors/styles.module.css

@@ -9,3 +9,13 @@
   max-width: inherit !important;
   flex-grow: 1 !important;
 }
+
+.imageOnlyAuthorRow {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.imageOnlyAuthorCol {
+  margin-left: 0.3rem;
+  margin-right: 0.3rem;
+}