hugo: add collapse attribute for code blocks

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>

hugo_stats.json

@@ -5,6 +5,7 @@
       "!mt-0",
       "--mount",
       "--tmpfs",
+      "-mt-4",
       "-top-16",
       "-v",
       "-z-10",
@@ -122,8 +123,10 @@
       "bg-black/70",
       "bg-blue-light",
       "bg-blue-light-500",
+      "bg-cover",
       "bg-gradient-to-br",
       "bg-gradient-to-r",
+      "bg-gradient-to-t",
       "bg-gray-light-100",
       "bg-gray-light-200",
       "bg-gray-light-200/50",
@@ -169,6 +172,7 @@
       "dark:decoration-blue-dark",
       "dark:fill-blue-dark",
       "dark:from-accent-dark",
+      "dark:from-background-dark",
       "dark:from-blue-dark-400",
       "dark:hidden",
       "dark:hover:bg-blue-dark",
@@ -199,6 +203,7 @@
       "flex",
       "flex-1",
       "flex-col",
+      "flex-col-reverse",
       "flex-initial",
       "flex-row-reverse",
       "font-medium",
@@ -206,6 +211,7 @@
       "footnote-ref",
       "footnotes",
       "from-accent-light",
+      "from-background-light",
       "from-blue-light-400",
       "gap-10",
       "gap-12",
@@ -224,6 +230,7 @@
       "grow",
       "h-16",
       "h-2",
+      "h-32",
       "h-8",
       "h-[334px]",
       "h-full",
@@ -311,6 +318,7 @@
       "p-8",
       "p-[2px]",
       "pb-2",
+      "pb-4",
       "pl-1",
       "pl-2",
       "pl-3",
@@ -336,6 +344,7 @@
       "rotate-45",
       "rounded",
       "rounded-[6px]",
+      "rounded-b-lg",
       "rounded-full",
       "rounded-sm",
       "scroll-mt-20",
@@ -378,8 +387,10 @@
       "text-xl",
       "text-xs",
       "tip",
+      "to-75%",
       "to-blue-light-500",
       "to-magenta-light-400",
+      "to-transparent",
       "top-0",
       "top-16",
       "top-3",
@@ -400,6 +411,7 @@
       "xl:grid-cols-1",
       "xl:grid-cols-2",
       "xl:grid-cols-3",
+      "youtube-video",
       "z-10",
       "z-20",
       "z-30"

layouts/_default/_markup/render-codeblock.html

@@ -1,17 +1,36 @@
 <div class="group relative">
-  <button
+  <button x-data="{ code: '{{encoding.Base64Encode .Inner}}', copying: false }"
-    x-data="{ code: '{{encoding.Base64Encode .Inner}}', copying: false }"
+    class="absolute right-3 top-3 z-20 text-gray-light-300 dark:text-gray-dark-600" title="Copy" @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^\$\s*/gm, ''));
-    class="absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
-    title="Copy"
-    @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^\$\s*/gm, ''));
     copying = true;
-    setTimeout(() => copying = false, 2000);"
+    setTimeout(() => copying = false, 2000);">
-  >
+    <span :class="{ 'group-hover:block' : !copying }" class="icon-svg hidden">{{ partialCached "icon" "content_copy" "content_copy" }}</span>
-    <span :class="{ 'group-hover:block' : !copying }" class="hidden icon-svg">{{ partialCached "icon" "content_copy" "content_copy" }}</span>
+    <span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden">{{ partialCached "icon" "check_circle" "check_circle" }}</span>
-    <span :class="{ 'group-hover:block' : copying }" class="hidden icon-svg">{{ partialCached "icon" "check_circle" "check_circle" }}</span>
   </button>
-  {{ $lang := .Type | default "text" }}
+  {{ $lang := .Type | default "text" }} {{ $result := transform.Highlight .Inner
+  $lang .Options }}
   <div class="syntax-light dark:syntax-dark">
-    {{ transform.Highlight .Inner $lang .Options }}
+    {{ with .Attributes.collapse }}
+    <div x-data="{ collapse: true }" class="relative scroll-mt-20 overflow-clip"
+      x-init="$watch('collapse', value => $root.scrollIntoView({ behavior: 'smooth'}))">
+      <div x-show="collapse"
+        class="to-transparent absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip bg-gradient-to-t from-background-light to-75% bg-cover pb-4 dark:from-background-dark">
+        <button @click="collapse = false"
+          class="flex items-center rounded-full bg-blue-light px-2 text-sm text-white dark:bg-blue-dark-400">
+          <span>Show more</span>
+          <span class="icon-svg">{{ partialCached "icon" "expand_more" "expand_more" }}</span>
+        </button>
+      </div>
+      <div :class="{ 'h-32': collapse }">
+        {{ $result }}
+        <button @click="collapse = true" x-show="!collapse"
+          class="mx-auto -mt-4 flex items-center rounded-b-lg bg-blue-light px-2 text-sm text-white dark:bg-blue-dark-400">
+          <span>Hide</span>
+          <span class="icon-svg">{{ partialCached "icon" "expand_less" "expand_less" }}</span>
+        </button>
+      </div>
+    </div>
+    {{ else }}
+      {{ $result }}
+    {{ end }}
   </div>
 </div>