fix: change subcategory format

docs/guides-navigation.md

@@ -94,27 +94,46 @@ You should provide `directory/id` instead of `id` in `sidebars.json`.
 }
 ```
 
-### Adding Sub Categories 
+### Adding Subcategories
 
-It is possibile to add sub categories to a sidebar. Instead of passing an array to the category like the previous examples you can pass an object where 
-the keys will be the sub category name. You can then pass an array of document ids to the sub category.
+It is possible to add subcategories to a sidebar. Instead of using IDs as the contents of the category array like the previous examples, you can pass an object where the keys will be the subcategory name and the value an array of IDs for that subcategory.
 
 ```js
 {
-  "examples-sidebar" : {
-    "My Example Category" : {
-      "My Example Sub Category" : [
-        "my-examples",
-        ...
-      ],
-      "My Next Sub Category" : [
-        "some-other-examples"
-      ]
+  "docs": {
+    "My Example Category": [
+      "examples",
+      {
+        "My Example Subcategory": [
+          "my-examples",
+          ...
+        ]
+      },
+      {
+        "My Next Subcategory": [
+          "some-other-examples"
+        ]
+      },
+      "even-more-examples",
       ...
-    },
+    ],
     ...
   }
 }
+
+/*
+The above will generate:
+
+- My Example Category
+  - examples
+  - My Example Subcategory
+    - my-examples
+    ...
+  - My Next Subcategory
+    - some-other-examples
+  - even-more-examples
+  ...
+*/
 ```
 
 ### Adding New Sidebars

v1/lib/core/nav/SideNav.js

@@ -69,20 +69,20 @@ class SideNav extends React.Component {
         </h3>
         <ul>
           {category.links.map(this.renderItemLink, this)}
-          {category.sub_categories &&
-            category.sub_categories.map(this.renderSubCategory, this)}
+          {category.subcategories &&
+            category.subcategories.map(this.renderSubcategory, this)}
         </ul>
       </div>
     );
   }
 
-  renderSubCategory(subCategory) {
+  renderSubcategory(subcategory) {
     return (
-      <div className="navGroup subNavGroup" key={subCategory.name}>
-        <h4 className="navGroupSubCategoryTitle">
-          {this.getLocalizedCategoryString(subCategory.name)}
+      <div className="navGroup subNavGroup" key={subcategory.name}>
+        <h4 className="navGroupSubcategoryTitle">
+          {this.getLocalizedCategoryString(subcategory.name)}
         </h4>
-        <ul>{subCategory.links.map(this.renderItemLink, this)}</ul>
+        <ul>{subcategory.links.map(this.renderItemLink, this)}</ul>
       </div>
     );
   }

v1/lib/server/__tests__/__fixtures__/metadata-subcategories.js

@@ -12,7 +12,7 @@ module.exports = {
     next_id: 'doc2',
     next: 'en-doc2',
     next_title: 'Document 2',
-    sub_category: 'Sub Cat 1',
+    subcategory: 'Sub Cat 1',
     sort: 1,
   },
   'en-doc2': {
@@ -28,7 +28,7 @@ module.exports = {
     previous_id: 'doc1',
     previous: 'en-doc1',
     previous_title: 'Document 1',
-    sub_category: 'Sub Cat 1',
+    subcategory: 'Sub Cat 1',
     sort: 2,
   },
   'en-doc3': {
@@ -44,7 +44,7 @@ module.exports = {
     previous_id: 'doc2',
     previous: 'en-doc2',
     previous_title: 'Document 2',
-    sub_category: 'Sub Cat 2',
+    subcategory: 'Sub Cat 2',
     sort: 3,
   },
   'en-doc4': {

v1/lib/server/__tests__/__fixtures__/sidebar-subcategories.js

@@ -1,11 +1,20 @@
 module.exports = {
   docs: {
-    'First Category': {
-      'Sub Cat One': ['doc2', 'doc1'],
-      'Sub Cat Two': ['doc3', 'doc5'],
-    },
-    'Second Category': {
-      Hello: ['doc4'],
-    },
+    'First Category': ['doc1', 'doc2'],
+    'Second Category': [
+      'doc3',
+      {
+        'First Subcategory': ['doc4'],
+      },
+      'doc5',
+    ],
+    'Third Category': [
+      {
+        'Second Subcategory': ['doc6'],
+      },
+      {
+        'Third Subcategory': ['doc7'],
+      },
+    ],
   },
 };

v1/lib/server/__tests__/readCategories.test.js

@@ -61,21 +61,21 @@ describe('readCategories', () => {
 
     expect(categories.en[0].name).toBe('Test');
     expect(categories.en[0].links.length).toBe(0);
-    expect(categories.en[0].sub_categories.length).toBe(2);
+    expect(categories.en[0].subcategories.length).toBe(2);
 
-    expect(categories.en[0].sub_categories[0].name).toBe('Sub Cat 1');
-    expect(categories.en[0].sub_categories[0].links.length).toBe(2);
-    expect(categories.en[0].sub_categories[0].links[0].id).toBe('en-doc1');
-    expect(categories.en[0].sub_categories[0].links[1].id).toBe('en-doc2');
+    expect(categories.en[0].subcategories[0].name).toBe('Sub Cat 1');
+    expect(categories.en[0].subcategories[0].links.length).toBe(2);
+    expect(categories.en[0].subcategories[0].links[0].id).toBe('en-doc1');
+    expect(categories.en[0].subcategories[0].links[1].id).toBe('en-doc2');
 
-    expect(categories.en[0].sub_categories[1].name).toBe('Sub Cat 2');
-    expect(categories.en[0].sub_categories[1].links.length).toBe(1);
-    expect(categories.en[0].sub_categories[1].links[0].id).toBe('en-doc3');
+    expect(categories.en[0].subcategories[1].name).toBe('Sub Cat 2');
+    expect(categories.en[0].subcategories[1].links.length).toBe(1);
+    expect(categories.en[0].subcategories[1].links[0].id).toBe('en-doc3');
 
     expect(categories.en[1].name).toBe('Test 2');
     expect(categories.en[1].links.length).toBe(1);
     expect(categories.en[1].links[0].id).toBe('en-doc4');
-    expect(categories.en[1].sub_categories).not.toBeDefined();
+    expect(categories.en[1].subcategories).not.toBeDefined();
   });
 
   test('should return proper languages when not enabled', () => {

v1/lib/server/__tests__/readMetadata.test.js

@@ -7,7 +7,7 @@
 
 const {readSidebar} = require('../readMetadata');
 const sidebar = require('./__fixtures__/sidebar');
-const sidebarSubCategories = require('./__fixtures__/sidebar-subcategories');
+const sidebarSubcategories = require('./__fixtures__/sidebar-subcategories');
 
 jest.mock('../env', () => ({
   translation: {
@@ -36,42 +36,68 @@ jest.mock(`${process.cwd()}/sidebar.json`, () => true, {virtual: true});
 
 describe('readMetadata', () => {
   describe('readSidebar', () => {
-    it('should verify regular category data and verify sort', () => {
-      const order = readSidebar(sidebar);
-
-      // Put in this order to verify sort
-      ['doc1', 'doc2', 'doc4', 'doc3'].forEach((id, index) => {
-        expect(order[id]).toBeDefined();
-        expect(order[id].sort).toBe(index + 1);
-      });
-
-      expect(order.doc1.previous).toBeUndefined();
-      expect(order.doc2.previous).toBe('doc1');
-
-      expect(order.doc1.next).toBe('doc2');
-      expect(order.doc2.next).toBe('doc4');
-
-      expect(order.doc1.sub_category).toBeFalsy();
-    });
-
     test('should verify sub category data and verify sort', () => {
-      const order = readSidebar(sidebarSubCategories);
+      const order = readSidebar(sidebarSubcategories);
 
       // Put in this order to verify sort
-      ['doc2', 'doc1', 'doc3', 'doc5', 'doc4'].forEach((id, index) => {
-        expect(order[id]).toBeDefined();
-        expect(order[id].sort).toBe(index + 1);
+      const expectedOrder = [
+        {
+          id: 'doc1',
+          sort: 1,
+          category: 'First Category',
+          subcategory: null,
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc2',
+          sort: 2,
+          category: 'First Category',
+          subcategory: null,
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc3',
+          sort: 3,
+          category: 'Second Category',
+          subcategory: null,
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc4',
+          sort: 4,
+          category: 'Second Category',
+          subcategory: 'First Subcategory',
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc5',
+          sort: 5,
+          category: 'Second Category',
+          subcategory: null,
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc6',
+          sort: 6,
+          category: 'Third Category',
+          subcategory: 'Second Subcategory',
+          sidebar: 'docs',
+        },
+        {
+          id: 'doc7',
+          sort: 7,
+          category: 'Third Category',
+          subcategory: 'Third Subcategory',
+          sidebar: 'docs',
+        },
+      ];
+      expectedOrder.forEach((expectedItem, index) => {
+        const item = order[expectedItem.id];
+        expect(item.sort).toBe(expectedItem.sort);
+        expect(item.category).toBe(expectedItem.category);
+        expect(item.subcategory).toBe(expectedItem.subcategory);
+        expect(item.sidebar).toBe(expectedItem.sidebar);
       });
-
-      expect(order.doc2.sidebar).toBe('docs');
-      expect(order.doc2.category).toBe('First Category');
-      expect(order.doc2.sub_category).toBe('Sub Cat One');
-
-      expect(order.doc1.category).toBe('First Category');
-      expect(order.doc1.sub_category).toBe('Sub Cat One');
-
-      expect(order.doc3.category).toBe('First Category');
-      expect(order.doc3.sub_category).toBe('Sub Cat Two');
     });
   });
 });

v1/lib/server/readCategories.js

@@ -16,7 +16,7 @@ function readCategories(sidebar, allMetadata, languages) {
   const allCategories = {};
 
   // Go through each language that might be defined
-  for (let k = 0; k < enabledLanguages.length; ++k) {
+  for (let k = 0; k < enabledLanguages.length; k++) {
     const language = enabledLanguages[k];
     const metadatas = [];
     const categories = [];
@@ -36,28 +36,29 @@ function readCategories(sidebar, allMetadata, languages) {
 
     // Store the correct sort of categories and sub categories for later
     const sortedCategories = [];
-    const sortedSubCategories = [];
+    const sortedSubcategories = [];
     for (let i = 0; i < metadatas.length; ++i) {
       const metadata = metadatas[i];
       const category = metadata.category;
-      const subCategory = metadata.sub_category;
+      const subcategory = metadata.subcategory;
 
       if (!sortedCategories.includes(category)) {
         sortedCategories.push(category);
       }
 
-      if (subCategory && !sortedSubCategories.includes(subCategory)) {
-        sortedSubCategories.push(subCategory);
+      if (subcategory && !sortedSubcategories.includes(subcategory)) {
+        sortedSubcategories.push(subcategory);
       }
     }
 
     // Index categories and sub categories with all of their documents
     const indexedCategories = {};
-    const indexedSubCategories = {};
+    const indexedSubcategories = {};
+
     for (let i = 0; i < metadatas.length; i++) {
       const metadata = metadatas[i];
       const category = metadata.category;
-      const subCategory = metadata.sub_category;
+      const subcategory = metadata.subcategory;
 
       // Validate sidebarMetadatas in the sidebar
       validateSidebar(metadata, sidebarMetadatas);
@@ -66,20 +67,20 @@ function readCategories(sidebar, allMetadata, languages) {
         indexedCategories[category] = [];
       }
 
-      if (!subCategory) {
+      if (!subcategory) {
         indexedCategories[category].push(metadata);
       }
 
-      if (subCategory) {
-        if (!indexedSubCategories[category]) {
-          indexedSubCategories[category] = {};
+      if (subcategory) {
+        if (!indexedSubcategories[category]) {
+          indexedSubcategories[category] = {};
         }
 
-        if (!indexedSubCategories[category][subCategory]) {
-          indexedSubCategories[category][subCategory] = [];
+        if (!indexedSubcategories[category][subcategory]) {
+          indexedSubcategories[category][subcategory] = [];
         }
 
-        indexedSubCategories[category][subCategory].push(metadata);
+        indexedSubcategories[category][subcategory].push(metadata);
       }
     }
 
@@ -91,20 +92,20 @@ function readCategories(sidebar, allMetadata, languages) {
         links: indexedCategories[category],
       };
 
-      for (let ii = 0; ii < sortedSubCategories.length; ii++) {
-        const subCategory = sortedSubCategories[ii];
+      for (let ii = 0; ii < sortedSubcategories.length; ii++) {
+        const subcategory = sortedSubcategories[ii];
 
         if (
-          indexedSubCategories[category] &&
-          indexedSubCategories[category][subCategory]
+          indexedSubcategories[category] &&
+          indexedSubcategories[category][subcategory]
         ) {
-          if (!currentCategory.sub_categories) {
-            currentCategory.sub_categories = [];
+          if (!currentCategory.subcategories) {
+            currentCategory.subcategories = [];
           }
 
-          currentCategory.sub_categories.push({
-            name: subCategory,
-            links: indexedSubCategories[category][subCategory],
+          currentCategory.subcategories.push({
+            name: subcategory,
+            links: indexedSubcategories[category][subcategory],
           });
         }
       }