Handle Docsify updates + miscellaneous fixes

.eslintrc.js → .eslintrc.cjs

@@ -12,7 +12,7 @@ module.exports = {
         'dist'
     ],
     'parserOptions': {
-        'ecmaVersion': 6,
+        'ecmaVersion': 2022,
         'sourceType' : 'module'
     },
     'plugins': [

docs/introduction.md

@@ -1,7 +1,7 @@
 # Introduction
 
 [![NPM](https://img.shields.io/npm/v/docsify-themeable.svg?style=flat-square)](https://www.npmjs.com/package/docsify-themeable)
-[![GitHub Workflow Status (master)](https://img.shields.io/github/workflow/status/jhildenbiddle/docsify-themeable/Build/master?label=checks&style=flat-square)](https://github.com/jhildenbiddle/docsify-themeable/actions?query=branch%3Amaster+)
+[![GitHub Workflow Status (master)](https://img.shields.io/github/actions/workflow/status/jhildenbiddle/docsify-themeable/build.yml?label=checks&style=flat-square&branch=master)](https://github.com/jhildenbiddle/docsify-themeable/actions?query=branch%3Amaster+)
 [![Codacy grade](https://img.shields.io/codacy/grade/39220ba530f24dfc9443b47f2efea5c9?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/docsify-themeable/dashboard)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/jhildenbiddle/docsify-themeable/blob/master/LICENSE)
 [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/docsify-themeable/badge)](https://www.jsdelivr.com/package/npm/docsify-themeable)

package.json

@@ -12,6 +12,7 @@
   "bugs": {
     "url": "https://github.com/jhildenbiddle/docsify-themeable/issues"
   },
+  "type": "module",
   "keywords": [
     "css",
     "custom",
@@ -39,39 +40,39 @@
     "build": "npm-run-all build:scss --parallel build:js build:pcss",
     "build:js": "rollup -c",
     "build:pcss": "postcss build/css/**/*.css --dir dist/css --map",
-    "build:scss": "sass src/scss/themes:build/css --source-map --style=compressed --load-path=node_modules",
-    "clean": "rimraf build/* dist/* docs/css docs/js",
-    "lint": "eslint . && markdownlint . --ignore node_modules",
-    "serve": "node server.js",
+    "build:scss": "sass src/scss:build/css --source-map --style=compressed --load-path=node_modules",
+    "clean": "rimraf --glob build/* dist/* docs/css docs/js",
+    "lint": "eslint . && markdownlint *.md docs/*.md",
+    "serve": "node server.cjs",
     "start": "run-p watch serve",
     "test": "npm run lint",
     "watch": "run-p 'build:* -- -w'",
     "prewatch": "npm run build:scss",
     "version": "npm run prepare && npm test"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "autoprefixer": "^10.4.7",
-    "browser-sync": "^2.26.14",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-eslint": "^9.0.5",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "autoprefixer": "^10.4.16",
+    "browser-sync": "^2.29.3",
     "compression": "^1.7.4",
-    "css-vars-ponyfill": "^2.4.4",
-    "eslint": "^8.20.0",
+    "css-vars-ponyfill": "^2.4.8",
+    "eslint": "^8.51.0",
     "eslint-plugin-html": "^7.1.0",
-    "include-media": "github:eduardoboucas/include-media#2.0-release",
-    "markdownlint-cli": "^0.32.1",
-    "mergician": "^1.0.3",
+    "include-media": "^2.0.0",
+    "markdownlint-cli": "^0.37.0",
+    "mergician": "^1.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^10.0.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.77.2",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-eslint": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.54.0",
+    "postcss-cli": "^10.1.0",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.1.3",
+    "sass": "^1.69.5",
     "sass-utilities": "^1.0.0"
   }
 }

postcss.config.js → postcss.config.cjs

@@ -1,7 +1,6 @@
-const postcss = require('postcss');
-
-const removeUnsetCustomProperties = postcss.plugin('postcss-remove-unset-custom-properties', (options = {}) => {
-    return root => {
+const removeUnsetCustomProperties = (options = {}) => ({
+    postcssPlugin: 'postcss-remove-unset-custom-properties',
+    Once (root, { result }) {
         root.walkDecls(decl => {
             const isCustomProp = decl.prop.startsWith('--');
             const isEmpty = decl.value.trim().length === 0;
@@ -10,9 +9,11 @@ const removeUnsetCustomProperties = postcss.plugin('postcss-remove-unset-custom-
                 decl.remove();
             }
         });
-    };
+    }
 });
 
+removeUnsetCustomProperties.postcss = true;
+
 module.exports = {
     plugins: [
         removeUnsetCustomProperties,

rollup.config.js

@@ -1,15 +1,19 @@
 // Dependencies
 // =============================================================================
-const path = require('path');
 
-import babel           from 'rollup-plugin-babel';
+import { babel }       from '@rollup/plugin-babel';
 import commonjs        from '@rollup/plugin-commonjs';
-import { eslint }      from 'rollup-plugin-eslint';
+import eslint          from '@rollup/plugin-eslint';
+import fs              from 'node:fs';
 import json            from '@rollup/plugin-json';
 import mergician       from 'mergician';
-import pkg             from './package.json';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { terser }      from 'rollup-plugin-terser';
+import path            from 'node:path';
+import terser          from '@rollup/plugin-terser';
+
+const pkg = JSON.parse(
+    fs.readFileSync(new URL('./package.json', import.meta.url), 'utf8') // prettier-ignore
+);
 
 
 // Settings
@@ -19,8 +23,8 @@ const currentYear = (new Date()).getFullYear();
 const releaseYear = 2018;
 
 // Output
-const entryFile  = path.resolve(__dirname, 'src', 'js', 'index.js');
-const outputFile = path.resolve(__dirname, 'dist', 'js', `${pkg.name}.js`);
+const entryFile  = path.resolve('src', 'js', 'index.js');
+const outputFile = path.resolve('dist', 'js', `${pkg.name}.js`);
 
 // Banner
 const bannerData = [
@@ -39,6 +43,7 @@ const pluginSettings = {
         throwOnError  : true
     },
     babel: {
+        babelHelpers: 'bundled',
         exclude: ['node_modules/**'],
         presets: [
             ['@babel/env', {

src/js/index.js

@@ -15,11 +15,15 @@ import { version as pkgVersion }  from '../../package.json';
 
 // Functions
 // =============================================================================
-function ifLessThanVersion(version, pluginFn) {
-    const docsifyVersion  = Number('0.' + ((window.Docsify || {}).version || '0').replace(/\./g, ''));
-    const lessThanVersion = Number('0.' + version.replace(/\./g, ''));
+function isLessThanSemVer(version) {
+    const docsifyVersion = ((window.Docsify || {}).version || '0.0.0').split('.');
+    const lessThanVersion = version.split('.');
 
-    return docsifyVersion < lessThanVersion ? pluginFn : null;
+    while (lessThanVersion.length < docsifyVersion.length) {
+        lessThanVersion.push('0');
+    }
+
+    return lessThanVersion.some((value, index) => value < docsifyVersion[index]);
 }
 
 
@@ -62,13 +66,21 @@ if (window) {
         // Append
         [
             pluginFixSearchClearButton,
-            ifLessThanVersion('4.8.0', pluginFixSearchResults),
-            ifLessThanVersion('4.8.0', pluginFixZoomImage)
+            isLessThanSemVer('4.8.0', pluginFixSearchResults),
+            isLessThanSemVer('4.8.0', pluginFixZoomImage)
         ]
     ).filter(plugin => plugin !== null);
 
     // Add search options
-    window.$docsify.search = window.$docsify.search || {};
+    if (typeof window.$docsify.search !== 'object') {
+        window.$docsify.search = {};
+    }
+    else if (Array.isArray(window.$docsify.search)) {
+        window.$docsify.search = {
+            paths: window.$docsify.search
+        };
+    }
+
     window.$docsify.search.hideOtherSidebarContent = true;
 
     // Add themeable options

src/scss/app/_app.scss

@@ -1,6 +1,37 @@
 @use "__helpers" as *;
 @use "sass:map";
 
+// Skip Link
+// =============================================================================
+#skip-to-content {
+    appearance: none;
+    display: block;
+    position: fixed;
+    z-index: 2147483647;
+    top: 0;
+    left: 50%;
+    padding: 0.5rem 1.5rem;
+    border: 0;
+    border-radius: 100vw;
+    background-color: var(--theme-color);
+    color: var(--mono-tint3);
+    opacity: 0;
+    font-size: inherit;
+    text-decoration: none;
+    transform: translate(-50%, -100%);
+    transition-property: opacity, transform;
+    transition-duration: 0s, 0.2s;
+    transition-delay: 0.2s, 0s;
+
+    &:focus {
+        opacity: 1;
+        transform: translate(-50%, 0.75rem);
+        transition-duration: 0s, 0.2s;
+        transition-delay: 0s, 0s;
+    }
+}
+
+
 // Github Icon
 // =============================================================================
 .github-corner {

src/scss/app/_base.scss

@@ -133,6 +133,10 @@ body:not([data-platform^="Mac"]) {
     }
 }
 
+[tabindex="-1"]:focus {
+    outline: none !important;
+}
+
 ::selection {
     background: var(--selection-color);
 }

src/scss/app/_code.scss

@@ -4,6 +4,7 @@
 .markdown-section {
     code[class*="lang-"],
     pre[data-lang] {
+        border-radius: var(--code-block-border-radius);
         font-family: var(--code-font-family);
         font-size: var(--code-font-size);
         font-weight: var(--code-font-weight);
@@ -20,10 +21,8 @@
 
     pre[data-lang] {
         position: relative;
-        overflow: hidden;
         margin: var(--code-block-margin);
         padding: 0;
-        border-radius: var(--code-block-border-radius);
 
         &::after {
             content: attr(data-lang);

src/scss/app/_cover.scss

@@ -125,7 +125,7 @@
         > p:last-child {
             $button-margin: 0.25em;
 
-            margin: 1.5em -$button-margin 0 -$button-margin;
+            margin: 1.5em (-$button-margin) 0 (-$button-margin);
 
             a {
                 display: block;

src/scss/app/_plugin-search.scss

@@ -150,7 +150,6 @@ body {
         }
 
         .input-wrap {
-            align-items: stretch;
             margin: var(--search-input-margin);
             background-color: var(--search-input-background-color);
             border-width: var(--search-input-border-width, 0);
@@ -210,6 +209,16 @@ body {
             }
         }
 
+        kbd {
+            padding: 0.3em 0.525em;
+            border: 1px solid var(--mono-tint2);
+            border-radius: var(--border-radius-m);
+            font-size: var(--font-size-s);
+            line-height: 1;
+            color: var(--mono-base);
+            background-color: var(--mono-tint3);
+        }
+
         .clear-button {
             margin: 0;
             padding: 0 10px;
@@ -219,6 +228,8 @@ body {
             cursor: pointer;
 
             svg {
+                display: block;
+
                 circle {
                     fill: var(--search-clear-icon-color1, #808080);
                 }