Components
The examples on this page use placeholder values to show layout only. They are not real specs.
Import components at the top of an .mdx page with a relative path, for example import Callout from '../../../../components/Callout.astro'; from a project page.
1. Project header card
Section titled “1. Project header card”<ProjectHeader /> reads summary, status, category, started and updated from the page frontmatter. Pass hero={image} and heroAlt="..." for a hero photo. See any project page for a live example.
2. Status badges
Section titled “2. Status badges”<StatusBadge status="Bench-tested" />3. Spec box
Section titled “3. Spec box”Key specs
- Input voltage
- EXAMPLE
- Current draw
- EXAMPLE
- Dimensions
- EXAMPLE
Source: not yet linked (unverified)
<SpecBox specs={[['Input voltage', '12 VDC']]} source={{ label: 'Manufacturer manual', href: 'https://...' }} />4. Parts table
Section titled “4. Parts table”| Part | SKU | Price paid | Key specs | Source | Status |
|---|---|---|---|---|---|
| Example part | TBD | TBD | EXAMPLE | TBD | Planned |
5. Wiring table
Section titled “5. Wiring table”| Wire | Color | Function | Source output | Draw | Fuse | Gauge | Relay pin | Termination | Ground |
|---|---|---|---|---|---|---|---|---|---|
| W1 | EXAMPLE | Example function | EXAMPLE | TBD | TBD | TBD | — | TBD | TBD |
6. Callouts
Section titled “6. Callouts”7. Changelog
Section titled “7. Changelog”Example change.
Rollback: Example rollback.
8. Code block
Section titled “8. Code block”Starlight’s built-in code blocks include a copy button. Add a title to label the language or file:
print("Signal & Systems")9. Photo gallery and before/after slider
Section titled “9. Photo gallery and before/after slider”<Gallery photos={[{ src: photo, alt: '...', caption: '...' }]} /> and <BeforeAfter before={a} after={b} alt="..." />. Import photos from src/assets/ so Astro optimizes them. Strip EXIF/GPS data and blur plates and house numbers first.