docs: Collapse the agent setup prompt by default

docs/04-get-started/01-installation.md

@@ -6,10 +6,14 @@ slug: /installation
 
 # Installation
 
+import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock';
+
 ### Set up with an AI agent
 
 If you use a coding agent such as Claude Code, Cursor, or Codex, you can configure your development environment with it. Give it this prompt, and the agent will install only what is missing and verify the results.
 
+<CollapsibleCodeBlock expandLabel="Show full prompt">
+
 ```text title="Agent setup prompt"
 Set up this machine for Serverpod development. Check what is already installed first and only install what is missing. Do not reinstall or upgrade anything without asking me.
 
@@ -34,6 +38,8 @@ Use these descriptions for the optional items: Android toolchain (Android apps),
 Then ask me: "Do you want me to create a new Serverpod project?" and show the command to do it manually: `serverpod create <project_name>`.
 ```
 
+</CollapsibleCodeBlock>
+
 ### Prerequisites
 
 Serverpod is tested on Mac, Windows, and Linux. Before you can install Serverpod, you need to have **[Flutter](https://flutter.dev/docs/get-started/install)** installed. Serverpod 4 requires Flutter 3.44.4 or later, which includes Dart 3.12.2.

src/components/CollapsibleCodeBlock/index.js

@@ -0,0 +1,32 @@
+/**
+ * Wraps a fenced code block and shows only its first lines until expanded.
+ * Set `collapsedHeight` (any CSS length) to control how much shows.
+ * Long lines wrap instead of scrolling. The copy button is unaffected and
+ * always copies the full code.
+ */
+import React, {useState} from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+export default function CollapsibleCodeBlock({
+  children,
+  expandLabel = 'Show all',
+  collapseLabel = 'Show less',
+  collapsedHeight = '6rem',
+}) {
+  const [expanded, setExpanded] = useState(false);
+  return (
+    <div
+      className={clsx(styles.container, !expanded && styles.collapsed)}
+      style={{'--collapsed-height': collapsedHeight}}>
+      {children}
+      <button
+        type="button"
+        className={styles.toggle}
+        aria-expanded={expanded}
+        onClick={() => setExpanded((value) => !value)}>
+        {expanded ? collapseLabel : expandLabel}
+      </button>
+    </div>
+  );
+}

src/components/CollapsibleCodeBlock/styles.module.css

@@ -0,0 +1,32 @@
+.container :global(pre code) {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.collapsed :global(pre) {
+  max-height: var(--collapsed-height);
+  overflow: hidden;
+  mask-image: linear-gradient(to bottom, #000 55%, transparent);
+}
+
+.toggle {
+  display: block;
+  margin: calc(-1 * var(--ifm-leading) + 0.25rem) 0 var(--ifm-leading);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ifm-color-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.toggle:hover {
+  text-decoration: underline;
+}
+
+/* Keep the copy button visible. Docusaurus hides it until hover and then
+   shows it at 0.4 opacity, which is too faint for a block meant to be copied. */
+.container :global(.theme-code-block) button {
+  opacity: 1 !important;
+}

versioned_docs/version-4.0.0/04-get-started/01-installation.md

@@ -6,10 +6,14 @@ slug: /installation
 
 # Installation
 
+import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock';
+
 ### Set up with an AI agent
 
 If you use a coding agent such as Claude Code, Cursor, or Codex, you can configure your development environment with it. Give it this prompt, and the agent will install only what is missing and verify the results.
 
+<CollapsibleCodeBlock expandLabel="Show full prompt">
+
 ```text title="Agent setup prompt"
 Set up this machine for Serverpod development. Check what is already installed first and only install what is missing. Do not reinstall or upgrade anything without asking me.
 
@@ -34,6 +38,8 @@ Use these descriptions for the optional items: Android toolchain (Android apps),
 Then ask me: "Do you want me to create a new Serverpod project?" and show the command to do it manually: `serverpod create <project_name>`.
 ```
 
+</CollapsibleCodeBlock>
+
 ### Prerequisites
 
 Serverpod is tested on Mac, Windows, and Linux. Before you can install Serverpod, you need to have **[Flutter](https://flutter.dev/docs/get-started/install)** installed. Serverpod 4 requires Flutter 3.44.4 or later, which includes Dart 3.12.2.