preloading

.drone.yml

@@ -8,22 +8,22 @@ steps:
     commands:
       - node -v
       - pnpm --shamefully-flatten i
-      - pnpm run build:prod
+      - pnpm run build
-#
+
-#
+
-#  - name: deploy
+  - name: deploy
-#    image: cupcakearmy/drone-deploy
+    image: cupcakearmy/drone-deploy
-#    pull: always
+    pull: always
-#    environment:
+    environment:
-#      PLUGIN_KEY:
+      PLUGIN_KEY:
-#        from_secret: ssh_key
+        from_secret: ssh_key
-#    settings:
+    settings:
-#      host: srv-0.nicco.io
+      host: srv-0.nicco.io
-#      user: root
+      user: root
-#      port: 1312
+      port: 1312
-#      target: /srv/web/blog
+      target: /srv/web/blog
-#      sources:
+      sources:
-#        - ./liquet
+        - ./liquet
-#    when:
+    when:
-#      event: push
+      event: push
-#      branch: master
+      branch: master

package.json

@@ -5,6 +5,7 @@
     "build": "parcel build --no-source-maps -d liquet/dist ./src/js/index.js ./src/styles/index.styl"
   },
   "dependencies": {
+    "@swup/preload-plugin": "^1.0.3",
     "jquery": "^3.4.1",
     "swup": "^2.0.7"
   },

src/js/index.js

@@ -1,2 +1,11 @@
-import './lights'
+import lights from './lights'
-import './lazy'
+import lazy from './lazy'
+import swup from './swup'
+
+document.addEventListener('DOMContentLoaded', () => {
+    lights()
+    lazy()
+    swup(()=> {
+        lazy()
+    })
+})

src/js/lazy.js

@@ -1,6 +1,6 @@
-import jQuery from 'jquery'
+import $ from 'jquery'
 
-jQuery(($) => {
+export default () => {
     const bottomOffset = 300
     const app = document.getElementById('app')
     let loading = false
@@ -35,4 +35,4 @@ jQuery(($) => {
 
     // Check initial page if they need loading
     load.bind(app)()
-})
+}

src/js/lights.js

@@ -1,4 +1,4 @@
-;((window) => {
+export default () => {
     // Lights
     const key = 'nicco.io:blog:lights'
     const CSS = 'body, .wp-block-image img, .thumbnail img {filter: invert(1);} '
@@ -22,9 +22,9 @@
     window.toggleLights = () => isDark() ? on() : off()
 
     // Focus scrolling
-    document.addEventListener('DOMContentLoaded', ()=> {
+    document.addEventListener('DOMContentLoaded', () => {
         const toFocus = document.querySelector('[data-focusme]')
         toFocus.tabIndex = '1'
         toFocus.focus({preventScroll: true})
     })
-})(window)
+}

src/js/swup.js

@@ -0,0 +1,11 @@
+import Swup from 'swup'
+import SwupPreloadPlugin from '@swup/preload-plugin';
+
+export default (fn) => {
+    const swup = new Swup({
+        plugins: [new SwupPreloadPlugin()],
+        containers: ['#app']
+    })
+
+    swup.on('contentReplaced', fn)
+}