feat(v2): enable subcategories (#1021)

* feat(v2): enable subcategories

* nits

* eslint issue https://github.com/prettier/prettier/issues/3734

v2/lib/load/docs/metadata.js

@@ -151,6 +151,7 @@ module.exports = async function processMetadata(
   if (order[id]) {
     metadata.sidebar = order[id].sidebar;
     metadata.category = order[id].category;
+    metadata.subCategory = order[id].subCategory;
     if (order[id].next) {
       metadata.next_id = order[id].next;
       metadata.next = (language ? `${language}-` : '') + order[id].next;

v2/lib/load/docs/order.js

@@ -9,11 +9,26 @@ module.exports = function createOrder(allSidebars = {}) {
 
     let ids = [];
     const categoryOrder = [];
+    const subCategoryOrder = [];
     Object.keys(categories).forEach(category => {
-      ids = ids.concat(categories[category]);
-      // eslint-disable-next-line
-      for (let i = 0; i < categories[category].length; i++) {
-        categoryOrder.push(category);
+      if (Array.isArray(categories[category])) {
+        ids = ids.concat(categories[category]);
+
+        // eslint-disable-next-line
+        for (let i = 0; i < categories[category].length; i++) {
+          categoryOrder.push(category);
+          subCategoryOrder.push(undefined);
+        }
+      } else {
+        Object.keys(categories[category]).forEach(subCategory => {
+          ids = ids.concat(categories[category][subCategory]);
+
+          // eslint-disable-next-line
+          for (let i = 0; i < categories[category][subCategory].length; i++) {
+            categoryOrder.push(category);
+            subCategoryOrder.push(subCategory);
+          }
+        });
       }
     });
 
@@ -29,6 +44,7 @@ module.exports = function createOrder(allSidebars = {}) {
         next,
         sidebar,
         category: categoryOrder[i],
+        subCategory: subCategoryOrder[i],
       };
     }
   });

v2/lib/theme/Sidebar/index.js

@@ -12,37 +12,56 @@ function Sidebar(props) {
     return null;
   }
   const thisSidebar = docsSidebars[sidebar];
+
+  const renderItemLink = rawLinkID => {
+    const linkID = (language ? `${language}-` : '') + rawLinkID;
+    const linkMetadata = docsMetadatas[linkID];
+    if (!linkMetadata) {
+      throw new Error(
+        `Improper sidebars.json file, document with id '${linkID}' not found.`,
+      );
+    }
+    const activeItem = linkID === thisID;
+    return (
+      <li key={linkID}>
+        <Link
+          className={classnames(styles.sidebarLink, {
+            [styles.sidebarLinkActive]: activeItem,
+          })}
+          to={linkMetadata.permalink}>
+          {linkMetadata.sidebar_label || linkMetadata.title}
+        </Link>
+      </li>
+    );
+  };
+
+  const renderCategory = categoryName => {
+    const category = thisSidebar[categoryName];
+    return (
+      <div className={styles.sidebarGroup} key={categoryName}>
+        <h3 className={styles.sidebarGroupTitle}>{categoryName}</h3>
+        <ul className={styles.sidebarList}>
+          {Array.isArray(category)
+            ? category.map(renderItemLink)
+            : Object.keys(category).map(subCategoryName => (
+                <div className={styles.sidebarSubGroup} key={subCategoryName}>
+                  <h4 className={styles.sidebarSubGroupTitle}>
+                    {subCategoryName}
+                  </h4>
+                  <ul className={styles.sidebarList}>
+                    {category[subCategoryName].map(renderItemLink)}
+                  </ul>
+                </div>
+              ))}
+        </ul>
+      </div>
+    );
+  };
+
   return (
     thisSidebar && (
       <div className={styles.sidebar}>
-        {Object.keys(thisSidebar).map(categoryName => (
-          <div className={styles.sidebarGroup} key={categoryName}>
-            <h3 className={styles.sidebarGroupTitle}>{categoryName}</h3>
-            <ul className={styles.sidebarList}>
-              {thisSidebar[categoryName].map(rawLinkID => {
-                const linkID = (language ? `${language}-` : '') + rawLinkID;
-                const linkMetadata = docsMetadatas[linkID];
-                if (!linkMetadata) {
-                  throw new Error(
-                    `Improper sidebars.json file, document with id '${linkID}' not found.`,
-                  );
-                }
-                const activeItem = linkID === thisID;
-                return (
-                  <li key={linkID}>
-                    <Link
-                      className={classnames(styles.sidebarLink, {
-                        [styles.sidebarLinkActive]: activeItem,
-                      })}
-                      to={linkMetadata.permalink}>
-                      {linkMetadata.sidebar_label || linkMetadata.title}
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        ))}
+        {Object.keys(thisSidebar).map(renderCategory)}
       </div>
     )
   );

v2/lib/theme/Sidebar/styles.css

@@ -7,7 +7,18 @@
   margin-bottom: 20px;
 }
 
+.sidebarSubGroup {
+  margin-top: 10px;
+  margin-left: 10px;
+}
+
+.sidebarSubGroupTitle {
+  font-size: 16px;
+  margin: 0;
+}
+
 .sidebarGroupTitle {
+  font-size: 18px;
   margin: 0;
 }