Skip to content

Commit 2723bf7

Browse files
carlos-granadoscarlos-granados
committed
rewrite introduction page with benefit grid
1 parent db3555d commit 2723bf7

5 files changed

Lines changed: 158 additions & 24 deletions

File tree

‎docs/getting-started/introduction.md‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎docs/getting-started/introduction.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: Introduction
3+
---
4+
5+
import BenefitGrid from '@site/src/components/BenefitGrid';
6+
7+
PHP Debugger is a step debugger for PHP, and nothing else. Every other feature that
8+
normally ships alongside one — the profiler, the coverage collector, the tracer — has
9+
been left out. What remains is a debugger you can leave switched on permanently,
10+
because when you are not using it you can barely tell it is there.
11+
12+
<BenefitGrid />
13+
14+
## What's Next?
15+
16+
Ready to get started? Install PHP Debugger and try the quick start guide:
17+
18+
- [Installation Guide](./installation.md)
19+
- [Quick Start](./quick-start.md)

‎src/components/BenefitGrid/index.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import styles from './styles.module.css';
2+
3+
const iconProps = {
4+
width: 26,
5+
height: 26,
6+
viewBox: '0 0 24 24',
7+
fill: 'none',
8+
stroke: 'currentColor',
9+
strokeWidth: 1.8,
10+
strokeLinecap: 'round',
11+
strokeLinejoin: 'round',
12+
};
13+
14+
const benefits = [
15+
{
16+
title: 'Near-zero overhead when idle',
17+
text: 'With no debug client connected, the debugger stays out of the way. A typical web request does around 1% more work than running with no debugger at all.',
18+
icon: (
19+
<svg {...iconProps}>
20+
<path d="M4 18a8 8 0 1 1 16 0" />
21+
<path d="M12 18l4.5-5" />
22+
</svg>
23+
),
24+
},
25+
{
26+
title: 'Cheap while you are attached',
27+
text: 'Keep your IDE connected all day. A session you are attached to but not actively stepping through still costs very little.',
28+
icon: (
29+
<svg {...iconProps}>
30+
<circle cx="12" cy="12" r="9" />
31+
<path d="M10 9v6M14 9v6" />
32+
</svg>
33+
),
34+
},
35+
{
36+
title: 'Drop-in compatible',
37+
text: 'Existing INI settings, IDE configurations, and helper functions keep working. In most projects there is almost nothing to migrate — just the line that loads the extension.',
38+
icon: (
39+
<svg {...iconProps}>
40+
<path d="M9 3v6M15 3v6" />
41+
<path d="M7 9h10v3a5 5 0 0 1-10 0V9z" />
42+
<path d="M12 17v4" />
43+
</svg>
44+
),
45+
},
46+
{
47+
title: 'Works with your editor',
48+
text: 'Full DBGp protocol support means any IDE or tool that speaks it just works — PhpStorm, VS Code, Neovim, and anything else in your setup.',
49+
icon: (
50+
<svg {...iconProps}>
51+
<rect x="3" y="4" width="18" height="13" rx="2" />
52+
<path d="M8 21h8M12 17v4" />
53+
</svg>
54+
),
55+
},
56+
{
57+
title: 'One job, done well',
58+
text: 'No profiler, no code coverage, no tracing. Step debugging is the only thing here, which is exactly why the rest of the time it costs you so little.',
59+
icon: (
60+
<svg {...iconProps}>
61+
<path d="M4 7h16M7 12h10M10 17h4" />
62+
</svg>
63+
),
64+
},
65+
{
66+
title: 'Nothing to install',
67+
text: 'Use it as a regular extension, or reach for a container image with the debugger compiled straight into the interpreter. Change one line of your Dockerfile and you are done.',
68+
icon: (
69+
<svg {...iconProps}>
70+
<rect x="7" y="7" width="10" height="10" rx="1.5" />
71+
<path d="M10 3v4M14 3v4M10 17v4M14 17v4" />
72+
<path d="M3 10h4M3 14h4M17 10h4M17 14h4" />
73+
</svg>
74+
),
75+
},
76+
{
77+
title: 'Ready the moment you are',
78+
text: 'However you install it, debugging is on by default and starts with every request. Set a breakpoint, hit your app, and the session is already there — no trigger to remember.',
79+
icon: (
80+
<svg {...iconProps}>
81+
<circle cx="12" cy="12" r="9" />
82+
<path d="M10 8.5l6 3.5-6 3.5z" />
83+
</svg>
84+
),
85+
},
86+
];
87+
88+
export default function BenefitGrid() {
89+
return (
90+
<div className={styles.grid}>
91+
{benefits.map(({title, text, icon}) => (
92+
<div key={title} className={styles.card}>
93+
<span className={styles.icon}>{icon}</span>
94+
<h3 className={styles.cardTitle}>{title}</h3>
95+
<p className={styles.cardText}>{text}</p>
96+
</div>
97+
))}
98+
</div>
99+
);
100+
}

‎src/components/BenefitGrid/styles.module.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.grid {
2+
display: grid;
3+
grid-template-columns: repeat(2, minmax(0, 1fr));
4+
gap: 1rem;
5+
margin: 2rem 0 2.5rem;
6+
}
7+
8+
.card {
9+
border: 1px solid var(--phpdbg-card-border);
10+
border-radius: 10px;
11+
background: var(--phpdbg-surface);
12+
padding: 1.25rem 1.35rem 1.35rem;
13+
}
14+
15+
.icon {
16+
display: block;
17+
color: var(--ifm-color-primary);
18+
margin-bottom: 0.75rem;
19+
}
20+
21+
.cardTitle {
22+
font-size: 1.05rem;
23+
line-height: 1.3;
24+
margin: 0 0 0.4rem;
25+
}
26+
27+
.cardText {
28+
font-size: 0.9rem;
29+
line-height: 1.6;
30+
color: var(--ifm-color-emphasis-700);
31+
margin: 0;
32+
}
33+
34+
@media (max-width: 768px) {
35+
.grid {
36+
grid-template-columns: minmax(0, 1fr);
37+
}
38+
}

‎src/components/HomeCards/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function HomeCards() {
6060
</svg>
6161
}
6262
title="Key Features"
63-
linkTo="/getting-started/introduction#key-features"
63+
linkTo="/getting-started/introduction"
6464
linkLabel="Explore all features">
6565
<ul className={styles.checkList}>
6666
{keyFeatures.map((feature) => (

0 commit comments

Comments
 (0)