Dismissable banner for v3 (#1038)

cotti · web-flow · commit 93460b876e72 · 2025-04-07T16:18:19.000-03:00
* Add dismissible banner for launch
diff --git a/src/Elastic.Markdown/Assets/dismissible-banner.ts b/src/Elastic.Markdown/Assets/dismissible-banner.ts
@@ -0,0 +1,13 @@
+export function initDismissibleBanner() {
+    const banner = document.getElementById('dismissible-banner')
+    const dismissButton = document.getElementById('dismissible-button')
+
+    if (!localStorage.getItem('bannerDismissed')) {
+        banner?.style.setProperty('display', 'flex')
+    }
+
+    dismissButton?.addEventListener('click', () => {
+        banner?.style.setProperty('display', 'none')
+        localStorage.setItem('bannerDismissed', 'true')
+    })
+}
diff --git a/src/Elastic.Markdown/Assets/main.ts b/src/Elastic.Markdown/Assets/main.ts
@@ -1,4 +1,5 @@
 import { initCopyButton } from './copybutton'
+import { initDismissibleBanner } from './dismissible-banner'
 import { initHighlight } from './hljs'
 import { openDetailsWithAnchor } from './open-details-with-anchor'
 import { initNav } from './pages-nav'
@@ -21,6 +22,7 @@ document.addEventListener('htmx:load', function () {
     initNav()
     initSmoothScroll()
     openDetailsWithAnchor()
+    initDismissibleBanner()
 })
 
 // Don't remove style tags because they are used by the elastic global nav.
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
@@ -248,3 +248,14 @@ body {
 #pages-nav details > summary::-webkit-details-marker {
 	display: none;
 }
+
+#dismissible-banner {
+	@apply font-body sticky bottom-0 z-50 mt-0 hidden flex-row items-center justify-between p-4 text-sm;
+}
+
+#dismissible-button {
+	@apply text-blue-developer text-base font-bold;
+	&:hover {
+		@apply bg-grey-20 rounded-2xl;
+	}
+}
diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml
@@ -1,7 +1,7 @@
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorLayoutSlice<LayoutViewModel>
 <!DOCTYPE html>
-<html lang="en" class="h-screen">
+<html lang="en" class="h-screen" xmlns="http://www.w3.org/1999/html">
 @await RenderPartialAsync(_Head.Create(Model))
 
 @{
@@ -20,6 +20,7 @@
 @(await RenderPartialAsync(_Header.Create(Model)))
 <div id="main-container" class="flex flex-col items-center border-t-1 border-grey-20">
 	@functions {
+
 		private async Task DefaultLayout()
 		{
 			<div class="container h-full grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_auto] lg:grid-cols-[calc(var(--spacing)*65)_auto_calc(var(--spacing)*50)] px-6">
@@ -43,7 +44,9 @@
 				</main>
 			</div>
 		}
+
 	}
+
 	@switch (layout)
 	{
 		case LayoutName.NotFound:
@@ -61,5 +64,18 @@
 	}
 </div>
 @await RenderPartialAsync(_Footer.Create(Model))
+<aside id="dismissible-banner" class="admonition note">
+	<div class="container flex justify-between items-center mx-auto">
+		<p>
+			You are viewing the new Elastic Docs experience for the latest product versions.
+			If the page exists in older docs, you can click <strong>View previous version</strong>.
+		</p>
+		<button id="dismissible-button">
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+			</svg>
+		</button>
+	</div>
+</aside>
 </body>
 </html>
