From 267b301bfd63543f47bd6515fe31766c1cd8e483 Mon Sep 17 00:00:00 2001 From: Carlos Granados Date: Mon, 14 Sep 2026 18:19:00 +0200 Subject: [PATCH 1/3] update the quick start and key features cards --- src/components/HomeCards/index.js | 24 +++++++++++----------- src/components/HomeCards/styles.module.css | 7 +++++++ 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/src/components/HomeCards/index.js b/src/components/HomeCards/index.js index fe05be21..fb4e68b4 100644 --- a/src/components/HomeCards/index.js +++ b/src/components/HomeCards/index.js @@ -2,19 +2,19 @@ import Link from '@docusaurus/Link'; import CodeBlock from '@theme/CodeBlock'; import styles from './styles.module.css'; -const quickStartSnippet = `# php.ini -zend_extension=php_debugger +const quickStartSnippet = `# Install +curl -fsSL https://github.com/php-debugger/installer/releases/latest/download/install.sh | sh -# Run your script -XDEBUG_TRIGGER=1 php your-script.php`; +# Debug +php your-script.php`; const keyFeatures = [ - 'Interactive CLI debugger', - 'Breakpoints & conditional breakpoints', - 'Step over, into, and out', - 'Inspect variables and expressions', - 'Exception handling', - 'Logging and error handling', + 'Always on — no trigger to set', + 'Near-zero overhead when idle', + 'Line, conditional and exception breakpoints', + 'Step into, over and out', + 'Inspect variables across the call stack', + 'Watch expressions and live value edits', ]; const ides = ['PhpStorm', 'VS Code']; @@ -42,8 +42,8 @@ export default function HomeCards() { title="Quick Start" linkTo="/getting-started/quick-start" linkLabel="View quick start guide"> -

Get up and running in seconds.

- {quickStartSnippet} +

Install it. There is nothing to configure.

+ {quickStartSnippet} Date: Mon, 14 Sep 2026 18:24:51 +0200 Subject: [PATCH 2/3] make the quick start card os-aware and restore the closing line --- src/components/HomeCards/index.js | 34 ++++++++++++++++++++++---- src/components/InstallCommand/index.js | 29 +--------------------- src/lib/installer.js | 31 +++++++++++++++++++++++ 3 files changed, 61 insertions(+), 33 deletions(-) create mode 100644 src/lib/installer.js diff --git a/src/components/HomeCards/index.js b/src/components/HomeCards/index.js index fb4e68b4..69dd285d 100644 --- a/src/components/HomeCards/index.js +++ b/src/components/HomeCards/index.js @@ -1,12 +1,35 @@ +import {useEffect, useState} from 'react'; import Link from '@docusaurus/Link'; import CodeBlock from '@theme/CodeBlock'; +import {PLATFORMS, detectPlatform} from '@site/src/lib/installer'; import styles from './styles.module.css'; -const quickStartSnippet = `# Install -curl -fsSL https://github.com/php-debugger/installer/releases/latest/download/install.sh | sh +function quickStartSnippet(command) { + return `# Install\n${command}\n\n# Debug\nphp your-script.php`; +} + +/* Shows the command for the visitor's own OS. The page is prerendered without + knowing it, so this starts on the Unix command and corrects itself after + mounting -- detecting in an effect rather than during render keeps the first + client render identical to the server's, which is what hydration compares. */ +function QuickStartSnippet() { + const [platform, setPlatform] = useState('macos'); + + useEffect(() => { + const detected = detectPlatform(); + if (detected) { + setPlatform(detected); + } + }, []); + + const active = PLATFORMS.find((p) => p.id === platform) ?? PLATFORMS[0]; -# Debug -php your-script.php`; + return ( + + {quickStartSnippet(active.command)} + + ); +} const keyFeatures = [ 'Always on — no trigger to set', @@ -43,7 +66,8 @@ export default function HomeCards() { linkTo="/getting-started/quick-start" linkLabel="View quick start guide">

Install it. There is nothing to configure.

- {quickStartSnippet} + +

Start your editor listening, set a breakpoint, run your code.

 ( ); -const PLATFORMS = [ - {id: 'macos', label: 'macOS', language: 'bash', command: UNIX_COMMAND}, - {id: 'linux', label: 'Linux', language: 'bash', command: UNIX_COMMAND}, - {id: 'windows', label: 'Windows', language: 'powershell', command: WINDOWS_COMMAND}, -]; - -function detectPlatform() { - const ua = navigator.userAgent; - if (/Windows/i.test(ua)) { - return 'windows'; - } - if (/Mac OS X|Macintosh/i.test(ua)) { - return 'macos'; - } - /* Android reports Linux too, and the command is the same either way. */ - if (/Linux|Android|X11/i.test(ua)) { - return 'linux'; - } - return null; -} - export default function InstallCommand() { /* The page is prerendered without knowing the visitor's OS, so start on macOS and correct it after mounting. Detecting in an effect rather than during diff --git a/src/lib/installer.js b/src/lib/installer.js new file mode 100644 index 00000000..0c463531 --- /dev/null +++ b/src/lib/installer.js @@ -0,0 +1,31 @@ +/* The installer commands and OS detection, shared by the Installation page's + InstallCommand component and the home page's Quick Start card so the two can + never drift apart. */ + +/* macOS and Linux run the same script -- it detects the OS and architecture + itself -- so both platforms deliberately use the same command. */ +export const UNIX_COMMAND = + 'curl -fsSL https://github.com/php-debugger/installer/releases/latest/download/install.sh | sh'; +export const WINDOWS_COMMAND = + 'powershell -c "irm https://github.com/php-debugger/installer/releases/latest/download/install.ps1 | iex"'; + +export const PLATFORMS = [ + {id: 'macos', label: 'macOS', language: 'bash', command: UNIX_COMMAND}, + {id: 'linux', label: 'Linux', language: 'bash', command: UNIX_COMMAND}, + {id: 'windows', label: 'Windows', language: 'powershell', command: WINDOWS_COMMAND}, +]; + +export function detectPlatform() { + const ua = navigator.userAgent; + if (/Windows/i.test(ua)) { + return 'windows'; + } + if (/Mac OS X|Macintosh/i.test(ua)) { + return 'macos'; + } + /* Android reports Linux too, and the command is the same either way. */ + if (/Linux|Android|X11/i.test(ua)) { + return 'linux'; + } + return null; +} From 9a1aa83b85348b77860fba885eb4d48b416ca58c Mon Sep 17 00:00:00 2001 From: Carlos Granados Date: Mon, 14 Sep 2026 20:26:52 +0200 Subject: [PATCH 3/3] mention other editors in the ide support card --- src/components/HomeCards/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/HomeCards/index.js b/src/components/HomeCards/index.js index 69dd285d..bde590c1 100644 --- a/src/components/HomeCards/index.js +++ b/src/components/HomeCards/index.js @@ -40,7 +40,7 @@ const keyFeatures = [ 'Watch expressions and live value edits', ]; -const ides = ['PhpStorm', 'VS Code']; +const ides = ['PhpStorm', 'VS Code', 'Any other editor with PHP debugging']; function Card({icon, title, children, linkTo, linkLabel}) { return (