Merge pull request #88 from jhildenbiddle/dev

Update to handle unreleased Docsify accessibility features + miscellaneous

.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);
  }