1+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
2+ // Trigger your releases dropdown
3+ if ( typeof w3 !== 'undefined' ) { w3 . includeHTML ( ) ; }
4+
5+ // Setup CSS for the wrapper and the banner
6+ var styleTag = document . createElement ( 'style' ) ;
7+ styleTag . innerHTML = `
8+ .td-navbar .dropdown-menu {
9+ z-index: 9999 !important;
10+ }
11+
12+ .theme-banner-wrapper {
13+ position: sticky;
14+ z-index: 20;
15+ padding-top: 15px; /* This is your gap! */
16+ padding-bottom: 5px; /* Breathing room below the banner */
17+ /* Uses Bootstrap's native body background variable, with white as fallback */
18+ background-color: var(--bs-body-bg, #ffffff);
19+ }
20+
21+ .theme-migration-banner {
22+ background-color: #ebf3fc;
23+ border: 1px solid #80a7e9;
24+ color: #1c3a6b;
25+ border-radius: 4px;
26+ padding: 15px;
27+ text-align: center;
28+ width: 100%;
29+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
30+ }
31+
32+ .theme-migration-banner a {
33+ color: #4484f4;
34+ text-decoration: underline;
35+ font-weight: bold;
36+ }
37+
38+ /* DARK MODE STYLING */
39+ html[data-bs-theme="dark"] .theme-banner-wrapper,
40+ body.dark .theme-banner-wrapper,
41+ html.dark-mode .theme-banner-wrapper {
42+ /* Uses Docsy's dark mode background fallback if var fails */
43+ background-color: var(--bs-body-bg, #20252b);
44+ }
45+
46+ html[data-bs-theme="dark"] .theme-migration-banner,
47+ body.dark .theme-migration-banner,
48+ html.dark-mode .theme-migration-banner {
49+ background-color: #1a273b;
50+ color: #e6efff;
51+ box-shadow: 0 4px 6px rgba(0,0,0,0.3);
52+ }
53+
54+ html[data-bs-theme="dark"] .theme-migration-banner a,
55+ body.dark .theme-migration-banner a,
56+ html.dark-mode .theme-migration-banner a {
57+ color: #80a7e9;
58+ }
59+
60+ /* Fallback for OS-level dark mode */
61+ @media (prefers-color-scheme: dark) {
62+ html:not([data-bs-theme="light"]):not(.light) .theme-banner-wrapper {
63+ background-color: var(--bs-body-bg, #20252b);
64+ }
65+ html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner {
66+ background-color: #1a273b;
67+ color: #e6efff;
68+ box-shadow: 0 4px 6px rgba(0,0,0,0.3);
69+ }
70+ html:not([data-bs-theme="light"]):not(.light) .theme-migration-banner a {
71+ color: #80a7e9;
72+ }
73+ }
74+ ` ;
75+ document . head . appendChild ( styleTag ) ;
76+
77+ // Create the Wrapper
78+ var wrapper = document . createElement ( 'div' ) ;
79+ wrapper . id = 'migration-banner-wrapper' ;
80+ wrapper . className = 'theme-banner-wrapper' ;
81+
82+ // Create the Banner
83+ var banner = document . createElement ( 'div' ) ;
84+ banner . className = 'theme-migration-banner' ;
85+ banner . innerHTML = '⚠️ <strong>Archived Docs:</strong> Visit <a href="https://mcp-toolbox.dev/">mcp-toolbox.dev</a> for the latest version.' ;
86+ wrapper . appendChild ( banner ) ;
87+
88+ // Inject the wrapper into the center information column
89+ var contentArea = document . querySelector ( '.td-content' ) || document . querySelector ( 'main' ) ;
90+ if ( contentArea ) {
91+ contentArea . prepend ( wrapper ) ;
92+ } else {
93+ console . warn ( "Could not find the main content column to inject the banner." ) ;
94+ }
95+
96+ setTimeout ( function ( ) {
97+ var navbar = document . querySelector ( '.td-navbar' ) ;
98+ var navbarHeight = navbar ? navbar . offsetHeight : 64 ;
99+ wrapper . style . top = navbarHeight + 'px' ;
100+ } , 50 ) ;
101+ } ) ;
0 commit comments