christianermann.dev-hugo

commit 0c727fa460e8568be4c53b4213d9286645545ae3
parent a8b94c046d6a107a07f893726f72fb5f2034fed2
Author: Christian Ermann <christianermann@gmail.com>
Date:   Mon, 30 Jan 2023 00:10:49 -0500

Join test web loop

Diffstat:
A
layouts/partials/footer.html
 | 
7
+++++++
A
layouts/partials/header.html
 | 
12
++++++++++++
A
static/css/custom.css
 | 
17
+++++++++++++++++
A
static/js/web-loop.js
 | 
35
+++++++++++++++++++++++++++++++++++

4 files changed, 71 insertions(+), 0 deletions(-)
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -0,0 +1,7 @@
+<footer>
+    {{ range .Site.Menus.footer }}
+        <a href="{{ .URL }}">{{ .Name }}</a>.
+    {{ end }}
+    <p>Copyright &copy; {{ now.Year }} {{ .Site.Params.author }}.</p>
+    <script src="{{ "/js/web-loop.js" | urlize | relURL }}"></script>
+</footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -0,0 +1,12 @@
+<header>
+    <nav>
+        {{ range .Site.Menus.main }}
+            <a href="{{ .URL | relURL }}">{{ .Name }}</a>.
+        {{ end }}
+    </nav>
+    <nav id="web-loop" site="christianermann.dev">
+        <a id="main">Test Loop</a>:
+        <a id="prev">Prev</a>.
+        <a id="next">Next</a>.
+    </nav>
+</header>
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -0,0 +1,17 @@
+
+header {
+    padding-bottom: 20px;
+}
+
+nav {
+    float: left;
+}
+
+#web-loop {
+    float: right;
+}
+
+#main, #prev, #next {
+    color: #24a5d4;
+}
+
diff --git a/static/js/web-loop.js b/static/js/web-loop.js
@@ -0,0 +1,35 @@
+
+const WEB_LOOP_DATA_URL = `https://github.com/c2000e/web-loops/blob/main/test-loop.json`;
+
+window.onload = function() {
+
+    const webLoop = document.getElementById("web-loop");
+    const thisSite = webLoop.getAttribute("site");
+
+    fetch(WEB_LOOP_DATA_URL)
+      .then((response) => response.json())
+      .then((sites) => {
+          const thisSiteIndex = sites.findIndex(
+              (site) => site.name === thisSite
+          );
+
+          let prevSiteIndex = thisSiteIndex - 1;
+          if (prevSiteIndex < 0) prevSiteIndex = sites.length - 1;
+
+          let nextSiteIndex = thisSiteIndex + 1;
+          if (nextSiteIndex > sites.length - 1) nextSiteIndex = 0;
+
+          const mainLink = webLoop.querySelector("#main");
+          const prevLink = webLoop.querySelector("#prev");
+          const nextLink = webLoop.querySelector("#next");
+
+          console.log(thisSiteIndex);
+          console.log(prevSiteIndex);
+          console.log(nextSiteIndex);
+
+          mainLink.href = sites[0].url;
+          prevLink.href = sites[prevSiteIndex].url;
+          nextLink.href = sites[nextSiteIndex].url;
+      });
+}
+