@docusaurus/theme-classic 0.0.0-4339 → 0.0.0-4350

package/lib/theme-classic.d.ts

@@ -114,6 +114,7 @@ declare module '@theme/CodeBlock' {
     readonly className?: string;
     readonly metastring?: string;
     readonly title?: string;
+    readonly language?: string;
   }
 
   const CodeBlock: (props: Props) => JSX.Element;
@@ -129,18 +130,6 @@ declare module '@theme/DocPaginator' {
   export default function DocPaginator(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocPaginatorNavLink' {
-  import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
-
-  // May be simpler to provide a {navigation: PropNavigation} prop?
-  export interface Props {
-    navLink: PropNavigationLink;
-    next?: boolean;
-  }
-
-  export default function DocPaginatorNavLink(props: Props): JSX.Element;
-}
-
 declare module '@theme/DocSidebar' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
@@ -523,6 +512,18 @@ declare module '@theme/NavbarItem' {
   export default NavbarItem;
 }
 
+declare module '@theme/PaginatorNavLink' {
+  import type {ReactNode} from 'react';
+  import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
+
+  export interface Props extends Omit<PropNavigationLink, 'title'> {
+    readonly title: ReactNode;
+    readonly subLabel?: JSX.Element;
+  }
+
+  export default function PaginatorNavLink(props: Props): JSX.Element;
+}
+
 declare module '@theme/SearchBar' {
   export default function SearchBar(): JSX.Element;
 }

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 
 function BlogListPaginator(props) {
   const {metadata} = props;
@@ -21,30 +21,30 @@ function BlogListPaginator(props) {
       })}>
       <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/lib-next/theme/BlogPostPaginator/index.js

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
-import Link from '@docusaurus/Link';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 
 function BlogPostPaginator(props) {
   const {nextItem, prevItem} = props;
@@ -20,34 +20,30 @@ function BlogPostPaginator(props) {
       })}>
       <div className="pagination-nav__item">
         {prevItem && (
-          <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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__label">
-              &laquo; {prevItem.title}
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
-          <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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>
-            <div className="pagination-nav__label">
-              {nextItem.title} &raquo;
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
     </nav>

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

@@ -20,9 +20,10 @@ import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
 export default function CodeBlock({
   children,
-  className: blockClassName,
+  className: blockClassName = '',
   metastring,
   title,
+  language: languageProp,
 }) {
   const {prism} = useThemeConfig();
   const [showCopied, setShowCopied] = useState(false);
@@ -73,7 +74,8 @@ export default function CodeBlock({
   } // The children is now guaranteed to be one/more plain strings
 
   const content = Array.isArray(children) ? children.join('') : children;
-  const language = parseLanguage(blockClassName) ?? prism.defaultLanguage;
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
   const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
@@ -94,6 +96,10 @@ export default function CodeBlock({
           className={clsx(
             styles.codeBlockContainer,
             blockClassName,
+            {
+              [`language-${language}`]:
+                language && !blockClassName.includes(`language-${language}`),
+            },
             ThemeClassNames.common.codeBlock,
           )}>
           {codeBlockTitle && (

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

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {translate} from '@docusaurus/Translate';
-import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 
 function DocPaginator(props) {
   const {previous, next} = props;
@@ -19,10 +19,32 @@ function DocPaginator(props) {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-        {previous && <DocPaginatorNavLink navLink={previous} />}
+        {previous && (
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc">
+                Previous
+              </Translate>
+            }
+          />
+        )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
-        {next && <DocPaginatorNavLink navLink={next} next />}
+        {next && (
+          <PaginatorNavLink
+            {...next}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc">
+                Next
+              </Translate>
+            }
+          />
+        )}
       </div>
     </nav>
   );

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4339",
+  "version": "0.0.0-4350",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4339",
-    "@docusaurus/plugin-content-blog": "0.0.0-4339",
-    "@docusaurus/plugin-content-docs": "0.0.0-4339",
-    "@docusaurus/plugin-content-pages": "0.0.0-4339",
-    "@docusaurus/theme-common": "0.0.0-4339",
-    "@docusaurus/theme-translations": "0.0.0-4339",
-    "@docusaurus/utils": "0.0.0-4339",
-    "@docusaurus/utils-validation": "0.0.0-4339",
+    "@docusaurus/core": "0.0.0-4350",
+    "@docusaurus/plugin-content-blog": "0.0.0-4350",
+    "@docusaurus/plugin-content-docs": "0.0.0-4350",
+    "@docusaurus/plugin-content-pages": "0.0.0-4350",
+    "@docusaurus/theme-common": "0.0.0-4350",
+    "@docusaurus/theme-translations": "0.0.0-4350",
+    "@docusaurus/utils": "0.0.0-4350",
+    "@docusaurus/utils-validation": "0.0.0-4350",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4339",
-    "@docusaurus/types": "0.0.0-4339",
+    "@docusaurus/module-type-aliases": "0.0.0-4350",
+    "@docusaurus/types": "0.0.0-4350",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "7501212bc6f7ca3578856c53ab6cb55974693930"
+  "gitHead": "395433a6f915dd0e6d73223228968fdc58761fd0"
 }

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/BlogPostPaginator/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
-import Link from '@docusaurus/Link';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
 function BlogPostPaginator(props: Props): JSX.Element {
@@ -23,34 +23,30 @@ function BlogPostPaginator(props: Props): JSX.Element {
       })}>
       <div className="pagination-nav__item">
         {prevItem && (
-          <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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__label">
-              &laquo; {prevItem.title}
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
         {nextItem && (
-          <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">
+          <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>
-            <div className="pagination-nav__label">
-              {nextItem.title} &raquo;
-            </div>
-          </Link>
+            }
+          />
         )}
       </div>
     </nav>

package/src/theme/CodeBlock/index.tsx

@@ -24,9 +24,10 @@ import styles from './styles.module.css';
 
 export default function CodeBlock({
   children,
-  className: blockClassName,
+  className: blockClassName = '',
   metastring,
   title,
+  language: languageProp,
 }: Props): JSX.Element {
   const {prism} = useThemeConfig();
 
@@ -85,8 +86,7 @@ export default function CodeBlock({
     : (children as string);
 
   const language =
-    parseLanguage(blockClassName) ??
-    (prism.defaultLanguage as Language | undefined);
+    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
   const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
@@ -102,12 +102,16 @@ export default function CodeBlock({
       key={String(mounted)}
       theme={prismTheme}
       code={code}
-      language={language ?? ('text' as Language)}>
+      language={(language ?? 'text') as Language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(
             styles.codeBlockContainer,
             blockClassName,
+            {
+              [`language-${language}`]:
+                language && !blockClassName.includes(`language-${language}`),
+            },
             ThemeClassNames.common.codeBlock,
           )}>
           {codeBlockTitle && (

package/src/theme/DocPaginator/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import {translate} from '@docusaurus/Translate';
-import DocPaginatorNavLink from '@theme/DocPaginatorNavLink';
+import Translate, {translate} from '@docusaurus/Translate';
+import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/DocPaginator';
 
 function DocPaginator(props: Props): JSX.Element {
@@ -22,10 +22,32 @@ function DocPaginator(props: Props): JSX.Element {
         description: 'The ARIA label for the docs pagination',
       })}>
       <div className="pagination-nav__item">
-        {previous && <DocPaginatorNavLink navLink={previous} />}
+        {previous && (
+          <PaginatorNavLink
+            {...previous}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.previous"
+                description="The label used to navigate to the previous doc">
+                Previous
+              </Translate>
+            }
+          />
+        )}
       </div>
       <div className="pagination-nav__item pagination-nav__item--next">
-        {next && <DocPaginatorNavLink navLink={next} next />}
+        {next && (
+          <PaginatorNavLink
+            {...next}
+            subLabel={
+              <Translate
+                id="theme.docs.paginator.next"
+                description="The label used to navigate to the next doc">
+                Next
+              </Translate>
+            }
+          />
+        )}
       </div>
     </nav>
   );

package/src/theme/PaginatorNavLink/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * 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 type {Props} from '@theme/PaginatorNavLink';
+
+function PaginatorNavLink(props: Props): JSX.Element {
+  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/src/theme-classic.d.ts

@@ -114,6 +114,7 @@ declare module '@theme/CodeBlock' {
     readonly className?: string;
     readonly metastring?: string;
     readonly title?: string;
+    readonly language?: string;
   }
 
   const CodeBlock: (props: Props) => JSX.Element;
@@ -129,18 +130,6 @@ declare module '@theme/DocPaginator' {
   export default function DocPaginator(props: Props): JSX.Element;
 }
 
-declare module '@theme/DocPaginatorNavLink' {
-  import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
-
-  // May be simpler to provide a {navigation: PropNavigation} prop?
-  export interface Props {
-    navLink: PropNavigationLink;
-    next?: boolean;
-  }
-
-  export default function DocPaginatorNavLink(props: Props): JSX.Element;
-}
-
 declare module '@theme/DocSidebar' {
   import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
 
@@ -523,6 +512,18 @@ declare module '@theme/NavbarItem' {
   export default NavbarItem;
 }
 
+declare module '@theme/PaginatorNavLink' {
+  import type {ReactNode} from 'react';
+  import type {PropNavigationLink} from '@docusaurus/plugin-content-docs';
+
+  export interface Props extends Omit<PropNavigationLink, 'title'> {
+    readonly title: ReactNode;
+    readonly subLabel?: JSX.Element;
+  }
+
+  export default function PaginatorNavLink(props: Props): JSX.Element;
+}
+
 declare module '@theme/SearchBar' {
   export default function SearchBar(): JSX.Element;
 }

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

@@ -1,36 +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 clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
-
-function DocPaginatorNavLink(props) {
-  const {navLink, next} = props;
-  return (
-    <Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
-      <div className="pagination-nav__sublabel">
-        {next ? (
-          <Translate
-            id="theme.docs.paginator.next"
-            description="The label used to navigate to the next doc">
-            Next
-          </Translate>
-        ) : (
-          <Translate
-            id="theme.docs.paginator.previous"
-            description="The label used to navigate to the previous doc">
-            Previous
-          </Translate>
-        )}
-      </div>
-      <div className="pagination-nav__label">{navLink.title}</div>
-    </Link>
-  );
-}
-
-export default DocPaginatorNavLink;

package/src/theme/DocPaginatorNavLink/index.tsx

@@ -1,38 +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 clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import Translate from '@docusaurus/Translate';
-import type {Props} from '@theme/DocPaginatorNavLink';
-
-function DocPaginatorNavLink(props: Props): JSX.Element {
-  const {navLink, next} = props;
-  return (
-    <Link className={clsx('pagination-nav__link')} to={navLink.permalink}>
-      <div className="pagination-nav__sublabel">
-        {next ? (
-          <Translate
-            id="theme.docs.paginator.next"
-            description="The label used to navigate to the next doc">
-            Next
-          </Translate>
-        ) : (
-          <Translate
-            id="theme.docs.paginator.previous"
-            description="The label used to navigate to the previous doc">
-            Previous
-          </Translate>
-        )}
-      </div>
-      <div className="pagination-nav__label">{navLink.title}</div>
-    </Link>
-  );
-}
-
-export default DocPaginatorNavLink;