feat: new option hideSidebar (#1026)

* feat: new option hideSidebar * chore: removed the console logs * chore: linting fixes * chore: test fix
2026-08-08 21:08:18 +10:00 · 2020-02-20 22:19:31 +05:30
parent 75c72e917b
commit b7547f151e
100 changed files with 194 additions and 171 deletions
@@ -1,29 +1,29 @@
 context('sidebar.configurations', () => {
  beforeEach(() => {
-    cy.visit('http://localhost:3000')
-  })
+    cy.visit('http://localhost:3000');
+  });

  const quickStartIds = [
    'initialize',
    'writing-content',
    'preview-your-site',
    'manual-initialization',
-    'loading-dialog'
-  ]
+    'loading-dialog',
+  ];
  quickStartIds.forEach(id => {
    it('go to #quickstart?id=' + id, () => {
      cy.get(
        '.sidebar-nav > :nth-child(1) > :nth-child(1) > ul > :nth-child(1) > a'
-      ).click()
+      ).click();

      cy.get(`a.section-link[href='#/quickstart?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const configurationIds = [
    'el',
@@ -31,6 +31,7 @@ context('sidebar.configurations', () => {
    'maxlevel',
    'loadnavbar',
    'loadsidebar',
+    'hidesidebar',
    'submaxlevel',
    'auto2top',
    'homepage',
@@ -57,92 +58,92 @@ context('sidebar.configurations', () => {
    'requestheaders',
    'ext',
    'fallbacklanguages',
-    'notfoundpage'
-  ]
+    'notfoundpage',
+  ];
  configurationIds.forEach(id => {
    it('go to #configuration?id=' + id, () => {
-      cy.get('[href="#/configuration"]').click()
+      cy.get('[href="#/configuration"]').click();

      cy.get(`a.section-link[href='#/configuration?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500) // its more far from the cover
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500); // its more far from the cover
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const morePagesIds = [
    'sidebar',
    'nested-sidebars',
    'set-page-titles-from-sidebar-selection',
    'table-of-contents',
-    'ignoring-subheaders'
-  ]
+    'ignoring-subheaders',
+  ];
  morePagesIds.forEach(id => {
    it('go to #more-pages?id=' + id, () => {
-      cy.get('[href="#/more-pages"]').click()
+      cy.get('[href="#/more-pages"]').click();

      cy.get(`a.section-link[href='#/more-pages?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const customNavbarIds = [
    'html',
    'markdown',
    'nesting',
-    'combining-custom-navbars-with-the-emoji-plugin'
-  ]
+    'combining-custom-navbars-with-the-emoji-plugin',
+  ];
  customNavbarIds.forEach(id => {
    it('go to #custom-navbar?id=' + id, () => {
-      cy.get('[href="#/custom-navbar"]').click()
+      cy.get('[href="#/custom-navbar"]').click();

      cy.get(`a.section-link[href='#/custom-navbar?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const coverIds = [
    'basic-usage',
    'custom-background',
    'coverpage-as-homepage',
-    'multiple-covers'
-  ]
+    'multiple-covers',
+  ];
  coverIds.forEach(id => {
    it('go to #cover?id=' + id, () => {
-      cy.get('[href="#/cover"]').click()
+      cy.get('[href="#/cover"]').click();

      cy.get(`a.section-link[href='#/cover?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

-  const themesIds = ['other-themes']
+  const themesIds = ['other-themes'];
  themesIds.forEach(id => {
    it('go to #themes?id=' + id, () => {
-      cy.get('[href="#/themes"]').click()
+      cy.get('[href="#/themes"]').click();

      cy.get(`a.section-link[href='#/themes?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const pluginsIds = [
    'full-text-search',
@@ -158,57 +159,57 @@ context('sidebar.configurations', () => {
    'pagination',
    'codefund',
    'tabs',
-    'more-plugins'
-  ]
+    'more-plugins',
+  ];
  pluginsIds.forEach(id => {
    it('go to #plugins?id=' + id, () => {
-      cy.get('[href="#/plugins"]').click()
+      cy.get('[href="#/plugins"]').click();

      cy.get(`a.section-link[href='#/plugins?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

-  const writeAPluginIds = ['full-configuration', 'example', 'tips']
+  const writeAPluginIds = ['full-configuration', 'example', 'tips'];
  writeAPluginIds.forEach(id => {
    it('go to #write-a-plugin?id=' + id, () => {
-      cy.get('[href="#/write-a-plugin"]').click()
+      cy.get('[href="#/write-a-plugin"]').click();

      cy.get(`a.section-link[href='#/write-a-plugin?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

-  const markdownIds = ['supports-mermaid']
+  const markdownIds = ['supports-mermaid'];
  markdownIds.forEach(id => {
    it('go to #markdown?id=' + id, () => {
-      cy.get('[href="#/markdown"]').click()
+      cy.get('[href="#/markdown"]').click();

      cy.get(`a.section-link[href='#/markdown?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  it('go to #Language-highlight', () => {
    cy.get('a[href="#/language-highlight"]')
      .click()
      .then(() => {
-        cy.wait(500)
-        cy.matchImageSnapshot()
-      })
-  })
+        cy.wait(500);
+        cy.matchImageSnapshot();
+      });
+  });

  // const deployIds = [
  //   'github-pages',
@@ -240,104 +241,104 @@ context('sidebar.configurations', () => {
    'disable-link',
    'github-task-lists',
    'customise-id-for-headings',
-    'markdown-in-html-tag'
-  ]
+    'markdown-in-html-tag',
+  ];
  helpersIds.forEach(id => {
    it('go to #helpers?id=' + id, () => {
-      cy.get('[href="#/helpers"]').click()
+      cy.get('[href="#/helpers"]').click();

      cy.get(`a.section-link[href='#/helpers?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

-  const vueIds = ['basic-usage', 'combine-vuep-to-write-playground']
+  const vueIds = ['basic-usage', 'combine-vuep-to-write-playground'];
  vueIds.forEach(id => {
    it('go to #vue?id=' + id, () => {
-      cy.get('[href="#/vue"]').click()
+      cy.get('[href="#/vue"]').click();

      cy.get(`a.section-link[href='#/vue?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const cdnIds = [
    'latest-version',
    'specific-version',
    'compressed-file',
-    'other-cdn'
-  ]
+    'other-cdn',
+  ];
  cdnIds.forEach(id => {
    it('go to #cdn?id=' + id, () => {
-      cy.get('[href="#/cdn"]').click()
+      cy.get('[href="#/cdn"]').click();

      cy.get(`a.section-link[href='#/cdn?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

-  const pwaIds = ['create-serviceworker', 'register', 'enjoy-it']
+  const pwaIds = ['create-serviceworker', 'register', 'enjoy-it'];
  pwaIds.forEach(id => {
    it('go to #pwa?id=' + id, () => {
-      cy.get('[href="#/pwa"]').click()
+      cy.get('[href="#/pwa"]').click();

      cy.get(`a.section-link[href='#/pwa?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });

  const ssrIds = [
    'why-ssr',
    'quick-start',
    'custom-template',
    'configuration',
-    'deploy-for-your-vps'
-  ]
+    'deploy-for-your-vps',
+  ];

  ssrIds.forEach(id => {
    it('go to #ssr?id=' + id, () => {
-      cy.get('[href="#/ssr"]').click()
+      cy.get('[href="#/ssr"]').click();

      cy.get(`a.section-link[href='#/ssr?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });
  const embedFilesIds = [
    'embedded-file-type',
    'embedded-code-fragments',
    'tag-attribute',
-    'the-code-block-highlight'
-  ]
+    'the-code-block-highlight',
+  ];
  embedFilesIds.forEach(id => {
    it('go to #embed-files?id=' + id, () => {
-      cy.get('[href="#/embed-files"]').click()
+      cy.get('[href="#/embed-files"]').click();

      cy.get(`a.section-link[href='#/embed-files?id=${id}']`)
        .click()
        .then(() => {
-          cy.wait(500)
-          cy.matchImageSnapshot()
-        })
-    })
-  })
-})
+          cy.wait(500);
+          cy.matchImageSnapshot();
+        });
+    });
+  });
+});
@@ -7,8 +7,8 @@ You can configure the `window.$docsify`.
  window.$docsify = {
    repo: 'docsifyjs/docsify',
    maxLevel: 3,
-    coverpage: true
-  }
+    coverpage: true,
+  };
 </script>
 ```

@@ -21,7 +21,7 @@ The DOM element to be mounted on initialization. It can be a CSS selector string

 ```js
 window.$docsify = {
-  el: '#app'
+  el: '#app',
 };
 ```

@@ -36,7 +36,7 @@ Configure the repository url or a string of `username/repo` can add the [GitHub
 window.$docsify = {
  repo: 'docsifyjs/docsify',
  // or
-  repo: 'https://github.com/docsifyjs/docsify/'
+  repo: 'https://github.com/docsifyjs/docsify/',
 };
 ```

@@ -49,7 +49,7 @@ Maximum Table of content level.

 ```js
 window.$docsify = {
-  maxLevel: 4
+  maxLevel: 4,
 };
 ```

@@ -66,7 +66,7 @@ window.$docsify = {
  loadNavbar: true,

  // load from nav.md
-  loadNavbar: 'nav.md'
+  loadNavbar: 'nav.md',
 };
 ```

@@ -83,7 +83,20 @@ window.$docsify = {
  loadSidebar: true,

  // load from summary.md
-  loadSidebar: 'summary.md'
+  loadSidebar: 'summary.md',
+};
+```
+
+## hideSidebar
+
+- Type : `Boolean`
+- Default: `true`
+
+This option will completely hide your sidebar and wont render any content of the side even .
+
+```js
+window.$docsify = {
+  hideSidebar: true,
 };
 ```

@@ -96,7 +109,7 @@ Add table of contents (TOC) in custom sidebar.

 ```js
 window.$docsify = {
-  subMaxLevel: 2
+  subMaxLevel: 2,
 };
 ```

@@ -109,7 +122,7 @@ Scrolls to the top of the screen when the route is changed.

 ```js
 window.$docsify = {
-  auto2top: true
+  auto2top: true,
 };
 ```

@@ -127,7 +140,7 @@ window.$docsify = {

  // Or use the readme in your repo
  homepage:
-    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md'
+    'https://raw.githubusercontent.com/docsifyjs/docsify/master/README.md',
 };
 ```

@@ -146,7 +159,7 @@ window.$docsify = {

  // Even can load files from other repo
  basePath:
-    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/'
+    'https://raw.githubusercontent.com/ryanmcdermott/clean-code-javascript/master/',
 };
 ```

@@ -186,7 +199,7 @@ window.$docsify = {
  relativePath: true,

  // Relative path disabled (default value)
-  relativePath: false
+  relativePath: false,
 };
 ```

@@ -210,8 +223,8 @@ window.$docsify = {
  // mutiple covers and custom file name
  coverpage: {
    '/': 'cover.md',
-    '/zh-cn/': 'cover.md'
-  }
+    '/zh-cn/': 'cover.md',
+  },
 };
 ```

@@ -223,7 +236,7 @@ Website logo as it appears in the sidebar, you can resize by CSS.

 ```js
 window.$docsify = {
-  logo: '/_media/icon.svg'
+  logo: '/_media/icon.svg',
 };
 ```

@@ -235,7 +248,7 @@ Website name as it appears in the sidebar.

 ```js
 window.$docsify = {
-  name: 'docsify'
+  name: 'docsify',
 };
 ```

@@ -243,7 +256,7 @@ The name field can also contain custom HTML for easier customization:

 ```js
 window.$docsify = {
-  name: '<span>docsify</span>'
+  name: '<span>docsify</span>',
 };
 ```

@@ -261,8 +274,8 @@ window.$docsify = {
  // For each route
  nameLink: {
    '/zh-cn/': '/zh-cn/',
-    '/': '/'
-  }
+    '/': '/',
+  },
 };
 ```

@@ -280,15 +293,15 @@ window.$docsify = {
    renderer: {
      link: function() {
        // ...
-      }
-    }
+      },
+    },
  },

  // function
  markdown: function(marked, renderer) {
    // ...
    return marked;
-  }
+  },
 };
 ```

@@ -300,7 +313,7 @@ Customize the theme color. Use [CSS3 variables](https://developer.mozilla.org/en

 ```js
 window.$docsify = {
-  themeColor: '#3F51B5'
+  themeColor: '#3F51B5',
 };
 ```

@@ -317,8 +330,8 @@ window.$docsify = {
    '/zh-cn/changelog': '/changelog',
    '/changelog':
      'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
-    '/.*/_sidebar.md': '/_sidebar.md' // See #301
-  }
+    '/.*/_sidebar.md': '/_sidebar.md', // See #301
+  },
 };
 ```

@@ -331,7 +344,7 @@ If `loadSidebar` and `autoHeader` are both enabled, for each link in `_sidebar.m
 ```js
 window.$docsify = {
  loadSidebar: true,
-  autoHeader: true
+  autoHeader: true,
 };
 ```

@@ -343,7 +356,7 @@ Execute the script on the page. Only parse the first script tag([demo](themes)).

 ```js
 window.$docsify = {
-  executeScript: true
+  executeScript: true,
 };
 ```

@@ -365,7 +378,7 @@ Disabled emoji parse.

 ```js
 window.$docsify = {
-  noEmoji: true
+  noEmoji: true,
 };
 ```

@@ -379,7 +392,7 @@ Navbar will be merged with the sidebar on smaller screens.

 ```js
 window.$docsify = {
-  mergeNavbar: true
+  mergeNavbar: true,
 };
 ```

@@ -398,7 +411,7 @@ window.$docsify = {
    // ...

    return time;
-  }
+  },
 };
 ```

@@ -411,7 +424,7 @@ Target to open external links inside the markdown. Default `'_blank'` (new windo

 ```js
 window.$docsify = {
-  externalLinkTarget: '_self' // default: '_blank'
+  externalLinkTarget: '_self', // default: '_blank'
 };
 ```

@@ -424,7 +437,7 @@ Target to open external link at the top right corner. Default `'_blank'` (new wi

 ```js
 window.$docsify = {
-  cornerExternalLinkTarget: '_self' // default: '_blank'
+  cornerExternalLinkTarget: '_self', // default: '_blank'
 };
 ```

@@ -437,7 +450,7 @@ Default `'noopener'` (no opener) prevents the newly opened external page (when [

 ```js
 window.$docsify = {
-  externalLinkTarget: '' // default: 'noopener'
+  externalLinkTarget: '', // default: 'noopener'
 };
 ```

@@ -448,7 +461,7 @@ window.$docsify = {

 ```js
 window.$docsify = {
-  routerMode: 'history' // default: 'hash'
+  routerMode: 'history', // default: 'hash'
 };
 ```

@@ -460,7 +473,7 @@ Sometimes we do not want docsify to handle our links. See [#203](https://github.

 ```js
 window.$docsify = {
-  noCompileLinks: ['/foo', '/bar/.*']
+  noCompileLinks: ['/foo', '/bar/.*'],
 };
 ```

@@ -472,7 +485,7 @@ Only coverpage is loaded when visiting the home page.

 ```js
 window.$docsify = {
-  onlyCover: false
+  onlyCover: false,
 };
 ```

@@ -485,8 +498,8 @@ Set the request resource headers.
 ```js
 window.$docsify = {
  requestHeaders: {
-    'x-token': 'xxx'
-  }
+    'x-token': 'xxx',
+  },
 };
 ```

@@ -495,13 +508,11 @@ Such as setting the cache
 ```js
 window.$docsify = {
  requestHeaders: {
-    'cache-control': 'max-age=600'
-  }
+    'cache-control': 'max-age=600',
+  },
 };
 ```

-
-
 ## ext

 - type: `String`
@@ -510,7 +521,7 @@ Request file extension.

 ```js
 window.$docsify = {
-  ext: '.md'
+  ext: '.md',
 };
 ```

@@ -528,7 +539,7 @@ Example:

 ```js
 window.$docsify = {
-  fallbackLanguages: ['fr', 'de']
+  fallbackLanguages: ['fr', 'de'],
 };
 ```

@@ -540,7 +551,7 @@ Load the `_404.md` file:

 ```js
 window.$docsify = {
-  notFoundPage: true
+  notFoundPage: true,
 };
 ```

@@ -548,7 +559,7 @@ Load the customised path of the 404 page:

 ```js
 window.$docsify = {
-  notFoundPage: 'my404.md'
+  notFoundPage: 'my404.md',
 };
 ```

@@ -558,8 +569,8 @@ Load the right 404 page according to the localisation:
 window.$docsify = {
  notFoundPage: {
    '/': '_404.md',
-    '/de': 'de/_404.md'
-  }
+    '/de': 'de/_404.md',
+  },
 };
 ```

@@ -95,7 +95,18 @@ export function renderMixin(proto) {
  };

  proto._renderSidebar = function(text) {
-    const { maxLevel, subMaxLevel, loadSidebar } = this.config;
+    const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
+
+    if (hideSidebar) {
+      // FIXME : better styling solution
+      document.querySelector('aside.sidebar').remove();
+      document.querySelector('button.sidebar-toggle').remove();
+      document.querySelector('section.content').style.right = 'unset';
+      document.querySelector('section.content').style.left = 'unset';
+      document.querySelector('section.content').style.position = 'relative';
+      document.querySelector('section.content').style.width = '100%';
+      return null;
+    }

    this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
    const activeEl = getAndActive(this.router, '.sidebar-nav', true, true);