From b50874f865fca0cf53877969f54ca847e567aa76 Mon Sep 17 00:00:00 2001
From: Benny Istanto <bennyistanto@outlook.com>
Date: Fri, 10 Apr 2026 07:26:14 +0700
Subject: [PATCH 1/2] Shorten datasets description

This PR will solve https://github.com/GFDRR/rdl-jkan/issues/154
---
 _layouts/dataset.html | 14 +++++++++++++-
 css/modern-theme.css  | 40 ++++++++++++++++++++++++++++++++++++++++
 index.html            | 12 +++++++++++-
 3 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/_layouts/dataset.html b/_layouts/dataset.html
index 86094d229..8c526afff 100644
--- a/_layouts/dataset.html
+++ b/_layouts/dataset.html
@@ -28,7 +28,19 @@
             <h1 class="dataset-title">
               <span property="dct:title">{{ page.title }}</span>
             </h1>
-            <p class="dataset-description" property="dct:description">{{ page.description }}</p>
+            <div class="dataset-description desc-truncate" property="dct:description">
+              <p class="desc-text">{{ page.description }}</p>
+              <button class="desc-toggle" style="display:none;" onclick="this.parentElement.classList.toggle('expanded'); this.textContent = this.parentElement.classList.contains('expanded') ? 'Show less' : 'Show more';">Show more</button>
+            </div>
+            <script>
+              (function() {
+                var el = document.querySelector('.dataset-description .desc-text');
+                var btn = document.querySelector('.dataset-description .desc-toggle');
+                if (el && btn && el.scrollHeight > el.clientHeight) {
+                  btn.style.display = '';
+                }
+              })();
+            </script>
 
             <!-- Quick Info Cards -->
             <div class="quick-info">
diff --git a/css/modern-theme.css b/css/modern-theme.css
index b8daf1395..b812296b8 100644
--- a/css/modern-theme.css
+++ b/css/modern-theme.css
@@ -616,6 +616,10 @@ body {
   font-size: 15px;
   color: var(--color-text-secondary);
   line-height: 1.6;
+  margin-bottom: 0;
+}
+
+.dataset-card .desc-truncate {
   margin-bottom: 20px;
 }
 
@@ -1336,3 +1340,39 @@ body {
 .mb-2 { margin-bottom: var(--spacing-md); }
 .mb-3 { margin-bottom: var(--spacing-lg); }
 .mb-4 { margin-bottom: var(--spacing-xl); }
+
+/* ====================================
+   17. Description Truncation
+   ==================================== */
+.desc-truncate {
+  position: relative;
+}
+
+.desc-truncate .desc-text {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  transition: all 0.2s ease;
+}
+
+.desc-truncate.expanded .desc-text {
+  -webkit-line-clamp: unset;
+  display: block;
+}
+
+.desc-toggle {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--color-primary, #2563eb);
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  font-weight: 500;
+}
+
+.desc-toggle:hover {
+  text-decoration: underline;
+}
diff --git a/index.html b/index.html
index 9878283a1..5b8d30ac3 100644
--- a/index.html
+++ b/index.html
@@ -730,7 +730,17 @@ <h3>
                 <i class="fa fa-magic" aria-hidden="true"></i> Semantic
               </span>
             </h3>
-            <p class="card-description" x-text="dataset.metadata.description || ''"></p>
+            <div class="desc-truncate" :class="{ 'expanded': expanded }"
+                 x-data="{ expanded: false, overflows: false }"
+                 x-init="$nextTick(() => { overflows = $refs.descText.scrollHeight > $refs.descText.clientHeight })">
+              <p class="card-description desc-text"
+                 x-ref="descText"
+                 x-text="dataset.metadata.description || ''"></p>
+              <button class="desc-toggle"
+                      x-show="overflows"
+                      x-on:click.stop="expanded = !expanded"
+                      x-text="expanded ? 'Show less' : 'Show more'"></button>
+            </div>
 
             <div class="card-footer">
               <div class="meta-item" x-show="dataset.metadata.creator && dataset.metadata.creator.name">

From 26b0019b05dd61b8864a17d890a7d96317661772 Mon Sep 17 00:00:00 2001
From: Lydia Scarf <lydia@oldgrowth.city>
Date: Tue, 2 Jun 2026 13:23:09 +0200
Subject: [PATCH 2/2] Use consistent, idiomatic Alpine.js patterns

---
 _layouts/dataset.html | 19 +++++++------------
 index.html            | 14 ++++++--------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/_layouts/dataset.html b/_layouts/dataset.html
index 8c526afff..4fd6af7af 100644
--- a/_layouts/dataset.html
+++ b/_layouts/dataset.html
@@ -28,19 +28,14 @@
             <h1 class="dataset-title">
               <span property="dct:title">{{ page.title }}</span>
             </h1>
-            <div class="dataset-description desc-truncate" property="dct:description">
-              <p class="desc-text">{{ page.description }}</p>
-              <button class="desc-toggle" style="display:none;" onclick="this.parentElement.classList.toggle('expanded'); this.textContent = this.parentElement.classList.contains('expanded') ? 'Show less' : 'Show more';">Show more</button>
+            <div
+              x-data="{ open: false }"
+              x-bind:class="'dataset-description desc-truncate' + (open ? ' expanded' : '')"
+              property="dct:description"
+            >
+              <p x-ref="description" class="desc-text">{{ page.description }}</p>
+              <button x-show="$refs.description.scrollHeight > $refs.description.clientHeight" class="desc-toggle" @click="open = ! open" x-text="open ? 'Show less' : 'Show more'"></button>
             </div>
-            <script>
-              (function() {
-                var el = document.querySelector('.dataset-description .desc-text');
-                var btn = document.querySelector('.dataset-description .desc-toggle');
-                if (el && btn && el.scrollHeight > el.clientHeight) {
-                  btn.style.display = '';
-                }
-              })();
-            </script>
 
             <!-- Quick Info Cards -->
             <div class="quick-info">
diff --git a/index.html b/index.html
index 5b8d30ac3..a3151645f 100644
--- a/index.html
+++ b/index.html
@@ -730,16 +730,14 @@ <h3>
                 <i class="fa fa-magic" aria-hidden="true"></i> Semantic
               </span>
             </h3>
-            <div class="desc-truncate" :class="{ 'expanded': expanded }"
-                 x-data="{ expanded: false, overflows: false }"
-                 x-init="$nextTick(() => { overflows = $refs.descText.scrollHeight > $refs.descText.clientHeight })">
+            <div
+              x-data="{ open: false }"
+              x-bind:class="'desc-truncate' + (open ? ' expanded' : '')"
+            >
               <p class="card-description desc-text"
-                 x-ref="descText"
+                 x-ref="description"
                  x-text="dataset.metadata.description || ''"></p>
-              <button class="desc-toggle"
-                      x-show="overflows"
-                      x-on:click.stop="expanded = !expanded"
-                      x-text="expanded ? 'Show less' : 'Show more'"></button>
+              <button x-show="$refs.description.scrollHeight > $refs.description.clientHeight" class="desc-toggle" @click="open = ! open" x-text="open ? 'Show less' : 'Show more'"></button>
             </div>
 
             <div class="card-footer">