Skip to content

Commit 77d93fa

Browse files
jhildenbiddlejhildenbiddle
authored
feat: v5 style overhaul (#2469)
Style updates: - New "core" theme serves as base for all other themes (official and third-party) - New CSS custom properties for simplified customization of "core" theme **Note:** List of available properties will be made available in documentation by embedding soruce CSS in docs after merge. Merge is required because embedded CSS needs to be in `main` branch. For now, see `_vars.css` and `_vars-advanced.css` for details. - New theme "add-ons" modify core theme properties and/or add custom declarations as needed. - New Prism.js theme support - New configurable sidebar toggle design - New typography defaults to system sans-serif and monospace fonts instead of relying on external web font. - New "Core Dark" theme addon provide dark theme styles. Can optionally be applied based on operating system's light/dark setting using `@media` attribute on `<link>` element. - New "Vue" theme addon. Closely replicated popular v4 theme while allowing for v5 enhancements. - New CSS class names available for adding loading indicators, adding sidebar expand/collapse icons, adding sidebar group styles, clamping sidebar links to a single line with ellipses, and changing the sidebar toggle icon. - New auto-generated gradient background for cover page (ensure gradient hue is > 50 degree apart, use OKLCH color if supported, randomize grandient angle, reduce brightness in dark mode) - New button styles (basic, primary, secondary) - New form element styles (text input, radio, checkbox, ) - New "callouts" (previously "important" and "tip" helpers) - New default syntax highlighting theme (from [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/)) - New auto-generated theme color shade and tint colors - New auto-generated monochromatic color palette - New form element styles (fields, legend, text input, text area, checkbox, radio, toggles, and select) - New "headerless" tables - New `kbd` styles - New task list style - New merged navbar styles (consistent with sidebar nav styles) - New search plugin styles and keyboard shortcut indicators - Add ability restore previously focused content element after hiding sidebar - Add "focus trap" when sidebar is visible on mobile (accessibility) - Add ability for sidebar links to wrap by default (previous single-line w/ ellipsis display available as CSS class on `<body>` option) - Add sidebar `page-link`, `group`, and `group-title` CSS classes to sidebar markup. - Add reduced motion media query to set all animation/transition timings to zero - Update Google Font imports (use new variable vs older fixed width fonts) - Update primary/secondary button order on coverpage (primary should be first) - Fix missing merged navbar when loading at desktop resolution then resizing to mobile - Fix inverted open/close sidebar visibility state at desktop/mobile resolutions - Fix overflow setting to prevent clipping of element focus ring - Fix safe area inset margins on mobile in landscape orientation - Fix inverted "tip" and "warn" class names - Fix scroll padding to prevent headers from touching top edge of viewport when scrolled to - Remove Stylus dependency (now using only PostCSS) - Remove legacy themes "Buble", "Dark", "Dolphin", and "Pure". Documentation updates: - New "UI Kit" page showcasing all elements styled by Docsify - Update "Quick Start" page template - Update "Adding pages" page with information on how to properly create sidebar group titles and navbar drop-down menus - Update "Themes" page with theme and class toggles - Update "Configuration" page with deprecation warnings for `themeColor` and `topMargin` - Move "Edit Page" link to footer - Remove [docsify-themeable](https://jhildenbiddle.github.io/docsify-themeable/) endorsement (currently not compatible with v5 and future is unknown) Miscellaneous updates: - New search plugin options: `insertBefore` and `insertAfter` - Add PostCSS config file - Update BrowserSync config (disable "ghost" mode) - Update tests - Fix Jest + Prettier 3 conflict - Fix `getAndRemoveDocisfyIgnoreConfig` name type (now `Docisfy` => `Docsify`) - Fix execution of sidebar-generating code when `hiddenSidebar` is `true` - Remove `inBrowser` constant (SSR deprecated, so no longer needed)
1 parent 90c0b02 commit 77d93fa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+4964
-3036
lines changed

‎.npmignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
.eslintignore
2-
.eslintrc.cjs
32
.github
43
.gitignore

‎.prettierignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ dist
44
lib
55

66
# Files
7+
_vars.css
8+
_vars-advanced.css
79
CHANGELOG.md
810
emoji-data.*
9-
HISTORY.md
11+
HISTORY.md

‎docs/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## docsify
1+
# docsify
22

33
> A magical documentation site generator.
44

‎docs/_coverpage.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1+
<!-- markdownlint-disable first-line-h1 -->
2+
13
![logo](_media/icon.svg)
24

35
# docsify <small>4.13.0</small>
46

5-
> A magical documentation site generator.
7+
> A magical documentation site generator
68
79
- Simple and lightweight
8-
- No statically built html files
10+
- No statically built HTML files
911
- Multiple themes
1012

13+
[Get Started](#docsify)
1114
[GitHub](https://github.com/docsifyjs/docsify/)
12-
[Getting Started](#docsify)
15+
16+
<!-- ![color](#f0f0f0) -->
17+
<!-- ![](/_media/icon.svg) -->

‎docs/_media/example.html‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,31 @@
1-
<h1>To infinity and Beyond!</h1>
1+
<style>
2+
html,
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
min-height: 100%;
7+
}
8+
9+
body {
10+
background-color: #4158d0;
11+
background-image: linear-gradient(
12+
43deg,
13+
#4158d0 0%,
14+
#c850c0 46%,
15+
#ffcc70 100%
16+
);
17+
color: #fff;
18+
font-family: sans-serif;
19+
}
20+
21+
main {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
height: 100vh;
26+
}
27+
</style>
28+
29+
<main>
30+
<p>Example HTML Page</p>
31+
</main>

‎docs/_media/moon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_media/sun.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎docs/_navbar.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
<!-- markdownlint-disable first-line-h1 -->
2+
13
- Translations
4+
25
- [:uk: English](/)
36
- [:cn: 简体中文](/zh-cn/)
47
- [:de: Deutsch](/de-de/)

‎docs/_sidebar.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
<!-- markdownlint-disable first-line-h1 -->
2+
13
- Getting started
24

35
- [Quick start](quickstart.md)
4-
- [Writing more pages](more-pages.md)
5-
- [Custom navbar](custom-navbar.md)
6+
- [Adding pages](adding-pages.md)
67
- [Cover page](cover.md)
8+
- [Custom navbar](custom-navbar.md)
79

810
- Customization
911

@@ -23,6 +25,7 @@
2325
- [CDN](cdn.md)
2426
- [Offline Mode (PWA)](pwa.md)
2527
- [Embed Files](embed-files.md)
28+
- [UI Kit](ui-kit.md)
2629

2730
- [Awesome docsify](awesome.md)
2831
- [Changelog](changelog.md)

‎docs/more-pages.md‎ renamed to ‎docs/adding-pages.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# More pages
1+
# Adding pages
22

33
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`.
44

@@ -46,7 +46,23 @@ Create the `_sidebar.md`:
4646
<!-- docs/_sidebar.md -->
4747

4848
- [Home](/)
49-
- [Guide](guide.md)
49+
- [Page 1](page-1.md)
50+
```
51+
52+
To create section headers:
53+
54+
```markdown
55+
<!-- docs/_sidebar.md -->
56+
57+
- Section Header 1
58+
59+
- [Home](/)
60+
- [Page 1](page-1.md)
61+
62+
- Section Header 2
63+
64+
- [Page 2](page-2.md)
65+
- [Page 3](page-3.md)
5066
```
5167

5268
You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.

0 commit comments

Comments
 (0)