Add banner with publication annoucement to docs (#708)

* Add banner with cite info to header * Linting
manzt · Oct 25, 2024 · 38417a1 · 38417a1
1 parent ec26747
commit 38417a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/docs/src/components/Banner.astro b/docs/src/components/Banner.astro
@@ -0,0 +1,35 @@
+---
+---
+<div id="announcement-banner" class="hidden bg-purple-800 py-2 px-4 pb-2.5">
+	<div class="flex items-center justify-between flex-wrap align-middle">
+		<div class="w-0 flex-1 flex items-center truncate selection:bg-white selection:bg-opacity-40 selection:text-purple-900">
+			<p class="text-white text-lg">
+				<span class="font-medium">anywidget</span> is now published&ensp;🎉&ensp;<a class="text-white underline font-medium" href="https://github.com/manzt/anywidget#citation">How to cite →</a>&ensp;
+			</p>
+		</div>
+		<div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
+			<button type="button" id="dismiss" class="-mr-1 flex p-1 rounded-md bg-purple-800 hover:bg-purple-900 focus:outline-none sm:-mr-2">
+				<span class="sr-only">Dismiss</span>
+				<svg class="h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+		</div>
+	</div>
+</div>
+
+<script type="module" is:inline>
+	let waitMs = 1000 * 60 * 60 * 24; // 1 day
+	let banner = document.querySelector("#announcement-banner");
+	// Uncomment to test
+	// localStorage.removeItem("bannerDismissedAt");
+	let lastDismissed = localStorage.getItem("bannerDismissedAt");
+	let timeSince = lastDismissed ?
+	   (Date.now() - parseInt(lastDismissed)) :
+	   Infinity;  // show on first visit
+	banner.classList.toggle("hidden", timeSince < waitMs);
+	banner.querySelector("#dismiss")?.addEventListener("click", () => {
+	   banner?.classList.add("hidden");
+	   localStorage.setItem('bannerDismissedAt', Date.now().toString());
+	});
+</script>
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
@@ -1,5 +1,6 @@
 ---
 import type { MarkdownHeading } from "astro";
+import Banner from "../components/Banner.astro";
 import Footer from "../components/Footer/Footer.astro";
 import HeadCommon from "../components/HeadCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
@@ -36,7 +37,7 @@ const githubEditUrl = `${CONSTS.GITHUB_EDIT_URL}/${currentFile}`;
 			body {
 				width: 100%;
 				display: grid;
-				grid-template-rows: var(--theme-navbar-height) 1fr;
+				grid-template-rows: auto (--theme-navbar-height) 1fr;
 				--gutter: 0.5rem;
 				--doc-padding: 2rem;
 			}
@@ -140,6 +141,7 @@ const githubEditUrl = `${CONSTS.GITHUB_EDIT_URL}/${currentFile}`;
 	</head>
 
 	<body>
+		<Banner />
 		<Header currentPage={currentPage} />
 		<main class="layout">
 			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">

diff --git a/docs/src/layouts/SplashLayout.astro b/docs/src/layouts/SplashLayout.astro
@@ -1,4 +1,5 @@
 ---
+import Banner from "../components/Banner.astro";
 import HeadCommon from "../components/HeadCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
 import Header from "../components/Header/Header.astro";
@@ -34,6 +35,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 	</head>
 
 	<body>
+		<Banner />
 		<Header currentPage={currentPage} />
 		<main class="layout">
 			<article>