add swup scroll plugin

package.json

@@ -66,6 +66,7 @@
   },
   "dependencies": {
     "@swup/preload-plugin": "^1.0.3",
+    "@swup/scroll-plugin": "^1.0.6",
     "glob-all": "^3.2.1",
     "swup": "^2.0.9",
     "tailwindcss": "^1.2.0"

site/layouts/404.html

@@ -1,7 +1,9 @@
 {{ define "main" }}
 
-<h1>Nothing Here...</h1>
+<main id="swup" class="transition">
-<h2 style="font-size: 120px; margin:0;">💩</h2>
+  <h1>Nothing Here...</h1>
-<h3><a href="{{ "/" | relURL }}">Go Home</a></h3>
+  <h2 style="font-size: 120px; margin:0;">💩</h2>
+  <h3><a href="{{ "/" | relURL }}">Go Home</a></h3>
+</main>
 
 {{ end }}

site/layouts/partials/header.html

@@ -2,6 +2,9 @@
   <nav>
     <ul>
       <li><a href="{{ .Site.BaseURL }}">Home</a></li>
+      <li><a href="#about">About</a></li>
+      <li><a href="#services">Services</a></li>
+      <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>
 </header>

src/index.js

@@ -5,9 +5,7 @@ import "./css/main.css";
 // TODO - is there a more appropriate place for this?
 import Swup from "swup";
 import SwupPreloadPlugin from "@swup/preload-plugin";
-const swup = new Swup({
+import SwupScrollPlugin from "@swup/scroll-plugin";
-  plugins: [new SwupPreloadPlugin()]
-});
 
 const blockInterval = null;
 
@@ -28,11 +26,16 @@ function initBlocks() {
 }
 
 window.addEventListener("DOMContentLoaded", () => {
+  const swup = new Swup({
+    plugins: [new SwupPreloadPlugin(), new SwupScrollPlugin()]
+  });
+
+  // DOMContentLoaded is not triggered on page reloads via swup.js
+  swup.on("contentReplaced", () => {
     initBlocks();
-});
+  });
-
+
-// DOMContentLoaded is not triggered on page reloads via swup.js
+  initBlocks();
-swup.on("contentReplaced", () => {
+  swup.scrollTo(document.getElementById("#contact"));
-  initBlocks();
 });
 

yarn.lock

@@ -752,6 +752,14 @@
     delegate "^3.2.0"
     swup "^2.0.0"
 
+"@swup/scroll-plugin@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@swup/scroll-plugin/-/scroll-plugin-1.0.6.tgz#9a0b28a7f47750c6d5e69e988e42da31264e385e"
+  integrity sha512-uUzgbFYdkLIKCk0DiIrkQwYQYkI2lh4NwJlY28nOhmgivgyYRCRgGHXSHyvJEJwDDVSW7w48myq5b1g9HrVeEg==
+  dependencies:
+    "@swup/plugin" "^1.0.0"
+    scrl "^1.0.0"
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
@@ -7628,6 +7636,11 @@ schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+scrl@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/scrl/-/scrl-1.0.0.tgz#b225915f29d72807c48b2e116b12f14b15d14e55"
+  integrity sha512-nTS2W6UyxYfvOOjeXGXM1j140bm2ZUIjt0mEyGUHecFz2zU1CMYJ71dWPdlnSJR2mYOojY1R5qpo4Fi83O7tog==
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"