diff --git a/docs/index.md b/docs/index.md index da7de2f4..a4f9db13 100644 --- a/docs/index.md +++ b/docs/index.md @@ -39,9 +39,6 @@ These docs are organized into four sections based on what you're trying to do:

Learning-oriented. Step-by-step guides that walk you through building something. Start here if you're new to BMAD.

-
- Browse Tutorials -
@@ -52,9 +49,6 @@ These docs are organized into four sections based on what you're trying to do:

Task-oriented. Practical guides for solving specific problems. "How do I customize an agent?" lives here.

-
- Find a Guide -
@@ -65,9 +59,6 @@ These docs are organized into four sections based on what you're trying to do:

Understanding-oriented. Deep dives into concepts and architecture. Read these when you want to know why something works.

-
- Explore Concepts -
@@ -78,9 +69,6 @@ These docs are organized into four sections based on what you're trying to do:

Information-oriented. Technical specifications for agents, workflows, and configuration. Look things up here.

-
- Browse Reference -
diff --git a/docs/tutorials/getting-started/markdown-demo.md b/docs/tutorials/getting-started/markdown-demo.md new file mode 100644 index 00000000..3fbb016d --- /dev/null +++ b/docs/tutorials/getting-started/markdown-demo.md @@ -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: + +### Images + +![BMAD Logo](/img/logo.svg) + +*Caption: The BMAD logo* + +## Horizontal Rules + +Content above the rule. + +--- + +Content below the rule. + +## Details/Collapsible Sections + +
+Click to expand this section + +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" +``` + +
+ +
+Another collapsible section + +More hidden content here. + +
+ +## Special Elements + +### Keyboard Keys + +Press Ctrl + C to copy. + +On Mac, use Cmd + V to paste. + +### Abbreviations + +The HTML specification is maintained by the W3C. + +### Subscript and Superscript + +H2O is water. + +E = mc2 is Einstein's famous equation. + +## Combined Examples + +### Card-Style Layout + +
+
+
+
+

Card Title

+
+
+

Card body content with bold and code.

+
+
+
+
+
+
+

Another Card

+
+
+

More card content here.

+
+
+
+
+ +### Buttons + +Primary Button +Secondary Button +Outline Button + +### 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: + +
+
+
+
+
+
+
+
+
+ +Labels (left to right): darkest, darker, dark, **primary**, light, lighter, lightest diff --git a/website/css/custom.css b/website/css/custom.css index 7d0ae105..b608d734 100644 --- a/website/css/custom.css +++ b/website/css/custom.css @@ -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 ============================================ */ diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index e4fdcd6b..8c8b1d09 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -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',