@docusaurus/theme-classic 0.0.0-4356 → 0.0.0-4364

package/lib/theme-classic.d.ts

@@ -477,10 +477,23 @@ declare module '@theme/NavbarItem/DocNavbarItem' {
   export default DocsSidebarNavbarItem;
 }
 
+declare module '@theme/NavbarItem/DocSidebarNavbarItem' {
+  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
+
+  export interface Props extends DefaultNavbarItemProps {
+    readonly sidebarId: string;
+    readonly docsPluginId?: string;
+  }
+
+  const DocSidebarNavbarItem: (props: Props) => JSX.Element;
+  export default DocSidebarNavbarItem;
+}
+
 declare module '@theme/NavbarItem' {
   import type {ComponentProps} from 'react';
   import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
   import type {Props as DocNavbarItemProps} from '@theme/NavbarItem/DocNavbarItem';
+  import type {Props as DocSidebarNavbarItemProps} from '@theme/NavbarItem/DocSidebarNavbarItem';
   import type {Props as DocsVersionNavbarItemProps} from '@theme/NavbarItem/DocsVersionNavbarItem';
   import type {Props as DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem';
   import type {Props as DocsVersionDropdownNavbarItemProps} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
@@ -490,7 +503,8 @@ declare module '@theme/NavbarItem' {
   export type LinkLikeNavbarItemProps =
     | ({readonly type?: 'default'} & DefaultNavbarItemProps)
     | ({readonly type: 'doc'} & DocNavbarItemProps)
-    | ({readonly type: 'docsVersion'} & DocsVersionNavbarItemProps);
+    | ({readonly type: 'docsVersion'} & DocsVersionNavbarItemProps)
+    | ({readonly type: 'docSidebar'} & DocSidebarNavbarItemProps);
 
   export type Props = ComponentProps<'a'> & {
     readonly position?: 'left' | 'right';

package/lib/validateThemeConfig.js

@@ -84,6 +84,11 @@ const DocItemSchema = NavbarItemBaseSchema.append({
   docId: _utilsValidation.Joi.string().required(),
   docsPluginId: _utilsValidation.Joi.string()
 });
+const DocSidebarItemSchema = NavbarItemBaseSchema.append({
+  type: _utilsValidation.Joi.string().equal('docSidebar').required(),
+  sidebarId: _utilsValidation.Joi.string().required(),
+  docsPluginId: _utilsValidation.Joi.string()
+});
 
 const itemWithType = type => {
   // because equal(undefined) is not supported :/
@@ -151,6 +156,9 @@ const NavbarItemSchema = _utilsValidation.Joi.object({
   }, {
     is: itemWithType('doc'),
     then: DocItemSchema
+  }, {
+    is: itemWithType('docSidebar'),
+    then: DocSidebarItemSchema
   }, {
     is: itemWithType('localeDropdown'),
     then: LocaleDropdownNavbarItemSchema

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

@@ -14,14 +14,17 @@ import TOC from '@theme/TOC';
 
 function BlogPostPage(props) {
   const {content: BlogPostContents, sidebar} = props;
+  const {assets, metadata} = BlogPostContents;
   const {
-    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
+    title,
+    description,
+    nextItem,
+    prevItem,
+    date,
+    tags,
+    authors,
     frontMatter,
-    assets,
-    metadata,
-  } = BlogPostContents;
-  const {title, description, nextItem, prevItem, date, tags, authors} =
-    metadata;
+  } = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
     keywords,

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

@@ -12,6 +12,7 @@ import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import {MainHeading} from '@theme/Heading';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
 export default function DocCategoryGeneratedIndexPage({
   categoryGeneratedIndex,
@@ -22,6 +23,8 @@ export default function DocCategoryGeneratedIndexPage({
       <Seo
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
+        keywords={categoryGeneratedIndex.keywords} // TODO `require` this?
+        image={useBaseUrl(categoryGeneratedIndex.image)}
       />
       <div className={styles.generatedIndexPage}>
         <DocVersionBanner />

package/lib-next/theme/NavbarItem/DocSidebarNavbarItem.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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import clsx from 'clsx';
+import {getInfimaActiveClassName} from './index';
+import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
+
+function getSidebarLink(versions, sidebarId) {
+  const allSidebars = versions
+    .flatMap((version) => {
+      if (version.sidebars) {
+        return Object.entries(version.sidebars);
+      }
+
+      return undefined;
+    })
+    .filter((sidebarItem) => !!sidebarItem);
+  const sidebarEntry = allSidebars.find((sidebar) => sidebar[0] === sidebarId);
+
+  if (!sidebarEntry) {
+    throw new Error(`DocSidebarNavbarItem: couldn't find any sidebar with id "${sidebarId}" in version${
+      versions.length ? 's' : ''
+    } ${versions.map((version) => version.name).join(', ')}".
+Available sidebar ids are:
+- ${Object.keys(allSidebars).join('\n- ')}`);
+  }
+
+  if (!sidebarEntry[1].link) {
+    throw new Error(
+      `DocSidebarNavbarItem: couldn't find any document for sidebar with id "${sidebarId}"`,
+    );
+  }
+
+  return sidebarEntry[1].link;
+}
+
+export default function DocSidebarNavbarItem({
+  sidebarId,
+  label,
+  docsPluginId,
+  ...props
+}) {
+  const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);
+  const {preferredVersion} = useDocsPreferredVersion(docsPluginId);
+  const latestVersion = useLatestVersion(docsPluginId); // Versions used to look for the doc to link to, ordered + no duplicate
+
+  const versions = uniq(
+    [activeVersion, preferredVersion, latestVersion].filter(Boolean),
+  );
+  const sidebarLink = getSidebarLink(versions, sidebarId);
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
+  return (
+    <DefaultNavbarItem
+      exact
+      {...props}
+      className={clsx(props.className, {
+        [activeDocInfimaClassName]: activeDoc?.sidebar === sidebarId,
+      })}
+      activeClassName={activeDocInfimaClassName}
+      label={label ?? sidebarLink.label}
+      to={sidebarLink.path}
+    />
+  );
+}

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 */
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4356",
+  "version": "0.0.0-4364",
   "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-4356",
-    "@docusaurus/plugin-content-blog": "0.0.0-4356",
-    "@docusaurus/plugin-content-docs": "0.0.0-4356",
-    "@docusaurus/plugin-content-pages": "0.0.0-4356",
-    "@docusaurus/theme-common": "0.0.0-4356",
-    "@docusaurus/theme-translations": "0.0.0-4356",
-    "@docusaurus/utils": "0.0.0-4356",
-    "@docusaurus/utils-validation": "0.0.0-4356",
+    "@docusaurus/core": "0.0.0-4364",
+    "@docusaurus/plugin-content-blog": "0.0.0-4364",
+    "@docusaurus/plugin-content-docs": "0.0.0-4364",
+    "@docusaurus/plugin-content-pages": "0.0.0-4364",
+    "@docusaurus/theme-common": "0.0.0-4364",
+    "@docusaurus/theme-translations": "0.0.0-4364",
+    "@docusaurus/utils": "0.0.0-4364",
+    "@docusaurus/utils-validation": "0.0.0-4364",
     "@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-4356",
-    "@docusaurus/types": "0.0.0-4356",
+    "@docusaurus/module-type-aliases": "0.0.0-4364",
+    "@docusaurus/types": "0.0.0-4364",
     "@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": "689533485d30a832b6a1d4108c491c90bb6165e7"
+  "gitHead": "db9cb5ab444107d56734f4e8405721484197d0a9"
 }

package/src/theme/BlogPostPage/index.tsx

@@ -16,14 +16,17 @@ import TOC from '@theme/TOC';
 
 function BlogPostPage(props: Props): JSX.Element {
   const {content: BlogPostContents, sidebar} = props;
+  const {assets, metadata} = BlogPostContents;
   const {
-    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
+    title,
+    description,
+    nextItem,
+    prevItem,
+    date,
+    tags,
+    authors,
     frontMatter,
-    assets,
-    metadata,
-  } = BlogPostContents;
-  const {title, description, nextItem, prevItem, date, tags, authors} =
-    metadata;
+  } = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
     keywords,

package/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -14,6 +14,7 @@ import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import {MainHeading} from '@theme/Heading';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
 
@@ -26,6 +27,9 @@ export default function DocCategoryGeneratedIndexPage({
       <Seo
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
+        keywords={categoryGeneratedIndex.keywords}
+        // TODO `require` this?
+        image={useBaseUrl(categoryGeneratedIndex.image)}
       />
       <div className={styles.generatedIndexPage}>
         <DocVersionBanner />

package/src/theme/NavbarItem/DocSidebarNavbarItem.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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 DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import clsx from 'clsx';
+import {getInfimaActiveClassName} from './index';
+import type {Props} from '@theme/NavbarItem/DocSidebarNavbarItem';
+import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';
+import type {
+  GlobalDataVersion,
+  GlobalDataSidebar,
+} from '@docusaurus/plugin-content-docs';
+
+function getSidebarLink(versions: GlobalDataVersion[], sidebarId: string) {
+  const allSidebars = versions
+    .flatMap((version) => {
+      if (version.sidebars) {
+        return Object.entries(version.sidebars);
+      }
+      return undefined;
+    })
+    .filter(
+      (sidebarItem): sidebarItem is [string, GlobalDataSidebar] =>
+        !!sidebarItem,
+    );
+  const sidebarEntry = allSidebars.find((sidebar) => sidebar[0] === sidebarId);
+  if (!sidebarEntry) {
+    throw new Error(
+      `DocSidebarNavbarItem: couldn't find any sidebar with id "${sidebarId}" in version${
+        versions.length ? 's' : ''
+      } ${versions.map((version) => version.name).join(', ')}".
+Available sidebar ids are:
+- ${Object.keys(allSidebars).join('\n- ')}`,
+    );
+  }
+  if (!sidebarEntry[1].link) {
+    throw new Error(
+      `DocSidebarNavbarItem: couldn't find any document for sidebar with id "${sidebarId}"`,
+    );
+  }
+  return sidebarEntry[1].link;
+}
+
+export default function DocSidebarNavbarItem({
+  sidebarId,
+  label,
+  docsPluginId,
+  ...props
+}: Props): JSX.Element {
+  const {activeVersion, activeDoc} = useActiveDocContext(docsPluginId);
+  const {preferredVersion} = useDocsPreferredVersion(docsPluginId);
+  const latestVersion = useLatestVersion(docsPluginId);
+
+  // Versions used to look for the doc to link to, ordered + no duplicate
+  const versions = uniq(
+    [activeVersion, preferredVersion, latestVersion].filter(
+      Boolean,
+    ) as GlobalDataVersion[],
+  );
+  const sidebarLink = getSidebarLink(versions, sidebarId);
+  const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile);
+
+  return (
+    <DefaultNavbarItem
+      exact
+      {...props}
+      className={clsx(props.className, {
+        [activeDocInfimaClassName]: activeDoc?.sidebar === sidebarId,
+      })}
+      activeClassName={activeDocInfimaClassName}
+      label={label ?? sidebarLink.label}
+      to={sidebarLink.path}
+    />
+  );
+}

package/src/theme/NavbarItem/index.tsx

@@ -32,6 +32,7 @@ const NavbarItemComponents: Record<
   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 */
 } as const;
 

package/src/theme-classic.d.ts

@@ -477,10 +477,23 @@ declare module '@theme/NavbarItem/DocNavbarItem' {
   export default DocsSidebarNavbarItem;
 }
 
+declare module '@theme/NavbarItem/DocSidebarNavbarItem' {
+  import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
+
+  export interface Props extends DefaultNavbarItemProps {
+    readonly sidebarId: string;
+    readonly docsPluginId?: string;
+  }
+
+  const DocSidebarNavbarItem: (props: Props) => JSX.Element;
+  export default DocSidebarNavbarItem;
+}
+
 declare module '@theme/NavbarItem' {
   import type {ComponentProps} from 'react';
   import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
   import type {Props as DocNavbarItemProps} from '@theme/NavbarItem/DocNavbarItem';
+  import type {Props as DocSidebarNavbarItemProps} from '@theme/NavbarItem/DocSidebarNavbarItem';
   import type {Props as DocsVersionNavbarItemProps} from '@theme/NavbarItem/DocsVersionNavbarItem';
   import type {Props as DropdownNavbarItemProps} from '@theme/NavbarItem/DropdownNavbarItem';
   import type {Props as DocsVersionDropdownNavbarItemProps} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
@@ -490,7 +503,8 @@ declare module '@theme/NavbarItem' {
   export type LinkLikeNavbarItemProps =
     | ({readonly type?: 'default'} & DefaultNavbarItemProps)
     | ({readonly type: 'doc'} & DocNavbarItemProps)
-    | ({readonly type: 'docsVersion'} & DocsVersionNavbarItemProps);
+    | ({readonly type: 'docsVersion'} & DocsVersionNavbarItemProps)
+    | ({readonly type: 'docSidebar'} & DocSidebarNavbarItemProps);
 
   export type Props = ComponentProps<'a'> & {
     readonly position?: 'left' | 'right';

package/src/validateThemeConfig.ts

@@ -85,6 +85,12 @@ const DocItemSchema = NavbarItemBaseSchema.append({
   docsPluginId: Joi.string(),
 });
 
+const DocSidebarItemSchema = NavbarItemBaseSchema.append({
+  type: Joi.string().equal('docSidebar').required(),
+  sidebarId: Joi.string().required(),
+  docsPluginId: Joi.string(),
+});
+
 const itemWithType = (type: string | undefined) => {
   // because equal(undefined) is not supported :/
   const typeSchema = type
@@ -172,6 +178,10 @@ const NavbarItemSchema = Joi.object({
       is: itemWithType('doc'),
       then: DocItemSchema,
     },
+    {
+      is: itemWithType('docSidebar'),
+      then: DocSidebarItemSchema,
+    },
     {
       is: itemWithType('localeDropdown'),
       then: LocaleDropdownNavbarItemSchema,