feat: Use webpack for bundling of JS files

assets/js/index.js

@@ -0,0 +1,4 @@
+import './lib/dark-mode';
+import './lib/fitvids';
+import './lib/infinite-scroll';
+import './lib/nav-collapse';

assets/js/jquery.fitvids.js

@@ -1,89 +0,0 @@
-/*jshint browser:true */
-/*!
-* FitVids 1.3
-*
-*
-* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
-* This is an unofficial release, ported by John O'Nolan
-* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-* Released under the MIT license
-*
-*/
-
-;(function( $ ){
-
-  'use strict';
-
-  $.fn.fitVids = function( options ) {
-    var settings = {
-      customSelector: null,
-      ignore: null
-    };
-
-    if(!document.getElementById('fit-vids-style')) {
-      // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
-      var div = document.createElement("div");
-      div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
-      head.appendChild(div.childNodes[1]);
-    }
-
-    if ( options ) {
-      $.extend( settings, options );
-    }
-
-    return this.each(function(){
-      var selectors = [
-        'iframe[src*="player.vimeo.com"]',
-        'iframe[src*="youtube.com"]',
-        'iframe[src*="youtube-nocookie.com"]',
-        'iframe[src*="kickstarter.com"][src*="video.html"]',
-        'object',
-        'embed'
-      ];
-
-      if (settings.customSelector) {
-        selectors.push(settings.customSelector);
-      }
-
-      var ignoreList = '.fitvidsignore';
-
-      if(settings.ignore) {
-        ignoreList = ignoreList + ', ' + settings.ignore;
-      }
-
-      var $allVideos = $(this).find(selectors.join(','));
-      $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
-      $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
-
-      $allVideos.each(function(){
-        var $this = $(this);
-        if($this.parents(ignoreList).length > 0) {
-          return; // Disable FitVids on this video.
-        }
-        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
-        if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
-        {
-          $this.attr('height', 9);
-          $this.attr('width', 16);
-        }
-        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
-            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
-            aspectRatio = height / width;
-        if(!$this.attr('name')){
-          var videoName = 'fitvid' + $.fn.fitVids._count;
-          $this.attr('name', videoName);
-          $.fn.fitVids._count++;
-        }
-        $this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
-        $this.removeAttr('height').removeAttr('width');
-      });
-    });
-  };
-
-  // Internal counter for unique video names.
-  $.fn.fitVids._count = 0;
-
-// Works with either jQuery or Zepto
-})( window.jQuery || window.Zepto );

assets/js/lib/dark-mode.js

@@ -3,26 +3,25 @@ function setDarkMode() {
         window.localStorage.setItem('theme', window.document.body.getAttribute("data-theme"));
     }
     if (window.document.body.getAttribute("data-theme") == "dark") {
-        $("#darkMode i").text("brightness_high");
+        window.document.querySelector("#darkMode i").innerHTML = "brightness_high";
-        $("#darkMode p").text("Light Mode");
+        window.document.querySelector("#darkMode p").innerHTML = "Light Mode";
     } else {
-        $("#darkMode i").text("brightness_low");
+        window.document.querySelector("#darkMode i").innerHTML = "brightness_low";
-        $("#darkMode p").text("Dark Mode");
+        window.document.querySelector("#darkMode p").innerHTML = "Dark Mode";
     }
 }
 
 if (window.localStorage.getItem('theme')) {
     window.document.body.setAttribute("data-theme", window.localStorage.getItem("theme"));
 }
