From c9417a2bc9c3db0ea50741008f24395969590c83 Mon Sep 17 00:00:00 2001 From: Isakdl Date: Fri, 2 Oct 2026 16:56:00 +0200 Subject: [PATCH 1/2] docs: Collapse the agent setup prompt by default Adds a CollapsibleCodeBlock component that wraps a fenced code block, shows only its first lines until expanded, always wraps long lines, and keeps the copy button fully visible. Co-Authored-By: Claude Opus 5.5 --- docs/04-get-started/01-installation.md | 6 ++++ src/components/CollapsibleCodeBlock/index.js | 32 +++++++++++++++++++ .../CollapsibleCodeBlock/styles.module.css | 32 +++++++++++++++++++ .../04-get-started/01-installation.md | 6 ++++ 4 files changed, 76 insertions(+) create mode 100644 src/components/CollapsibleCodeBlock/index.js create mode 100644 src/components/CollapsibleCodeBlock/styles.module.css diff --git a/docs/04-get-started/01-installation.md b/docs/04-get-started/01-installation.md index 470133ac..07a5a10a 100644 --- a/docs/04-get-started/01-installation.md +++ b/docs/04-get-started/01-installation.md @@ -4,12 +4,16 @@ sidebar_class_name: sidebar-installation-icon slug: /installation --- +import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock'; + # Installation ### 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. + + ```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 `. ``` + + ### 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. diff --git a/src/components/CollapsibleCodeBlock/index.js b/src/components/CollapsibleCodeBlock/index.js new file mode 100644 index 00000000..257c87b7 --- /dev/null +++ b/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 ( +
+ {children} + +
+ ); +} diff --git a/src/components/CollapsibleCodeBlock/styles.module.css b/src/components/CollapsibleCodeBlock/styles.module.css new file mode 100644 index 00000000..fbccebc9 --- /dev/null +++ b/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; +} diff --git a/versioned_docs/version-4.0.0/04-get-started/01-installation.md b/versioned_docs/version-4.0.0/04-get-started/01-installation.md index 470133ac..07a5a10a 100644 --- a/versioned_docs/version-4.0.0/04-get-started/01-installation.md +++ b/versioned_docs/version-4.0.0/04-get-started/01-installation.md @@ -4,12 +4,16 @@ sidebar_class_name: sidebar-installation-icon slug: /installation --- +import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock'; + # Installation ### 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. + + ```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 `. ``` + + ### 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. From d8cbc4723544cb10f53cd2adcd509cd698afb4f3 Mon Sep 17 00:00:00 2001 From: Isakdl Date: Fri, 2 Oct 2026 16:57:35 +0200 Subject: [PATCH 2/2] fix: Move the component import below the page heading Co-Authored-By: Claude Opus 5.5 --- docs/04-get-started/01-installation.md | 4 ++-- .../version-4.0.0/04-get-started/01-installation.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/04-get-started/01-installation.md b/docs/04-get-started/01-installation.md index 07a5a10a..a5a2c370 100644 --- a/docs/04-get-started/01-installation.md +++ b/docs/04-get-started/01-installation.md @@ -4,10 +4,10 @@ sidebar_class_name: sidebar-installation-icon slug: /installation --- -import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock'; - # 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. diff --git a/versioned_docs/version-4.0.0/04-get-started/01-installation.md b/versioned_docs/version-4.0.0/04-get-started/01-installation.md index 07a5a10a..a5a2c370 100644 --- a/versioned_docs/version-4.0.0/04-get-started/01-installation.md +++ b/versioned_docs/version-4.0.0/04-get-started/01-installation.md @@ -4,10 +4,10 @@ sidebar_class_name: sidebar-installation-icon slug: /installation --- -import CollapsibleCodeBlock from '@site/src/components/CollapsibleCodeBlock'; - # 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.