Update README.md

Updated:
- esbuild v0.24.0 → v0.24.2
- postcss v8.4.47 → v8.4.49
- purgecss v6.0.0 → v7.0.2

.gitignore

@@ -5,13 +5,9 @@ loconfig.*.json
 !loconfig.example.json
 .prettierrc
 
-www/assets/scripts/app.js
-www/assets/scripts/app.js.map
-www/assets/scripts/vendors.js
-
-www/assets/styles/main.css
-www/assets/styles/main.css.map
-www/assets/styles/critical.css
-www/assets/styles/critical.css.map
+www/assets/scripts/*
+!www/assets/scripts/.gitkeep
+www/assets/styles/*
+!www/assets/styles/.gitkeep
 
 assets.json

.nvmrc

@@ -1 +1 @@
-v20.10
+v20

README.md

@@ -1,3 +1,6 @@
+> [!WARNING]
+> This repository is no longer maintained. We recommend checking out our [Astro](https://github.com/locomotivemtl/astro-boilerplate) or [Craft](https://github.com/locomotivemtl/craft-boilerplate) boilerplates instead.
+
 <p align="center">
     <a href="https://github.com/locomotivemtl/locomotive-boilerplate">
         <img src="https://user-images.githubusercontent.com/4596862/54868065-c2aea200-4d5e-11e9-9ce3-e0013c15f48c.png" height="140">
@@ -23,8 +26,8 @@ Learn more about [languages and technologies](docs/technologies.md).
 
 Make sure you have the following installed:
 
-* [Node] — at least 17.9, the latest LTS is recommended.
-* [NPM] — at least 8.0, the latest LTS is recommended.
+* [Node] — at least 20, the latest LTS is recommended.
+* [NPM] — at least 10, the latest LTS is recommended.
 
 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.
 

assets/scripts/globals.js

@@ -1,4 +1,3 @@
-import svg4everybody from 'svg4everybody';
 import { ENV } from './config';
 
 // Dynamic imports for development mode only
@@ -11,11 +10,6 @@ let gridHelper;
 })();
 
 export default function () {
-    /**
-     * Use external SVG spritemaps
-     */
-    svg4everybody();
-
     /**
      * Add grid helper
      */

assets/styles/components/_form.scss

