Improvements, add unfold.js

5 files changed, 135 insertions, 6 deletions

diff --git a/deploy.sh b/deploy.sh
index 2f6a403..c200cbf 100755
--- a/deploy.sh
+++ b/deploy.sh
@@ -10,4 +10,3 @@ docker push "$IMAGE"
 
 # Deploy
 ssh jan.systems 'cd deployments/garden && bash dc-restart.sh'
-
diff --git a/feed.scm b/feed.scm
index 4add4f8..c90bd11 100644
--- a/feed.scm
+++ b/feed.scm
@@ -86,16 +86,19 @@
       (define link (pipe path
 			 (@ replace (format "^~A\\/?" src-dir) "/")
 			 (@ replace "\\.md$" "")))
-      (format "* [~A (~A) [~A]](~A)" title date kind link))
+      (format "<li class=\"archive-entry\"><a href=\"~A\">~A</a><small><span>[~A]</span> (~A)</small></li>"
+	      link title kind date))
 
     (define index-lis (map to-li fm-sorted))
     (define out-md (string-append "---\n"
-				  "title: Archive\n"
+				  "title: archive – jan's garden\n"
 				  "hide-body-title: defined\n"
 				  "---\n"
 				  "# Archive\n\n"
 				  "Follow via [RSS](/feed.xml) ([Huh?](https://aboutfeeds.com/))\n\n"
-				  (string-join index-lis "\n")))
+				  (string-append "<ul class=\"archive-list\">"
+						 (string-join index-lis "\n")
+						 "</ul>")))
 
     (with-output-to-file (make-pathname archive-dir "index.md")
       (λ () (print out-md))))
diff --git a/static/style.css b/static/style.css
index 7c385c6..43b6096 100644
--- a/static/style.css
+++ b/static/style.css
@@ -94,6 +94,7 @@ a, a:visited {
     color: var(--link-color);
     text-decoration: none;
     font-weight: bold;
+    cursor: pointer;
 }
 
 a:hover {
@@ -204,3 +205,34 @@ em {
     padding: 0 2px;
     background-color: var(--em-bg-color);
 }
+
+.webrings p {
+    margin: 0 !important;
+}
+
+.archive-list {
+    margin-left: 15px;
+    padding-left: 0;
+}
+
+.archive-entry {
+    list-style: disclosure-closed;
+    margin-bottom: 8px;
+}
+
+.archive-entry a {
+    line-height: 25px;
+    display: block;
+    margin-bottom: 6px;
+}
+
+.archive-entry small {
+    margin-top: -10px;
+    display: block;
+    font-size: 16px;
+}
+
+.archive-entry small span {
+    color: var(--header-color);
+}
+
diff --git a/static/unfold.js b/static/unfold.js
new file mode 100644
index 0000000..e27dbb5
--- /dev/null
+++ b/static/unfold.js
@@ -0,0 +1,86 @@
+window.Unfold = {
+    activate: function (opts) {
+        const separator = opts.separator || "hr";
+        const content = opts.content || "main";
+        const theme = opts.theme || "moon";
+        const revealCdn = opts.revealCdn || "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.6.0";
+
+        const contentElem = document.querySelector(content);
+        if (!contentElem) {
+            console.error(`Unfold: content element not found`);
+            return;
+        }
+
+        const nodes = [...contentElem.childNodes];
+
+        const newBody = document.createElement("body");
+        newBody.setAttribute("class", "reveal");
+        const slides = document.createElement("div");
+        slides.setAttribute("class", "slides");
+        newBody.appendChild(slides);
+
+        const newHead = document.createElement("head");
+
+        let currentSlide = document.createElement("section");
+        for (const node of nodes) {
+            if (node.hasAttribute && node.hasAttribute("data-unfold-hidden")) {
+                continue;
+            }
+
+            if (node.tagName?.toLowerCase() === separator.toLowerCase()) {
+                slides.appendChild(currentSlide);
+                currentSlide = document.createElement("section");
+            } else {
+                currentSlide.appendChild(node);
+            }
+        }
+        slides.appendChild(currentSlide);
+
+        const revealCssTag = document.createElement("link");
+        revealCssTag.rel = "stylesheet";
+        revealCssTag.href = `${revealCdn}/css/reveal.min.css`;
+        newHead.appendChild(revealCssTag);
+
+        const revealThemeCssTag = document.createElement("link");
+        revealThemeCssTag.rel = "stylesheet";
+        revealThemeCssTag.href = `${revealCdn}/css/theme/${theme}.css`;
+        newHead.appendChild(revealThemeCssTag);
+
+        const revealJsTag = document.createElement("script");
+        revealJsTag.src = `${revealCdn}/js/reveal.min.js`;
+        revealJsTag.onload = () => {
+	    // activate Reveal slideshow
+            Reveal.initialize();
+	    // fix vertical positioning issue that happens often
+	    setTimeout(() => Reveal.sync(), 100);
+        };
+        newHead.appendChild(revealJsTag);
+
+        document.head.replaceWith(newHead);
+        document.body.replaceWith(newBody);
+    },
+    bind: function (selector, opts = {}) {
+        const elem = document.querySelector(selector);
+        elem.addEventListener("click", () => {
+            Unfold.activate(opts)
+            // enable back button by hooking into History API
+            const qp = new URLSearchParams(location.search);
+            qp.set("unfold", "1");
+            history.pushState({}, "", `${location.protocol}//${location.host}${location.pathname}?${qp.toString()}`);
+        })
+
+        const qp = new URLSearchParams(location.search);
+        if (qp.get("unfold") === "1") {
+            Unfold.activate(opts)
+        }
+    }
+}
+
+const previousOnPopState = window.onpopstate;
+window.onpopstate = function() {
+    if (typeof previousOnPopState === "function") {
+	    previousOnPopState();
+    }
+    location.reload();
+};
+
diff --git a/template.html b/template.html
index b7fa436..5ab8123 100644
--- a/template.html
+++ b/template.html
@@ -59,7 +59,8 @@ $if(mathjax)$
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
 $endif$
   $math$
-$endif$
+  $endif$
+  <link rel="authorization_endpoint" href="https://indieauth.com/auth">
 </head>
 <body>
   <div class="header-row">
@@ -82,7 +83,10 @@ $endif$
   <h1>$title$ $if(date)$<small>($date$)</small>$endif$ $if(kind)$<small>[$kind$]</small>$endif$</h1>
   $endif$
   $endif$
+
+<main>
 $body$
+</main>
 
 <script>
 const b = document.createElement("button");
@@ -141,10 +145,15 @@ $endif$
   <a class="u-url" href="https://github.com/jantuomi" rel="me">GitHub</a>
   <p class="p-note">Digital gardener, senior software engineer by trade.</p>
   <img class="u-photo" src="https://jan.systems/files/Jan_Tuomi_headshot.jpg" loading="lazy">
-  <p class="p-name"Jan Tuomi</p>
+  <p class="p-name">Jan Tuomi</p>
   <p class="p-nickname">@jantuomi</p>
   <p class="p-country-name">Finland</p>
 </div>
 
+<script src="/static/unfold.js"></script>
+<script>
+  Unfold.bind("#unfold");
+</script>
+
 </body>
 </html>