From ab8b6a21723cffc3becfc25fe9e533b3a033237b Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Mon, 15 Apr 2024 13:43:43 +0200
Subject: [PATCH 1/7] DOC-660 | Improve logic for "Show more"

Don't use conflicting detection of long code blocks (element height vs. number of lines). Ensure we always reveal ~5 lines or don't collapse content. Also don't collapse code blocks already hidden by default ("Show output").
---
 site/themes/arangodb-docs-theme/static/css/theme.css    | 7 +++++--
 site/themes/arangodb-docs-theme/static/js/codeblocks.js | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index a082f9cf37..f17d1db6a3 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -1537,7 +1537,10 @@ li > code {
     font-family: Consolas,liberation mono,Menlo,Courier,monospace;
     padding: 28px;
     font-size: 1rem;
-    max-height: calc(17 * 1.8rem);
+}
+
+.copy-to-clipboard > .copy-to-clipboard-code.code-long {
+    max-height: calc(15 * 1.8rem);
     overflow: hidden;
 }
 
@@ -1546,7 +1549,7 @@ li > code {
 }
 
 .copy-to-clipboard > .copy-to-clipboard-code.expanded {
-    max-height: 100%;
+    max-height: unset;
 }
 
 pre > .code-show-more {
diff --git a/site/themes/arangodb-docs-theme/static/js/codeblocks.js b/site/themes/arangodb-docs-theme/static/js/codeblocks.js
index ad0fbfb7a7..7900486ec4 100644
--- a/site/themes/arangodb-docs-theme/static/js/codeblocks.js
+++ b/site/themes/arangodb-docs-theme/static/js/codeblocks.js
@@ -15,8 +15,11 @@ function initCopyToClipboard() {
             }
             var span = $('<span>').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).attr("onclick", "copyCode(event);")
             code.before(span);
