Merge pull request #31 from php-debugger/home-cards

update the quick start and key features cards

Author: carlos-granados

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 (
+    <CodeBlock language={active.language}>
+      {quickStartSnippet(active.command)}
+    </CodeBlock>
+  );
+}
 
 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">
-        <p>Get up and running in seconds.</p>
-        <CodeBlock language="ini">{quickStartSnippet}</CodeBlock>
+        <p>Install it. There is nothing to configure.</p>
+        <QuickStartSnippet />
+        <p>Start your editor listening, set a breakpoint, run your code.</p>
       </Card>
       <Card
         icon={

src/components/HomeCards/styles.module.css

@@ -97,3 +97,10 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* The installer URL is longer than the card is wide. Wrapping keeps the whole
+   command visible and copyable rather than clipping it at the card edge. */
+.cardBody :global(.theme-code-block) code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}

src/components/InstallCommand/index.js

@@ -1,15 +1,9 @@
 import {useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
 import CodeBlock from '@theme/CodeBlock';
+import {PLATFORMS, detectPlatform} from '@site/src/lib/installer';
 import styles from './styles.module.css';
 
-/* macOS and Linux run the same script -- it detects the OS and architecture
-   itself -- so both tabs deliberately show the same command. */
-const UNIX_COMMAND =
-  'curl -fsSL https://github.com/php-debugger/installer/releases/latest/download/install.sh | sh';
-const WINDOWS_COMMAND =
-  'powershell -c "irm https://github.com/php-debugger/installer/releases/latest/download/install.ps1 | iex"';
-
 const iconProps = {
   width: 15,
   height: 15,
@@ -35,27 +29,6 @@ const CheckIcon = () => (
   </svg>
 );
 
-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

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