From 68e1e251191b9c8e167a1e3a928a8caa4f82ab7a Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Mon, 29 Apr 2024 22:36:48 +0100
Subject: [PATCH] feat: caching for sidebar items from data

---
 assets/css/components/sidebar.css             |  4 ++
 assets/js/sidebar.js                          | 44 ++++++++++++++++++-
 .../components/sidebar/render-data.html       |  7 +--
 .../components/sidebar/render-items.html      | 12 +++--
 layouts/partials/scripts.html                 |  2 +-
 layouts/partials/sidebar-ng.html              |  4 +-
 6 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
index 5911fc2..fcfa35f 100644
--- a/assets/css/components/sidebar.css
+++ b/assets/css/components/sidebar.css
@@ -30,4 +30,8 @@
   .sidebar-item-inactive {
     @apply hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50;
   }
+
+  .sidebar-item-list-container {
+    @apply hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800;
+  }
 }
diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js
index 3b10eb4..895f9bc 100644
--- a/assets/js/sidebar.js
+++ b/assets/js/sidebar.js
@@ -1,3 +1,12 @@
+/**
+ * Check if the element is visible.
+ * @param {Element} element Dom element
+ * @returns boolean
+ */
+function isVisible(element) {
+  return element.offsetWidth > 0 || element.offsetHeight > 0;
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   const buttons = document.querySelectorAll(".hextra-sidebar-collapsible-button");
   buttons.forEach(function (button) {
@@ -5,8 +14,41 @@ document.addEventListener("DOMContentLoaded", function () {
       e.preventDefault();
       const list = button.parentElement.parentElement;
       if (list) {
-        list.classList.toggle("open")
+        list.classList.toggle("open");
       }
     });
   });
+
+  const isCached = "{{- site.Params.page.sidebar.cache | default false -}}" === "true";
+  const currentPagePath = window.location.href;
+
+  if (isCached) {
+    // find the current page in the sidebar and open the parent lists
+    const sidebar = document.querySelector(".hextra-sidebar-container");
+    if (sidebar) {
+      // find a tags and compare href with current page path
+      const links = sidebar.querySelectorAll("a");
+      links.forEach(function (link) {
+        const linkPath = link.href;
+
+        if (currentPagePath === linkPath) {
+          // add active class to the link
+          link.classList.add("sidebar-item-active");
+          link.classList.remove("sidebar-item-inactive");
+
+          if (!isVisible(link)) {
+            return;
+          }
+          // recursively open parent lists
+          let parent = link.parentElement;
+          while (parent && !parent.classList.contains("hextra-sidebar-container")) {
+            if (parent.tagName === "LI" && parent.classList.contains("sidebar-item-list")) {
+              parent.classList.add("open");
+            }
+            parent = parent.parentElement;
+          }
+        }
+      });
+    }
+  }
 });
diff --git a/layouts/partials/components/sidebar/render-data.html b/layouts/partials/components/sidebar/render-data.html
index cc2bc2f..f72a4a4 100644
--- a/layouts/partials/components/sidebar/render-data.html
+++ b/layouts/partials/components/sidebar/render-data.html
@@ -1,15 +1,16 @@
 {{- $page := .page -}}
 {{- $pageLink :=  $page.RelPermalink -}}
+{{- $cached := .cached | default false }}
 
 {{- range .data -}}
-  {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}}
+  {{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
   {{- $containsPage := hasPrefix $pageLink .link -}}
   {{- $shouldOpen := or (.open) $containsPage $active | default false -}}
 
-  <li class="{{ if $shouldOpen }}open{{ end }}">
+  <li class="sidebar-item-list {{ if $shouldOpen }}open{{ end }}">
     {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
     {{- if .items -}}
-      {{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink) -}}
+      {{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink "cached" $cached) -}}
     {{- end -}}
   </li>
 {{ end }}
diff --git a/layouts/partials/components/sidebar/render-items.html b/layouts/partials/components/sidebar/render-items.html
index 61549aa..c47dda2 100644
--- a/layouts/partials/components/sidebar/render-items.html
+++ b/layouts/partials/components/sidebar/render-items.html
@@ -1,21 +1,19 @@
 {{- $items := .items -}}
 {{- $pageLink := .link -}}
+{{- $cached := .cached | default false }}
 
 
 <div class="ltr:hx-pr-0 hx-overflow-hidden">
-  <ul
-    class='hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 before:hx-content-[""] ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800'
-  >
+  <ul class="sidebar-item-list-container">
     {{- range $items }}
-      {{- $active := or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link) -}}
+      {{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
       {{- $containsPage := hasPrefix $pageLink .link -}}
       {{- $shouldOpen := or (.open) $containsPage $active | default false -}}
 
-
-      <li class="hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
+      <li class="sidebar-item-list hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
         {{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
         {{- if .items -}}
-          {{- partial "components/sidebar/render-items" (dict "items" .items "link" .link) -}}
+          {{- partial "components/sidebar/render-items" (dict "items" .items "link" .link "cached" $cached) -}}
         {{- end -}}
       </li>
     {{- end -}}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index dbb4fe4..20edd40 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -4,7 +4,7 @@
 {{- $jsLang := resources.Get "js/lang.js" -}}
 {{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
 {{- $jsFileTree := resources.Get "js/filetree.js" -}}
-{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
+{{- $jsSidebar := resources.Get "js/sidebar.js" | resources.ExecuteAsTemplate "sidebar.js" . -}}
 {{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
 
 {{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
diff --git a/layouts/partials/sidebar-ng.html b/layouts/partials/sidebar-ng.html
index 8e7a6bf..770c7f3 100644
--- a/layouts/partials/sidebar-ng.html
+++ b/layouts/partials/sidebar-ng.html
@@ -45,9 +45,9 @@
       <ul class="hx-flex hx-flex-col hx-gap-1 max-md:hx-hidden">
         {{- with $data -}}
           {{- if $shouldCache -}}
-            {{- partialCached "components/sidebar/render-data" (dict "data" . "page" $context) $navRoot -}}
+            {{- partialCached "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) $navRoot -}}
           {{- else -}}
-            {{- partial "components/sidebar/render-data" (dict "data" . "page" $context) -}}
+            {{- partial "components/sidebar/render-data" (dict "data" . "page" $context "cached" $shouldCache) -}}
           {{- end -}}
         {{- end -}}
         {{- partialCached "components/sidebar/bottom" $context site.Home -}}