fix: change subcategory format (#1026)

* fix: change subcategory format * Fix sidebars * Refactor * Fix implementation * Change format
facebook · Oct 10, 2018 · fe500de · fe500de
1 parent c277f46
commit fe500de
Show file tree

Hide file tree

Showing 19 changed files with 499 additions and 15,053 deletions.
diff --git a/docs/guides-navigation.md b/docs/guides-navigation.md
@@ -22,11 +22,9 @@ For example, creating an empty file such as `docs/getting-started.md` will enabl
 Suppose you add this to your document:
 
 ```yaml
----
 id: intro
 title: Getting Started
 ---
-
 My new content here..
 ```
 
@@ -94,27 +92,50 @@ 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",
+      {
+        "type": "subcategory",
+        "label": "My Example Subcategory",
+        "ids": [
+          "my-examples",
+          ...
+        ]
+      },
+      {
+        "type": "subcategory",
+        "label": "My Next Subcategory",
+        "ids": [
+          "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
@@ -234,8 +255,8 @@ The links in the top navigation bar get `siteNavItemActive` and `siteNavGroupAct
 
 The `siteNavGroupActive` class will be added to these links:
 
-* `doc` links that belong to the same sidebar as the currently displayed document
-* The blog link when a blog post, or the blog listing page is being displayed
+- `doc` links that belong to the same sidebar as the currently displayed document
+- The blog link when a blog post, or the blog listing page is being displayed
 
 These are two separate class names so you can have the active styles applied to either exact matches only or a bit more broadly for docs that belong together. If you don't want to make this distinction you can add both classes to the same CSS rule.
 

diff --git a/v1/lib/core/BlogSidebar.js b/v1/lib/core/BlogSidebar.js
@@ -27,8 +27,12 @@ class BlogSidebar extends React.Component {
 
     const contents = [
       {
-        name: blogSidebarTitle,
-        links: MetadataBlog.slice(0, blogSidebarCount),
+        type: 'CATEGORY',
+        title: blogSidebarTitle,
+        children: MetadataBlog.slice(0, blogSidebarCount).map(item => ({
+          type: 'LINK',
+          item,
+        })),
       },
     ];
     const title = this.props.current && this.props.current.title;

diff --git a/v1/lib/core/DocsLayout.js b/v1/lib/core/DocsLayout.js
@@ -53,7 +53,6 @@ class DocsLayout extends React.Component {
     const title =
       idx(i18n, ['localized-strings', 'docs', id, 'title']) || defaultTitle;
     const hasOnPageNav = this.props.config.onPageNav === 'separate';
-
     const previousTitle =
       idx(i18n, ['localized-strings', metadata.previous_id]) ||
       idx(i18n, ['localized-strings', 'previous']) ||

diff --git a/v1/lib/core/DocsSidebar.js b/v1/lib/core/DocsSidebar.js
@@ -28,12 +28,13 @@ if (fs.existsSync(`../server/languages.js`)) {
 
 class DocsSidebar extends React.Component {
   render() {
-    const sidebar = this.props.metadata.sidebar;
+    const {category, sidebar} = this.props.metadata;
     const docsCategories = readCategories(sidebar, Metadata, languages);
-    const categoryName = this.props.metadata.category;
-    if (!categoryName) {
+
+    if (!category) {
       return null;
     }
+
     return (
       <Container className="docsNavContainer" id="docsNav" wrapper={false}>
         <SideNav

diff --git a/v1/lib/core/nav/SideNav.js b/v1/lib/core/nav/SideNav.js
@@ -61,44 +61,48 @@ class SideNav extends React.Component {
     return null;
   }
 
-  renderCategory(category) {
-    return (
-      <div className="navGroup" key={category.name}>
-        <h3 className="navGroupCategoryTitle">
-          {this.getLocalizedCategoryString(category.name)}
-        </h3>
-        <ul>
-          {category.links.map(this.renderItemLink, this)}
-          {category.sub_categories &&
-            category.sub_categories.map(this.renderSubCategory, this)}
-        </ul>
-      </div>
-    );
-  }
-
-  renderSubCategory(subCategory) {
-    return (
-      <div className="navGroup subNavGroup" key={subCategory.name}>
-        <h4 className="navGroupSubCategoryTitle">
-          {this.getLocalizedCategoryString(subCategory.name)}
-        </h4>
-        <ul>{subCategory.links.map(this.renderItemLink, this)}</ul>
-      </div>
-    );
-  }
-
-  renderItemLink(link) {
+  renderCategory = categoryItem => (
+    <div className="navGroup" key={categoryItem.title}>
+      <h3 className="navGroupCategoryTitle">
+        {this.getLocalizedCategoryString(categoryItem.title)}
+      </h3>
+      <ul>
+        {categoryItem.children.map(item => {
+          switch (item.type) {
+            case 'LINK':
+              return this.renderItemLink(item);
+            case 'SUBCATEGORY':
+              return this.renderSubcategory(item);
+            default:
+              return null;
+          }
+        })}
+      </ul>
+    </div>
+  );
+
+  renderSubcategory = subcategoryItem => (
+    <div className="navGroup subNavGroup" key={subcategoryItem.title}>
+      <h4 className="navGroupSubcategoryTitle">
+        {this.getLocalizedCategoryString(subcategoryItem.title)}
+      </h4>
+      <ul>{subcategoryItem.children.map(this.renderItemLink)}</ul>
+    </div>
+  );
+
+  renderItemLink = linkItem => {
+    const linkMetadata = linkItem.item;
     const itemClasses = classNames('navListItem', {
-      navListItemActive: link.id === this.props.current.id,
+      navListItemActive: linkMetadata.id === this.props.current.id,
     });
     return (
-      <li className={itemClasses} key={link.id}>
-        <a className="navItem" href={this.getLink(link)}>
-          {this.getLocalizedString(link)}
+      <li className={itemClasses} key={linkMetadata.id}>
+        <a className="navItem" href={this.getLink(linkMetadata)}>
+          {this.getLocalizedString(linkMetadata)}
         </a>
       </li>
     );
-  }
+  };
 
   render() {
     return (
@@ -122,7 +126,7 @@ class SideNav extends React.Component {
               )}
             </div>
             <div className="navGroups">
-              {this.props.contents.map(this.renderCategory, this)}
+              {this.props.contents.map(this.renderCategory)}
             </div>
           </section>
         </div>

diff --git a/v1/lib/server/__tests__/__fixtures__/metadata-subcategories.js b/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': {

diff --git a/v1/lib/server/__tests__/__fixtures__/sidebar-subcategories.js b/v1/lib/server/__tests__/__fixtures__/sidebar-subcategories.js
@@ -1,11 +1,26 @@
 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',
+      {
+        type: 'subcategory',
+        label: 'First Subcategory',
+        ids: ['doc4'],
+      },
+      'doc5',
+    ],
+    'Third Category': [
+      {
+        type: 'subcategory',
+        label: 'Second Subcategory',
+        ids: ['doc6', 'doc7'],
+      },
+      {
+        type: 'subcategory',
+        label: 'Third Subcategory',
+        ids: ['doc8'],
+      },
+    ],
   },
 };