diff --git a/eleventy.config.js b/eleventy.config.js index 5fb2b52..3fbaa5a 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,7 +1,7 @@ import { RenderPlugin } from "@11ty/eleventy"; import fetch from "@11ty/eleventy-fetch"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; -import syntaxHighlightPlugin from "@11ty/eleventy-plugin-syntaxhighlight"; +import syntaxHighlightTransform from "./src/_transforms/syntax-highlight.js"; // Import {$} from 'execa'; import newIssueUrl from "./src/_utils/new-issue-url.js"; @@ -42,8 +42,8 @@ export default function eleventy(eleventyConfig) { } }); + eleventyConfig.addTransform("syntaxHighlight", syntaxHighlightTransform); eleventyConfig.addPlugin(RenderPlugin); - eleventyConfig.addPlugin(syntaxHighlightPlugin); eleventyConfig.addPlugin(eleventyImageTransformPlugin, { extensions: "html", formats: ["webp", "jpeg"], @@ -87,7 +87,6 @@ export default function eleventy(eleventyConfig) { }); eleventyConfig.addPassthroughCopy({ - "node_modules/a11y-syntax-highlighting/dist/prism/a11y-dark.min.css": "assets/styles/a11y-dark.min.css", "node_modules/@zachleat/table-saw/table-saw.js": "assets/scripts/table-saw.js" }); diff --git a/package-lock.json b/package-lock.json index f71cfdf..0d6cd65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,12 @@ "@11ty/eleventy": "^3.0.0-alpha.17", "@11ty/eleventy-fetch": "^4.0.1", "@11ty/eleventy-img": "^4.0.2", - "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "@zachleat/table-saw": "^1.0.6", "a11y-syntax-highlighting": "^0.2.0", "execa": "^9.3.0", - "new-github-issue-url": "^1.0.0" + "linkedom": "^0.18.4", + "new-github-issue-url": "^1.0.0", + "shiki": "^1.11.0" }, "devDependencies": { "@commitlint/cli": "^19.3.0", @@ -210,19 +211,6 @@ "url": "https://opencollective.com/11ty" } }, - "node_modules/@11ty/eleventy-plugin-syntaxhighlight": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz", - "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==", - "license": "MIT", - "dependencies": { - "prismjs": "^1.29.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/11ty" - } - }, "node_modules/@11ty/eleventy-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz", @@ -1972,6 +1960,14 @@ "integrity": "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==", "license": "MIT" }, + "node_modules/@shikijs/core": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.11.0.tgz", + "integrity": "sha512-VbEhDAhT/2ozO0TPr5/ZQBO/NWLqtk4ZiBf6NplYpF38mKjNfMMied5fNEfIfYfN+cdKvhDB4VMcKvG/g9c3zg==", + "dependencies": { + "@types/hast": "^3.0.4" + } + }, "node_modules/@sindresorhus/merge-streams": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz", @@ -2048,6 +2044,14 @@ "@types/node": "*" } }, + "node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", @@ -2065,6 +2069,11 @@ "undici-types": "~5.26.4" } }, + "node_modules/@types/unist": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", + "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==" + }, "node_modules/@vercel/nft": { "version": "0.26.5", "resolved": "https://registry.npmjs.org/@vercel/nft/-/nft-0.26.5.tgz", @@ -2510,6 +2519,11 @@ "dev": true, "license": "MIT" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3220,6 +3234,61 @@ "node": ">=12 || >=16" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-select/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/css-select/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, "node_modules/css-tree": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", @@ -3234,6 +3303,17 @@ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" } }, + "node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3247,6 +3327,11 @@ "node": ">=4" } }, + "node_modules/cssom": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz", + "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==" + }, "node_modules/currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -5184,6 +5269,81 @@ "dev": true, "license": "MIT" }, + "node_modules/linkedom": { + "version": "0.18.4", + "resolved": "https://registry.npmjs.org/linkedom/-/linkedom-0.18.4.tgz", + "integrity": "sha512-JhLErxMIEOKByMi3fURXgI1fYOzR87L1Cn0+MI9GlMckFrqFZpV1SUGox1jcKtsKN3y6JgclcQf0FzZT//BuGw==", + "dependencies": { + "css-select": "^5.1.0", + "cssom": "^0.5.0", + "html-escaper": "^3.0.3", + "htmlparser2": "^9.1.0", + "uhyphen": "^0.2.0" + } + }, + "node_modules/linkedom/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/linkedom/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/linkedom/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/linkedom/node_modules/html-escaper": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", + "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==" + }, + "node_modules/linkedom/node_modules/htmlparser2": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", + "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.1.0", + "entities": "^4.5.0" + } + }, "node_modules/linkify-it": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", @@ -6313,6 +6473,17 @@ "set-blocking": "^2.0.0" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/nunjucks": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.4.tgz", @@ -6879,15 +7050,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/prismjs": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", - "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -7456,6 +7618,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/shiki": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.11.0.tgz", + "integrity": "sha512-NqH/O1zRHvnuk/WfSL6b7+DtI7/kkMMSQGlZhm9DyzSU+SoIHhaw/fBZMr+zp9R8KjdIzkk3JKSC6hORuGDyng==", + "dependencies": { + "@shikijs/core": "1.11.0", + "@types/hast": "^3.0.4" + } + }, "node_modules/signal-exit": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", @@ -8360,6 +8531,11 @@ "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", "license": "MIT" }, + "node_modules/uhyphen": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/uhyphen/-/uhyphen-0.2.0.tgz", + "integrity": "sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==" + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", diff --git a/package.json b/package.json index bf78354..007cc93 100644 --- a/package.json +++ b/package.json @@ -32,11 +32,12 @@ "@11ty/eleventy": "^3.0.0-alpha.17", "@11ty/eleventy-fetch": "^4.0.1", "@11ty/eleventy-img": "^4.0.2", - "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "@zachleat/table-saw": "^1.0.6", "a11y-syntax-highlighting": "^0.2.0", "execa": "^9.3.0", - "new-github-issue-url": "^1.0.0" + "linkedom": "^0.18.4", + "new-github-issue-url": "^1.0.0", + "shiki": "^1.11.0" }, "devDependencies": { "@commitlint/cli": "^19.3.0", diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk index 4e6b1a4..d0801d7 100644 --- a/src/_layouts/base.njk +++ b/src/_layouts/base.njk @@ -4,7 +4,6 @@ {% block title %}Accessibility Audit for {{ title }}{% endblock %} - diff --git a/src/_transforms/syntax-highlight.js b/src/_transforms/syntax-highlight.js new file mode 100644 index 0000000..3579fc6 --- /dev/null +++ b/src/_transforms/syntax-highlight.js @@ -0,0 +1,25 @@ +import { parseHTML } from "linkedom"; +import { codeToHtml } from "shiki"; + +export default async function (content) { + if (this.page.outputPath && this.page.outputPath.includes(".html")) { + const { document } = parseHTML(content); + const codeBlocks = [...document.querySelectorAll("pre code")]; + + if (codeBlocks.length > 0) { + for (const codeBlock of codeBlocks) { + const lang = codeBlock.className.replace("language-", ""); + const html = await codeToHtml(codeBlock.textContent, { + lang, + theme: "night-owl" + }); + + codeBlock.parentNode.outerHTML = html; + } + } + + return "\r\n" + document.documentElement.outerHTML; + } + + return content; +} diff --git a/src/assets/styles/report.css b/src/assets/styles/report.css index c4f1671..e3ad772 100644 --- a/src/assets/styles/report.css +++ b/src/assets/styles/report.css @@ -156,13 +156,17 @@ li code { } pre, -code, -code[class*='language-'], -pre[class*='language-'] { +code { font-family: 'Noto Sans Mono', monospace; font-size: 0.875rem; } +pre.shiki { + border-radius: 0.25rem; + padding-block: 0.5em; + padding-inline: 1em; +} + [aria-expanded] { appearance: none; background: transparent;