From b34c4d613d5b12912f19f8813a52590adcf9eea4 Mon Sep 17 00:00:00 2001 From: dishaprakash <57954147+dishaprakash@users.noreply.github.com> Date: Fri, 26 Jun 2026 15:28:25 +0530 Subject: [PATCH 1/5] Add newline at end of migration-banner.js Fix missing newline at the end of migration-banner.js From 43c0964d17078f579c28cb31b794add5a5dd249b Mon Sep 17 00:00:00 2001 From: dishaprakash <57954147+dishaprakash@users.noreply.github.com> Date: Fri, 26 Jun 2026 15:29:27 +0530 Subject: [PATCH 2/5] Remove disableMigrationBanner setting from config --- .hugo/hugo.cloudflare.toml | 1 - 1 file changed, 1 deletion(-) diff --git a/.hugo/hugo.cloudflare.toml b/.hugo/hugo.cloudflare.toml index 9160bb8b36f..f685faee076 100644 --- a/.hugo/hugo.cloudflare.toml +++ b/.hugo/hugo.cloudflare.toml @@ -55,7 +55,6 @@ ignoreFiles = ["quickstart/shared", "quickstart/python", "quickstart/js", "quick github_subdir = "docs" offlineSearch = false version_menu = "Releases" - disableMigrationBanner = true releases_url = "/releases.releases" global_logo_url = "/" pagefind = true From 19f325967663d723b338840aacbdeed310186cf4 Mon Sep 17 00:00:00 2001 From: dishaprakash <57954147+dishaprakash@users.noreply.github.com> Date: Fri, 26 Jun 2026 15:29:49 +0530 Subject: [PATCH 3/5] Update custom-layout.js --- .hugo/static/js/custom-layout.js | 131 +++++++++++++++++++++---------- 1 file changed, 91 insertions(+), 40 deletions(-) diff --git a/.hugo/static/js/custom-layout.js b/.hugo/static/js/custom-layout.js index 9d36e5a46b6..adbfde2f599 100644 --- a/.hugo/static/js/custom-layout.js +++ b/.hugo/static/js/custom-layout.js @@ -2,6 +2,17 @@ * Custom Layout Interactivity * Handles dynamic offsets, DOM repositioning, and UI enhancements. */ + +// ========================================================================== +// BANNER CONFIGURATION +// ========================================================================== +const BANNER_CONFIG = { + title: "Announcement:", + message: "Put your general announcement message here!", + linkText: "Learn more", + linkUrl: "https://google.com" +}; + document.addEventListener('DOMContentLoaded', function() { // ========================================================================== @@ -14,7 +25,6 @@ document.addEventListener('DOMContentLoaded', function() { } .theme-banner-wrapper { - position: sticky; z-index: 20; padding-top: 15px; padding-bottom: 5px; @@ -22,23 +32,48 @@ document.addEventListener('DOMContentLoaded', function() { background-color: var(--bs-body-bg, #ffffff); } - .theme-migration-banner { + .theme-banner { background-color: #ebf3fc; border: 1px solid #80a7e9; color: #1c3a6b; border-radius: 4px; - padding: 15px; - text-align: center; + padding: 12px 15px; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.05); + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; + } + + .theme-banner-content { + flex-grow: 1; + text-align: center; } - .theme-migration-banner a { + .theme-banner a { color: #4484f4; text-decoration: underline; font-weight: bold; } + /* Cancel Button Styling */ + .theme-banner button.close-btn { + background: none; + border: none; + color: inherit; + font-size: 22px; + cursor: pointer; + line-height: 1; + padding: 0 5px; + opacity: 0.6; + transition: opacity 0.2s; + } + + .theme-banner button.close-btn:hover { + opacity: 1; + } + /* DARK MODE STYLING */ html[data-bs-theme="dark"] .theme-banner-wrapper, body.dark .theme-banner-wrapper, @@ -46,17 +81,17 @@ document.addEventListener('DOMContentLoaded', function() { background-color: var(--bs-body-bg, #20252b); } - html[data-bs-theme="dark"] .theme-migration-banner, - body.dark .theme-migration-banner, - html.dark-mode .theme-migration-banner { + html[data-bs-theme="dark"] .theme-banner, + body.dark .theme-banner, + html.dark-mode .theme-banner { background-color: #1a273b; color: #e6efff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } - html[data-bs-theme="dark"] .theme-migration-banner a, - body.dark .theme-migration-banner a, - html.dark-mode .theme-migration-banner a { + html[data-bs-theme="dark"] .theme-banner a, + body.dark .theme-banner a, + html.dark-mode .theme-banner a { color: #80a7e9; } @@ -64,12 +99,12 @@ document.addEventListener('DOMContentLoaded', function() { html:not([data-bs-theme="light"]):not(.light) .theme-banner-wrapper { background-color: var(--bs-body-bg, #20252b); } - html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner { + html:not([data-bs-theme="light"]):not(.light) .theme-banner { background-color: #1a273b; color: #e6efff; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } - html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner a { + html:not([data-bs-theme="light"]):not(.light) .theme-banner a { color: #80a7e9; } } @@ -78,59 +113,75 @@ document.addEventListener('DOMContentLoaded', function() { @media (max-width: 991.98px) { .theme-banner-wrapper { position: relative !important; - top: auto !important; - z-index: 1; + top: auto !important; + z-index: 1; } } `; document.head.appendChild(styleTag); // ========================================================================== - // MIGRATION BANNER & HEADER OFFSET CALCULATOR + // HEADER OFFSET CALCULATOR // ========================================================================== function updateHeaderOffset() { var mainNav = document.querySelector('.td-navbar'); var secondaryNav = document.getElementById('secondary-nav'); - var migrationWrapper = document.getElementById('migration-banner-wrapper'); var h1 = mainNav ? mainNav.offsetHeight : 0; var h2 = secondaryNav ? secondaryNav.offsetHeight : 0; var totalHeight = h1 + h2; document.documentElement.style.setProperty('--header-offset', totalHeight + 'px'); + } - if (migrationWrapper) { - migrationWrapper.style.top = totalHeight + 'px'; + // ========================================================================== + // INJECT BANNER + // ========================================================================== + + var storageKey = "hideGeneralBanner"; + + if (sessionStorage.getItem(storageKey) !== "true") { + + var wrapper = document.createElement('div'); + wrapper.id = 'banner-wrapper'; + wrapper.className = 'theme-banner-wrapper'; + + var banner = document.createElement('div'); + banner.className = 'theme-banner'; + + // If the URL starts with http/https, add target="_blank" and security attributes + var isExternal = BANNER_CONFIG.linkUrl.startsWith('http'); + var linkAttributes = isExternal ? ' target="_blank" rel="noopener noreferrer"' : ''; + + banner.innerHTML = ` +
+ ${BANNER_CONFIG.title} ${BANNER_CONFIG.message} + ${BANNER_CONFIG.linkText}. +
+ + `; + wrapper.appendChild(banner); + + var contentArea = document.querySelector('.td-content') || document.querySelector('main'); + if (contentArea) { + contentArea.prepend(wrapper); } - } - // Create the Wrapper - var wrapper = document.createElement('div'); - wrapper.id = 'migration-banner-wrapper'; - wrapper.className = 'theme-banner-wrapper'; - - // Create the Banner - var banner = document.createElement('div'); - banner.className = 'theme-migration-banner'; - banner.innerHTML = '⚠️ Archived Docs: Visit mcp-toolbox.dev for the latest version.'; - wrapper.appendChild(banner); - - // Inject the wrapper into the center information column - var contentArea = document.querySelector('.td-content') || document.querySelector('main'); - if (contentArea) { - contentArea.prepend(wrapper); - } else { - console.warn("Could not find the main content column to inject the banner."); + var closeBtn = document.getElementById('close-general-banner'); + if (closeBtn) { + closeBtn.addEventListener('click', function() { + wrapper.style.display = 'none'; + sessionStorage.setItem(storageKey, "true"); + }); + } } // Initialize the dynamic offset updateHeaderOffset(); - // Re-calculate on window resize window.addEventListener('resize', updateHeaderOffset); - // Use ResizeObserver to detect header height changes if (window.ResizeObserver) { const ro = new ResizeObserver(updateHeaderOffset); const navToWatch = document.querySelector('.td-navbar'); @@ -152,4 +203,4 @@ document.addEventListener('DOMContentLoaded', function() { breadcrumbs.style.marginBottom = "2rem"; } -}); \ No newline at end of file +}); From 8a7c93e02b528b547d0cf1dd3f0e0bd5a9412117 Mon Sep 17 00:00:00 2001 From: dishaprakash <57954147+dishaprakash@users.noreply.github.com> Date: Fri, 26 Jun 2026 15:30:20 +0530 Subject: [PATCH 4/5] Update condition for loading migration banner script --- .hugo/layouts/partials/hooks/head-end.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.hugo/layouts/partials/hooks/head-end.html b/.hugo/layouts/partials/hooks/head-end.html index 23cfa66aa95..309fa5822a1 100644 --- a/.hugo/layouts/partials/hooks/head-end.html +++ b/.hugo/layouts/partials/hooks/head-end.html @@ -1,4 +1,4 @@ -{{ if not .Site.Params.disableMigrationBanner }} +{{ if not .Site.Params.disableBanner }} {{ end }} From 167d923b1d5847b8da359524f7bc3a81d7837100 Mon Sep 17 00:00:00 2001 From: dishaprakash <57954147+dishaprakash@users.noreply.github.com> Date: Fri, 26 Jun 2026 15:31:58 +0530 Subject: [PATCH 5/5] Delete .hugo/static/js/migration-banner.js --- .hugo/static/js/migration-banner.js | 98 ----------------------------- 1 file changed, 98 deletions(-) delete mode 100644 .hugo/static/js/migration-banner.js diff --git a/.hugo/static/js/migration-banner.js b/.hugo/static/js/migration-banner.js deleted file mode 100644 index 6ce3ed91f57..00000000000 --- a/.hugo/static/js/migration-banner.js +++ /dev/null @@ -1,98 +0,0 @@ -document.addEventListener('DOMContentLoaded', function() { - - // Setup CSS for the wrapper and the banner - var styleTag = document.createElement('style'); - styleTag.innerHTML = ` - .td-navbar .dropdown-menu { - z-index: 9999 !important; - } - - .theme-banner-wrapper { - position: sticky; - z-index: 20; - padding-top: 15px; /* This is your gap! */ - padding-bottom: 5px; /* Breathing room below the banner */ - /* Uses Bootstrap's native body background variable, with white as fallback */ - background-color: var(--bs-body-bg, #ffffff); - } - - .theme-migration-banner { - background-color: #ebf3fc; - border: 1px solid #80a7e9; - color: #1c3a6b; - border-radius: 4px; - padding: 15px; - text-align: center; - width: 100%; - box-shadow: 0 4px 6px rgba(0,0,0,0.05); - } - - .theme-migration-banner a { - color: #4484f4; - text-decoration: underline; - font-weight: bold; - } - - /* DARK MODE STYLING */ - html[data-bs-theme="dark"] .theme-banner-wrapper, - body.dark .theme-banner-wrapper, - html.dark-mode .theme-banner-wrapper { - /* Uses Docsy's dark mode background fallback if var fails */ - background-color: var(--bs-body-bg, #20252b); - } - - html[data-bs-theme="dark"] .theme-migration-banner, - body.dark .theme-migration-banner, - html.dark-mode .theme-migration-banner { - background-color: #1a273b; - color: #e6efff; - box-shadow: 0 4px 6px rgba(0,0,0,0.3); - } - - html[data-bs-theme="dark"] .theme-migration-banner a, - body.dark .theme-migration-banner a, - html.dark-mode .theme-migration-banner a { - color: #80a7e9; - } - - /* Fallback for OS-level dark mode */ - @media (prefers-color-scheme: dark) { - html:not([data-bs-theme="light"]):not(.light) .theme-banner-wrapper { - background-color: var(--bs-body-bg, #20252b); - } - html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner { - background-color: #1a273b; - color: #e6efff; - box-shadow: 0 4px 6px rgba(0,0,0,0.3); - } - html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner a { - color: #80a7e9; - } - } - `; - document.head.appendChild(styleTag); - - // Create the Wrapper - var wrapper = document.createElement('div'); - wrapper.id = 'migration-banner-wrapper'; - wrapper.className = 'theme-banner-wrapper'; - - // Create the Banner - var banner = document.createElement('div'); - banner.className = 'theme-migration-banner'; - banner.innerHTML = '⚠️ Archived Docs: Visit mcp-toolbox.dev for the latest version.'; - wrapper.appendChild(banner); - - // Inject the wrapper into the center information column - var contentArea = document.querySelector('.td-content') || document.querySelector('main'); - if (contentArea) { - contentArea.prepend(wrapper); - } else { - console.warn("Could not find the main content column to inject the banner."); - } - - // Calculate navbar height synchronously to correctly offset the sticky wrapper - var navbar = document.querySelector('.td-navbar'); - var navbarHeight = navbar ? navbar.offsetHeight : 64; - wrapper.style.top = navbarHeight + 'px'; -});