@grove-dev/starlight 0.5.0-next.0 → 0.5.0

package/components/custom/Card.astro

@@ -16,9 +16,9 @@ import { Icon } from '@astrojs/starlight/components';
 import type { StarlightIcon } from '@astrojs/starlight/components-internals/Icons';
 
 interface Props {
-    icon?: StarlightIcon;
-    title: string;
-    href?: string;
+  icon?: StarlightIcon;
+  title: string;
+  href?: string;
 }
 
 const { icon, title, href } = Astro.props;
@@ -27,7 +27,7 @@ const { icon, title, href } = Astro.props;
 <article class="card sl-flex">
     <p class="title sl-flex">
         {icon && <Icon name={icon} class="icon" size="1.333em" />}
-        <span set:html={title} />
+        <span>{title}</span>
     </p>
     <div class="body">
         {href ? <a {href} class="sl-card-link"><slot /></a> : <slot />}
@@ -107,5 +107,12 @@ const { icon, title, href } = Astro.props;
             inset: 0;
             border-radius: inherit;
         }
+        /* Focus-visible ring anchored to the card surface so keyboard
+         * users see a clear focus indicator (otherwise the transparent
+         * overlay hides the default link outline). */
+        .card:has(.sl-card-link:focus-visible) {
+            outline: 2px solid var(--sl-color-accent);
+            outline-offset: 2px;
+        }
     }
 </style>

package/components/overrides/Hero.astro

@@ -10,14 +10,14 @@ const { data } = Astro.locals.starlightRoute.entry;
 const { title = data.title, tagline: heroTagline, image, actions = [] } = data.hero || {};
 const heroLayout = ((data.hero as any)?.layout as HeroLayout) ?? 'centered';
 const announcement =
-    ((data.hero as any)?.announcement as { text: string; link: string }) ?? undefined;
+  ((data.hero as any)?.announcement as { text: string; link: string }) ?? undefined;
 const hasImage = !!image;
 const tagline = heroTagline || data.description;
 
 const imageAttrs = {
-    loading: 'eager' as const,
-    decoding: 'async' as const,
-    alt: image?.alt || '',
+  loading: 'eager' as const,
+  decoding: 'async' as const,
+  alt: image?.alt || '',
 };
 
 let darkImage: ImageMetadata | undefined;
@@ -25,14 +25,14 @@ let lightImage: ImageMetadata | undefined;
 let rawHtml: string | undefined;
 
 if (image) {
-    if ('file' in image) {
-        darkImage = image.file;
-    } else if ('dark' in image) {
-        darkImage = image.dark;
-        lightImage = image.light;
-    } else {
-        rawHtml = image.html;
-    }
+  if ('file' in image) {
+    darkImage = image.file;
+  } else if ('dark' in image) {
+    darkImage = image.dark;
+    lightImage = image.light;
+  } else {
+    rawHtml = image.html;
+  }
 }
 ---
 
@@ -67,11 +67,11 @@ if (image) {
                     )
                 }
 
-                <h1 id={PAGE_TITLE_ID} data-page-title set:html={title} />
+                <h1 id={PAGE_TITLE_ID} data-page-title>{title}</h1>
             </div>
 
             <div class="hero-content-container">
-                {tagline && <div class="tagline" set:html={tagline} />}
+                {tagline && <div class="tagline">{tagline}</div>}
 
                 {
                     actions.length > 0 && (

package/components/overrides/PageFrame.astro

@@ -1,9 +1,14 @@
 ---
-import { marked } from 'marked';
 import userConfig from 'virtual:lucode-starlight-config';
 import Drawer from './parts/Drawer.astro';
 
 const { hasSidebar } = Astro.locals.starlightRoute;
+
+// `footerText` is a plain string from the consumer's `astro.config.mjs`.
+// Astro auto-escapes interpolated text, so emitting it directly is safe
+// and avoids the XSS sink that `marked.parseInline` + `set:html` would
+// create. Consumers who want rich formatting should render Markdown in
+// their own component instead of leaning on this slot.
 ---
 
 <div data-slot="layout">
@@ -34,7 +39,7 @@ const { hasSidebar } = Astro.locals.starlightRoute;
     </main>
 
     <footer>
-        <div data-slot="footer-text" set:html={marked.parseInline(userConfig.footerText)} />
+        <div data-slot="footer-text">{userConfig.footerText}</div>
     </footer>
 </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/starlight",
-  "version": "0.5.0-next.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "Grove's theme for Starlight (the Astro native documentation site generator)",
   "author": "grove-dev",

package/styles/theme.css

@@ -16,7 +16,7 @@
         --orange: oklch(83.7% 0.128 66.29);
         --orange-high: oklch(90.1% 0.076 70.697);
         --green-low: oklch(26.6% 0.065 152.934);
-        --green: oklch(79.2% 0.209 151.711);
+        --green: oklch(78% 0.19 152);
         --green-high: oklch(87.1% 0.15 154.449);
         --blue-low: oklch(29.3% 0.066 243.157);
         --blue: oklch(70.7% 0.165 254.624);