feat: v5 style overhaul

.npmignore

@@ -1,4 +1,3 @@
 .eslintignore
-.eslintrc.cjs
 .github
 .gitignore

.prettierignore

@@ -4,6 +4,8 @@ dist
 lib
 
 # Files
+_vars.css
+_vars-advanced.css
 CHANGELOG.md
 emoji-data.*
-HISTORY.md
+HISTORY.md

docs/README.md

@@ -1,4 +1,4 @@
-## docsify
+# docsify
 
 > A magical documentation site generator.
 

docs/_coverpage.md

@@ -1,12 +1,17 @@
+<!-- markdownlint-disable first-line-h1 -->
+
 ![logo](_media/icon.svg)
 
 # docsify <small>4.13.0</small>
 
-> A magical documentation site generator.
+> A magical documentation site generator
 
 - Simple and lightweight
-- No statically built html files
+- No statically built HTML files
 - Multiple themes
 
+[Get Started](#docsify)
 [GitHub](https://github.com/docsifyjs/docsify/)
-[Getting Started](#docsify)
+
+<!-- ![color](#f0f0f0) -->
+<!-- ![](/_media/icon.svg) -->

docs/_media/example.html

@@ -1 +1,31 @@
-<h1>To infinity and Beyond!</h1>
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100%;
+  }
+
+  body {
+    background-color: #4158d0;
+    background-image: linear-gradient(
+      43deg,
+      #4158d0 0%,
+      #c850c0 46%,
+      #ffcc70 100%
+    );
+    color: #fff;
+    font-family: sans-serif;
+  }
+
+  main {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+</style>
+
+<main>
+  <p>Example HTML Page</p>
+</main>

docs/_navbar.md

@@ -1,4 +1,7 @@
+<!-- markdownlint-disable first-line-h1 -->
+
 - Translations
+
   - [:uk: English](/)
   - [:cn: 简体中文](/zh-cn/)
   - [:de: Deutsch](/de-de/)

docs/_sidebar.md

@@ -1,9 +1,11 @@
+<!-- markdownlint-disable first-line-h1 -->
+
 - Getting started
 
   - [Quick start](quickstart.md)
-  - [Writing more pages](more-pages.md)
-  - [Custom navbar](custom-navbar.md)
+  - [Adding pages](adding-pages.md)
   - [Cover page](cover.md)
+  - [Custom navbar](custom-navbar.md)
 
 - Customization
 
@@ -23,6 +25,7 @@
   - [CDN](cdn.md)
   - [Offline Mode (PWA)](pwa.md)
   - [Embed Files](embed-files.md)
+  - [UI Kit](ui-kit.md)
 
 - [Awesome docsify](awesome.md)
 - [Changelog](changelog.md)

docs/more-pages.md → docs/adding-pages.md

@@ -1,4 +1,4 @@
-# More pages
+# Adding pages
 
 If you need more pages, you can simply create more markdown files in your docsify directory. If you create a file named `guide.md`, then it is accessible via `/#/guide`.
 
@@ -46,7 +46,23 @@ Create the `_sidebar.md`:
 <!-- docs/_sidebar.md -->
 
 - [Home](/)
-- [Guide](guide.md)
+- [Page 1](page-1.md)
+```
+
+To create section headers:
+
+```markdown
+<!-- docs/_sidebar.md -->
+
+- Section Header 1
+
+  - [Home](/)
+  - [Page 1](page-1.md)
+
+- Section Header 2
+
+  - [Page 2](page-2.md)
+  - [Page 3](page-3.md)
 ```
 
 You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.

docs/configuration.md

@@ -376,7 +376,7 @@ window.$docsify = {
 
 Website logo as it appears in the sidebar. You can resize it using CSS.
 
-!> Logo will only bee visible if `name` prop is also set. See [name](#name) configuration.
+!> Logo will only be visible if `name` prop is also set. See [name](#name) configuration.
 
 ```js
 window.$docsify = {
@@ -917,17 +917,9 @@ If you have a link to the homepage in the sidebar and want it to be shown as act
 
 For more details, see [#1131](https://github.com/docsifyjs/docsify/issues/1131).
 
-## themeColor (_deprecated_)
+## themeColor ⚠️
 
-> **Warning** Deprecated. Use the CSS var `--theme-color` in your `<style>` sheet. Example:
->
-> ```html
-> <style>
->   :root {
->     --theme-color: deeppink;
->   }
-> </style>
-> ```
+!> Deprecated as of v5. Use the `--theme-color` [theme property](themes#theme-properties) to [customize](themes#customization) your theme color.
 
 - Type: `String`
 
@@ -939,16 +931,18 @@ window.$docsify = {
 };
 ```
 
-## topMargin
+## topMargin ⚠️
 
-- Type: `Number`
+!> Deprecated as of v5. Use the `--scroll-padding-top` [theme property](themes#theme-properties) to specify a scroll margin when using a sticky navbar.
+
+- Type: `Number|String`
 - Default: `0`
 
-Adds a space on top when scrolling the content page to reach the selected section. This is useful in case you have a _sticky-header_ layout and you want to align anchors to the end of your header.
+Adds scroll padding to the top of the viewport. This is useful when you have added a sticky or "fixed" element and would like auto scrolling to align with the bottom of your element.
 
 ```js
 window.$docsify = {
-  topMargin: 90, // default: 0
+  topMargin: 90, // 90, '90px', '2rem', etc.
 };
 ```
 

docs/cover.md

@@ -6,58 +6,61 @@ Activate the cover feature by setting `coverpage` to **true**. See [coverpage co
 
 Set `coverpage` to **true**, and create a `_coverpage.md`:
 
-```html
-<!-- index.html -->
-
-<script>
-  window.$docsify = {
-    coverpage: true,
-  };
-</script>
-<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/docsify.min.js"></script>
+```js
+window.$docsify = {
+  coverpage: true,
+};
 ```
 
 ```markdown
 <!-- _coverpage.md -->
 
 ![logo](_media/icon.svg)
 
-# docsify <small>3.5</small>
+# docsify
 
-> A magical documentation site generator.
+> A magical documentation site generator
 
 - Simple and lightweight
-- No statically built html files
+- No statically built HTML files
 - Multiple themes
 
 [GitHub](https://github.com/docsifyjs/docsify/)
 [Get Started](#docsify)
 ```
 
-## Custom background
+## Customization
 
-The background color is generated randomly by default. You can customize the background color or a background image:
+The cover page can be customized using [theme properties](themes#theme-properties):
 
-```markdown
-<!-- _coverpage.md -->
+<!-- prettier-ignore -->
+```css
+:root {
+  --cover-bg         : url('path/to/image.png');
+  --cover-bg-overlay : rgba(0, 0, 0, 0.5);
+  --cover-color      : #fff;
+  --cover-title-color: var(--theme-color);
+  --cover-title-font : 600 var(--font-size-xxxl) var(--font-family);
+}
+```
 
-# docsify <small>3.5</small>
+Alternatively, a background color or image can be specified in the cover page markdown.
 
-[GitHub](https://github.com/docsifyjs/docsify/)
-[Get Started](#quick-start)
+```markdown
+<!-- background color -->
 
+![color](#f0f0f0)
+```
+
+```markdown
 <!-- background image -->
 
 ![](_media/bg.png)
-
-<!-- background color -->
-
-![color](#f0f0f0)
 ```
 
 ## Coverpage as homepage
 
-Normally, the coverpage and the homepage appear at the same time. Of course, you can also separate the coverpage by [onlyCover option](configuration.md#onlycover).
+Normally, the coverpage and the homepage appear at the same time. Of course, you can also separate the coverpage by [`onlyCover`](configuration.md#onlycover) option.
 
 ## Multiple covers
 

docs/custom-navbar.md

@@ -40,6 +40,17 @@ Alternatively, you can create a custom markdown-based navigation file by setting
 - [chinese](/zh-cn/)
 ```
 
+To create drop-down menus:
+
+```markdown
+<!-- _navbar.md -->
+
+- Translations
+
+  - [En](/)
+  - [chinese](/zh-cn/)
+```
+
 !> You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.
 
 `_navbar.md` is loaded from each level directory. If the current directory doesn't have `_navbar.md`, it will fall back to the parent directory. If, for example, the current path is `/guide/quick-start`, the `_navbar.md` will be loaded from `/guide/_navbar.md`.
@@ -59,6 +70,7 @@ You can create sub-lists by indenting items that are under a certain parent.
   - [Cover page](cover.md)
 
 - Configuration
+
   - [Configuration](configuration.md)
   - [Themes](themes.md)
   - [Using plugins](plugins.md)