AMA event banner

src/components/EventBanner.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	const date = new Date("2023-09-18T14:00:00Z");
+	const now = new Date();
+	const isFuture = now.getTime() - date.getTime() < 0;
+	const dateString = new Intl.DateTimeFormat(undefined, {
+		weekday: 'long',
+		year: 'numeric',
+		month: 'numeric',
+		day: 'numeric',
+		hour: 'numeric',
+  	minute: 'numeric',
+		hour12: true,
+	}).format(date);
+</script>
+
+{#if isFuture}
+	<a class="bg-orange-600 text-orange-100 group" href="https://discord.gg/q8kyQz8V7v?event=1141742514945138750">
+		<div class="w-full max-w-screen-xl px-4 md:px-6 py-3 mx-auto md:flex items-center text-sm xl:text-base">
+			<div class="grow font-semibold leading-tight">
+				Interested in running Java in the browser with CheerpJ 3.0? <br class="xl:hidden" />
+				Ask our developers anything at our <em>live Q&A</em> on
+				<time class="font-bold" datetime={date.toISOString()}>{dateString}</time>!
+			</div>
+			<div class="text-sm text-white font-bold group-hover:underline py-1">
+				Join the event &raquo;
+			</div>
+		</div>
+	</a>
+{/if}

src/components/GlobalNav.astro

@@ -5,6 +5,7 @@ import { SITE_TITLE, DISCORD_URL } from "../consts";
 
 import companyLogo from "../assets/branding/company/tower.svg";
 import Search from "./Search.astro";
+import EventBanner from "./EventBanner.svelte";
 
 const links = [
 	{ name: "Docs", href: "/docs" },
@@ -13,6 +14,8 @@ const links = [
 ];
 ---
 
+<EventBanner client:idle />
+
 <nav
 	aria-label="Primary navigation"
 	class="sm:sticky top-0 z-20 bg-stone-900 bg-opacity-50 backdrop-blur-lg text-white text-sm font-semibold leading-6 border-b border-stone-600 border-opacity-20"