astro-better-release-notes 0.2.2 → 0.2.3

package/README.md

@@ -115,14 +115,17 @@ Set both variables on `html` or any ancestor of `.release-container`.
 
 ### Link colors
 
-The github issue links and category badge hover colors are configurable:
+The issue links, version permalinks (`#`), and category badge hover colors are configurable:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--release-notes-link-color` | `#4338ca` (indigo-700) | Issue link color |
-| `--release-notes-link-hover-color` | `#9a3412` (orange-800) | Hover color for links and badge |
-| `--release-notes-link-color-dark` | `#818cf8` (indigo-400) | Dark mode link color |
+| `--release-notes-link-color` | `#4338ca` (indigo-700) | Issue link and permalink color |
+| `--release-notes-link-hover-color` | `#9a3412` (orange-800) | Hover color for links, permalinks, and badges |
+| `--release-notes-link-color-dark` | `#818cf8` (indigo-400) | Dark mode link and permalink color |
 | `--release-notes-link-hover-color-dark` | `#fed7aa` (orange-200) | Dark mode hover color |
+| `--release-notes-anchor-size` | `1.5em` | Font size of the version permalink; match it to your `h2` size |
+
+The permalink sits beside the version heading rather than inside it, so it doesn't inherit the heading's size. Set `--release-notes-anchor-size` if your `h2` isn't `1.5em`.
 
 ### Theme variables
 
@@ -235,10 +238,16 @@ import { ReleaseNotesSelector } from 'astro-better-release-notes';
 - Each version is an `<article>` labelled by its `<h2>`. The `<h2>` carries the anchor id (`version-1-2-3`), so fragment links, search crawlers, and TOC tools all resolve to the heading. The `#` permalink sits next to the heading rather than inside it, so the heading's accessible name is only the version.
 - Category filters are native checkboxes inside a `<fieldset>` with a visually hidden `<legend>`. They work with Tab and Space, show a focus ring on the chip, and announce their checked state. Selected chips show a check mark as well as color.
 - Badge and selected-chip text colors are mixed from the category color (darker in light mode, lighter in dark mode), so they stay at or above 4.5:1 for the default categories and for most custom mid-tone colors.
-- The version selector has a label and announces each jump through a polite live region. Focus stays on the selector, because Chrome and Edge on Windows fire `change` on every arrow key press.
+- The version selector has a label, and its options are bare version numbers, so typing `1.56` jumps to 1.56.0. Each jump is announced through a polite live region. Focus stays on the selector so type-ahead and arrow keys keep working: the selector scrolls with `scrollIntoView` and updates the URL with `history.replaceState`, because assigning `location.hash` would blur it. Jumps don't add browser history entries.
 - Transitions and the badge hover scale are disabled under `prefers-reduced-motion: reduce`.
 - The package ships its own `.rn-sr-only` class, so it doesn't depend on a host `sr-only` utility.
 
+## Upgrading to 0.2.3
+
+- Version selector options no longer start with "Version" (`1.56.0 (SSO Snake)` instead of `Version 1.56.0 (SSO Snake)`).
+- Choosing a version updates the URL with `history.replaceState` instead of a new history entry, so the Back button leaves the page rather than stepping back through jumps.
+- The version permalink now uses the link color variables and `--release-notes-anchor-size` instead of inheriting the surrounding text color and size.
+
 ## Upgrading to 0.2.2
 
 Anchor URLs are unchanged, but the markup moved:

package/ReleaseNotesSelector.astro

@@ -23,7 +23,8 @@ const { updates } = Astro.props as Props;
     <option value="">Jump to a version...</option>
     {updates.map((item) => {
       const versionId = `version-${item.data.version.replaceAll('.', '-')}`;
-      const label = `Version ${item.data.version}${item.data.name ? ` (${item.data.name})` : ''}`;
+      // bare version so typing in the select jumps straight to it; the label supplies the context
+      const label = `${item.data.version}${item.data.name ? ` (${item.data.name})` : ''}`;
       return <option value={versionId}>{label}</option>;
     })}
   </select>
@@ -65,8 +66,13 @@ const { updates } = Astro.props as Props;
         }
       }
 
-      if (activeArticle && headingId(activeArticle) !== currentActiveId) {
-        currentActiveId = headingId(activeArticle);
+      if (activeArticle) currentActiveId = headingId(activeArticle);
+      // writing value mid-interaction resets native type-ahead, so wait for blur
+      if (document.activeElement !== selectEl) syncSelect();
+    };
+
+    const syncSelect = () => {
+      if (currentActiveId && selectEl.value !== currentActiveId) {
         selectEl.value = currentActiveId;
         disablePlaceholder();
       }
@@ -83,13 +89,19 @@ const { updates } = Astro.props as Props;
       }
     };
 
-    // focus stays on the select (arrow keys fire change on windows), so announce the jump instead
+    // hide the placeholder before typing starts; changing options mid-type-ahead resets it
+    selectEl.addEventListener('focus', disablePlaceholder, { once: true });
+    selectEl.addEventListener('blur', syncSelect);
+
+    // location.hash blurs the select (breaks type-ahead/arrows); replaceState also skips per-key history entries
     selectEl.addEventListener('change', () => {
       hasUserInteracted = true;
       disablePlaceholder();
-      if (!selectEl.value) return;
-      window.location.hash = selectEl.value;
-      if (statusEl) statusEl.textContent = `Jumped to ${selectEl.selectedOptions[0]?.textContent ?? selectEl.value}`;
+      const target = selectEl.value && document.getElementById(selectEl.value);
+      if (!target) return;
+      history.replaceState(history.state, '', `#${selectEl.value}`);
+      target.scrollIntoView({ block: 'start' });
+      if (statusEl) statusEl.textContent = `Jumped to version ${selectEl.selectedOptions[0]?.textContent ?? selectEl.value}`;
     });
 
     const filterControls = document.querySelector('.filter-controls');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-better-release-notes",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Configurable release notes components with category filtering and version navigation for Astro",
   "keywords": [
     "astro",

package/style.css

@@ -387,13 +387,16 @@
    Version anchor links (# permalink)
 --------------------------------------------------------------- */
 
+/* sits beside the h2, not inside it, so size it to match the heading */
 .version-title .anchor-link {
   opacity: 0;
+  font-size: var(--release-notes-anchor-size, 1.5em);
+  font-weight: 500;
   text-decoration: none;
   border: none;
   margin-left: 0.5rem;
-  color: inherit;
-  transition: opacity 0.15s ease;
+  color: var(--release-notes-link-color, #4338ca);
+  transition: opacity 0.15s ease, color 0.15s ease;
 }
 
 .version-title:hover .anchor-link,
@@ -401,6 +404,18 @@
   opacity: 1;
 }
 
+.version-title .anchor-link:hover {
+  color: var(--release-notes-link-hover-color, #9a3412);
+}
+
+.dark .version-title .anchor-link {
+  color: var(--release-notes-link-color-dark, #818cf8);
+}
+
+.dark .version-title .anchor-link:hover {
+  color: var(--release-notes-link-hover-color-dark, #fed7aa);
+}
+
 /* ---------------------------------------------------------------
    Utilities and motion
 --------------------------------------------------------------- */