feat: update website header with new BMAD Method branding #1352
+11
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Remove duplicate H1 header (frontmatter provides title) - Remove horizontal rules throughout - Convert Prerequisites to admonition - Add Quick Path TL;DR admonition - Convert Key Takeaway to tip admonition - Convert TEA Workflows list to Quick Reference table - Convert Troubleshooting to Common Questions FAQ format - Rename Need Help to Getting Help section - Remove redundant Feedback section Also adds missing @clack/prompts dependency from upstream merge. Co-Authored-By: Claude Opus 4.5 <[email protected]>
- MCP → Model Context Protocol - E2E → End-to-end (also fix missing article) - CI/CD → Continuous integration/continuous deployment - ATDD → Acceptance Test-Driven Development - TDD → Test-Driven Development - NFR → non-functional requirements - Remove inaccurate CRUD reference Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Add banner image to README header - Replace website logo with wordmark, hiding title text - Left-align logo with sidebar by reducing header padding Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Revert README to original banner - Add waveform banner to docs site welcome page Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Remove banner from welcome page content - Update header logo to use banner-bmad-method2.png Co-Authored-By: Claude Opus 4.5 <[email protected]>
Use banner-bmad-method-dark.png in dark mode for better blending Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Light mode: bmad-light.png (dark blue background with lightning) - Dark mode: bmad-dark.png (light background variant) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Remove unused banner-bmad-method2.png and bmad-wordmark.png - Add readme2.md with upcoming features section - Update banner-bmad-method-dark.png Co-Authored-By: Claude Opus 4.5 <[email protected]>
Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Rename bmad-light2.png to bmad-light.png as final version - Remove readme2.md draft Co-Authored-By: Claude Opus 4.5 <[email protected]>
📝 WalkthroughWalkthroughThe pull request updates project branding by replacing the text title with a banner image in README.md, updates terminology in getting-started documentation from "TEA Lite" to "Test Architect", modifies website logo configuration to support light and dark theme variants, and adjusts header navigation styling with revised padding and title alignment. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@docs/tutorials/getting-started/tea-lite-quickstart.md`:
- Around line 15-23: Update the Node.js version in the Prerequisites note from
"v18 or later" to "v20 or later" so it matches the README Quick Start; edit the
"Prerequisites" block (the Node.js line in tea-lite-quickstart) and verify any
other Node.js mentions in this document are changed to v20+ for consistency.
In `@website/astro.config.mjs`:
- Around line 40-45: The logo asset paths in the logo config use filesystem
paths ('./public/img/...') which won't resolve; update the logo object (keys:
light, dark, retains replacesTitle) to use root-relative URLs (e.g.,
'/img/bmad-light.png' and '/img/bmad-dark.png') so Astro serves them from the
public/ directory at build time.
Comment on lines
15
to
23
| :::note[Prerequisites] | ||
| - Node.js installed (v18 or later) | ||
| - 30 minutes of focused time | ||
| - We'll use TodoMVC (<https://todomvc.com/examples/react/>) as our demo app | ||
| ::: | ||
|
|
||
| :::tip[Quick Path] | ||
| Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`. | ||
| ::: |
There was a problem hiding this comment.
Align Node.js version guidance with the README.
Line 16 says Node.js v18+, while the README Quick Start states v20+. This inconsistency can confuse users; please align the minimum version.
🔧 Suggested fix (if v20+ is the actual minimum)
- - Node.js installed (v18 or later)
+ - Node.js installed (v20 or later)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| :::note[Prerequisites] | |
| - Node.js installed (v18 or later) | |
| - 30 minutes of focused time | |
| - We'll use TodoMVC (<https://todomvc.com/examples/react/>) as our demo app | |
| ::: | |
| :::tip[Quick Path] | |
| Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`. | |
| ::: | |
| :::note[Prerequisites] | |
| - Node.js installed (v20 or later) | |
| - 30 minutes of focused time | |
| - We'll use TodoMVC (<https://todomvc.com/examples/react/>) as our demo app | |
| ::: | |
| :::tip[Quick Path] | |
| Load TEA (`*tea`) → scaffold framework (`*framework`) → create test plan (`*test-design`) → generate tests (`*automate`) → run with `npx playwright test`. | |
| ::: |
🤖 Prompt for AI Agents
In `@docs/tutorials/getting-started/tea-lite-quickstart.md` around lines 15 - 23,
Update the Node.js version in the Prerequisites note from "v18 or later" to "v20
or later" so it matches the README Quick Start; edit the "Prerequisites" block
(the Node.js line in tea-lite-quickstart) and verify any other Node.js mentions
in this document are changed to v20+ for consistency.
Comment on lines
40
to
45
| logo: { | ||
| src: './public/img/logo.svg', | ||
| alt: 'BMAD Logo', | ||
| light: './public/img/bmad-light.png', | ||
| dark: './public/img/bmad-dark.png', | ||
| alt: 'BMAD Method', | ||
| replacesTitle: true, | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find and check the package.json for `@astrojs/starlight` version
find . -name "package.json" -type f | head -5 | xargs grep -l "@astrojs/starlight"Repository: bmad-code-org/BMAD-METHOD
Length of output: 83
🏁 Script executed:
# Get the full context of the astro.config.mjs file
cat -n website/astro.config.mjsRepository: bmad-code-org/BMAD-METHOD
Length of output: 8329
🏁 Script executed:
# Check if there are any other logo configurations or documentation in the repo
rg -i "logo\.(light|dark|replacesTitle)" -A 2 -B 2Repository: bmad-code-org/BMAD-METHOD
Length of output: 51
🏁 Script executed:
cat -n package.json | grep -A 2 -B 2 "@astrojs/starlight"Repository: bmad-code-org/BMAD-METHOD
Length of output: 252
🌐 Web query:
Starlight @astrojs/starlight logo configuration light dark replacesTitle API
💡 Result:
Yes — Starlight's logo option supports a simple API that lets you set a single image or light/dark variants, plus accessibility and title-replacement flags.
Key API (used inside starlight({ ... }) in astro.config.mjs):
- logo can be either { src: string } or { light: string; dark: string }.
- Optional properties: alt?: string and replacesTitle?: boolean (when true the visual site title is hidden but kept for screen readers).
- Type signature from the docs:
type LogoConfig = { alt?: string; replacesTitle?: boolean } & ({ src: string } | { light: string; dark: string }). [see docs]
Minimal examples:
- Single src
starlight({ title: 'My site', logo: { src: './src/assets/my-logo.svg' } }). [see docs] - Replace title visually
starlight({ title: 'My site', logo: { src: './src/assets/my-logo.svg', replacesTitle: true } }). [see docs] - Light / dark variants
starlight({ title: 'My site', logo: { light: './src/assets/light.svg', dark: './src/assets/dark.svg' } }). [see docs]
Sources: Starlight customization guide and configuration reference. [1][2]
🏁 Script executed:
# Verify if the public/img directory and files exist
ls -la website/public/img/ 2>/dev/null || echo "Directory check result"
fd -t f "bmad-(light|dark)" website/Repository: bmad-code-org/BMAD-METHOD
Length of output: 438
🌐 Web query:
Astro public directory asset paths ./public vs / root-relative
💡 Result:
Short answer
- Put files you don't want processed into /public and reference them with root‑relative paths like /images/foo.png. This is the documented Astro convention. [1][2]
- Using ./relative paths in markup points at the current page URL (and can break when pages live in subpaths) — prefer root‑relative or import assets from src/ so Astro can bundle/optimize them. [1][3]
- If you deploy to a subpath (example.com/docs), set astro.config.mjs base (or use import.meta.env.BASE_URL) and prefix public URLs with that base so asset URLs resolve correctly. [4][2]
References
- Astro Images / public vs src guidance. [1]
- Astro Assets / Image examples showing /public paths. [3]
- Astro config: base and import.meta.env.BASE_URL (use when deploying under a subpath). [4]
Fix logo asset paths to use root-relative URLs for public directory.
Lines 41–42 incorrectly use ./public/img/.... In Astro, files in the public/ directory are served at the root and must be referenced as root-relative URLs (/img/...), not file system paths. Using ./public/ will fail to resolve at build time. The light/dark variants and replacesTitle flag are fully supported in Starlight ^0.37.0.
🔧 Suggested fix
Suggested change
| logo: { | |
| src: './public/img/logo.svg', | |
| alt: 'BMAD Logo', | |
| light: './public/img/bmad-light.png', | |
| dark: './public/img/bmad-dark.png', | |
| alt: 'BMAD Method', | |
| replacesTitle: true, | |
| }, | |
| light: '/img/bmad-light.png', | |
| dark: '/img/bmad-dark.png', |
🤖 Prompt for AI Agents
In `@website/astro.config.mjs` around lines 40 - 45, The logo asset paths in the
logo config use filesystem paths ('./public/img/...') which won't resolve;
update the logo object (keys: light, dark, retains replacesTitle) to use
root-relative URLs (e.g., '/img/bmad-light.png' and '/img/bmad-dark.png') so
Astro serves them from the public/ directory at build time.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
bmad-light.png) and dark mode (bmad-dark.png)Test plan
🤖 Generated with Claude Code