add swup.js and preload plugin to project

README.md

@@ -6,6 +6,8 @@ This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site gene
 
 Setup to use [PostCSS](http://postcss.org/), [Tailwind CSS](https://tailwindcss.com), [PurgeCSS](https://purgecss.com) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling.
 
+Also uses [Swup](https://swup.org.js) page transitions and pre-loading of pages.
+
 This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees.
 
 ## :wrench: Todo

package.json

@@ -65,7 +65,9 @@
     "natives": "1.1.6"
   },
   "dependencies": {
+    "@swup/preload-plugin": "^1.0.3",
     "glob-all": "^3.2.1",
+    "swup": "^2.0.9",
     "tailwindcss": "^1.2.0"
   }
 }

site/layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }} {{ $section := .Site.GetPage "section" .Section }}
 <article class="content">
-  <main>{{- .Content -}}</main>
+  <main id="swup" class="transition-fade">{{- .Content -}}</main>
 </article>
 {{ end }}

site/layouts/index.html

@@ -1,8 +1,10 @@
 {{ define "main" }}
 
-{{ partial "hero.html" }}
+<main id="swup" class="transition-fade">
-{{ partial "about.html" }}
+  {{ partial "hero.html" }}
-{{ partial "services.html" }}
+  {{ partial "about.html" }}
-{{ partial "contact.html" }}
+  {{ partial "services.html" }}
+  {{ partial "contact.html" }}
+</main>
 
 {{ end }}

site/layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer>
+<footer class="transition-fade">
   <ul>
     <li><a href="{{ "terms-and-conditions" | relURL }}">Terms and Conditions</a></li>
     <li><a href="{{ "privacy-policy" | relURL }}">Privacy Policy</a></li>

src/css/main.css

@@ -11,4 +11,14 @@ body {
   height: 100%;
 }
 
+// swup transition classes
+.transition-fade {
+  transition: 0.3s;
+  opacity: 1;
+}
+
+html.is-animating .transition-fade {
+  opacity: 0;
+}
+
 // vim:set filetype=scss:

src/index.js

@@ -2,7 +2,17 @@
 
 import "./css/main.css";
 
-window.addEventListener("DOMContentLoaded", () => {
+// TODO - is there a more appropriate place for this?
+import Swup from "swup";
+import SwupPreloadPlugin from "@swup/preload-plugin";
+const swup = new Swup({
+  plugins: [new SwupPreloadPlugin()]
+});
+
+const blockInterval = null;
+
+function initBlocks() {
+  if (blockInterval) { return; }
   const TRANSITION_DURATION = 1000;
   const INTERVAl = TRANSITION_DURATION + 600;
   const blockParent = document.getElementById("js-block-parent");
@@ -15,5 +25,14 @@ window.addEventListener("DOMContentLoaded", () => {
       blockParent.classList.add(`state-${state}`);
     }, INTERVAl);
   }
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  initBlocks();
+});
+
+// DOMContentLoaded is not triggered on page reloads via swup.js
+swup.on("contentReplaced", () => {
+  initBlocks();
 });