js: use Hugo to bundle, minify the JS files

gulpfile.js

@@ -44,12 +44,6 @@ gulp.task('assets:images', () => {
     return parallel(baseImages, jumbotronImages, bannerImages, boxartImages, iconImages, screenshotImages);
 });
 
-gulp.task('assets:js', () => {
-    return gulp.src(['src/js/**/*.js'])
-        .pipe(concat('script.js'))
-        .pipe(gulp.dest('build/js'));
-});
-
 gulp.task('hugo', (callback) => {
     import('hugo-bin').then((hugo) => {
         exec(hugo.default + ' -s ./site/ -d ../build/ -v --gc', (err, stdout, stderr) => {
@@ -67,7 +61,7 @@ gulp.task('final:serve', (done) => {
         }
     });
 
-    gulp.watch('src/js/**/*', gulp.series('assets:js'));
+    gulp.watch('site/assets/js/**/*', gulp.series('hugo'));
     gulp.watch('src/scss/**/*', gulp.series('hugo'));
     gulp.watch('site/**/*.html', gulp.series('hugo'));
     gulp.watch('site/**/*.md', gulp.series('hugo'));
@@ -109,6 +103,6 @@ if (parseArgs(process.argv).production) {
 log.info(`process.env.HUGO_ENV = '${process.env.HUGO_ENV}'`);
 log.info(`process.env.HUGO_BASEURL = '${process.env.HUGO_BASEURL}'`);
 
-gulp.task('default', gulp.series('assets:js', 'hugo', 'assets:images', finalCommand));
-gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki', 'assets:js'), 'hugo', 'assets:images', finalCommand));
+gulp.task('default', gulp.series('hugo', 'assets:images', finalCommand));
+gulp.task('all', gulp.series(gulp.parallel('scripts:compatdb', 'scripts:wiki'), 'hugo', 'assets:images', finalCommand));
 gulp.task('content', gulp.series('hugo', finalCommand));

site/assets/js/downloads.js

@@ -1,8 +1,8 @@
 function releaseCallback(v, count, e) {
     if (e.status !== 200 || e.responseText.length < 10) {
-        document.getElementById(`last-updated-${v}`).innerText = "never";
-        document.getElementById(`unavailable-${v}`).classList.remove("is-hidden");
-        document.getElementById(`downloads-${v}`).classList.add("is-hidden");
+        document.getElementById(`last-updated-${v}`).innerText = 'never';
+        document.getElementById(`unavailable-${v}`).classList.remove('is-hidden');
+        document.getElementById(`downloads-${v}`).classList.add('is-hidden');
         throw new Error(e.responseText);
     }
 
@@ -110,12 +110,12 @@ function releaseCallback(v, count, e) {
         shownReleases++;
 
         if (shownReleases >= count) { break; }
-    };
+    }
 }
 
 function getRelease(v, count = 3) {
     var netReq = new XMLHttpRequest();
-    netReq.open("GET", `https://api.github.com/repos/yuzu-emu/yuzu-${v}/releases`);
+    netReq.open('GET', `https://api.github.com/repos/yuzu-emu/yuzu-${v}/releases`);
     netReq.onload = function () {
         releaseCallback(v, count, this);
     };

site/assets/js/hero.js

@@ -3,7 +3,7 @@ const navbar = document.getElementById('hero-navbar');
 const navbarBaseColor = 'is-dark';
 
 if (navbar) {
-	window.addEventListener('scroll', () => {
+    window.addEventListener('scroll', () => {
         if (window.scrollY > 0) {
             navbar.classList.add('is-freestanding');
             navbar.classList.add(navbarBaseColor);
@@ -15,30 +15,30 @@ if (navbar) {
 }
 
 // Handle random switch colors
-let colors = ["orangered", "deepskyblue", "yellow", "deeppink", "lime", "gray"];
-document.body.classList.add("switch-left-" + colors.splice(Math.floor(Math.random() * colors.length), 1)[0]);
-document.body.classList.add("switch-right-" + colors[Math.floor(Math.random() * colors.length)]);
+let colors = ['orangered', 'deepskyblue', 'yellow', 'deeppink', 'lime', 'gray'];
+document.body.classList.add('switch-left-' + colors.splice(Math.floor(Math.random() * colors.length), 1)[0]);
+document.body.classList.add('switch-right-' + colors[Math.floor(Math.random() * colors.length)]);
 
 // Handle lazy-loading of images
-document.addEventListener("DOMContentLoaded", function () {
-    const elements = document.getElementsByClassName("lazy-load");
+document.addEventListener('DOMContentLoaded', function () {
+    const elements = document.getElementsByClassName('lazy-load');
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
-        element.src = element.getAttribute("data-src");
+        element.src = element.getAttribute('data-src');
     }
 });
 
 // Show image carousel, if needed
-const carousels = document.getElementsByClassName("glide");
+const carousels = document.getElementsByClassName('glide');
 if (carousels.length > 0) {
-    document.addEventListener("DOMContentLoaded", function () {
-        const glide = new Glide(".glide", {
-            type: "carousel",
+    document.addEventListener('DOMContentLoaded', function () {
+        const glide = new Glide('.glide', {
+            type: 'carousel',
             perView: 1,
-            focusAt: "center",
+            focusAt: 'center',
             autoplay: 4000,
             gap: 0,
-            animationTimingFunc: "ease-in-out",
+            animationTimingFunc: 'ease-in-out',
             animationDuration: 1000
         });
 

site/assets/js/layout.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // .data-href
+    document.querySelectorAll('div[data-href]').forEach((x) => {
+        x.addEventListener('click', function () {
+            window.location = x.getAttribute('data-href');
+        });
+    });
+
+    // .moment-timeago
+    document.querySelectorAll('.moment-timeago').forEach((x) => {
+        x.innerHTML = moment(x.innerHTML).fromNow();
+    });
+
+    // .is-dropdown
+    document.querySelectorAll('.is-dropdown').forEach((x) => {
+        x.addEventListener('click', function (event) {
+            event.stopPropagation();
+            x.parentElement
+                .querySelectorAll('.is-dropdown-target')
+                .forEach((child) => {
+                    child.classList.toggle('is-active');
+                });
+        });
+    });
+
+    // baguetteBox
+    baguetteBox.run('.baguetteBox');
+});

site/themes/shared-bulma-theme

@@ -1 +1 @@
-Subproject commit f286ee632094e74ac5f7ef39cd30bfa2ece1f19d
+Subproject commit 703e0549721ddc594dd0e20c192eebc412ba3a7f

src/js/layout.js

@@ -1,26 +0,0 @@
-document.addEventListener("DOMContentLoaded", function() {
-    // .data-href
-    document.querySelectorAll('div[data-href]').forEach(x => {
-        x.addEventListener('click', function() {
-            window.location = x.getAttribute('data-href')
-        });
-    })
-
-    // .moment-timeago
-    document.querySelectorAll('.moment-timeago').forEach(x => {
-        x.innerHTML = moment(x.innerHTML).fromNow()
-    })
-
-    // .is-dropdown
-    document.querySelectorAll('.is-dropdown').forEach(x => {
-        x.addEventListener('click', function(event) {
-            event.stopPropagation()
-            x.parentElement.querySelectorAll(".is-dropdown-target").forEach(child => {
-                child.classList.toggle('is-active')
-            })
-        });
-    })
-
-    // baguetteBox
-    baguetteBox.run('.baguetteBox');
-})