-            if ( code.text().split(/\r\n|\r|\n/).length > 16) {
-              var showMore = $('<button class="code-show-more"></button>')
+            // n-times line-height * root em, larger than to-be-applied max-height to always reveal some lines
+            // False for currently collapsed code ("Show output" with display: none)
+            if ( code.prop('scrollHeight') > 20 * 1.8 * 16 ) {
+              code.addClass('code-long');
+              var showMore = $('<button class="code-show-more"></button>');
               code.after(showMore);
             }
 

From 97bbf6558ad5e9eee83aba15451a33ec082db5f4 Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 17:28:32 +0200
Subject: [PATCH 2/7] Fix regression with hash-only links that shouldn't be
 aliased

An anchor link does not contain a slash to split by. The second element is thus undefined and it got spliced in, then turned into an extra slash, breaking the fragment identifier.
---
 site/themes/arangodb-docs-theme/static/js/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/themes/arangodb-docs-theme/static/js/theme.js b/site/themes/arangodb-docs-theme/static/js/theme.js
index f90c3f8ef4..7b72c13986 100644
--- a/site/themes/arangodb-docs-theme/static/js/theme.js
+++ b/site/themes/arangodb-docs-theme/static/js/theme.js
@@ -395,7 +395,7 @@ function aliazeLinks(parentSelector, linkSelector) {
 
   $(parentSelector).find(linkSelector).each(function() {
     $(this).attr("href", function(index, old) {
-          if (old == undefined) return old;
+          if (old == undefined || old.startsWith("#")) return old;
           let splitLink = old.split("/");
           let linkVersion = splitLink[1];
           let alias = nameAliasMapping[linkVersion] || linkVersion;

From 7110b50aa4cb93797cac3dab645de3e7c4aba959 Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 17:32:08 +0200
Subject: [PATCH 3/7] Split code for copy to clipboard and adding the Show more
 button

This allows to independently call the latter, which we need to do for tabbed content for which we don't know the height until it is activated. The the event handler at a higher level so that it can handle buttons added after page load

Also remove some dead code for copy to clipboard.
---
 .../static/js/codeblocks.js                   | 50 +++++++++----------
 .../arangodb-docs-theme/static/js/theme.js    |  6 ++-
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/site/themes/arangodb-docs-theme/static/js/codeblocks.js b/site/themes/arangodb-docs-theme/static/js/codeblocks.js
index 7900486ec4..18d109a25e 100644
--- a/site/themes/arangodb-docs-theme/static/js/codeblocks.js
+++ b/site/themes/arangodb-docs-theme/static/js/codeblocks.js
@@ -1,34 +1,30 @@
+function addShowMoreButton(parentElem) {
+    $(parentElem).find("pre > code").each(function() {
+        code = $(this);
+        // n-times line-height * root em, larger than to-be-applied max-height to always reveal some lines
+        // False for currently collapsed code ("Show output" with display: none)
+        if (!code.hasClass('code-long') && code.prop('scrollHeight') > 20 * 1.8 * 16 ) {
+            code.addClass('code-long');
+            var showMore = $('<button class="code-show-more"></button>');
+            code.after(showMore);
+        }
+    });
+}
+
 function initCopyToClipboard() {
-    $('code').each(function() {
-        var code = $(this);
-        var parent = code.parent();
-        var inPre = parent.prop('tagName') == 'PRE';
+    $('article pre > code').each(function() {
+        code = $(this);
+        code.addClass('copy-to-clipboard-code');
+        code.parent().addClass( 'copy-to-clipboard' );
 
-        if (inPre) {
-            code.addClass('copy-to-clipboard-code');
-            if( inPre ){
-                parent.addClass( 'copy-to-clipboard' );
-            }
-            else{
-                code.replaceWith($('<span/>', {'class': 'copy-to-clipboard'}).append(code.clone() ));
-                code = parent.children('.copy-to-clipboard').last().children('.copy-to-clipboard-code');
-            }
-            var span = $('<span>').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).attr("onclick", "copyCode(event);")
-            code.before(span);
-            // n-times line-height * root em, larger than to-be-applied max-height to always reveal some lines
-            // False for currently collapsed code ("Show output" with display: none)
-            if ( code.prop('scrollHeight') > 20 * 1.8 * 16 ) {
-              code.addClass('code-long');
-              var showMore = $('<button class="code-show-more"></button>');
-              code.after(showMore);
-            }
+        var span = $('<span>').addClass("copy-to-clipboard-button").attr("title", window.T_Copy_to_clipboard).attr("onclick", "copyCode(event);")
+        code.before(span);
 
-            span.mouseleave( function() {
-                setTimeout(function(){
-                    span.removeClass("tooltipped");
-                },1000);
+        span.mouseleave(function() {
+            setTimeout(function() {
+                span.removeClass("tooltipped");
+            }, 1000);
         });
-    }
     });
 }
 
diff --git a/site/themes/arangodb-docs-theme/static/js/theme.js b/site/themes/arangodb-docs-theme/static/js/theme.js
index 7b72c13986..3998786edd 100644
--- a/site/themes/arangodb-docs-theme/static/js/theme.js
+++ b/site/themes/arangodb-docs-theme/static/js/theme.js
@@ -199,11 +199,11 @@ function internalLinkListener() {
 }
 
 function codeShowMoreListener() {
-  $('.code-show-more').click(function(event) {
+  $('article').on('click', '.code-show-more', function(event) {
     var t = $(event.target)
     t.toggleClass("expanded")
     t.prev().toggleClass("expanded")
-  })
+  });
 }
 
 function trackPageView(title, urlPath) {
@@ -222,6 +222,7 @@ function trackPageView(title, urlPath) {
 function initArticle(url) {
   restoreTabSelections();
   initCopyToClipboard();
+  addShowMoreButton('article');
   initClickHandlers();
   goToTop();
   styleImages();
@@ -324,6 +325,7 @@ function switchTab(tabGroup, tabId, event) {
 
   allTabItems.removeClass("selected");
   targetTabItems.addClass("selected");
+  addShowMoreButton(targetTabItems);
   if (event) {
       // Keep relative offset of tab in viewport to avoid jumping content
       var topAfter = clickedTab.getBoundingClientRect().top;

From 177068a56890d6a4db07875b0becf2b53a36ee12 Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 17:32:38 +0200
Subject: [PATCH 4/7] Use .on("click", ...) over the deprecated .click(...)

---
 site/themes/arangodb-docs-theme/static/js/theme.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/site/themes/arangodb-docs-theme/static/js/theme.js b/site/themes/arangodb-docs-theme/static/js/theme.js
index 3998786edd..cf6e186757 100644
--- a/site/themes/arangodb-docs-theme/static/js/theme.js
+++ b/site/themes/arangodb-docs-theme/static/js/theme.js
@@ -18,9 +18,8 @@ function menuToggleClick(event) {
     toggleMenuItem(event);
 }
 
-
 function menuEntryClickListener() {
-    $('.menu-link').click(function(event) {
+    $('.menu-link').on("click", function(event) {
         event.preventDefault();
         if (event.target.pathname == window.location.pathname) {
             toggleMenuItem(event)
@@ -42,7 +41,7 @@ function renderVersion() {
             entry.style.display = 'none';
         }
     }
-};
+}
 
 function closeAllEntries() {
     $(".dd-item.active").removeClass("active");
@@ -183,7 +182,7 @@ function loadPage(target) {
 }
 
 function internalLinkListener() {
-  $('.link').click(function(event) {
+  $('.link').on("click", function(event) {
     if (event.target.getAttribute("target")) {
       // external link
       return;
@@ -192,7 +191,7 @@ function internalLinkListener() {
     updateHistory(event.target.getAttribute('href'))
   });
 
-  $('.card-link').click(function(event) {
+  $('.card-link').on('click', function(event) {
     event.preventDefault();
     updateHistory(this.getAttribute('href'))
   });
@@ -510,14 +509,14 @@ function hideEmptyOpenapiDiv() {
 function initClickHandlers() {
     hideEmptyOpenapiDiv();
 
-    $(".openapi-prop").click(function(event) {
+    $(".openapi-prop").on("click", function(event) {
         if (this === event.target) {
             $(event.target).toggleClass("collapsed");
             $(event.target).find('.openapi-prop-content').first().toggleClass("hidden");
         }
     });
     
-    $(".openapi-table.show-children").click(function(event) {
+    $(".openapi-table.show-children").on("click", function(event) {
         $(event.target).toggleClass("collapsed");
         $(event.target).next(".openapi-table").toggleClass("hidden");
     });

From 53812085b6d62ffc91a42d9cef10d93b7b730568 Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 23:43:56 +0200
Subject: [PATCH 5/7] Remove rounding from tab underline

---
 site/themes/arangodb-docs-theme/static/css/theme.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index f17d1db6a3..d052701b50 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -521,7 +521,8 @@ a.section-link {
     position: relative;
     max-width: 300px;
     background-color: transparent;
-    border: 0px;
+    border: 0;
+    border-radius: 0;
     text-decoration: none;
     white-space: nowrap;
     overflow: hidden;

From ce4cb90fb24dd6f979ab1571d40517111e02ac3d Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 23:46:48 +0200
Subject: [PATCH 6/7] Apply code block styles also independently of copy to
 clipboard class

---
 site/themes/arangodb-docs-theme/static/css/theme.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index d052701b50..d5c9a72882 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -1530,7 +1530,7 @@ li > code {
     color: var(--green-700);
 }
 
-.copy-to-clipboard > .copy-to-clipboard-code {
+pre > code {
     margin: 0;
     word-break: break-word;
     white-space: break-spaces;
@@ -1540,17 +1540,17 @@ li > code {
     font-size: 1rem;
 }
 
-.copy-to-clipboard > .copy-to-clipboard-code.code-long {
+.code-long {
     max-height: calc(15 * 1.8rem);
     overflow: hidden;
 }
 
-.copy-to-clipboard:hover > .copy-to-clipboard-button {
-    display: flex;
+.code-long.expanded {
+    max-height: unset;
 }
 
-.copy-to-clipboard > .copy-to-clipboard-code.expanded {
-    max-height: unset;
+.copy-to-clipboard:hover > .copy-to-clipboard-button {
+    display: flex;
 }
 
 pre > .code-show-more {

From 98d0bc7e7429db5c8cee56690851fed7fc12be09 Mon Sep 17 00:00:00 2001
From: Simran Spiller <simran@arangodb.com>
Date: Tue, 16 Apr 2024 23:47:04 +0200
Subject: [PATCH 7/7] CSS: Normalize 0px to 0

---
 .../arangodb-docs-theme/static/css/theme.css  | 56 +++++++++----------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/site/themes/arangodb-docs-theme/static/css/theme.css b/site/themes/arangodb-docs-theme/static/css/theme.css
index d5c9a72882..95a40caccf 100644
--- a/site/themes/arangodb-docs-theme/static/css/theme.css
+++ b/site/themes/arangodb-docs-theme/static/css/theme.css
@@ -235,7 +235,7 @@ ul ul, ul ol, ol ul, ol ol {
     margin: 0;
     padding: 2px;
     word-break: break-word;
-    border-radius: 0px;
+    border-radius: 0;
     background: var(--gray-100);
     box-shadow: none;
     color: var(--gray-950);
@@ -252,7 +252,6 @@ ul ul, ul ol, ol ul, ol ol {
     text-decoration: none;
 }
 
-
 hr {
     width: 100%;
     height: 4px;
@@ -263,7 +262,6 @@ hr {
     border: none;
 }
 
-
 pre {
     margin-bottom: 2rem;
     background-color: var(--CODEBLOCK-BACKGROUND-COLOR);
@@ -407,11 +405,11 @@ table.fixed code {
 }
 
 /* .card:hover {
-    box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
+    box-shadow: rgb(149 157 165 / 20%) 0 8px 24px;
 } */
 
 .cards > a.card-link {
-    border-bottom: 0px;
+    border-bottom: 0;
 }
 
 @media screen and (max-width: 768px) {
@@ -489,8 +487,8 @@ a.section-link {
 
 .loader{
     position: fixed;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
     z-index: 9999;
@@ -538,9 +536,9 @@ a.section-link {
 .tab-nav-button.selected::after {
     content: "";
     position: absolute;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    left: 0;
+    right: 0;
+    bottom: 0;
     height: 2px;
     background-color: var(--HEADERS-COLOR)
 }
@@ -568,7 +566,7 @@ body .page-container {
         'header header'
         'sidenav contents'
         'sidenav footer';
-    grid-template-columns: minmax(0px, auto) 4fr;
+    grid-template-columns: minmax(0, auto) 4fr;
     grid-template-rows: 4rem 1fr;
     background: var(--CONTENT-BACKGROUND-COLOR);
 }
@@ -638,7 +636,7 @@ body .page-container {
     vertical-align: middle;
     font-weight: 900;
     font-size: 18px;
-    padding-top: 0px;
+    padding-top: 0;
     color: var(--gray-100);
 }
 
@@ -703,7 +701,7 @@ body .page-container {
     position: relative;
     height: 64px;
     align-items: center;
-    padding: 6px 10px 0px 10px;
+    padding: 6px 10px 0 10px;
 }
 
 header .logo {
@@ -981,7 +979,7 @@ header .logo {
     vertical-align: middle;
     font-weight: 900;
     font-size: 10px;
-    padding-top: 0px;
+    padding-top: 0;
     color: var(--gray-300);
 }
 
@@ -993,7 +991,7 @@ header .logo {
     vertical-align: middle;
     font-weight: 900;
     font-size: 10px;
-    padding-top: 0px;
+    padding-top: 0;
     color: var(--gray-300);
 }
 
@@ -1082,7 +1080,7 @@ header .logo {
 }
 
 #breadcrumbs > ol {
-    margin: 5px 0px 0px 80px;
+    margin: 5px 0 0 80px;
     white-space: normal;
 }
 
@@ -1143,7 +1141,7 @@ header .logo {
     text-decoration: none;
     color: #444;
     background: 0 0;
-    border-bottom: 0px;
+    border-bottom: 0;
 }
 
 .edit-page > .edit-page-icon:after {
@@ -1424,7 +1422,7 @@ article > h3 > code,
 article > h4 > code,
 article > h5 > code,
 article > h6 > code {
-    padding-top: 0px;
+    padding-top: 0;
     white-space: normal;
 }
 
@@ -1457,7 +1455,7 @@ h6:hover .header-link {
 
 /* Codeblocks */
 pre {
-    border-radius: 0px;
+    border-radius: 0;
     background: var(--gray-100);
     box-shadow: none;
     position: relative;
@@ -1471,7 +1469,7 @@ code, p code {
     padding: 2px;
     word-break: break-word;
     white-space: pre-wrap;
-    border-radius: 0px;
+    border-radius: 0;
     background: var(--gray-100);
     box-shadow: none;
     color: var(--gray-950);
@@ -1566,7 +1564,7 @@ pre > .code-show-more {
     position: absolute;
     bottom: 12px;
     right: 10px;
-    letter-spacing: 0px;
+    letter-spacing: 0;
 }
 
 pre > .code-show-more:hover{
@@ -1679,7 +1677,7 @@ div.box.security > .box-content-container > .box-content > i {
 }
 
 div > .box-content-container {
-    padding: 0px 0px 0px 12px;
+    padding: 0 0 0 12px;
 }
 
 .box-text {
@@ -1776,8 +1774,8 @@ blockquote p {
 
     display: flex;
     flex-direction: column;
-    margin: 0px;
-    padding: 0px;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
     letter-spacing: normal;
     color: var(--fg);
@@ -1973,7 +1971,7 @@ details[open] > .openapi-prop::before {
     display: inline-block;
     padding: 6px 16px;
     font-size: var(--font-size-small);
-    outline: 0px;
+    outline: 0;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
@@ -1981,7 +1979,7 @@ details[open] > .openapi-prop::before {
     transition: background-color 0.2s ease 0s;
     user-select: none;
     cursor: pointer;
-    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
+    box-shadow: rgb(0 0 0 / 12%) 0 1px 3px, rgb(0 0 0 / 24%) 0 1px 2px;
 }
 
 .response-code.clicked {
@@ -2037,7 +2035,7 @@ nav.pagination .next {
 }
 
 .nav-prev > i {
-    padding: 17px 15px 0px 0px;
+    padding: 17px 15px 0 0;
 }
 
 .nav-prev:hover,
@@ -2055,7 +2053,7 @@ nav.pagination .next {
 }
 
 .nav-next > i {
-    padding: 17px 0px 0px 15px;
+    padding: 17px 0 0 15px;
 }
 /* */
 
@@ -2152,7 +2150,7 @@ nav.pagination .next {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    padding: 20px 0px;
+    padding: 20px 0;
     border-radius: 4px;
     margin-bottom: 36px;
     background: url("/images/bottom-cta-background.jpg") no-repeat center center;