@grove-dev/starlight 0.2.20 → 0.3.1

package/components/custom/Card.astro

@@ -0,0 +1,111 @@
+---
+/**
+ * Starlight `<Card>` override that adds an optional `href` prop.
+ *
+ * The upstream `Card.astro` in `@astrojs/starlight@0.40` only accepts
+ * `icon` and `title`, so a `<Card title="..." href="...">` call silently
+ * dropped the link and rendered a non-clickable `<article>`. We wrap the
+ * inner content in an `<a>` when `href` is present so the entire card
+ * surface is interactive (the same affordance the `LinkCard` component
+ * uses, but with our visual `Card` styling).
+ *
+ * Visual styles are identical to upstream — only the structure gains a
+ * single `<a>` wrapper when `href` is set.
+ */
+import { Icon } from '@astrojs/starlight/components';
+import type { StarlightIcon } from '@astrojs/starlight/components-internals/Icons';
+
+interface Props {
+    icon?: StarlightIcon;
+    title: string;
+    href?: string;
+}
+
+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} />
+    </p>
+    <div class="body">
+        {href ? <a {href} class="sl-card-link"><slot /></a> : <slot />}
+    </div>
+</article>
+
+<style>
+    @layer starlight.components {
+        .card {
+            --sl-card-border: var(--sl-color-purple);
+            --sl-card-bg: var(--sl-color-purple-low);
+            border: 1px solid var(--sl-color-gray-5);
+            background-color: var(--sl-color-black);
+            padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
+            flex-direction: column;
+            gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
+            transition: border-color 0.15s ease, transform 0.15s ease;
+        }
+        .card:nth-child(4n + 1) {
+            --sl-card-border: var(--sl-color-orange);
+            --sl-card-bg: var(--sl-color-orange-low);
+        }
+        .card:nth-child(4n + 3) {
+            --sl-card-border: var(--sl-color-green);
+            --sl-card-bg: var(--sl-color-green-low);
+        }
+        .card:nth-child(4n + 4) {
+            --sl-card-border: var(--sl-color-red);
+            --sl-card-bg: var(--sl-color-red-low);
+        }
+        .card:nth-child(4n + 5) {
+            --sl-card-border: var(--sl-color-blue);
+            --sl-card-bg: var(--sl-color-blue-low);
+        }
+        .title {
+            font-weight: 600;
+            font-size: var(--sl-text-h4);
+            color: var(--sl-color-white);
+            line-height: var(--sl-line-height-headings);
+            gap: 1rem;
+            align-items: center;
+        }
+        .card .icon {
+            border: 1px solid var(--sl-card-border);
+            background-color: var(--sl-card-bg);
+            padding: 0.2em;
+            border-radius: 0.25rem;
+            flex-shrink: 0;
+        }
+        .card .body {
+            margin: 0;
+            font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
+        }
+        .card .body .sl-card-link {
+            /* The link is invisible text-decoration-wise; the card itself
+             * is the click target thanks to the ::before pseudo-element
+             * below. Display:contents lets the link wrap the body text
+             * without breaking the flex/grid layout. */
+            display: contents;
+            color: inherit;
+        }
+        .card:has(.sl-card-link) {
+            position: relative;
+            cursor: pointer;
+        }
+        .card:has(.sl-card-link):hover {
+            border-color: var(--sl-color-gray-2);
+        }
+        .card:has(.sl-card-link):hover .title {
+            color: var(--sl-color-accent-high);
+        }
+        /* a11y: a transparent overlay makes the whole card clickable
+         * without changing layout. Same trick Starlight's LinkCard uses. */
+        .card:has(.sl-card-link) .sl-card-link::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+        }
+    }
+</style>

package/package.json

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

package/styles/base.css

@@ -330,6 +330,11 @@
     /* built-in Starlight Cards and LinkCards */
     .sl-markdown-content .card-grid {
         gap: 1rem;
+        grid-auto-rows: 1fr;
+    }
+
+    .sl-markdown-content .card-grid > * {
+        height: 100%;
     }
 
     .sl-markdown-content :is(.card, .sl-link-card) {
@@ -339,6 +344,7 @@
         background-color: var(--code-background);
         box-shadow: none;
         transition: background-color 0.15s;
+        height: 100%;
     }
 
     .sl-markdown-content :is(.card, .sl-link-card):hover {

package/user-components.ts

@@ -1,3 +1,4 @@
+export { default as Card } from './components/custom/Card.astro';
 export { default as ContainerSection } from './components/custom/ContainerSection.astro';
 export { default as LinkButton } from './components/custom/LinkButton.astro';
 export { default as Dropdown } from './components/custom/dropdown';