diff --git a/.github/actions/setup-firefox/action.yml b/.github/actions/setup-firefox/action.yml index b7b2aca2..6241d119 100644 --- a/.github/actions/setup-firefox/action.yml +++ b/.github/actions/setup-firefox/action.yml @@ -1,7 +1,7 @@ # Shamelessly copied from https://github.com/SeleniumHQ/selenium/blob/5d108f9a679634af0bbc387e7e3811bc1565912b/.github/actions/setup-firefox/action.yml name: 'Setup Firefox and geckodriver' runs: - using: "composite" + using: 'composite' steps: - run: | GECKODRIVER_URL=`curl -Ls -o /dev/null -w %{url_effective} https://github.com/mozilla/geckodriver/releases/latest` diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 3591cd0c..bc766208 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -15,7 +15,7 @@ jobs: run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)" - uses: actions/setup-node@v2-beta with: - node-version: "${{ steps.nvm.outputs.NVMRC }}" + node-version: '${{ steps.nvm.outputs.NVMRC }}' - run: npm install - run: npm run build - uses: actions/setup-python@v2 diff --git a/docs/examples/code-blocks.md b/docs/examples/code-blocks.md index 3c1c4a02..9c716ddd 100644 --- a/docs/examples/code-blocks.md +++ b/docs/examples/code-blocks.md @@ -66,43 +66,43 @@ a { ## Javascript ```js -function isDivisible (dividend, divisior) { - const rest = dividend % divisior - if (rest === 0) { - return true - } else { - return false - } +function isDivisible(dividend, divisior) { + const rest = dividend % divisior; + if (rest === 0) { + return true; + } else { + return false; + } } -exports.isDivisible = isDivisible - -function numToFizzBuzz (num) { - let response = '' - if (isDivisible(num, 3)) { - response += 'Fizz' - } - if (isDivisible(num, 5)) { - response += 'Buzz' - } - if (!response) { - response = num.toString() - } - return response +exports.isDivisible = isDivisible; + +function numToFizzBuzz(num) { + let response = ''; + if (isDivisible(num, 3)) { + response += 'Fizz'; + } + if (isDivisible(num, 5)) { + response += 'Buzz'; + } + if (!response) { + response = num.toString(); + } + return response; } -exports.numToFizzBuzz = numToFizzBuzz +exports.numToFizzBuzz = numToFizzBuzz; -function fizzbuzz (start = 1, end = 100) { - const fizzbuzzArray = [] - for (let i = start; i <= end; i++) { - const numString = numToFizzBuzz(i) - fizzbuzzArray.push(numString) - } - return fizzbuzzArray +function fizzbuzz(start = 1, end = 100) { + const fizzbuzzArray = []; + for (let i = start; i <= end; i++) { + const numString = numToFizzBuzz(i); + fizzbuzzArray.push(numString); + } + return fizzbuzzArray; } -exports.fizzbuzz = fizzbuzz +exports.fizzbuzz = fizzbuzz; ``` ## Console diff --git a/docs/examples/headings.md b/docs/examples/headings.md index 055c2200..4aec665b 100644 --- a/docs/examples/headings.md +++ b/docs/examples/headings.md @@ -10,7 +10,6 @@ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. - ## Heading with `code` in it I guess this will come up, so we should style for it. diff --git a/docs/examples/images.md b/docs/examples/images.md index 121484cd..a386f3e6 100644 --- a/docs/examples/images.md +++ b/docs/examples/images.md @@ -2,12 +2,11 @@ Images are hard to keep up-to-date as documentation evolves, but can be worthwhile nonetheless. Here are guidelines when adding images: - ## Plain Images -- All images should have meaningful [alt text](https://axesslab.com/alt-texts/) unless they are decorative. -- Images are served as-is – pick the correct format, and losslessly compress all images. -- Use absolute paths for image files so they are more portable. +- All images should have meaningful [alt text](https://axesslab.com/alt-texts/) unless they are decorative. +- Images are served as-is – pick the correct format, and losslessly compress all images. +- Use absolute paths for image files so they are more portable. ![A wagtail standing on the ground](/img/wagtail.jpg) diff --git a/docs/examples/inline-styles.md b/docs/examples/inline-styles.md index fbde24b2..a96852eb 100644 --- a/docs/examples/inline-styles.md +++ b/docs/examples/inline-styles.md @@ -2,4 +2,4 @@ Use **bold** and _italic_ sparingly. -Use inline `code` when relevant. \ No newline at end of file +Use inline `code` when relevant. diff --git a/docs/examples/lists.md b/docs/examples/lists.md index 21b52258..19b2b616 100644 --- a/docs/examples/lists.md +++ b/docs/examples/lists.md @@ -10,14 +10,14 @@ 4. Number list item with some longer line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 5. You can even do paragraphs in the list. - You need make sure they are indented in the beginning though. + You need make sure they are indented in the beginning though. ## Unordered Lists -- Bullet 1 -- Bullet 2 - - Nested bullet 1 - - Nested bullet 2 - - After three levels it should be enough - - Don't go deeper -- Bullet 3 \ No newline at end of file +- Bullet 1 +- Bullet 2 + - Nested bullet 1 + - Nested bullet 2 + - After three levels it should be enough + - Don't go deeper +- Bullet 3 diff --git a/docs/examples/nesting/child.md b/docs/examples/nesting/child.md index c8de656b..09f55ada 100644 --- a/docs/examples/nesting/child.md +++ b/docs/examples/nesting/child.md @@ -1,3 +1,3 @@ # Child -This page is included in the page structure by linking to it. +This page is included in the page structure by linking to it. diff --git a/docs/examples/paragraphs.md b/docs/examples/paragraphs.md index 81f4a211..0fda239f 100644 --- a/docs/examples/paragraphs.md +++ b/docs/examples/paragraphs.md @@ -4,4 +4,4 @@ Paragraphs in Markdown are separated by a blank line. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. -Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. \ No newline at end of file +Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. diff --git a/docs/examples/progressive-disclosure.md b/docs/examples/progressive-disclosure.md index 6c2749d5..302ab8df 100644 --- a/docs/examples/progressive-disclosure.md +++ b/docs/examples/progressive-disclosure.md @@ -1,6 +1,6 @@ # Progressive Disclosure -We can add supplementary information in documentation with the HTML `
` element. +We can add supplementary information in documentation with the HTML `
` element. This relies on HTML syntax, which can be hard to author consistently, so keep this type of formatting to a minimum.
diff --git a/docs/examples/quotes.md b/docs/examples/quotes.md index 3607f1cb..c9bccf77 100644 --- a/docs/examples/quotes.md +++ b/docs/examples/quotes.md @@ -7,7 +7,6 @@ Quotes, also known as blockquotes or pull-quotes, should stand out: > when an unknown printer took a galley of type and scrambled it to make a type > specimen book. - RST has `epigraph`, `highlights`, and `pull-quote` which all create a quote. Adding the double dash line at the bottom properly attributes an author. diff --git a/js/blocking.js b/js/blocking.js index fa2b72f3..cc5adc0b 100644 --- a/js/blocking.js +++ b/js/blocking.js @@ -13,9 +13,9 @@ * @param {boolean?} options.isInitial - if true the current value will be resolved & set NOT toggled */ function updateThemeMode(event, { isInitial = false } = {}) { - const DARK = "dark"; - const LIGHT = "light"; - const STORAGE_KEY = "wagtail-theme"; + const DARK = 'dark'; + const LIGHT = 'light'; + const STORAGE_KEY = 'wagtail-theme'; let currentMode; let applyMode; @@ -26,7 +26,7 @@ function updateThemeMode(event, { isInitial = false } = {}) { savedThemeMode = localStorage.getItem(STORAGE_KEY); } catch (error) { // eslint-disable-next-line no-console - console.warn("Unable to read theme from localStorage", error); + console.warn('Unable to read theme from localStorage', error); } // find the current mode from existing storage or browser preference @@ -36,7 +36,7 @@ function updateThemeMode(event, { isInitial = false } = {}) { } else { // fall back on browser media for first toggle const prefersDarkMode = window.matchMedia( - "(prefers-color-scheme:dark)" + '(prefers-color-scheme:dark)', ).matches; currentMode = prefersDarkMode ? DARK : LIGHT; @@ -50,7 +50,7 @@ function updateThemeMode(event, { isInitial = false } = {}) { } // set applied mode to the DOM - document.body.classList.toggle("theme-dark", applyMode === DARK); + document.body.classList.toggle('theme-dark', applyMode === DARK); // only store value if already stored OR was triggered by an actual click if (savedThemeMode || event) { @@ -58,7 +58,7 @@ function updateThemeMode(event, { isInitial = false } = {}) { localStorage.setItem(STORAGE_KEY, applyMode); } catch (error) { // eslint-disable-next-line no-console - console.warn("Unable to store theme in localStorage", error); + console.warn('Unable to store theme in localStorage', error); } } } @@ -73,6 +73,6 @@ updateThemeMode(null, { isInitial: true }); /** * Set up event listener for other manual toggling. */ -document.addEventListener("theme:toggle-theme-mode", updateThemeMode, { +document.addEventListener('theme:toggle-theme-mode', updateThemeMode, { passive: true, }); diff --git a/js/theme.js b/js/theme.js index 9b5be0ac..67f863c1 100644 --- a/js/theme.js +++ b/js/theme.js @@ -1,10 +1,10 @@ // T3Docs -import "../sass/theme.scss"; -import autocomplete from "autocompleter"; -import "bootstrap"; +import '../sass/theme.scss'; +import autocomplete from 'autocompleter'; +import 'bootstrap'; // Ensure our own namespace -if (typeof window.T3Docs === "undefined") { +if (typeof window.T3Docs === 'undefined') { window.T3Docs = {}; } @@ -16,26 +16,26 @@ function makeMenuExpandable() { const expandButton = event.currentTarget; const element = expandButton.parentElement; const siblings = - element.parentElement.parentElement.querySelectorAll("li.current"); + element.parentElement.parentElement.querySelectorAll('li.current'); siblings.forEach((sibling) => { if (sibling !== element) { - sibling.classList.remove("current"); + sibling.classList.remove('current'); } }); - element.classList.toggle("current"); + element.classList.toggle('current'); } - const toc = document.querySelector(".toc"); - const links = Array.from(toc.getElementsByTagName("a")); - const template = document.querySelector("[data-toggle-item-template]"); + const toc = document.querySelector('.toc'); + const links = Array.from(toc.getElementsByTagName('a')); + const template = document.querySelector('[data-toggle-item-template]'); const templateChild = template.content.firstElementChild; links.forEach((link) => { if (link.nextSibling) { const expandButton = templateChild.cloneNode(true); - expandButton.addEventListener("click", toggleCurrent, true); + expandButton.addEventListener('click', toggleCurrent, true); link.before(expandButton); } }); @@ -45,10 +45,10 @@ makeMenuExpandable(); // Wrap tables to make them responsive function makeTablesResponsive() { - var tables = document.querySelectorAll(".rst-content table.docutils"); + var tables = document.querySelectorAll('.rst-content table.docutils'); for (var i = 0; i < tables.length; i++) { - const wrapper = document.createElement("div"); - wrapper.classList.add("table-responsive"); + const wrapper = document.createElement('div'); + wrapper.classList.add('table-responsive'); tables[i].parentNode.insertBefore(wrapper, tables[i]); wrapper.appendChild(tables[i]); } @@ -56,30 +56,30 @@ function makeTablesResponsive() { makeTablesResponsive(); -document.addEventListener("DOMContentLoaded", () => { +document.addEventListener('DOMContentLoaded', () => { // Wire up light/dark mode button. document - .getElementById("wagtail-theme") - .addEventListener("click", (event) => { - document.dispatchEvent(new CustomEvent("theme:toggle-theme-mode", event)); + .getElementById('wagtail-theme') + .addEventListener('click', (event) => { + document.dispatchEvent(new CustomEvent('theme:toggle-theme-mode', event)); }); // Search. - var searchform = document.getElementById("search-form"); - var searchinput = document.getElementById("searchinput"); + var searchform = document.getElementById('search-form'); + var searchinput = document.getElementById('searchinput'); if (searchform && searchinput) { autocomplete({ input: searchinput, fetch: (text, update) => { // Populate autocomplete suggestions from the Sphinx `Search` object. - if (typeof window.T3Docs.autocomplete === "undefined") { + if (typeof window.T3Docs.autocomplete === 'undefined') { window.T3Docs.autocomplete = []; // Add page titles first. Object.keys(Search._index.titles).forEach((item) => { window.T3Docs.autocomplete.push({ label: Search._index.titles[item], docname: Search._index.docnames[item], - group: "Pages", + group: 'Pages', }); }); // Add autodoc/code terms second. @@ -87,28 +87,28 @@ document.addEventListener("DOMContentLoaded", () => { Object.keys(Search._index.objects[item]).forEach((subitem) => { window.T3Docs.autocomplete.push({ label: `${item}.${subitem}`, - group: "Code reference", + group: 'Code reference', }); }); }); } var suggestions = window.T3Docs.autocomplete.filter((entry) => - entry.label.toLowerCase().includes(text.toLowerCase()) + entry.label.toLowerCase().includes(text.toLowerCase()), ); update(suggestions); }, minLength: 3, render: (item) => { - var div = document.createElement("div"); + var div = document.createElement('div'); div.textContent = item.label; return div; }, customize: (input, inputRect, container) => { // Do not force same width as input box - allow it to go wider. // eslint-disable-next-line no-param-reassign - container.style.minWidth = inputRect.width + "px"; + container.style.minWidth = inputRect.width + 'px'; // eslint-disable-next-line no-param-reassign - container.style.width = "auto"; + container.style.width = 'auto'; }, onSelect: (item) => { // If they selected a page, disable search form and go straight to it. @@ -119,12 +119,12 @@ document.addEventListener("DOMContentLoaded", () => { // Figure out the URL from the docname. // Mostly taken from Sphinx's searchtools.js var linkUrl; - if (DOCUMENTATION_OPTIONS.BUILDER === "dirhtml") { - var dirname = item.docname + "/"; + if (DOCUMENTATION_OPTIONS.BUILDER === 'dirhtml') { + var dirname = item.docname + '/'; if (dirname.match(/\/index\/$/)) { dirname = dirname.substring(0, dirname.length - 6); - } else if (dirname === "index/") { - dirname = ""; + } else if (dirname === 'index/') { + dirname = ''; } linkUrl = DOCUMENTATION_OPTIONS.URL_ROOT + dirname; } else { diff --git a/package-lock.json b/package-lock.json index 03b3d87b..9ef20a45 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "css-loader": "^6.8.1", "file-loader": "^6.2.0", "mini-css-extract-plugin": "^2.7.6", + "prettier": "3.0.0", "sass": "^1.63.6", "sass-loader": "^13.3.2", "stylelint": "^14.8.2", @@ -4872,6 +4873,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -9982,6 +9998,12 @@ "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, + "prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", + "dev": true + }, "prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", diff --git a/package.json b/package.json index 571ae125..d8235df5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "css-loader": "^6.8.1", "file-loader": "^6.2.0", "mini-css-extract-plugin": "^2.7.6", + "prettier": "3.0.0", "sass": "^1.63.6", "sass-loader": "^13.3.2", "stylelint": "^14.8.2", @@ -28,11 +29,17 @@ "watch": "webpack --config=webpack.config.js --mode=development --watch", "frontend": "webpack --config=webpack.config.js --mode=development", "build": "webpack --config=webpack.config.js --mode=production", + "format": "prettier --write '**/*.{js,md,css,scss,yaml,yml,json}'", + "lint:format": "prettier --check '**/*.{js,md,css,scss,yaml,yml,json}'", "lint:css": "stylelint **/*.scss", "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives .", "lint": "npm run lint:js && npm run lint:css" }, "engines": { "node": ">=18" + }, + "prettier": { + "singleQuote": true, + "quoteProps": "consistent" } } diff --git a/sass/_component_admotion.scss b/sass/_component_admotion.scss index a4f51d03..0f59c0b2 100644 --- a/sass/_component_admotion.scss +++ b/sass/_component_admotion.scss @@ -7,7 +7,7 @@ // - Horizontal Buttons // ---- .admonition { - background-color: theme-color-level("info", -11); + background-color: theme-color-level('info', -11); margin: $spacer 0; padding: $spacer; box-shadow: $box-shadow-sm; @@ -20,22 +20,22 @@ &.hint, &.note { - background-color: theme-color-level("info", -11); + background-color: theme-color-level('info', -11); .admonition-title { - color: color-yiq(theme-color("info")); - background-color: theme-color("info"); + color: color-yiq(theme-color('info')); + background-color: theme-color('info'); } } &.caution, &.warning, &.attention { - background-color: theme-color-level("warning", -11); + background-color: theme-color-level('warning', -11); .admonition-title { - color: color-yiq(theme-color("warning")); - background-color: theme-color("warning"); + color: color-yiq(theme-color('warning')); + background-color: theme-color('warning'); &:before { content: fa-content($fa-var-exclamation-triangle); @@ -45,11 +45,11 @@ &.danger, &.error { - background-color: theme-color-level("danger", -11); + background-color: theme-color-level('danger', -11); .admonition-title { - color: color-yiq(theme-color("danger")); - background-color: theme-color("danger"); + color: color-yiq(theme-color('danger')); + background-color: theme-color('danger'); &:before { content: fa-content($fa-var-exclamation-triangle); @@ -60,11 +60,11 @@ &.important, &.seealso, &.tip { - background-color: theme-color-level("success", -11); + background-color: theme-color-level('success', -11); .admonition-title { - color: color-yiq(theme-color("success")); - background-color: theme-color("success"); + color: color-yiq(theme-color('success')); + background-color: theme-color('success'); } } } @@ -74,8 +74,8 @@ padding: ($spacer / 2) $spacer; margin: -$spacer; margin-bottom: $spacer; - color: color-yiq(theme-color("info")); - background-color: theme-color("info"); + color: color-yiq(theme-color('info')); + background-color: theme-color('info'); font-weight: $font-weight-bold; &:before { diff --git a/sass/_component_bignums.scss b/sass/_component_bignums.scss index 0ddf2cd2..7055e232 100644 --- a/sass/_component_bignums.scss +++ b/sass/_component_bignums.scss @@ -24,7 +24,7 @@ $bignum-xxl: 1.5rem !default; padding: $spacer; padding-left: (($bignum-normal * 2.5) + $spacer); padding-top: $spacer + ($bignum-normal * 0.25); - background-color: theme-color-level("dark", -11); + background-color: theme-color-level('dark', -11); min-height: (($bignum-normal * 2) + $spacer * 2); border-radius: $border-radius; @@ -47,8 +47,8 @@ $bignum-xxl: 1.5rem !default; width: 2em; line-height: 2em; text-align: center; - background-color: theme-color("dark"); - color: color-yiq(theme-color("dark")); + background-color: theme-color('dark'); + color: color-yiq(theme-color('dark')); border-radius: 50%; content: counter(li-counter, decimal); counter-increment: li-counter; @@ -66,11 +66,11 @@ $bignum-xxl: 1.5rem !default; @extend .bignums; > li { - background-color: theme-color-level("info", -11); + background-color: theme-color-level('info', -11); &:before { - background-color: theme-color("info"); - color: color-yiq(theme-color("info")); + background-color: theme-color('info'); + color: color-yiq(theme-color('info')); } } } @@ -81,11 +81,11 @@ $bignum-xxl: 1.5rem !default; @extend .bignums; > li { - background-color: theme-color-level("warning", -11); + background-color: theme-color-level('warning', -11); &:before { - background-color: theme-color("warning"); - color: color-yiq(theme-color("warning")); + background-color: theme-color('warning'); + color: color-yiq(theme-color('warning')); } } } @@ -96,11 +96,11 @@ $bignum-xxl: 1.5rem !default; @extend .bignums; > li { - background-color: theme-color-level("success", -11); + background-color: theme-color-level('success', -11); &:before { - background-color: theme-color("success"); - color: color-yiq(theme-color("success")); + background-color: theme-color('success'); + color: color-yiq(theme-color('success')); } } } @@ -110,11 +110,11 @@ $bignum-xxl: 1.5rem !default; @extend .bignums; > li { - background-color: theme-color-level("danger", -11); + background-color: theme-color-level('danger', -11); &:before { - background-color: theme-color("danger"); - color: color-yiq(theme-color("danger")); + background-color: theme-color('danger'); + color: color-yiq(theme-color('danger')); } } } diff --git a/sass/_component_math.scss b/sass/_component_math.scss index c43af7cb..6b3724bb 100644 --- a/sass/_component_math.scss +++ b/sass/_component_math.scss @@ -1,3 +1,3 @@ -span[id*="MathJax-Span"] { +span[id*='MathJax-Span'] { color: $body-color; } diff --git a/sass/_component_pygments.scss b/sass/_component_pygments.scss index b96da070..9696b10e 100644 --- a/sass/_component_pygments.scss +++ b/sass/_component_pygments.scss @@ -1,4 +1,4 @@ -@use "sass:color"; +@use 'sass:color'; pre { padding: $size-5; diff --git a/sass/_component_search.scss b/sass/_component_search.scss index f3c45189..24073024 100644 --- a/sass/_component_search.scss +++ b/sass/_component_search.scss @@ -1,4 +1,4 @@ -@use "sass:map"; +@use 'sass:map'; /** * Sidebar with search box @@ -10,7 +10,7 @@ border-right-style: hidden; // hide by default on small devices /* stylelint-disable-next-line scss/media-feature-value-dollar-variable */ - @media screen and (min-width: map.get($grid-breakpoints, "lg")) { + @media screen and (min-width: map.get($grid-breakpoints, 'lg')) { max-width: $size-13; border-right-style: solid; } @@ -55,7 +55,7 @@ .selected:after { border-radius: $border-radius; border: 1px solid color-yiq($search); - content: "Enter ↵"; + content: 'Enter ↵'; float: inline-end; font-size: 0.75em; line-height: 1; diff --git a/sass/_component_sphinx_tabs.scss b/sass/_component_sphinx_tabs.scss index 9dc47446..52196ccc 100644 --- a/sass/_component_sphinx_tabs.scss +++ b/sass/_component_sphinx_tabs.scss @@ -39,7 +39,7 @@ padding: 0.4em !important; } - .code-tab.tab div[class^="highlight"] { + .code-tab.tab div[class^='highlight'] { border-color: transparent; } diff --git a/sass/_component_toc.scss b/sass/_component_toc.scss index 520e5aa5..3702d227 100644 --- a/sass/_component_toc.scss +++ b/sass/_component_toc.scss @@ -8,7 +8,7 @@ li { margin: $size-1 0; - &[class^="toctree-"] { + &[class^='toctree-'] { // ensure the toctree-expand button can be positioned position: relative; } @@ -31,13 +31,13 @@ transform: translate(0, -50%); height: 1em; width: 1em; - background-color: theme-color("light"); + background-color: theme-color('light'); border-radius: $border-radius; &:after, &:before { position: absolute; - content: ""; + content: ''; top: 50%; left: 50%; } @@ -58,11 +58,11 @@ } .current > a { - color: theme-color("primary"); + color: theme-color('primary'); > .toctree-expand { - background-color: theme-color("primary"); - color: color-yiq(theme-color("primary")); + background-color: theme-color('primary'); + color: color-yiq(theme-color('primary')); &:before { display: none; diff --git a/sass/_component_version.scss b/sass/_component_version.scss index d59be208..364d9cec 100644 --- a/sass/_component_version.scss +++ b/sass/_component_version.scss @@ -25,11 +25,11 @@ } .versionadded { - background-color: theme-color-level("success", -11); + background-color: theme-color-level('success', -11); .versionmodified { - color: color-yiq(theme-color("success")); - background-color: theme-color("success"); + color: color-yiq(theme-color('success')); + background-color: theme-color('success'); &:before { content: fa-content($fa-var-info-circle); @@ -38,11 +38,11 @@ } .versionchanged { - background-color: theme-color-level("warning", -11); + background-color: theme-color-level('warning', -11); .versionmodified { - color: color-yiq(theme-color("warning")); - background-color: theme-color("warning"); + color: color-yiq(theme-color('warning')); + background-color: theme-color('warning'); &:before { content: fa-content($fa-var-exclamation-triangle); @@ -51,11 +51,11 @@ } .deprecated { - background-color: theme-color-level("danger", -11); + background-color: theme-color-level('danger', -11); .versionmodified { - color: color-yiq(theme-color("danger")); - background-color: theme-color("danger"); + color: color-yiq(theme-color('danger')); + background-color: theme-color('danger'); border-radius: unset; box-shadow: unset; @@ -77,7 +77,7 @@ body.theme-dark { // Need to override this to be the same as above, due to how the class names // are generated in the docs. .versionmodified { - background-color: theme-color("danger"); + background-color: theme-color('danger'); } } diff --git a/sass/_mixins.scss b/sass/_mixins.scss index 171efc95..597cf430 100644 --- a/sass/_mixins.scss +++ b/sass/_mixins.scss @@ -2,7 +2,7 @@ @include fa-icon; content: fa-content($fa-var-info-circle); /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ - font-family: "Font Awesome 5 Free"; + font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: ($spacer / 2); } diff --git a/sass/_variables.scss b/sass/_variables.scss index 441198de..eb9634f6 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -1,4 +1,4 @@ -@use "sass:color"; +@use 'sass:color'; // -------------------------------------------------- // Colors @@ -103,43 +103,51 @@ $base16-base0F: #ff5370; $font-family-sans-serif: // iOS Safari, macOS Safari, macOS Firefox - "-apple-system", + '-apple-system', // macOS Chrome - "BlinkMacSystemFont", + 'BlinkMacSystemFont', // Windows - for all browsers on Windows 7+ (putting Segoe UI before system-ui ensures Segoe UI will be rendered for different languages) - "Segoe UI", - "system-ui", + 'Segoe UI', + 'system-ui', // Targets Android and newer Chrome OS. (If Roboto is installed on your windows computer Segoe UI will take precedence.) - "Roboto", + 'Roboto', // A common fallback font for older macOS - "Helvetica Neue", + 'Helvetica Neue', // Very old Windows versions (special shout-out to whoever is using windows 95) - "Arial", + 'Arial', // A last resort if all else fails, just give us something without serifs :) sans-serif, // All the emojis 👋🙂 - "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji'; $font-family-monospace: // iOS Safari, MacOS Safari - "ui-monospace", "Menlo", "Monaco", + 'ui-monospace', + 'Menlo', + 'Monaco', // Windows, - "Cascadia Mono", - "Segoe UI Mono", + 'Cascadia Mono', + 'Segoe UI Mono', // Linux - "Roboto Mono", - "Oxygen Mono", "Ubuntu Monospace", + 'Roboto Mono', + 'Oxygen Mono', + 'Ubuntu Monospace', // Android - "Source Code Pro", + 'Source Code Pro', // Firefox - "Fira Mono", + 'Fira Mono', // Last resort Android/others - "Droid Sans Mono", - "Courier New", monospace, + 'Droid Sans Mono', + 'Courier New', + monospace, // All the emojis 👋🙂 - "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji'; $font-weight-bold: 700; @@ -180,7 +188,7 @@ $size-16: $size-base * 48; // -------------------------------------------------- $box-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.2); -$breadcrumb-divider: ">"; +$breadcrumb-divider: '>'; // -------------------------------------------------- // Cards diff --git a/sass/fontawesome.scss b/sass/fontawesome.scss index 75efe572..ed7ad904 100644 --- a/sass/fontawesome.scss +++ b/sass/fontawesome.scss @@ -1,5 +1,5 @@ -$fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; -@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; -@import "../node_modules/@fortawesome/fontawesome-free/scss/regular"; -@import "../node_modules/@fortawesome/fontawesome-free/scss/solid"; -@import "../node_modules/@fortawesome/fontawesome-free/scss/brands"; +$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; +@import '../node_modules/@fortawesome/fontawesome-free/scss/fontawesome'; +@import '../node_modules/@fortawesome/fontawesome-free/scss/regular'; +@import '../node_modules/@fortawesome/fontawesome-free/scss/solid'; +@import '../node_modules/@fortawesome/fontawesome-free/scss/brands'; diff --git a/sass/theme.scss b/sass/theme.scss index 20d703a9..32b0216b 100644 --- a/sass/theme.scss +++ b/sass/theme.scss @@ -1,36 +1,36 @@ // variables -@import "variables"; +@import 'variables'; // mixins -@import "mixins"; +@import 'mixins'; // dependencies -@import "../node_modules/@fortawesome/fontawesome-free/scss/mixins"; -@import "../node_modules/@fortawesome/fontawesome-free/scss/variables"; -@import "../node_modules/bootstrap/scss/bootstrap"; +@import '../node_modules/@fortawesome/fontawesome-free/scss/mixins'; +@import '../node_modules/@fortawesome/fontawesome-free/scss/variables'; +@import '../node_modules/bootstrap/scss/bootstrap'; // components -@import "component_admotion"; -@import "component_figure"; -@import "component_quotes"; -@import "component_bignums"; -@import "component_docutils"; -@import "component_footer"; -@import "component_header"; -@import "component_image"; -@import "component_link"; -@import "component_math"; -@import "component_pygments"; -@import "component_search"; -@import "component_sphinx_tabs"; -@import "component_toc"; -@import "component_version"; -@import "component_versionpicker_fix"; -@import "component_autodoc"; +@import 'component_admotion'; +@import 'component_figure'; +@import 'component_quotes'; +@import 'component_bignums'; +@import 'component_docutils'; +@import 'component_footer'; +@import 'component_header'; +@import 'component_image'; +@import 'component_link'; +@import 'component_math'; +@import 'component_pygments'; +@import 'component_search'; +@import 'component_sphinx_tabs'; +@import 'component_toc'; +@import 'component_version'; +@import 'component_versionpicker_fix'; +@import 'component_autodoc'; // misc -@import "layout"; -@import "utilities"; +@import 'layout'; +@import 'utilities'; // Dark mode. -@import "darkmode"; +@import 'darkmode'; diff --git a/webpack.config.js b/webpack.config.js index 2460eb87..d3fc00b1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,34 +1,34 @@ -const path = require("path"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { - devtool: "source-map", + devtool: 'source-map', entry: { - blocking: path.resolve(__dirname, "js/blocking.js"), - theme: path.resolve(__dirname, "js/theme.js"), - fontawesome: path.resolve(__dirname, "sass/fontawesome.scss"), + blocking: path.resolve(__dirname, 'js/blocking.js'), + theme: path.resolve(__dirname, 'js/theme.js'), + fontawesome: path.resolve(__dirname, 'sass/fontawesome.scss'), }, output: { - path: path.resolve(__dirname, "sphinx_wagtail_theme/static/dist"), - filename: "[name].js", + path: path.resolve(__dirname, 'sphinx_wagtail_theme/static/dist'), + filename: '[name].js', }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, - use: ["babel-loader"], + use: ['babel-loader'], }, { test: /\.(s?)css$/, - use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], + use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], }, { test: /\.(eot|ttf|woff|woff2|svg)$/, use: { - loader: "file-loader", + loader: 'file-loader', options: { - name: "assets/[name].[ext]", + name: 'assets/[name].[ext]', }, }, }, @@ -44,15 +44,15 @@ module.exports = { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, - name: "vendor", - chunks: "all", + name: 'vendor', + chunks: 'all', }, }, }, }, plugins: [ new MiniCssExtractPlugin({ - filename: "[name].css", + filename: '[name].css', }), ], };