Add changelog page and refine docs styling

docs/src/content.config.ts

@@ -8,6 +8,8 @@ const guides = defineCollection({
     title: z.string(),
     sort: z.number(),
     description: z.string().optional(),
+    // Keep the page routable but omit it from the sidebar listing.
+    hidden: z.boolean().optional(),
   }),
 });
 

docs/src/content/guides/changelog.mdx

@@ -0,0 +1,77 @@
+---
+title: "Changelog"
+description: "Track what's new in Driver.js. See the latest features, changes, and fixes shipping in each release, plus what's currently in the works."
+groupTitle: "Introduction"
+sort: 7
+---
+
+The _Unreleased_ section lists changes that are merged and will ship in the next
+release. Once a release is published, these entries move under a versioned
+heading.
+
+## Unreleased
+
+### Added
+
+- `animationDuration` config to control how long the highlight transition takes.
+  ([#104](https://github.com/nilbuild/driver.js/issues/104))
+- `allowScroll` config to lock body scroll while a tour is active.
+- `onDoneClick` hook, fired when the done button on the final step is clicked.
+  ([#500](https://github.com/nilbuild/driver.js/issues/500))
+
+### Changed
+
+- <span class="breaking-badge">Breaking</span> Popover footer buttons are now styled
+  through the `driver-popover-footer-btn` class instead of the
+  `.driver-popover-footer button` selector. Buttons you add through `onPopoverRender`
+  no longer inherit the default styling automatically. Add the
+  `driver-popover-footer-btn` class to opt in, or leave it off to apply your own
+  styles. The built-in next/previous buttons carry the class out of the box.
+  ([#555](https://github.com/nilbuild/driver.js/issues/555))
+- Custom buttons added through `onPopoverRender` now receive their own click
+  events. Only the built-in next, previous, and close buttons have their default
+  action intercepted by the library.
+- The popover exposes `driver-popover-side-*` and `driver-popover-align-*`
+  classes so you can target its position from CSS, and the arrow positioning was
+  rewritten for more accurate placement.
+- Dropped the CSS `:has()` selector for broader browser compatibility.
+  ([#586](https://github.com/nilbuild/driver.js/issues/586))
+
+### Fixed
+
+- Document event listener leak in `onDriverClick` that left handlers attached
+  after the tour was destroyed.
+  ([#452](https://github.com/nilbuild/driver.js/issues/452))
+
+## 1.5.0
+
+### Added
+
+- `getNextStep` method on the driver API.
+  ([#420](https://github.com/nilbuild/driver.js/issues/420))
+- `driver-popover-done-btn` class on the next button when it acts as the done
+  button on the final step. ([#610](https://github.com/nilbuild/driver.js/issues/610))
+
+### Changed
+
+- The `onDestroyed` hook now receives the final tour state.
+  ([#553](https://github.com/nilbuild/driver.js/issues/553))
+- Removed the unicode characters from the default button labels.
+
+### Fixed
+
+- The tour no longer closes when pressing the left arrow on the first step.
+  ([#564](https://github.com/nilbuild/driver.js/issues/564))
+- Removed the button text-shadow that left ghost text behind.
+  ([#605](https://github.com/nilbuild/driver.js/issues/605))
+- `onNextClick` now fires when advancing the tour through an overlay click.
+  ([#576](https://github.com/nilbuild/driver.js/issues/576))
+
+For the release notes of other versions, see the
+[GitHub releases](https://github.com/nilbuild/driver.js/releases) page.
+
+## Migrating from 0.x to 1.x
+
+Driver.js 1.x is a major release with a new API and architecture. See the
+[Migrate to 1.x](/docs/migrating-from-0x) guide for a step-by-step walkthrough
+of the import, configuration, and API changes.

docs/src/content/guides/migrating-from-0x.mdx

@@ -3,6 +3,7 @@ title: "Migrate to 1.x"
 description: "Upgrade from Driver.js 0.x to 1.x with this step-by-step migration guide covering the new API, imports, and architecture changes in the 1.0 rewrite."
 groupTitle: "Introduction"
 sort: 6
+hidden: true
 ---
 
 Drivers 1.x is a major release that introduces a new API and a new architecture. This page will help you migrate your code from 0.x to 1.x.

docs/src/layouts/DocsLayout.astro

@@ -30,7 +30,10 @@ const metaDescription =
   <div class="flex">
     <Sidebar activeGuideTitle={title} groupedGuides={groupedGuides} />
     <div
-      class="min-w-0 max-w-[800px] py-6 md:py-12 prose px-6 md:px-14 prose-base md:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']">
+      class:list={[
+        "min-w-0 max-w-[800px] py-6 md:py-12 prose px-6 md:px-14 prose-base md:proxe-xl mb-24 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-500 prose-p:before:content-['']",
+        { "changelog-page": guide.id === "changelog" },
+      ]}>
       <slot />
     </div>
   </div>

docs/src/lib/guide.ts

@@ -2,7 +2,8 @@ import { type CollectionEntry, getCollection } from "astro:content";
 
 export async function getAllGuides(): Promise<Record<string, CollectionEntry<"guides">[]>> {
   const allGuides: CollectionEntry<"guides">[] = await getCollection("guides");
-  const sortedGuides = allGuides.sort((a, b) => a.data.sort - b.data.sort);
+  const visibleGuides = allGuides.filter(guide => !guide.data.hidden);
+  const sortedGuides = visibleGuides.sort((a, b) => a.data.sort - b.data.sort);
   return sortedGuides.reduce((acc: Record<string, CollectionEntry<"guides">[]>, curr: CollectionEntry<"guides">) => {
     const { groupTitle } = curr.data;
 

docs/src/styles/tailwind.css

@@ -3,3 +3,43 @@
 
 /* Recreates the custom `sh` screen from the old tailwind.config.cjs. */
 @custom-variant sh (@media (min-height: 750px));
+
+/* Inline code — render as a soft pill instead of backtick-quoted bold text. */
+.prose :not(pre) > code {
+  background-color: #f4f4f5;
+  border: 1px solid #e4e4e7;
+  border-radius: 0.375rem;
+  padding: 0.125em 0.375em;
+  font-weight: 500;
+  font-size: 0.875em;
+  color: #27272a;
+  /* Keep an identifier on one line — move the whole token to the next line
+     rather than slicing the pill across a line break. */
+  white-space: nowrap;
+}
+
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+  content: none;
+}
+
+/* Changelog — underline each version/section heading to separate releases. */
+.changelog-page :where(h2) {
+  border-bottom: 1px solid #e4e4e7;
+  padding-bottom: 0.3em;
+}
+
+/* Inline badge that flags a breaking change in the changelog. */
+.breaking-badge {
+  display: inline-block;
+  background-color: #dc2626;
+  color: #ffffff;
+  border-radius: 0.375rem;
+  padding: 0.05em 0.5em;
+  margin-right: 0.45em;
+  font-size: 0.7em;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  vertical-align: middle;
+}