diff --git a/src/components/HomeCards/index.js b/src/components/HomeCards/index.js index fe05be21..bde590c1 100644 --- a/src/components/HomeCards/index.js +++ b/src/components/HomeCards/index.js @@ -1,23 +1,46 @@ +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 = `# php.ini -zend_extension=php_debugger +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]; -# Run your script -XDEBUG_TRIGGER=1 php your-script.php`; + return ( + + {quickStartSnippet(active.command)} + + ); +} 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']; +const ides = ['PhpStorm', 'VS Code', 'Any other editor with PHP debugging']; function Card({icon, title, children, linkTo, linkLabel}) { return ( @@ -42,8 +65,9 @@ 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.

+ +

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; +}