feat: add AutoCollapse component and use it for DeclDoc

Author: Lancern

src/components/AutoCollapse.astro

@@ -0,0 +1,89 @@
+---
+import { Icon } from "@astrojs/starlight/components";
+
+interface Props {
+  maxHeight?: number;
+}
+
+const maxHeight = Astro.props.maxHeight ?? 200;
+const autoCollapseMaxHeight = maxHeight + "px";
+---
+
+<div class="auto-collapse" data-max-height={maxHeight}>
+  <div class="content">
+    <slot />
+  </div>
+  <button class="expand-button">
+    Expand
+    <Icon class="expand-icon" name="down-caret" size="1em" />
+  </button>
+</div>
+
+<script>
+  function initAutoCollapse() {
+    const collapseWrappers = document.querySelectorAll(".auto-collapse");
+
+    collapseWrappers.forEach((wrapper) => {
+      const contentElement = wrapper.querySelector(".content") as HTMLElement;
+      const button = wrapper.querySelector(".expand-button") as HTMLElement;
+
+      if (!contentElement || !button) return;
+
+      const maxHeight = Number.parseInt(
+        (wrapper as HTMLElement).dataset.maxHeight || "200",
+        10
+      );
+      if (contentElement.scrollHeight <= maxHeight) {
+        button.style.display = "none";
+        return;
+      }
+
+      // The document content is longer than the maximum height, collapse it.
+      contentElement.classList.add("collapsed");
+
+      button.addEventListener("click", () => {
+        contentElement.classList.remove("collapsed");
+        button.style.display = "none";
+      });
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", initAutoCollapse);
+  document.addEventListener("astro:page-load", initAutoCollapse);
+</script>
+
+<style define:vars={{ autoCollapseMaxHeight }}>
+  .auto-collapse > .content.collapsed {
+    max-height: var(--autoCollapseMaxHeight);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .auto-collapse > .content.collapsed::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(to bottom, transparent, var(--sl-color-bg));
+    pointer-events: none;
+  }
+
+  .auto-collapse > .expand-button {
+    display: block;
+    margin: 0 auto var(--sl-content-gap-y);
+    padding: 0.25rem 1rem;
+    background-color: var(--sl-color-text-accent);
+    color: var(--sl-color-black);
+    border: none;
+    border-radius: 999rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+  }
+
+  .auto-collapse .expand-button .expand-icon {
+    display: inline;
+    vertical-align: middle;
+  }
+</style>

src/components/DeclDoc.astro

@@ -1,13 +1,15 @@
 ---
-
+import AutoCollapse from "./AutoCollapse.astro";
 ---
 
 <div class="decl-doc">
   <div class="decl">
     <slot name="decl" />
   </div>
   <div class="doc">
-    <slot name="doc" />
+    <AutoCollapse maxHeight={200}>
+      <slot name="doc" />
+    </AutoCollapse>
   </div>
 </div>