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">
|
<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>
|
<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>
|
||||||
<div className="card__footer">
|
|
||||||
<a className="button button--secondary button--block" href="/docs/tutorials">Browse Tutorials</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col col--6 margin-bottom--lg">
|
<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">
|
<div className="card__body">
|
||||||
<p><strong>Task-oriented.</strong> Practical guides for solving specific problems. "How do I customize an agent?" lives here.</p>
|
<p><strong>Task-oriented.</strong> Practical guides for solving specific problems. "How do I customize an agent?" lives here.</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card__footer">
|
|
||||||
<a className="button button--secondary button--block" href="/docs/how-to">Find a Guide</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col col--6 margin-bottom--lg">
|
<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">
|
<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>
|
<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>
|
||||||
<div className="card__footer">
|
|
||||||
<a className="button button--secondary button--block" href="/docs/explanation">Explore Concepts</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col col--6 margin-bottom--lg">
|
<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">
|
<div className="card__body">
|
||||||
<p><strong>Information-oriented.</strong> Technical specifications for agents, workflows, and configuration. Look things up here.</p>
|
<p><strong>Information-oriented.</strong> Technical specifications for agents, workflows, and configuration. Look things up here.</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="card__footer">
|
|
||||||
<a className="button button--secondary button--block" href="/docs/reference">Browse Reference</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</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;
|
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
|
TYPOGRAPHY - Clean, readable font stack
|
||||||
============================================ */
|
============================================ */
|
||||||
|
|
|
||||||
|
|
@ -121,30 +121,6 @@ const config = {
|
||||||
src: 'img/logo.svg',
|
src: 'img/logo.svg',
|
||||||
},
|
},
|
||||||
items: [
|
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',
|
to: '/downloads',
|
||||||
label: 'Downloads',
|
label: 'Downloads',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue