mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
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)
142 lines
4.9 KiB
JavaScript
142 lines
4.9 KiB
JavaScript
import {
|
|
removeAtag,
|
|
getAndRemoveConfig,
|
|
getAndRemoveDocsifyIgnoreConfig,
|
|
} from '../../src/core/render/utils.js';
|
|
import { tree } from '../../src/core/render/tpl.js';
|
|
import { slugify } from '../../src/core/render/slugify.js';
|
|
|
|
// Suite
|
|
// -----------------------------------------------------------------------------
|
|
describe('core/render/utils', () => {
|
|
// removeAtag()
|
|
// ---------------------------------------------------------------------------
|
|
describe('removeAtag()', () => {
|
|
test('removeAtag from a link', () => {
|
|
const result = removeAtag('<a href="www.example.com">content</a>');
|
|
|
|
expect(result).toBe('content');
|
|
});
|
|
});
|
|
|
|
// getAndRemoveDocsifyIgnoreConfig()
|
|
// ---------------------------------------------------------------------------
|
|
describe('getAndRemoveDocsifyIgnoreConfig()', () => {
|
|
test('getAndRemoveDocsifyIgnoreConfig from <!-- {docsify-ignore} -->', () => {
|
|
const { content, ignoreAllSubs, ignoreSubHeading } =
|
|
getAndRemoveDocsifyIgnoreConfig(
|
|
'My Ignore Title<!-- {docsify-ignore} -->',
|
|
);
|
|
expect(content).toBe('My Ignore Title');
|
|
expect(ignoreSubHeading).toBeTruthy();
|
|
expect(ignoreAllSubs === undefined).toBeTruthy();
|
|
});
|
|
|
|
test('getAndRemoveDocsifyIgnoreConfig from <!-- {docsify-ignore-all} -->', () => {
|
|
const { content, ignoreAllSubs, ignoreSubHeading } =
|
|
getAndRemoveDocsifyIgnoreConfig(
|
|
'My Ignore Title<!-- {docsify-ignore-all} -->',
|
|
);
|
|
expect(content).toBe('My Ignore Title');
|
|
expect(ignoreAllSubs).toBeTruthy();
|
|
expect(ignoreSubHeading === undefined).toBeTruthy();
|
|
});
|
|
|
|
test('getAndRemoveDocsifyIgnoreConfig from {docsify-ignore}', () => {
|
|
const { content, ignoreAllSubs, ignoreSubHeading } =
|
|
getAndRemoveDocsifyIgnoreConfig('My Ignore Title{docsify-ignore}');
|
|
expect(content).toBe('My Ignore Title');
|
|
expect(ignoreSubHeading).toBeTruthy();
|
|
expect(ignoreAllSubs === undefined).toBeTruthy();
|
|
});
|
|
|
|
test('getAndRemoveDocsifyIgnoreConfig from {docsify-ignore-all}', () => {
|
|
const { content, ignoreAllSubs, ignoreSubHeading } =
|
|
getAndRemoveDocsifyIgnoreConfig('My Ignore Title{docsify-ignore-all}');
|
|
expect(content).toBe('My Ignore Title');
|
|
expect(ignoreAllSubs).toBeTruthy();
|
|
expect(ignoreSubHeading === undefined).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
// getAndRemoveConfig()
|
|
// ---------------------------------------------------------------------------
|
|
describe('getAndRemoveConfig()', () => {
|
|
test('parse simple config', () => {
|
|
const result = getAndRemoveConfig(
|
|
"[filename](_media/example.md ':include')",
|
|
);
|
|
|
|
expect(result).toMatchObject({
|
|
config: {},
|
|
str: "[filename](_media/example.md ':include')",
|
|
});
|
|
});
|
|
|
|
test('parse config with arguments', () => {
|
|
const result = getAndRemoveConfig(
|
|
"[filename](_media/example.md ':include :foo=bar :baz test')",
|
|
);
|
|
|
|
expect(result).toMatchObject({
|
|
config: {
|
|
foo: 'bar',
|
|
baz: true,
|
|
},
|
|
str: "[filename](_media/example.md ':include test')",
|
|
});
|
|
});
|
|
|
|
test('parse config with double quotes', () => {
|
|
const result = getAndRemoveConfig(
|
|
'[filename](_media/example.md ":include")',
|
|
);
|
|
|
|
expect(result).toMatchObject({
|
|
config: {},
|
|
str: '[filename](_media/example.md ":include")',
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('core/render/tpl', () => {
|
|
test('remove html tag in tree', () => {
|
|
const result = tree([
|
|
{
|
|
level: 2,
|
|
slug: '#/cover?id=basic-usage',
|
|
title: '<span style="color:red">Basic usage</span>',
|
|
},
|
|
{
|
|
level: 2,
|
|
slug: '#/cover?id=custom-background',
|
|
title: 'Custom background',
|
|
},
|
|
{
|
|
level: 2,
|
|
slug: '#/cover?id=test',
|
|
title:
|
|
'<img src="/docs/_media/favicon.ico" data-origin="/_media/favicon.ico" alt="ico">Test',
|
|
},
|
|
]);
|
|
|
|
expect(result).toBe(
|
|
/* html */ '<ul class="app-sub-sidebar"><li><a class="section-link" href="#/cover?id=basic-usage" title="Basic usage"><span style="color:red">Basic usage</span></a></li><li><a class="section-link" href="#/cover?id=custom-background" title="Custom background">Custom background</a></li><li><a class="section-link" href="#/cover?id=test" title="Test"><img src="/docs/_media/favicon.ico" data-origin="/_media/favicon.ico" alt="ico">Test</a></li></ul>',
|
|
);
|
|
});
|
|
});
|
|
|
|
describe('core/render/slugify', () => {
|
|
test('slugify()', () => {
|
|
const result = slugify(
|
|
'Bla bla bla <svg aria-label="broken" class="broken" viewPort="0 0 1 1"><circle cx="0.5" cy="0.5"/></svg>',
|
|
);
|
|
const result2 = slugify(
|
|
'Another <span style="font-size: 1.2em" class="foo bar baz">broken <span class="aaa">example</span></span>',
|
|
);
|
|
expect(result).toBe('bla-bla-bla-');
|
|
expect(result2).toBe('another-broken-example');
|
|
});
|
|
});
|