-
+document.addEventListener("load",function () {
-$(document).ready(function () {
     setDarkMode();
-    $("#darkMode").click(function () {
+    document.querySelector("#darkMode").addEventListener("click", function () {
         if (window.document.body.getAttribute("data-theme") != "dark") {
             window.document.body.setAttribute("data-theme", "dark");
         } else {
             window.document.body.setAttribute("data-theme", "light");
         }
         setDarkMode();
-    })
+    });
 });

assets/js/lib/fitvids.js

@@ -0,0 +1,3 @@
+import fitvids from 'fitvids';
+
+fitvids();

assets/js/lib/nav-collapse.js

@@ -0,0 +1,60 @@
+
+
+
+document.querySelector("#menushow").addEventListener("click", function () {
+    document.querySelector(".site-header").classList.toggle('enabled');
+    document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
+    document.querySelector(".menu").classList.toggle("enabled");
+});
+document.querySelector(".menu__item").addEventListener("click", function () {
+    document.querySelector(".site-header").classList.toggle('enabled');
+    document.querySelector(".site-header__background").classList.toggle('site-header__background--enabled');
+    document.querySelector(".menu").classList.toggle("enabled");
+})
+
+var nav = document.querySelector('.site-header');
+var feed = document.querySelector('main');
+
+var lastScrollY = window.scrollY;
+var lastWindowHeight = window.innerHeight;
+var lastDocumentHeight = document.height;
+var ticking = false;
+
+function onScroll() {
+    lastScrollY = window.scrollY;
+    requestTick();
+}
+
+function onResize() {
+    lastWindowHeight = window.innerHeight;
+    lastDocumentHeight = $(document).height();
+    requestTick();
+}
+
+function requestTick() {
+    if (!ticking) {
+        requestAnimationFrame(update);
+    }
+    ticking = true;
+}
+
+function update() {
+    var trigger = feed.getBoundingClientRect().top + window.scrollY;
+    var progressMax = lastDocumentHeight - lastWindowHeight;
+
+    // show/hide nav
+    if (lastScrollY >= nav.getBoundingClientRect().bottom) {
+        nav.classList.add('detached');
+    } else {
+        nav.classList.remove('detached');
+    }
+
+    ticking = false;
+}
+
+window.addEventListener('scroll', onScroll, { passive: true });
+window.addEventListener('resize', onResize, false);
+
+update();
+
+

assets/js/nav-collapse.js

@@ -1,62 +0,0 @@
-
-
-
-$(document).ready(function () {
-    $("#menushow").click(function () {
-        $(".site-header").toggleClass('enabled');
-        $(".site-header__background").toggleClass('site-header__background--enabled');
-        $(".menu").toggleClass('enabled');
-    })
-    $(".menu__item").click(function () {
-        $(".site-header").toggleClass('enabled');
-        $(".site-header__background").toggleClass('site-header__background--enabled');
-        $(".menu").toggleClass('enabled');
-    })
-
-    var nav = document.querySelector('.site-header');
-    var feed = document.querySelector('main');
-
-    var lastScrollY = window.scrollY;
-    var lastWindowHeight = window.innerHeight;
-    var lastDocumentHeight = $(document).height();
-    var ticking = false;
-
-    function onScroll() {
-        lastScrollY = window.scrollY;
-        requestTick();
-    }
-
-    function onResize() {
-        lastWindowHeight = window.innerHeight;
-        lastDocumentHeight = $(document).height();
-        requestTick();
-    }
-
-    function requestTick() {
-        if (!ticking) {
-            requestAnimationFrame(update);
-        }
-        ticking = true;
-    }
-
-    function update() {
-        var trigger = feed.getBoundingClientRect().top + window.scrollY;
-        var progressMax = lastDocumentHeight - lastWindowHeight;
-
-        // show/hide nav
-        if (lastScrollY >= nav.getBoundingClientRect().bottom) {
-            nav.classList.add('detached');
-        } else {
-            nav.classList.remove('detached');
-        }
-
-        ticking = false;
-    }
-
-    window.addEventListener('scroll', onScroll, { passive: true });
-    window.addEventListener('resize', onResize, false);
-
-    update();
-
-});
-

gulpfile.js

@@ -1,11 +1,11 @@
-const {series, watch, src, dest, parallel} = require('gulp');
+const { series, watch, src, dest, parallel } = require('gulp');
 
-const postcss = require('gulp-postcss')
 const livereload = require('gulp-livereload');
 const zip = require('gulp-zip');
 const concat = require('gulp-concat');
 const uglify = require('gulp-uglify');
 const cleancss = require('gulp-clean-css');
+const webpack = require('webpack-stream');
 
 function serve(done) {
     livereload.listen();
@@ -16,22 +16,24 @@ function hbs() {
     return src(['*.hbs', 'partials/**/*.hbs'])
         .pipe(livereload());
 }
-function css () {
+function css() {
 
     return src('assets/css/styles.css')
-    .pipe(cleancss({compatibility: 'ie8'}))
+        .pipe(cleancss({ compatibility: 'ie8' }))
         .pipe(dest('assets/built/'))
         .pipe(livereload())
 }
 function js() {
-    return src([
+    return src('assets/js/index.js')
-            // pull in lib files first so our own code can depend on it
+        .pipe(
-            'assets/js/lib/*.js',
+            webpack({
-            'assets/js/*.js'
+                mode: 'production'
-        ], {sourcemaps: true})
+                // Any configuration options...
+            })
+        )
         .pipe(concat('yuika.js'))
         .pipe(uglify())
-        .pipe(dest('assets/built/', {sourcemaps: '.'}))
+        .pipe(dest('assets/built/', { sourcemaps: '.' }))
         .pipe(livereload());
 }
 
@@ -39,7 +41,7 @@ const cssWatcher = () => watch('assets/css/**', css);
 const jsWatcher = () => watch('assets/js/**.js', js);
 const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
 const watcher = parallel(cssWatcher, hbsWatcher, jsWatcher);
-const build = parallel(css,js);
+const build = parallel(css, js);
 const dev = series(build, serve, watcher);
 
 

package.json

@@ -63,8 +63,16 @@
     "url": "https://github.com/Damillora/Yuika.git"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.16",
+    "@babel/preset-env": "^7.13.15",
     "@semantic-release/exec": "^5.0.0",
-    "semantic-release": "^17.4.2"
+    "babel-loader": "^8.2.2",
+    "fitvids": "^2.1.1",
+    "semantic-release": "^17.4.2",
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.35.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-stream": "^6.1.2"
   },
   "private": true
 }

page.hbs

@@ -19,11 +19,5 @@
   {{/post}}
   {{#contentFor "scripts"}}
   <script>
-    $(document).ready(function () {
-      // FitVids - start
-      var $postContent = $("#post");
-      $postContent.fitVids();
-      // FitVids - end
-    });
   </script>
   {{/contentFor}}

post.hbs

@@ -108,11 +108,5 @@
   {{/post}}
   {{#contentFor "scripts"}}
   <script>
-    $(document).ready(function () {
-      // FitVids - start
-      var $postContent = $("#post");
-      $postContent.fitVids();
-      // FitVids - end
-    });
   </script>
   {{/contentFor}}