From 15e67f5903d15319793d656e7327f1be6129d7cb Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Thu, 27 Jan 2022 12:28:32 +1100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Move=20home=20switcher=20J?=
 =?UTF-8?q?S=20to=20external=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 exampleSite/assets/{ => img}/author.jpg       | Bin
 exampleSite/assets/{ => img}/logo.jpg         | Bin
 exampleSite/assets/js/home.js                 |  27 ++++++++++++++++++
 exampleSite/config/_default/languages.en.toml |   2 +-
 exampleSite/content/_index.md                 |   2 +-
 exampleSite/layouts/partials/home/custom.html |  23 ++-------------
 6 files changed, 31 insertions(+), 23 deletions(-)
 rename exampleSite/assets/{ => img}/author.jpg (100%)
 rename exampleSite/assets/{ => img}/logo.jpg (100%)
 create mode 100644 exampleSite/assets/js/home.js

diff --git a/exampleSite/assets/author.jpg b/exampleSite/assets/img/author.jpg
similarity index 100%
rename from exampleSite/assets/author.jpg
rename to exampleSite/assets/img/author.jpg
diff --git a/exampleSite/assets/logo.jpg b/exampleSite/assets/img/logo.jpg
similarity index 100%
rename from exampleSite/assets/logo.jpg
rename to exampleSite/assets/img/logo.jpg
diff --git a/exampleSite/assets/js/home.js b/exampleSite/assets/js/home.js
new file mode 100644
index 00000000..37210349
--- /dev/null
+++ b/exampleSite/assets/js/home.js
@@ -0,0 +1,27 @@
+function switchHomeLayout() {
+  const pageDiv = document.getElementById("page");
+  const profileDiv = document.getElementById("profile");
+  const layoutCode = document.querySelectorAll("code[id=layout]");
+  if (pageDiv.style.display === "none") {
+    pageDiv.style.display = "block";
+    profileDiv.style.display = "none";
+    layoutCode.forEach(function (el) {
+      el.innerText = "page";
+    });
+  } else {
+    pageDiv.style.display = "none";
+    profileDiv.style.display = "block";
+    layoutCode.forEach(function (el) {
+      el.innerText = "profile";
+    });
+  }
+}
+
+window.addEventListener("DOMContentLoaded", (event) => {
+  document.querySelectorAll("#switch-layout-button").forEach((button) =>
+    button.addEventListener("click", function (e) {
+      e.preventDefault();
+      switchHomeLayout();
+    })
+  );
+});
diff --git a/exampleSite/config/_default/languages.en.toml b/exampleSite/config/_default/languages.en.toml
index e8f977a8..b7c45ab0 100644
--- a/exampleSite/config/_default/languages.en.toml
+++ b/exampleSite/config/_default/languages.en.toml
@@ -13,7 +13,7 @@ dateFormat = "2 January 2006"
 
 [author]
   name = "Congo"
-  image = "author.jpg"
+  image = "img/author.jpg"
   # headline = ""
   bio = "This is an example author bio, and although there's a stock photo of a dog here, this article was actually created by a human. :dog:"
   links = [
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 89159701..24b50cd2 100755
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -16,8 +16,8 @@ This is a demo site built entirely using Congo. It also contains a complete set
   <span class="flex items-center justify-between grow dark:text-neutral-300">
     <span class="prose dark:prose-invert">This is a demo of the <code id="layout">page</code> layout.</span>
     <button
+      id="switch-layout-button"
       class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
-      onclick="switchLayout()"
     >
       Switch layout &orarr;
     </button>
diff --git a/exampleSite/layouts/partials/home/custom.html b/exampleSite/layouts/partials/home/custom.html
index b301686a..960ff02e 100644
--- a/exampleSite/layouts/partials/home/custom.html
+++ b/exampleSite/layouts/partials/home/custom.html
@@ -1,27 +1,8 @@
+{{ $jsHome := resources.Get "js/home.js" | resources.Minify | resources.Fingerprint "sha512" }}
 <div id="page">
   {{ partial "partials/home/page.html" . }}
 </div>
 <div id="profile" class="hidden h-full">
   {{ partial "partials/home/profile.html" . }}
 </div>
-
-<script type="text/javascript">
-  function switchLayout() {
-    const pageDiv = document.getElementById("page");
-    const profileDiv = document.getElementById("profile");
-    const layoutCode = document.querySelectorAll("code[id=layout]");
-    if (pageDiv.style.display === "none") {
-      pageDiv.style.display = "block";
-      profileDiv.style.display = "none";
-      layoutCode.forEach(function (el) {
-        el.innerText = "page";
-      });
-    } else {
-      pageDiv.style.display = "none";
-      profileDiv.style.display = "block";
-      layoutCode.forEach(function (el) {
-        el.innerText = "profile";
-      });
-    }
-  }
-</script>
+<script defer type="text/javascript" src="{{ $jsHome.RelPermalink }}" integrity="{{ $jsHome.Data.Integrity }}"></script>