@@ -27,7 +27,7 @@ $input-icon-color: 424242; // No #
 .c-form_input {
     padding: rem(10px);
     border: 1px solid lightgray;
-    background-color: color(lightest);
+    background-color: colorCode(lightest);
 
     &:hover {
         border-color: darkgray;
@@ -71,7 +71,7 @@ $checkbox-icon-color: $input-icon-color;
     }
 
     &::before {
-        background-color: color(lightest);
+        background-color: colorCode(lightest);
         border: 1px solid lightgray;
     }
 

assets/styles/components/_scrollbar.scss

@@ -25,7 +25,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: color(darkest);
+    background-color: colorCode(darkest);
     opacity: 0.5;
     width: 7px;
     border-radius: 10px;

assets/styles/main.scss

@@ -32,7 +32,7 @@
 
 // Vendors
 // ==========================================================================
-@import "node_modules/locomotive-scroll/dist/locomotive-scroll";
+@import "../../node_modules/locomotive-scroll/dist/locomotive-scroll";
 
 // Elements
 // ==========================================================================

assets/styles/settings/_config.colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // ==========================================================================
 // Settings / Config / Colors
 // ==========================================================================
@@ -18,7 +20,7 @@ $colors: (
 //
 // ```scss
 // .c-box {
-//     color: color(primary);
+//     color: colorCode(primary);
 // }
 // ```
 //
@@ -26,7 +28,7 @@ $colors: (
 // @param  {number} $alpha - The alpha for the color value.
 // @return {color}
 
-@function color($key, $alpha: 1) {
+@function colorCode($key, $alpha: 1) {
     @if not map-has-key($colors, $key) {
         @error "Unknown '#{$key}' in $colors.";
     }
@@ -44,13 +46,13 @@ $colors: (
 // ==========================================================================
 
 // Link
-$color-link:           color(primary);
-$color-link-focus:     color(primary);
-$color-link-hover:     darken(color(primary), 10%);
+$color-link:           colorCode(primary);
+$color-link-focus:     colorCode(primary);
+$color-link-hover:     color.adjust(colorCode(primary), $lightness: -10%);
 
 // Selection
-$color-selection-text:         color(darkest);
-$color-selection-background:   color(lightest);
+$color-selection-text:         colorCode(darkest);
+$color-selection-background:   colorCode(lightest);
 
 // Socials
 $color-facebook:    #3B5998;

assets/styles/settings/_config.scss

@@ -17,7 +17,7 @@ $assets-path: "../"  !default;
 // Base
 $font-size:     16px;
 $line-height:   math.div(24px, $font-size);
-$font-color:    color(darkest);
+$font-color:    colorCode(darkest);
 
 // Weights
 $font-weight-light:     300;

build/helpers/config.js

@@ -2,14 +2,14 @@
  * @file Provides simple user configuration options.
  */
 
-import loconfig from '../../loconfig.json' assert { type: 'json' };
+import loconfig from '../../loconfig.json' with { type: 'json' };
 import { merge } from '../utils/index.js';
 
 let usrconfig;
 
 try {
     usrconfig = await import('../../loconfig.local.json', {
-        assert: { type: 'json' },
+        with: { type: 'json' },
     });
     usrconfig = usrconfig.default;
 

build/tasks/styles.js

@@ -10,12 +10,9 @@ import resolve from '../helpers/template.js';
 import { merge } from '../utils/index.js';
 import { writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
-import { promisify } from 'node:util';
 import * as sass from 'sass';
 import { PurgeCSS } from 'purgecss';
 
-const sassRender = promisify(sass.render);
-
 let postcssProcessor;
 
 /**
@@ -24,16 +21,15 @@ let postcssProcessor;
  * @const {object} productionSassOptions  - The predefined Sass options for production.
  */
 export const defaultSassOptions = {
-    omitSourceMapUrl: true,
+    sourceMapIncludeSources: true,
     sourceMap: true,
-    sourceMapContents: true,
 };
 
 export const developmentSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'expanded',
+    style: 'expanded',
 });
 export const productionSassOptions = Object.assign({}, defaultSassOptions, {
-    outputStyle: 'compressed',
+    style: 'compressed',
 });
 
 /**
@@ -127,10 +123,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             infile  = resolve(infile);
             outfile = resolve(outfile);
 
-            let result = await sassRender(Object.assign({}, sassOptions, {
-                file: infile,
-                outFile: outfile,
-            }));
+            let result = sass.compile(infile, sassOptions);
 
             if (supportsPostCSS && postcssOptions) {
                 if (typeof postcssProcessor === 'undefined') {

build/tasks/svgs.js

@@ -1,21 +1,36 @@
 import loconfig from '../helpers/config.js';
+import glob, { supportsGlob } from '../helpers/glob.js';
 import message from '../helpers/message.js';
 import notification from '../helpers/notification.js';
-import resolve from '../helpers/template.js';
+import { resolve as resolveTemplate } from '../helpers/template.js';
 import { merge } from '../utils/index.js';
-import { basename } from 'node:path';
+import {
+    basename,
+    dirname,
+    extname,
+    resolve,
+} from 'node:path';
+import commonPath from 'common-path';
 import mixer from 'svg-mixer';
+import slugify from 'url-slug';
+
+const basePath = loconfig?.paths?.svgs?.src
+    ? resolve(loconfig.paths.svgs.src)
+    : null;
 
 /**
- * @const {object} defaultMixerOptions     - The default shared Mixer options.
- * @const {object} developmentMixerOptions - The predefined Mixer options for development.
- * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ * @const {object} defaultMixerOptions - The default shared Mixer options.
  */
 export const defaultMixerOptions = {
     spriteConfig: {
         usages: false,
     },
 };
+
+/**
+ * @const {object} developmentMixerOptions - The predefined Mixer options for development.
+ * @const {object} productionMixerOptions  - The predefined Mixer options for production.
+ */
 export const developmentMixerOptions = Object.assign({}, defaultMixerOptions);
 export const productionMixerOptions  = Object.assign({}, defaultMixerOptions);
 
@@ -74,10 +89,52 @@ export default async function compileSVGs(mixerOptions = null) {
                 includes = [ includes ];
             }
 
-            includes = resolve(includes);
-            outfile  = resolve(outfile);
+            includes = resolveTemplate(includes);
+            outfile  = resolveTemplate(outfile);
 
-            const result = await mixer(includes, mixerOptions);
+            if (supportsGlob && basePath) {
+                includes = await glob(includes);
+                includes = [ ...new Set(includes) ];
+
+                const common = commonPath(includes);
+                if (common.commonDir) {
+                    common.commonDir = resolve(common.commonDir);
+                }
+
+                /**
+                 * Generates the `<symbol id>` attribute and prefix any
+                 * SVG files in subdirectories according to the paths
+                 * common base path.
+                 *
+                 * Example for SVG source path `./assets/images/sprite`:
+                 *
+                 * | Path                                 | ID        |
+                 * | ------------------------------------ | --------- |
+                 * | `./assets/images/sprite/foo.svg`     | `foo`     |
+                 * | `./assets/images/sprite/baz/qux.svg` | `baz-qux` |
+                 *
+                 * @param  {string} path       - The absolute path to the file.
+                 * @param  {string} [query=''] - A query string.
+                 * @return {string} The symbol ID.
+                 */
+                mixerOptions.generateSymbolId = (path, query = '') => {
+                    let dirName = dirname(path)
+                        .replace(common.commonDir ?? basePath, '')
+                        .replace(/^\/|\/$/, '')
+                        .replace('/', '-');
+                    if (dirName) {
+                        dirName += '-';
+                    }
+
+                    const fileName = basename(path, extname(path));
+                    const decodedQuery = decodeURIComponent(decodeURIComponent(query));
+                    return `${dirName}${fileName}${slugify(decodedQuery)}`;
+                };
+            }
+
+            const result = await mixer(includes, {
+                ...mixerOptions,
+            });
 
             await result.write(outfile);
 

package.json

@@ -6,38 +6,42 @@
     "author": "Locomotive <info@locomotive.ca>",
     "type": "module",
     "engines": {
-        "node": "20.x",
-        "npm": ">=8.0"
+        "node": ">=20",
+        "npm": ">=10"
     },
     "scripts": {
-        "start": "node --experimental-json-modules --no-warnings build/watch.js",
-        "build": "node --experimental-json-modules --no-warnings build/build.js"
+        "start": "node --no-warnings build/watch.js",
+        "build": "node --no-warnings build/build.js"
     },
     "dependencies": {
-        "locomotive-scroll": "^5.0.0-beta.11",
+        "locomotive-scroll": "^5.0.0-beta.21",
         "modujs": "^1.4.2",
-        "modularload": "^1.2.6",
-        "svg4everybody": "^2.1.9"
+        "modularload": "^1.2.6"
     },
     "devDependencies": {
-        "autoprefixer": "^10.4.17",
-        "browser-sync": "^3.0.2",
+        "autoprefixer": "^10.4.21",
+        "browser-sync": "^3.0.4",
+        "common-path": "^1.0.1",
         "concat": "^1.0.3",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.25.8",
         "kleur": "^4.1.5",
         "node-notifier": "^10.0.1",
-        "postcss": "^8.4.21",
-        "purgecss": "^5.0.0",
-        "sass": "^1.70.0",
-        "svg-mixer": "~2.3.14",
+        "postcss": "^8.5.6",
+        "purgecss": "^7.0.2",
+        "sass": "^1.89.2",
+        "svg-mixer": "^2.3.14",
         "tiny-glob": "^0.2.9"
     },
     "overrides": {
         "browser-sync": {
-            "ua-parser-js": "~1.0.33"
+            "ua-parser-js": "^1.0.33"
         },
         "svg-mixer": {
-            "postcss": "^8.4.20"
+            "micromatch": "^4.0.8",
+            "postcss": "^8.4.49"
+        },
+        "svg-mixer-utils": {
+            "anymatch": "^3.1.3"
         }
     }
 }

www/form.html

@@ -96,9 +96,6 @@
             </div>
         </div>
 
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
         <script src="assets/scripts/vendors.js" defer></script>
         <script src="assets/scripts/app.js" defer></script>
     </body>

www/grid.html

@@ -83,12 +83,6 @@
         </div>
     </div>
 
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
     <script src="assets/scripts/vendors.js" defer></script>
     <script src="assets/scripts/app.js" defer></script>
 </body>

www/images.html

@@ -122,9 +122,6 @@
             </div>
         </div>
 
-        <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script>
-        <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController" crossorigin="anonymous"></script>
-
         <script src="assets/scripts/vendors.js" defer></script>
         <script src="assets/scripts/app.js" defer></script>
     </body>

www/index.html

@@ -69,12 +69,6 @@
         </div>
     </div>
 
-    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"
-        crossorigin="anonymous"></script>
-    <script nomodule
-        src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.remove%2CElement.prototype.append%2Cfetch%2CCustomEvent%2CElement.prototype.matches%2CNodeList.prototype.forEach%2CAbortController"
-        crossorigin="anonymous"></script>
-
     <script src="assets/scripts/vendors.js" defer></script>
     <script src="assets/scripts/app.js" defer></script>
 </body>