Add JS

.eleventy.cjs

@@ -9,6 +9,7 @@ module.exports = (eleventyConfig) => {
 
   eleventyConfig.addWatchTarget("source/assets/img");
   eleventyConfig.addPassthroughCopy("source/assets/img");
+  eleventyConfig.addPassthroughCopy("source/favicon.ico");
 
   // settings
   return {

.gitignore

@@ -19,7 +19,10 @@ Thumbs.db
 /.yardoc
 /vendor/bundle/
 /source/documentation/js-api
+
+# Eleventy
 /_site/
+source/assets/dist/
 
 # NPM/Yarn
 node_modules/

package.json

@@ -18,16 +18,30 @@
   "packageManager": "yarn@3.3.0",
   "scripts": {
     "serve": "run-p 'watch:**'",
-    "build": "run-s 'build:**'",
+    "build": "run-s build-dev:scripts 'build:**'",
+    "build-prod": "run-s build-prod:scripts 'build:**'",
     "build:sass": "sass --style=compressed ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
     "watch:sass": "sass --watch ./source/assets/sass/sass.scss:./source/assets/dist/css/sass.css ./source/assets/sass/noscript.scss:./source/assets/dist/css/noscript.css",
+    "build-dev:scripts": "rollup -c",
+    "build-prod:scripts": "BABEL_ENV=production rollup -c",
+    "watch:scripts": "npm run build-dev:scripts -- -w",
     "build:11ty": "eleventy --config=.eleventy.cjs",
     "watch:11ty": "eleventy --config=.eleventy.cjs --serve",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.3.0",
+    "jquery": "^3.6.3",
+    "jquery-ui": "^1.13.2",
     "npm-run-all": "^4.1.5",
+    "rollup": "^3.9.1",
     "sass": "^1.57.1"
   }
 }

rollup.config.js

@@ -0,0 +1,31 @@
+import { babel } from "@rollup/plugin-babel";
+import commonjs from "@rollup/plugin-commonjs";
+import inject from "@rollup/plugin-inject";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+
+const prod = process.env.BABEL_ENV === "production";
+
+const plugins = [
+  nodeResolve({ browser: true }),
+  commonjs(),
+  inject({
+    $: "jquery",
+    jQuery: "jquery",
+  }),
+  babel({ babelHelpers: "bundled" }),
+];
+
+if (prod) {
+  plugins.push(terser());
+}
+
+export default {
+  input: "source/assets/js/sass.js",
+  output: {
+    file: "source/assets/dist/js/sass.js",
+    format: "iife",
+    sourcemap: !prod,
+  },
+  plugins,
+};

source/_layouts/base.liquid

@@ -96,7 +96,7 @@
         }
       });
     </script>
-    <script src="/assets/js/sass.js"></script>
+    <script src="/assets/dist/js/sass.js"></script>
     <!-- Current page: {{ page.url }} -->
   </body>
 </html>

source/assets/js/components/index.js

@@ -0,0 +1,5 @@
+import "./impl-status";
+import "./list-navigation";
+import "./navigation";
+import "./redirect";
+import "./sass-syntax-switcher";

source/assets/js/sass.js

@@ -1,4 +1,2 @@
-//= require ./vendor/jquery.min
-//= require ./vendor/jquery-ui.min
-//= require_tree ./vendor
-//= require_tree ./components
+import "./vendor";
+import "./components";

source/assets/js/vendor/index.js

@@ -0,0 +1,5 @@
+import "jquery-ui";
+
+import "./jquery-smooth-scroll.min";
+import "./modernizr.custom.min";
+import "./html5-boilerplate/plugins";