Skip to content

fix: move BMB announcement to custom Banner component #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bmadcode merged 1 commit into from
Apr 4, 2026
Merged

fix: move BMB announcement to custom Banner component #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions website/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@ export default defineConfig({
title: 'Creative Intelligence Suite',
tagline: 'Innovation, brainstorming, and problem-solving agents for the BMad Method.',

banner: {
content: 'Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.',
},

favicon: '/favicon.ico',

// Social links
Expand Down
26 changes: 20 additions & 6 deletions website/src/components/Banner.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
<div class="ai-banner">
<span>🤖 AI-optimized docs: <a href={llmsFullUrl}>llms-full.txt</a></span>
</div>
<div class="announce-banner">
Copy link
Copy Markdown

@augmentcode augmentcode Bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

custom.css sets --sl-nav-height and the inner header height assuming a single --ai-banner-height banner row; adding a second banner here may cause the header/content to overlap or be clipped. Consider verifying/adjusting the nav height math so the layout accounts for both banner rows.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

<span>🚀 Build your own BMad modules and share them with the community! <a href="https://bmad-builder-docs.bmad-method.org/tutorials/build-your-first-module/">Get started</a> or <a href="https://bmad-builder-docs.bmad-method.org/how-to/distribute-your-module/">submit to the marketplace</a>.</span>
</div>

<style>
.ai-banner {
.ai-banner,
.announce-banner {
width: 100vw;
margin-left: calc(-50vw + 50%);
height: var(--ai-banner-height, 2.75rem);
Expand All @@ -25,31 +29,41 @@ const llmsFullUrl = `${getSiteUrl()}/llms-full.txt`;
font-family: 'Inter', system-ui, sans-serif;
}

.ai-banner span {
.ai-banner span,
.announce-banner span {
white-space: nowrap;
Copy link
Copy Markdown

@augmentcode augmentcode Bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Applying white-space: nowrap + overflow: hidden + ellipsis to .announce-banner span will likely truncate the long announcement on narrow viewports, potentially hiding the CTA links (making them unreachable). Consider ensuring the important links remain visible/clickable on mobile.

Severity: medium

Fix This in Augment

🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.

overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ai-banner a {
.ai-banner a,
.announce-banner a {
color: #3b82f6;
text-decoration: none;
font-weight: 600;
}
.ai-banner a:hover {
.ai-banner a:hover,
.announce-banner a:hover {
color: #fafafa;
text-decoration: underline;
}

.announce-banner {
background: #1a2332;
border-bottom: 1px solid #1e3a5f;
}

@media (min-width: 50rem) {
.ai-banner {
.ai-banner,
.announce-banner {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
}

@media (min-width: 72rem) {
.ai-banner {
.ai-banner,
.announce-banner {
padding-left: 3rem;
padding-right: 3rem;
}
Expand Down
Loading