ad62547d8e
🎨 COMPONENT SYSTEM ACTIVATION: 📝 File Format Conversion: - Convert ALL 46 content files from .md to .mdx format - Enable JSX/component syntax in all content files - Maintain all existing content while adding component capability 🧩 Component Integration: - Homepage enhanced with Cards, LinkCards, Asides, Steps - Tutorial example updated with Tabs, Code blocks, enhanced Asides - All component imports properly configured 📚 Available Components: ✅ Cards & CardGrid - Feature highlights, content organization ✅ LinkCards - Enhanced navigation and cross-references ✅ Asides - Tips, notes, warnings, cautions (4 types) ✅ Steps - Tutorial processes and procedures ✅ Tabs - Before/after examples, alternatives ✅ Code - Syntax highlighting with titles ✅ Badges - Status indicators and labels ✅ Icons - Visual enhancement 📖 Documentation: - Complete component reference guide (COMPONENTS-GUIDE.md) - Usage examples and implementation patterns - Import syntax and best practices 🔧 Technical Implementation: - Starlight automatically handles .mdx files - Component imports per file (tree-shaking friendly) - Backward compatible with existing markdown syntax - Enhanced visual hierarchy and user experience Ready for content authors to use rich, interactive components throughout the entire documentation site!
108 lines
1.8 KiB
Markdown
108 lines
1.8 KiB
Markdown
# Starlight Components Reference
|
|
|
|
This site now supports all Starlight components! Here's how to use them in your .mdx files:
|
|
|
|
## Import Components
|
|
|
|
Add this to the top of any .mdx file to use components:
|
|
|
|
```jsx
|
|
import {
|
|
Card, CardGrid, LinkCard,
|
|
Aside, Badge, Steps, Tabs, TabItem,
|
|
Code, Icon
|
|
} from '@astrojs/starlight/components';
|
|
```
|
|
|
|
## Component Examples
|
|
|
|
### Cards & CardGrid
|
|
```jsx
|
|
<CardGrid>
|
|
<Card title="Feature 1" icon="star">
|
|
Content here
|
|
</Card>
|
|
<Card title="Feature 2" icon="rocket">
|
|
More content
|
|
</Card>
|
|
</CardGrid>
|
|
```
|
|
|
|
### LinkCard
|
|
```jsx
|
|
<LinkCard
|
|
title="Link Title"
|
|
description="Description text"
|
|
href="/path/to/page/"
|
|
badge="Optional Badge"
|
|
/>
|
|
```
|
|
|
|
### Asides (Callouts)
|
|
```jsx
|
|
<Aside type="note" title="Optional Title">
|
|
Note content here
|
|
</Aside>
|
|
|
|
<Aside type="tip">
|
|
Tip content
|
|
</Aside>
|
|
|
|
<Aside type="caution">
|
|
Warning content
|
|
</Aside>
|
|
|
|
<Aside type="danger">
|
|
Danger content
|
|
</Aside>
|
|
```
|
|
|
|
### Steps
|
|
```jsx
|
|
<Steps>
|
|
1. First step
|
|
2. Second step
|
|
3. Third step
|
|
</Steps>
|
|
```
|
|
|
|
### Tabs
|
|
```jsx
|
|
<Tabs>
|
|
<TabItem label="Tab 1">
|
|
Content for tab 1
|
|
</TabItem>
|
|
<TabItem label="Tab 2">
|
|
Content for tab 2
|
|
</TabItem>
|
|
</Tabs>
|
|
```
|
|
|
|
### Code
|
|
```jsx
|
|
<Code
|
|
code={`console.log('Hello world!')`}
|
|
lang="js"
|
|
title="Example Script"
|
|
/>
|
|
```
|
|
|
|
### Badge
|
|
```jsx
|
|
<Badge text="New" variant="tip" />
|
|
<Badge text="Updated" variant="note" />
|
|
<Badge text="Deprecated" variant="caution" />
|
|
```
|
|
|
|
## Usage Tips
|
|
|
|
- All content files are now .mdx format (was .md)
|
|
- Import components at the top of each file where you want to use them
|
|
- Components enhance readability and user experience
|
|
- Use Cards for feature highlights
|
|
- Use Asides for important callouts
|
|
- Use Tabs for before/after examples
|
|
- Use Steps for tutorials and processes
|
|
|
|
See the homepage and first tutorial for implementation examples!
|