New version banner that shows up for 7 days after the release (#4984)

<img width="714" alt="image"
src="https://github.com/user-attachments/assets/c59eedd6-b05c-40a3-a94f-b3c5672037cd">

website/src/components/header/header.astro

@@ -3,6 +3,7 @@ import ThemePicker from "@typespec/astro-utils/components/theme-picker.astro";
 import Link from "@typespec/astro-utils/components/link.astro";
 import { Icon } from "@astrojs/starlight/components";
 import Search from "./search.astro";
+import ReleaseNotification from "../release-notification.astro";
 export interface Props {
   noDrawer?: boolean;
 }
@@ -199,6 +200,7 @@ const { noDrawer } = Astro.props;
       <Link class="item link" href="/community">Community</Link>
     </div>
     <div class="items right">
+      <ReleaseNotification />
       <Link
         class="item icon link"
         href="https://github.com/microsoft/typespec"

website/src/components/release-notification.astro

@@ -0,0 +1,64 @@
+---
+import { getCollection } from "astro:content";
+const releaseNotes = await getCollection("docs", (x) => x.id.startsWith("docs/release-notes"));
+const last = releaseNotes[releaseNotes.length - 1];
+const releaseDate = last.data.releaseDate;
+if (!releaseDate) {
+  const today = new Date();
+  throw new Error(
+    [
+      "Last release notes should have a releaseDate: property in frontmatter. For example:",
+      `  releaseDate: ${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`,
+      "",
+    ].join("\n"),
+  );
+}
+
+if (!last.data.version) {
+  throw new Error(
+    [
+      "Last release notes should have a version: property in frontmatter. For example:",
+      `  version: "X.Y"`,
+      "",
+    ].join("\n"),
+  );
+}
+import Link from "@typespec/astro-utils/components/link.astro";
+---
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const els = document.querySelectorAll(".new-version-banner") as any as HTMLElement[];
+    const today = new Date();
+    els.forEach((el) => {
+      const releaseDate = new Date(el.dataset.releasedate!);
+      if (today.getTime() - releaseDate.getTime() > 7 * 86400000 /* 7 days */) {
+        els.forEach((x) => x.classList.add("hide"));
+      }
+    });
+  });
+</script>
+
+<style>
+  .new-version-banner {
+    border: 1px solid var(--colorBrandBackground);
+    display: block;
+    padding: 2px 1rem;
+    border-radius: 2px;
+    line-height: 24px;
+  }
+  .new-version-banner:hover {
+    background-color: var(--colorBrandBackgroundHover);
+  }
+  .hide {
+    display: none;
+  }
+</style>
+
+<Link
+  class="new-version-banner"
+  href={"/" + last.slug}
+  data-releasedate={last.data.releaseDate!.toISOString()}
+>
+  Version {last.data.version} is now available!
+</Link>

website/src/content/config.ts

@@ -2,7 +2,19 @@ import { docsSchema } from "@astrojs/starlight/schema";
 import { defineCollection, z } from "astro:content";
 
 export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
+  docs: defineCollection({
+    schema: docsSchema({
+      extend: z.object({
+        version: z.string().optional(),
+        releaseDate: z.coerce
+          .date()
+          .optional()
+          .describe(
+            "A date string or YAML date that is compatible with JavaScript's `new Date()` constructor.",
+          ),
+      }),
+    }),
+  }),
   blog: defineCollection({
     type: "content",
     // Type-check frontmatter using a schema

website/src/content/docs/docs/release-notes/release-2024-11-05.md

@@ -1,5 +1,7 @@
 ---
 title: 0.62 - November 2024
+releaseDate: 2024-11-05
+version: "0.62"
 ---
 
 ## Notable changes