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

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

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
 export default function TabItem({children, hidden, className}) {
   return (
     <div
       role="tabpanel"
+      className={clsx(styles.tabItem, className)}
       {...{
         hidden,
-        className,
       }}>
       {children}
     </div>

package/lib-next/theme/{MDXComponents/Ul.module.css → TabItem/styles.module.css}

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.contains-task-list {
-  padding-left: 0;
-  list-style: none;
+.tabItem > *:last-child {
+  margin-bottom: 0;
 }

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

@@ -22,7 +22,7 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique \\"value\\" prop."`,
+      `"Docusaurus error: Bad <Tabs> child <div>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop."`,
     );
   });
   it('rejects bad Tabs defaultValue', () => {
@@ -34,7 +34,7 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: The <Tabs> has a defaultValue \\"bad\\" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`,
+      `"Docusaurus error: The <Tabs> has a defaultValue "bad" but none of its children has the corresponding value. Available values are: v1, v2. If you intend to show no default tab, use defaultValue={null} instead."`,
     );
   });
   it('rejects duplicate values', () => {
@@ -50,7 +50,7 @@ describe('Tabs', () => {
         </Tabs>,
       );
     }).toThrowErrorMatchingInlineSnapshot(
-      `"Docusaurus error: Duplicate values \\"v1, v2\\" found in <Tabs>. Every value needs to be unique."`,
+      `"Docusaurus error: Duplicate values "v1, v2" found in <Tabs>. Every value needs to be unique."`,
     );
   });
   it('accepts valid Tabs config', () => {

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

@@ -132,7 +132,7 @@ function TabsComponent(props) {
   };
 
   return (
-    <div className="tabs-container">
+    <div className={clsx('tabs-container', styles.tabList)}>
       <ul
         role="tablist"
         aria-orientation="horizontal"
@@ -173,11 +173,11 @@ function TabsComponent(props) {
             (tabItem) => tabItem.props.value === selectedValue,
           )[0],
           {
-            className: 'margin-vert--md',
+            className: 'margin-top--md',
           },
         )
       ) : (
-        <div className="margin-vert--md">
+        <div className="margin-top--md">
           {children.map((tabItem, i) =>
             cloneElement(tabItem, {
               key: i,

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

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.tabList {
+  margin-bottom: var(--ifm-leading);
+}
+
 .tabItem {
   margin-top: 0 !important;
 }

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

@@ -8,8 +8,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
-export default function Tag(props) {
-  const {permalink, name, count} = props;
+export default function Tag({permalink, label, count}) {
   return (
     <Link
       href={permalink}
@@ -17,7 +16,7 @@ export default function Tag(props) {
         styles.tag,
         count ? styles.tagWithCount : styles.tagRegular,
       )}>
-      {name}
+      {label}
       {count && <span>{count}</span>}
     </Link>
   );

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

@@ -22,7 +22,7 @@ export default function TagsListInline({tags}) {
       <ul className={clsx(styles.tags, 'padding--none', 'margin-left--sm')}>
         {tags.map(({label, permalink: tagPermalink}) => (
           <li key={tagPermalink} className={styles.tag}>
-            <Tag name={label} permalink={tagPermalink} />
+            <Tag label={label} permalink={tagPermalink} />
           </li>
         ))}
       </ul>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,34 +21,39 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.18",
-    "@docusaurus/plugin-content-blog": "2.0.0-beta.18",
-    "@docusaurus/plugin-content-docs": "2.0.0-beta.18",
-    "@docusaurus/plugin-content-pages": "2.0.0-beta.18",
-    "@docusaurus/theme-common": "2.0.0-beta.18",
-    "@docusaurus/theme-translations": "2.0.0-beta.18",
-    "@docusaurus/utils": "2.0.0-beta.18",
-    "@docusaurus/utils-common": "2.0.0-beta.18",
-    "@docusaurus/utils-validation": "2.0.0-beta.18",
+    "@docusaurus/core": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-blog": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-docs": "2.0.0-beta.19",
+    "@docusaurus/plugin-content-pages": "2.0.0-beta.19",
+    "@docusaurus/theme-common": "2.0.0-beta.19",
+    "@docusaurus/theme-translations": "2.0.0-beta.19",
+    "@docusaurus/utils": "2.0.0-beta.19",
+    "@docusaurus/utils-common": "2.0.0-beta.19",
+    "@docusaurus/utils-validation": "2.0.0-beta.19",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.38",
+    "infima": "0.2.0-alpha.39",
     "lodash": "^4.17.21",
-    "postcss": "^8.4.12",
+    "nprogress": "^0.2.0",
+    "postcss": "^8.4.13",
     "prism-react-renderer": "^1.3.1",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.28.0",
     "react-router-dom": "^5.2.0",
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
-    "@docusaurus/types": "2.0.0-beta.18",
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-typescript": "^7.16.7",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.19",
+    "@docusaurus/types": "2.0.0-beta.19",
     "@types/mdx-js__react": "^1.5.5",
+    "@types/nprogress": "^0.2.0",
     "@types/prismjs": "^1.26.0",
-    "@types/rtlcss": "^3.1.2",
+    "@types/rtlcss": "^3.1.4",
     "cross-env": "^7.0.3",
-    "fs-extra": "^10.0.1",
+    "fs-extra": "^10.1.0",
     "react-test-renderer": "^17.0.2",
     "utility-types": "^3.10.0"
   },
@@ -59,5 +64,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "1a945d06993d53376e61bed2c942799fe07dc336"
+  "gitHead": "a71e60a49cce93c1006ef10c41ac03187f057102"
 }

package/src/admonitions.css

@@ -11,6 +11,10 @@
   text-transform: uppercase;
 }
 
+.admonition h5 code {
+  text-transform: none;
+}
+
 .admonition-icon {
   display: inline-block;
   vertical-align: middle;

package/src/getSwizzleConfig.ts

@@ -30,7 +30,7 @@ export default function getSwizzleConfig(): SwizzleConfig {
       },
       DocSidebar: {
         actions: {
-          eject: 'unsafe', // too much technical code in sidebar, not very safe atm
+          eject: 'unsafe', // Too much technical code in sidebar, not very safe atm
           wrap: 'safe',
         },
         description: 'The sidebar component on docs pages',
@@ -206,6 +206,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'A component wrapping all MDX content and providing the MDXComponents to the MDX context',
       },
+      'NavbarItem/ComponentTypes': {
+        actions: {
+          eject: 'safe',
+          wrap: 'forbidden',
+        },
+        description:
+          'The Navbar item components mapping. Can be ejected to add custom navbar item types. See https://github.com/facebook/docusaurus/issues/7227.',
+      },
       // TODO should probably not even appear here
       'NavbarItem/utils': {
         actions: {
@@ -234,7 +242,7 @@ export default function getSwizzleConfig(): SwizzleConfig {
       'prism-include-languages': {
         actions: {
           eject: 'safe',
-          wrap: 'forbidden', // not a component!
+          wrap: 'forbidden', // Not a component!
         },
         description:
           'The Prism languages to include for code block syntax highlighting. Meant to be ejected.',

package/src/index.ts

@@ -91,10 +91,10 @@ function getInfimaCSSFile(direction: string) {
   }.css`;
 }
 
-export default function docusaurusThemeClassic(
+export default function themeClassic(
   context: LoadContext,
   options: Options,
-): Plugin<void> {
+): Plugin<undefined> {
   const {
     i18n: {currentLocale, localeConfigs},
   } = context;
@@ -118,7 +118,7 @@ export default function docusaurusThemeClassic(
       return '../src/theme';
     },
 
-    getTranslationFiles: async () => getTranslationFiles({themeConfig}),
+    getTranslationFiles: () => getTranslationFiles({themeConfig}),
 
     translateThemeConfig: (params) =>
       translateThemeConfig({
@@ -138,6 +138,7 @@ export default function docusaurusThemeClassic(
         require.resolve(getInfimaCSSFile(direction)),
         './prism-include-languages',
         './admonitions.css',
+        './nprogress',
       ];
 
       if (customCss) {

package/src/nprogress.css

@@ -0,0 +1,41 @@
+/**
+ * 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 NProgress
+ * Copied over to remove unused styles for the spinner.
+ * https://github.com/rstacruz/nprogress/blob/master/nprogress.css
+ */
+
+:root {
+  --docusaurus-progress-bar-color: var(--ifm-color-primary);
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--docusaurus-progress-bar-color);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px var(--docusaurus-progress-bar-color),
+    0 0 5px var(--docusaurus-progress-bar-color);
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}

package/src/nprogress.ts

@@ -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 nprogress from 'nprogress';
+import './nprogress.css';
+import type {ClientModule} from '@docusaurus/types';
+
+nprogress.configure({showSpinner: false});
+
+const delay = 200;
+
+const clientModule: ClientModule = {
+  onRouteUpdate({location, previousLocation}) {
+    if (previousLocation && location.pathname !== previousLocation.pathname) {
+      const progressBarTimeout = window.setTimeout(() => {
+        nprogress.start();
+      }, delay);
+      return () => window.clearTimeout(progressBarTimeout);
+    }
+    return undefined;
+  },
+  onRouteDidUpdate() {
+    nprogress.done();
+  },
+};
+
+export default clientModule;

package/src/theme/BackToTopButton/index.tsx

@@ -5,122 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useRef, useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
+import {ThemeClassNames, useBackToTopButton} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
-import {
-  ThemeClassNames,
-  useScrollPosition,
-  useLocationChange,
-} from '@docusaurus/theme-common';
-
-const threshold = 300;
-
-// Not all have support for smooth scrolling (particularly Safari mobile iOS)
-// TODO proper detection is currently unreliable!
-// see https://github.com/wessberg/scroll-behavior-polyfill/issues/16
-const SupportsNativeSmoothScrolling = false;
-// const SupportsNativeSmoothScrolling =
-//   ExecutionEnvironment.canUseDOM &&
-//   'scrollBehavior' in document.documentElement.style;
-
-type CancelScrollTop = () => void;
-
-function smoothScrollTopNative(): CancelScrollTop {
-  window.scrollTo({top: 0, behavior: 'smooth'});
-  return () => {
-    // Nothing to cancel, it's natively cancelled if user tries to scroll down
-  };
-}
-
-function smoothScrollTopPolyfill(): CancelScrollTop {
-  let raf: number | null = null;
-  function rafRecursion() {
-    const currentScroll = document.documentElement.scrollTop;
-    if (currentScroll > 0) {
-      raf = requestAnimationFrame(rafRecursion);
-      window.scrollTo(0, Math.floor(currentScroll * 0.85));
-    }
-  }
-  rafRecursion();
-
-  // Break the recursion. Prevents the user from "fighting" against that
-  // recursion producing a weird UX
-  return () => raf && cancelAnimationFrame(raf);
-}
-
-type UseSmoothScrollTopReturn = {
-  // We use a cancel function because the non-native smooth scroll-top
-  // implementation must be interrupted if user scroll down
-  smoothScrollTop: () => void;
-  cancelScrollToTop: CancelScrollTop;
-};
-
-function useSmoothScrollToTop(): UseSmoothScrollTopReturn {
-  const lastCancelRef = useRef<CancelScrollTop | null>(null);
-
-  function smoothScrollTop(): void {
-    lastCancelRef.current = SupportsNativeSmoothScrolling
-      ? smoothScrollTopNative()
-      : smoothScrollTopPolyfill();
-  }
-
-  return {
-    smoothScrollTop,
-    cancelScrollToTop: () => lastCancelRef.current?.(),
-  };
-}
 
 export default function BackToTopButton(): JSX.Element {
-  const [show, setShow] = useState(false);
-  const isFocusedAnchor = useRef(false);
-  const {smoothScrollTop, cancelScrollToTop} = useSmoothScrollToTop();
-
-  useScrollPosition(({scrollY: scrollTop}, lastPosition) => {
-    const lastScrollTop = lastPosition?.scrollY;
-
-    // No lastScrollTop means component is just being mounted.
-    // Not really a scroll event from the user, so we ignore it
-    if (!lastScrollTop) {
-      return;
-    }
-
-    if (isFocusedAnchor.current) {
-      isFocusedAnchor.current = false;
-      return;
-    }
-
-    const isScrollingUp = scrollTop < lastScrollTop;
-
-    if (!isScrollingUp) {
-      cancelScrollToTop();
-    }
-
-    if (scrollTop < threshold) {
-      setShow(false);
-      return;
-    }
-
-    if (isScrollingUp) {
-      const documentHeight = document.documentElement.scrollHeight;
-      const windowHeight = window.innerHeight;
-      if (scrollTop + windowHeight < documentHeight) {
-        setShow(true);
-      }
-    } else {
-      setShow(false);
-    }
-  });
-
-  useLocationChange((locationChangeEvent) => {
-    if (locationChangeEvent.location.hash) {
-      isFocusedAnchor.current = true;
-      setShow(false);
-    }
-  });
-
+  const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
   return (
     <button
       aria-label={translate({
@@ -132,10 +25,10 @@ export default function BackToTopButton(): JSX.Element {
         'clean-btn',
         ThemeClassNames.common.backToTopButton,
         styles.backToTopButton,
-        show && styles.backToTopButtonShow,
+        shown && styles.backToTopButtonShow,
       )}
       type="button"
-      onClick={() => smoothScrollTop()}
+      onClick={scrollToTop}
     />
   );
 }

package/src/theme/BlogLayout/index.tsx

@@ -20,11 +20,7 @@ export default function BlogLayout(props: Props): JSX.Element {
     <Layout {...layoutProps}>
       <div className="container margin-vert--lg">
         <div className="row">
-          {hasSidebar && (
-            <aside className="col col--3">
-              <BlogSidebar sidebar={sidebar} />
-            </aside>
-          )}
+          <BlogSidebar sidebar={sidebar} />
           <main
             className={clsx('col', {
               'col--7': hasSidebar,

package/src/theme/BlogListPaginator/index.tsx

@@ -22,34 +22,31 @@ export default function BlogListPaginator(props: Props): JSX.Element {
         message: 'Blog list page navigation',
         description: 'The ARIA label for the blog pagination',
       })}>
-      <div className="pagination-nav__item">
-        {previousPage && (
-          <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>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && (
-          <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>
-            }
-          />
-        )}
-      </div>
+      {previousPage && (
+        <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>
+          }
+        />
+      )}
+      {nextPage && (
+        <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>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }

package/src/theme/BlogPostAuthor/index.tsx

@@ -9,8 +9,6 @@ import React from 'react';
 import Link, {type Props as LinkProps} from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostAuthor';
 
-import styles from './styles.module.css';
-
 function MaybeLink(props: LinkProps): JSX.Element {
   if (props.href) {
     return <Link {...props} />;
@@ -24,11 +22,9 @@ export default function BlogPostAuthor({author}: Props): JSX.Element {
   return (
     <div className="avatar margin-bottom--sm">
       {imageURL && (
-        <span className="avatar__photo-link avatar__photo">
-          <MaybeLink href={link}>
-            <img className={styles.image} src={imageURL} alt={name} />
-          </MaybeLink>
-        </span>
+        <MaybeLink href={link} className="avatar__photo-link">
+          <img className="avatar__photo" src={imageURL} alt={name} />
+        </MaybeLink>
       )}
 
       {name && (

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

@@ -9,6 +9,15 @@
   font-size: 3rem;
 }
 
+/**
+  Blog post title should be smaller on smaller devices
+**/
+@media (max-width: 576px) {
+  .blogPostTitle {
+    font-size: 2rem;
+  }
+}
+
 .blogPostData {
   font-size: 0.9rem;
 }

package/src/theme/BlogPostPaginator/index.tsx

@@ -21,34 +21,31 @@ export default function BlogPostPaginator(props: Props): JSX.Element {
         message: 'Blog post page navigation',
         description: 'The ARIA label for the blog posts pagination',
       })}>
-      <div className="pagination-nav__item">
-        {prevItem && (
-          <PaginatorNavLink
-            {...prevItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.newerPost"
-                description="The blog post button label to navigate to the newer/previous post">
-                Newer Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && (
-          <PaginatorNavLink
-            {...nextItem}
-            subLabel={
-              <Translate
-                id="theme.blog.post.paginator.olderPost"
-                description="The blog post button label to navigate to the older/next post">
-                Older Post
-              </Translate>
-            }
-          />
-        )}
-      </div>
+      {prevItem && (
+        <PaginatorNavLink
+          {...prevItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.newerPost"
+              description="The blog post button label to navigate to the newer/previous post">
+              Newer Post
+            </Translate>
+          }
+        />
+      )}
+      {nextItem && (
+        <PaginatorNavLink
+          {...nextItem}
+          subLabel={
+            <Translate
+              id="theme.blog.post.paginator.olderPost"
+              description="The blog post button label to navigate to the older/next post">
+              Older Post
+            </Translate>
+          }
+          isNext
+        />
+      )}
     </nav>
   );
 }