Release notes separate

packages/astro-utils/src/sidebar/index.ts

@@ -53,7 +53,8 @@ export async function processSidebar(
   function getSlugFromPath(directory: string, path: string) {
     const name = parse(path).name.toLocaleLowerCase();
     const normalizedName = name === "index" ? "" : name;
-    return prefix(join(directory, normalizedName))
+    const joined = join(directory, normalizedName);
+    return prefix(joined === "." ? "" : joined)
       .replaceAll("$", "")
       .replaceAll(" ", "-")
       .toLowerCase();

website/astro.config.mjs

@@ -22,16 +22,27 @@ export default defineConfig({
     astroExpressiveCode(),
     starlight({
       title: "TypeSpec",
-      sidebar: await processSidebar(
-        resolve(import.meta.dirname, "src/content/docs"),
-        "docs",
-        current,
-      ),
+      sidebar: [
+        ...(await processSidebar(
+          resolve(import.meta.dirname, "src/content/docs"),
+          "docs",
+          current,
+        )),
+        {
+          label: "🚀 Release Notes",
+          link: "/release-notes/",
+        },
+        {
+          label: "🚀 Release Notes",
+          autogenerate: { directory: "release-notes" },
+        },
+      ],
       favicon: "/img/favicon.svg",
       customCss: ["./src/css/custom.css"],
       components: {
         Header: "./src/components/header/header.astro",
         PageFrame: "./src/components/starlight-overrides/PageFrame.astro",
+        Sidebar: "./src/components/starlight-overrides/Sidebar.astro",
       },
       expressiveCode: false, // defined directly above
       head: [

website/src/components/release-notes-list.astro

@@ -0,0 +1,62 @@
+---
+import { getCollection } from "astro:content";
+import Link from "@typespec/astro-utils/components/link.astro";
+
+const releaseNotes = await getCollection(
+  "docs",
+  (x) => x.id.startsWith("release-notes/") && x.id !== "release-notes",
+);
+releaseNotes.sort((a, b) => b.id.localeCompare(a.id));
+---
+
+<ul class="release-notes-list">
+  {
+    releaseNotes.map((note) => (
+      <li>
+        <Link href={`/${note.id}`}>
+          <span class="release-version">{note.data.title}</span>
+          {note.data.releaseDate && (
+            <span class="release-date">
+              {note.data.releaseDate.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </span>
+          )}
+        </Link>
+      </li>
+    ))
+  }
+</ul>
+
+<style>
+  .release-notes-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .release-notes-list li a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    text-decoration: none;
+    transition: background-color 0.15s;
+  }
+  .release-notes-list li a:hover {
+    background-color: var(--sl-color-gray-6);
+  }
+  .release-version {
+    font-weight: 600;
+  }
+  .release-date {
+    color: var(--sl-color-gray-3);
+    font-size: 0.875rem;
+  }
+</style>

website/src/components/release-notification.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-const releaseNotes = await getCollection("docs", (x) => x.id.startsWith("docs/release-notes"));
+const releaseNotes = await getCollection("docs", (x) => x.id.startsWith("release-notes/"));
 releaseNotes.sort((a, b) => a.id.localeCompare(b.id));
 const last = releaseNotes[releaseNotes.length - 1];
 const releaseDate = last.data.releaseDate;

website/src/components/starlight-overrides/Sidebar.astro

@@ -0,0 +1,37 @@
+---
+import MobileMenuFooter from "@astrojs/starlight/components/MobileMenuFooter.astro";
+import SidebarPersister from "@astrojs/starlight/components/SidebarPersister.astro";
+import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";
+
+const { sidebar } = Astro.locals.starlightRoute;
+const pathname = Astro.url.pathname;
+
+type SidebarEntry = (typeof sidebar)[number];
+
+const isReleaseNotes = pathname.startsWith("/release-notes");
+
+/** Returns true for sidebar groups that contain release notes entries. */
+function isReleaseNotesGroup(entry: SidebarEntry): boolean {
+  if (entry.type !== "group") return false;
+  return entry.entries.some((e) => e.type === "link" && e.href.startsWith("/release-notes/"));
+}
+
+const filtered = sidebar.filter((entry) =>
+  isReleaseNotes ? isReleaseNotesGroup(entry) : !isReleaseNotesGroup(entry),
+);
+
+// Reverse release notes entries so newest appear first.
+for (const entry of filtered) {
+  if (entry.type === "group" && isReleaseNotesGroup(entry)) {
+    entry.entries.reverse();
+  }
+}
+---
+
+<SidebarPersister>
+  <SidebarSublist sublist={filtered} />
+</SidebarPersister>
+
+<div class="md:sl-hidden">
+  <MobileMenuFooter />
+</div>

website/src/content/current-sidebar.ts

@@ -249,13 +249,6 @@ const sidebar: SidebarItem[] = [
       "extending-typespec/writing-scaffolding-template",
     ],
   },
-  {
-    label: "🚀 Release Notes",
-    autogenerate: {
-      order: "desc",
-      directory: "release-notes",
-    },
-  },
 ];
 
 export default sidebar;

website/src/content/docs/release-notes/index.mdx

@@ -0,0 +1,9 @@
+---
+title: Release Notes
+sidebar:
+  hidden: true
+---
+
+import ReleaseNotesList from "@site/src/components/release-notes-list.astro";
+
+<ReleaseNotesList />

website/src/pages/docs/[...slug].md.ts

@@ -8,7 +8,7 @@ export async function getStaticPaths() {
   return docs
     .filter((doc) => {
       // Exclude release notes
-      if (doc.id.includes("/release-notes/")) return false;
+      if (doc.id.startsWith("release-notes/")) return false;
       return true;
     })
     .map((doc) => ({