feat(docs): add markdown demo page and UI refinements
- Add comprehensive markdown-demo.md for style testing - Remove doc category links from navbar (use sidebar instead) - Remove card buttons from welcome page - Add dark mode styling for announcement bar - Clean up index.md card layout 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
forcetrainer
Alex Verkhovsky
parent
c2d8bfdc3e
commit
b06b11c2bf
|
|
@ -39,9 +39,6 @@ These docs are organized into four sections based on what you're trying to do:
|
|||
<div className="card__body">
|
||||
<p><strong>Learning-oriented.</strong> Step-by-step guides that walk you through building something. Start here if you're new to BMAD.</p>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<a className="button button--secondary button--block" href="/docs/tutorials">Browse Tutorials</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--6 margin-bottom--lg">
|
||||
|
|
@ -52,9 +49,6 @@ These docs are organized into four sections based on what you're trying to do:
|
|||
<div className="card__body">
|
||||
<p><strong>Task-oriented.</strong> Practical guides for solving specific problems. "How do I customize an agent?" lives here.</p>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<a className="button button--secondary button--block" href="/docs/how-to">Find a Guide</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--6 margin-bottom--lg">
|
||||
|
|
@ -65,9 +59,6 @@ These docs are organized into four sections based on what you're trying to do:
|
|||
<div className="card__body">
|
||||
<p><strong>Understanding-oriented.</strong> Deep dives into concepts and architecture. Read these when you want to know <em>why</em> something works.</p>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<a className="button button--secondary button--block" href="/docs/explanation">Explore Concepts</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--6 margin-bottom--lg">
|
||||
|
|
@ -78,9 +69,6 @@ These docs are organized into four sections based on what you're trying to do:
|
|||
<div className="card__body">
|
||||
<p><strong>Information-oriented.</strong> Technical specifications for agents, workflows, and configuration. Look things up here.</p>
|
||||
</div>
|
||||
<div className="card__footer">
|
||||
<a className="button button--secondary button--block" href="/docs/reference">Browse Reference</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,329 @@
|
|||
---
|
||||
sidebar_label: Style Demo
|
||||
sidebar_position: 99
|
||||
---
|
||||
|
||||
# Markdown Style Demo
|
||||
|
||||
A comprehensive preview of all markdown elements and styling for light/dark mode testing.
|
||||
|
||||
## Typography
|
||||
|
||||
### Headings
|
||||
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
|
||||
### Body Text
|
||||
|
||||
This is a regular paragraph with **bold text**, *italic text*, and ***bold italic text***. Here's some `inline code` as well. You can also use ~~strikethrough~~ text.
|
||||
|
||||
This paragraph contains a [link to an external site](https://github.com) and a [link to internal docs](./bmad-tutorial.md).
|
||||
|
||||
### Blockquotes
|
||||
|
||||
> This is a blockquote. It's useful for calling out important information or quotes from other sources.
|
||||
|
||||
> **Nested blockquote with formatting**
|
||||
>
|
||||
> This blockquote contains multiple paragraphs and **bold text**.
|
||||
>
|
||||
> > This is a nested blockquote inside the first one.
|
||||
|
||||
## Lists
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Third item with sub-items
|
||||
- Sub-item A
|
||||
- Sub-item B
|
||||
- Deep nested item
|
||||
- Fourth item
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
1. First step
|
||||
2. Second step
|
||||
3. Third step with sub-steps
|
||||
1. Sub-step A
|
||||
2. Sub-step B
|
||||
4. Fourth step
|
||||
|
||||
### Task Lists
|
||||
|
||||
- [x] Completed task
|
||||
- [x] Another completed task
|
||||
- [ ] Incomplete task
|
||||
- [ ] Another incomplete task
|
||||
|
||||
## Code
|
||||
|
||||
### Inline Code
|
||||
|
||||
Use the `npx bmad-method install` command to install BMAD.
|
||||
|
||||
### Code Blocks
|
||||
|
||||
```bash
|
||||
# Bash example
|
||||
npx bmad-method install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
```javascript
|
||||
// JavaScript example
|
||||
function greet(name) {
|
||||
console.log(`Hello, ${name}!`);
|
||||
return { greeting: `Hello, ${name}!` };
|
||||
}
|
||||
|
||||
const result = greet('BMAD');
|
||||
```
|
||||
|
||||
```typescript
|
||||
// TypeScript example
|
||||
interface Agent {
|
||||
name: string;
|
||||
role: string;
|
||||
workflows: string[];
|
||||
}
|
||||
|
||||
const analyst: Agent = {
|
||||
name: 'Analyst',
|
||||
role: 'Project initialization',
|
||||
workflows: ['workflow-init', 'brainstorm'],
|
||||
};
|
||||
```
|
||||
|
||||
```yaml
|
||||
# YAML example
|
||||
agent:
|
||||
metadata:
|
||||
id: analyst
|
||||
name: Analyst
|
||||
persona:
|
||||
role: Project Analyst
|
||||
principles:
|
||||
- Be thorough
|
||||
- Ask clarifying questions
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "bmad-method",
|
||||
"version": "6.0.0",
|
||||
"description": "AI-driven development framework"
|
||||
}
|
||||
```
|
||||
|
||||
### Code Block with Line Highlighting
|
||||
|
||||
```javascript title="example.js" {2,4-5}
|
||||
function example() {
|
||||
// This line is highlighted
|
||||
const normal = 'not highlighted';
|
||||
// These lines are
|
||||
// also highlighted
|
||||
return normal;
|
||||
}
|
||||
```
|
||||
|
||||
## Tables
|
||||
|
||||
### Simple Table
|
||||
|
||||
| Agent | Role | Primary Workflows |
|
||||
|-------|------|-------------------|
|
||||
| Analyst | Project initialization | workflow-init, brainstorm |
|
||||
| PM | Requirements | prd, tech-spec |
|
||||
| Architect | System design | create-architecture |
|
||||
| DEV | Implementation | dev-story, code-review |
|
||||
|
||||
### Aligned Table
|
||||
|
||||
| Left Aligned | Center Aligned | Right Aligned |
|
||||
|:-------------|:--------------:|--------------:|
|
||||
| Left | Center | Right |
|
||||
| Text | Text | Text |
|
||||
| More | More | More |
|
||||
|
||||
## Admonitions
|
||||
|
||||
:::note
|
||||
This is a **note** admonition. Use it for supplementary information that's nice to know but not critical.
|
||||
:::
|
||||
|
||||
:::tip[Pro Tip]
|
||||
This is a **tip** admonition with a custom title. Use it for best practices, shortcuts, and helpful hints.
|
||||
:::
|
||||
|
||||
:::info[Important Context]
|
||||
This is an **info** admonition. Use it for important context, definitions, or examples that help understanding.
|
||||
:::
|
||||
|
||||
:::warning[Watch Out]
|
||||
This is a **warning** admonition. Use it for potential issues, caveats, or things users should be careful about.
|
||||
:::
|
||||
|
||||
:::danger[Critical Warning]
|
||||
This is a **danger** admonition. Use it sparingly for critical warnings about data loss, security issues, or irreversible actions.
|
||||
:::
|
||||
|
||||
### Admonitions with Content
|
||||
|
||||
:::tip[Multiple Elements]
|
||||
Admonitions can contain multiple elements:
|
||||
|
||||
- Bullet points
|
||||
- **Bold text**
|
||||
- `inline code`
|
||||
|
||||
```bash
|
||||
# Even code blocks
|
||||
echo "Hello from inside an admonition"
|
||||
```
|
||||
|
||||
And multiple paragraphs of text.
|
||||
:::
|
||||
|
||||
## Links and Images
|
||||
|
||||
### Links
|
||||
|
||||
- [External link](https://github.com/bmad-code-org/BMAD-METHOD)
|
||||
- [Internal link](./bmad-tutorial.md)
|
||||
- [Link with title](https://bmad.dev "BMAD Documentation")
|
||||
- Autolink: <https://example.com>
|
||||
|
||||
### Images
|
||||
|
||||
|
||||
|
||||
*Caption: The BMAD logo*
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
Content above the rule.
|
||||
|
||||
---
|
||||
|
||||
Content below the rule.
|
||||
|
||||
## Details/Collapsible Sections
|
||||
|
||||
<details>
|
||||
<summary>Click to expand this section</summary>
|
||||
|
||||
This content is hidden by default and can be expanded by clicking the summary.
|
||||
|
||||
- It can contain lists
|
||||
- And **formatted text**
|
||||
- And even code:
|
||||
|
||||
```bash
|
||||
echo "Hidden code"
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Another collapsible section</summary>
|
||||
|
||||
More hidden content here.
|
||||
|
||||
</details>
|
||||
|
||||
## Special Elements
|
||||
|
||||
### Keyboard Keys
|
||||
|
||||
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
|
||||
|
||||
On Mac, use <kbd>Cmd</kbd> + <kbd>V</kbd> to paste.
|
||||
|
||||
### Abbreviations
|
||||
|
||||
The HTML specification is maintained by the W3C.
|
||||
|
||||
### Subscript and Superscript
|
||||
|
||||
H<sub>2</sub>O is water.
|
||||
|
||||
E = mc<sup>2</sup> is Einstein's famous equation.
|
||||
|
||||
## Combined Examples
|
||||
|
||||
### Card-Style Layout
|
||||
|
||||
<div className="row">
|
||||
<div className="col col--6 margin-bottom--lg">
|
||||
<div className="card">
|
||||
<div className="card__header">
|
||||
<h3>Card Title</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<p>Card body content with <strong>bold</strong> and <code>code</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col--6 margin-bottom--lg">
|
||||
<div className="card">
|
||||
<div className="card__header">
|
||||
<h3>Another Card</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<p>More card content here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Buttons
|
||||
|
||||
<a className="button button--primary margin-right--sm">Primary Button</a>
|
||||
<a className="button button--secondary margin-right--sm">Secondary Button</a>
|
||||
<a className="button button--outline button--primary">Outline Button</a>
|
||||
|
||||
### Mixed Content Block
|
||||
|
||||
:::info[Real-World Example]
|
||||
Here's how a typical workflow command looks:
|
||||
|
||||
1. Load the **PM agent** in your IDE
|
||||
2. Run the PRD workflow:
|
||||
```
|
||||
*prd
|
||||
```
|
||||
3. Answer the agent's questions
|
||||
4. Review the output in `_bmad-output/PRD.md`
|
||||
|
||||
| Step | Agent | Command |
|
||||
|------|-------|---------|
|
||||
| 1 | PM | `*prd` |
|
||||
| 2 | Architect | `*create-architecture` |
|
||||
| 3 | SM | `*sprint-planning` |
|
||||
|
||||
**Result:** A complete PRD document ready for architecture.
|
||||
:::
|
||||
|
||||
## Color Palette Preview
|
||||
|
||||
These boxes show the primary color at various shades:
|
||||
|
||||
<div style={{display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '16px'}}>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-darkest)', borderRadius: '4px'}} title="primary-darkest"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-darker)', borderRadius: '4px'}} title="primary-darker"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-dark)', borderRadius: '4px'}} title="primary-dark"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary)', borderRadius: '4px'}} title="primary"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-light)', borderRadius: '4px'}} title="primary-light"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-lighter)', borderRadius: '4px'}} title="primary-lighter"></div>
|
||||
<div style={{width: '60px', height: '60px', backgroundColor: 'var(--ifm-color-primary-lightest)', borderRadius: '4px'}} title="primary-lightest"></div>
|
||||
</div>
|
||||
|
||||
Labels (left to right): darkest, darker, dark, **primary**, light, lighter, lightest
|
||||
|
|
@ -64,6 +64,12 @@ div[class*='announcementBar'] strong {
|
|||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Dark mode - slightly lighter than background to stand out */
|
||||
[data-theme='dark'] div[class*='announcementBar'] {
|
||||
background-color: #334155 !important;
|
||||
border-bottom: 1px solid rgba(96, 165, 250, 0.15);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
TYPOGRAPHY - Clean, readable font stack
|
||||
============================================ */
|
||||
|
|
|
|||
|
|
@ -121,30 +121,6 @@ const config = {
|
|||
src: 'img/logo.svg',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
docId: 'tutorials/getting-started/bmad-tutorial',
|
||||
position: 'left',
|
||||
label: 'Tutorials',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
docId: 'how-to/index',
|
||||
position: 'left',
|
||||
label: 'How-To',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
docId: 'explanation/index',
|
||||
position: 'left',
|
||||
label: 'Concepts',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
docId: 'reference/index',
|
||||
position: 'left',
|
||||
label: 'Reference',
|
||||
},
|
||||
{
|
||||
to: '/downloads',
|
||||
label: 'Downloads',
|
||||
|
|
|
|||
Loading…
Reference in New Issue