adding the banner and fixing a FUOC bug

withastro · Aug 28, 2023 · 7641760 · 7641760
1 parent a41f17d
commit 7641760
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/components/NotificationBanner.astro b/src/components/NotificationBanner.astro
@@ -9,10 +9,12 @@ const { uid } = Astro.props
 <aside
 	id="notification-banner"
 	data-uid={uid}
-	class="body relative w-full bg-blue-purple-gradient py-2 text-center text-white"
+	class="body relative hidden w-full bg-blue-purple-gradient p-2 text-center text-white"
 >
-	<slot />
-	<button class="absolute right-0 top-0 flex aspect-square h-full items-center justify-center">
+	<p class="mr-6">
+		<slot />
+	</p>
+	<button class="absolute right-0 top-0 flex h-10 w-10 items-center justify-center">
 		<span class="sr-only">Hide banner</span>
 		<XIcon class="h-5" aria-hidden="true" />
 	</button>
@@ -41,6 +43,8 @@ const { uid } = Astro.props
 			// banner was already closed previously
 			removeBanner()
 		} else {
+			// can safely remove the hidden class to make the banner visible
+			banner.classList.remove("hidden")
 			const button = banner.querySelector("button")
 			button.addEventListener(
 				"click",

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -4,6 +4,7 @@ import Footer from "~/components/Footer.astro"
 import Header from "~/components/Header.astro"
 import HeaderDrawerContent from "~/components/HeaderDrawerContent.astro"
 import HeaderNav from "~/components/HeaderNav.astro"
+import NotificationBanner from "~/components/NotificationBanner.astro"
 import SkipLink from "~/components/SkipLink.astro"
 import "~/styles/tailwind.css"
 
@@ -23,6 +24,11 @@ const { ...head } = Astro.props
 	<body>
 		<SkipLink />
 		<div class="flex min-h-screen flex-col overflow-x-hidden">
+			<NotificationBanner uid="starlight-product-hunt">
+				Hello Astronauts! Our new docs theme Starlight is on <a
+					href="https://www.producthunt.com/posts/starlight-by-astro">Product Hunt</a
+				> today.
+			</NotificationBanner>
 			<div id="nav" class="sticky top-0 z-20 max-h-screen">
 				<Header>
 					<HeaderNav />