feat: collapse the skill code

Author: gberenice

assets/css/custom.scss

@@ -2407,14 +2407,14 @@ footer {
       }
     }
 
-    .codeblock-copy-wrap {
+    .codeblock-wrap {
       position: relative;
 
       .codeblock-copy-btn {
         position: absolute;
         top: 10px;
         right: 10px;
-        z-index: 2;
+        z-index: 3;
         display: inline-flex;
         align-items: center;
         gap: 6px;
@@ -2446,6 +2446,50 @@ footer {
           font-size: 0.85em;
         }
       }
+
+      .codeblock-expand-btn {
+        display: block;
+        width: 100%;
+        margin-top: -1px;
+        padding: 8px 10px;
+        font-size: 0.8rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: #fff;
+        background: #34352b; // slightly lighter than the monokai code bg
+        border: none;
+        border-radius: 0 0 4px 4px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+
+        &:hover {
+          background: #414234;
+        }
+      }
+
+      // Collapsed state: cap the code block to ~25 lines with a fade.
+      &.codeblock-collapsible.is-collapsed {
+        .highlight {
+          max-height: 34em;
+          overflow: hidden;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 2.4em; // sit above the expand button
+          height: 5em;
+          pointer-events: none;
+          background: linear-gradient(
+            to bottom,
+            rgba(39, 40, 34, 0),
+            rgba(39, 40, 34, 0.95)
+          );
+        }
+      }
     }
   }
   .postMeta {

assets/js/codeblock-copy.js

@@ -13,12 +13,10 @@
   }
 
   function init() {
-    var buttons = document.querySelectorAll(".codeblock-copy-btn");
-    if (!buttons.length) return;
-
-    Array.prototype.forEach.call(buttons, function (btn) {
+    var copyButtons = document.querySelectorAll(".codeblock-copy-btn");
+    Array.prototype.forEach.call(copyButtons, function (btn) {
       btn.addEventListener("click", function () {
-        var wrap = btn.closest(".codeblock-copy-wrap");
+        var wrap = btn.closest(".codeblock-wrap");
         var pre = wrap && wrap.querySelector("pre");
         if (!pre) return;
 
@@ -27,6 +25,26 @@
         });
       });
     });
+
+    var expandButtons = document.querySelectorAll(".codeblock-expand-btn");
+    Array.prototype.forEach.call(expandButtons, function (btn) {
+      btn.addEventListener("click", function () {
+        var wrap = btn.closest(".codeblock-wrap");
+        if (!wrap) return;
+
+        var collapsed = wrap.classList.toggle("is-collapsed");
+        btn.setAttribute("aria-expanded", collapsed ? "false" : "true");
+        btn.textContent = collapsed ? "Show more" : "Show less";
+
+        // When re-collapsing, keep the top of the block in view.
+        if (collapsed) {
+          var top = wrap.getBoundingClientRect().top;
+          if (top < 0) {
+            wrap.scrollIntoView({ block: "start" });
+          }
+        }
+      });
+    });
   }
 
   function copyToClipboard(text) {

content/blog/2026-08-31-dont-let-ai-break-your-infra.md

@@ -154,7 +154,7 @@ We suggest packaging the workflow as a reusable skill so the agent follows the s
 
 Keep your organization's repository and module conventions in companion rules or skills (depending on your AI framework), rather than in the migration skill itself. If you don't have any, our guides on [Terraform root module structure](https://masterpoint.io/blog/standard-tf-files/) and [root module sizing](https://newsletter.masterpoint.io/p/how-big-should-a-terraform-root-module-be) are a good starting point.
 
-````markdown {copy=true}
+````markdown {copy=true collapse=true}
 ---
 name: codify-clickops-iac
 description: Safely codify existing manually-managed AWS infrastructure into Terraform/OpenTofu. Use when importing click-ops resources, migrating existing AWS resources into IaC, or generating TF from live infrastructure.

layouts/_default/_markup/render-codeblock.html

@@ -1,14 +1,23 @@
 {{- $result := transform.HighlightCodeBlock . -}} {{- $copy := or (index
-.Attributes "copy") (index .Options "copy") -}} {{- if and $copy (eq (lower
-(printf "%v" $copy)) "true") -}}
-<div class="codeblock-copy-wrap">
+.Attributes "copy") (index .Options "copy") -}} {{- $copy = and $copy (eq (lower
+(printf "%v" $copy)) "true") -}} {{- $collapse := or (index .Attributes
+"collapse") (index .Options "collapse") -}} {{- $collapse = and $collapse (eq
+(lower (printf "%v" $collapse)) "true") -}} {{- if or $copy $collapse -}}
+<div
+  class="codeblock-wrap{{ if $collapse }} codeblock-collapsible is-collapsed{{ end }}"
+>
+  {{ if $copy }}
   <button
     type="button"
     class="codeblock-copy-btn"
     aria-label="Copy code to clipboard"
   >
     <i class="fa fa-copy"></i> Copy
   </button>
-  {{ $result.Wrapped }}
+  {{ end }} {{ $result.Wrapped }} {{ if $collapse }}
+  <button type="button" class="codeblock-expand-btn" aria-expanded="false">
+    Show more
+  </button>
+  {{ end }}
 </div>
 {{- else -}} {{ $result.Wrapped }} {{- end -}}