fix(content-docs): allow translating doc labels in sidebars.js (#7634)

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/__snapshots__/normalization.test.ts.snap

@@ -1,5 +1,52 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`normalization adds a translatable marker for labels defined in sidebars.js 1`] = `
+{
+  "sidebar": [
+    {
+      "id": "google",
+      "label": "Google",
+      "translatable": true,
+      "type": "doc",
+    },
+    {
+      "items": [
+        {
+          "id": "doc1",
+          "type": "doc",
+        },
+        {
+          "id": "doc2",
+          "type": "doc",
+        },
+      ],
+      "label": "Category 1",
+      "type": "category",
+    },
+    {
+      "items": [
+        {
+          "id": "doc3",
+          "type": "doc",
+        },
+        {
+          "id": "doc4",
+          "type": "doc",
+        },
+        {
+          "id": "msft",
+          "label": "Microsoft",
+          "translatable": true,
+          "type": "ref",
+        },
+      ],
+      "label": "Category 2",
+      "type": "category",
+    },
+  ],
+}
+`;
+
 exports[`normalization normalizes shorthands 1`] = `
 {
   "sidebar": [

packages/docusaurus-plugin-content-docs/src/sidebars/__tests__/normalization.test.ts

@@ -91,4 +91,30 @@ describe('normalization', () => {
       `"Invalid sidebar items collection \`"item"\` in sidebar sidebar: it must either be an array of sidebar items or a shorthand notation (which doesn't contain a \`type\` property). See https://docusaurus.io/docs/sidebar/items for all valid syntaxes."`,
     );
   });
+
+  it('adds a translatable marker for labels defined in sidebars.js', () => {
+    expect(
+      normalizeSidebars({
+        sidebar: [
+          {
+            type: 'doc',
+            id: 'google',
+            label: 'Google',
+          },
+          {
+            'Category 1': ['doc1', 'doc2'],
+            'Category 2': [
+              'doc3',
+              'doc4',
+              {
+                type: 'ref',
+                id: 'msft',
+                label: 'Microsoft',
+              },
+            ],
+          },
+        ],
+      }),
+    ).toMatchSnapshot();
+  });
 });

packages/docusaurus-plugin-content-docs/src/sidebars/normalization.ts

@@ -44,6 +44,12 @@ export function normalizeItem(
     // This will never throw anyways
     return normalizeSidebar(item, 'sidebar items slice');
   }
+  if (
+    (item.type === 'doc' || item.type === 'ref') &&
+    typeof item.label === 'string'
+  ) {
+    return [{...item, translatable: true}];
+  }
   if (item.type === 'category') {
     const normalizedCategory: NormalizedSidebarItemCategory = {
       ...item,

packages/docusaurus-plugin-content-docs/src/sidebars/types.ts

@@ -27,6 +27,11 @@ export type SidebarItemDoc = SidebarItemBase & {
   type: 'doc' | 'ref';
   label?: string;
   id: string;
+  /**
+   * This is an internal marker. Items with labels defined in the config needs
+   * to be translated with JSON
+   */
+  translatable?: true;
 };
 
 export type SidebarItemHtml = SidebarItemBase & {
@@ -94,7 +99,7 @@ export type SidebarCategoriesShorthand = {
 };
 
 export type SidebarItemConfig =
-  | SidebarItemDoc
+  | Omit<SidebarItemDoc, 'translatable'>
   | SidebarItemHtml
   | SidebarItemLink
   | SidebarItemAutogenerated

packages/docusaurus-plugin-content-docs/src/sidebars/utils.ts

@@ -81,6 +81,9 @@ export function collectSidebarCategories(
 export function collectSidebarLinks(sidebar: Sidebar): SidebarItemLink[] {
   return collectSidebarItemsOfType('link', sidebar);
 }
+export function collectSidebarRefs(sidebar: Sidebar): SidebarItemDoc[] {
+  return collectSidebarItemsOfType('ref', sidebar);
+}
 
 // /!\ docId order matters for navigation!
 export function collectSidebarDocIds(sidebar: Sidebar): string[] {

packages/docusaurus-plugin-content-docs/src/sidebars/validation.ts

@@ -47,6 +47,7 @@ const sidebarItemDocSchema = sidebarItemBaseSchema.append<SidebarItemDoc>({
   type: Joi.string().valid('doc', 'ref').required(),
   id: Joi.string().required(),
   label: Joi.string(),
+  translatable: Joi.boolean(),
 });
 
 const sidebarItemHtmlSchema = sidebarItemBaseSchema.append<SidebarItemHtml>({