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