refactor: replace fancybox with libra

Former-commit-id: 1bf6de58ab13fc385a24467c84b9047bddea24da

6 files changed, 14 insertions, 19 deletions

diff --git a/layouts/_markup/render-image.html b/layouts/_markup/render-image.html
index e2fbfd7f..15b2a4b5 100644
--- a/layouts/_markup/render-image.html
+++ b/layouts/_markup/render-image.html
@@ -4,12 +4,11 @@
 {{- $class := .Attributes.class | default "" -}}
 
 <figure>
-    <a href="{{ $src }}" data-fancybox data-caption="{{ $caption }}" class="fancybox-link">
-        <img
-            class="lazy {{ $class }}" loading="lazy"
-            src="{{ $src }}" alt="{{ $alt }}"
-        />
-    </a>
+    <img
+        class="lazy {{ $class }}" loading="lazy"
+        src="{{ $src }}" alt="{{ $alt }}"
+        data-libra
+    />
     {{- if $caption }}
     <figcaption>
         <h4>{{ $caption | markdownify }}</h4>
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 414b4216..2b84ea3c 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -12,7 +12,7 @@
 
 {{ partial "scripts/toc-js" . }}
 {{ partial "scripts/littlefoot-js" . }}
-{{ partial "scripts/fancybox-js" . }}
+{{ partial "scripts/libra-js" . }}
 {{ partial "scripts/aplayer-js" . }}
 
 {{ if .File }}
diff --git a/layouts/_partials/scripts/fancybox-js.html b/layouts/_partials/scripts/fancybox-js.html
deleted file mode 100644
index d810dd29..00000000
--- a/layouts/_partials/scripts/fancybox-js.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<script src="/js/fancybox.umd.js"></script>
-<script>
-Fancybox.bind("[data-fancybox]", {
-  on: {
-    close: () => {
-      umami.track('🖼️ Fancybox Closed');
-    },
-  },
-});
-</script>
diff --git a/layouts/_partials/scripts/libra-js.html b/layouts/_partials/scripts/libra-js.html
new file mode 100644
index 00000000..96a11bbb
--- /dev/null
+++ b/layouts/_partials/scripts/libra-js.html
@@ -0,0 +1,6 @@
+<script type="module">
+  import LightBox from '/js/libra.min.js';
+  const lightbox = new LightBox({
+    container: 'article'
+  });
+</script>
diff --git a/layouts/_shortcodes/book.html b/layouts/_shortcodes/book.html
index 6cb0c8e8..7ea49089 100644
--- a/layouts/_shortcodes/book.html
+++ b/layouts/_shortcodes/book.html
@@ -1,6 +1,6 @@
 <div class="book-showcase">
     <div class="book-cover">
-        <a href="{{ .Get "cover" }}" data-fancybox>
+        <a href="{{ .Get "cover" }}" data-libra>
             <img class="lazy" src="{{ .Get "cover" }}" loading="lazy"  />
         </a>
     </div>
diff --git a/layouts/_shortcodes/bookcard.html b/layouts/_shortcodes/bookcard.html
index d0fe3a4a..d128193b 100644
--- a/layouts/_shortcodes/bookcard.html
+++ b/layouts/_shortcodes/bookcard.html
@@ -4,7 +4,7 @@
 {{- if $book }}
     <div class="markdown-body">
         <div class="mx-auto max-w-[50%] ">
-            <img class="no-fancybox block w-full" src="{{ $book.Params.cover }}" />
+            <img class="block w-full" src="{{ $book.Params.cover }}" />
         </div>
         <h3 class="book-title">
             <a href="{{ $book.Permalink }}">{{ $book.Title }}</a>