@grove-dev/astro 0.2.19 → 0.2.20

package/src/layouts/Header.astro

@@ -73,12 +73,12 @@ const starsLabel =
 
 <header
   class:list={[
-    "sticky top-0 z-50 border-b border-ink-200 bg-white/85 backdrop-blur dark:border-ink-800 dark:bg-ink-950/85",
+    "border-border bg-background/85 sticky top-0 z-50 border-b backdrop-blur",
     className,
   ]}
 >
   <div
-    class="grove-container-wide mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
+    class="mx-auto flex w-full max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
   >
     <a
       href="/"
@@ -110,7 +110,7 @@ const starsLabel =
       {submitHref && (
         <a
           href={submitHref}
-          class="hidden h-9 items-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 sm:inline-flex dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent hidden sm:inline-flex"
         >
           <svg
             viewBox="0 0 16 16"
@@ -132,7 +132,7 @@ const starsLabel =
           rel="noopener noreferrer"
           aria-label={`${repoLabel} on GitHub — ${stars} stars`}
           title={`${repoLabel} on GitHub`}
-          class="inline-flex h-9 items-center divide-x divide-ink-200 overflow-hidden rounded-md border border-ink-200 text-[0.875rem] font-medium transition-colors hover:border-ink-300 hover:bg-ink-50 dark:divide-ink-800 dark:border-ink-800 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-[var(--radius)] border border-border bg-secondary p-0 text-sm font-medium leading-none text-foreground no-underline outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35"
         >
           <span class="flex items-center gap-1.5 px-2.5 py-1.5 text-ink-900 dark:text-ink-100">
             <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
@@ -140,7 +140,7 @@ const starsLabel =
             </svg>
             <span>{repoLabel}</span>
           </span>
-          <span class="flex items-center gap-1 bg-ink-50 px-2 py-1.5 text-ink-700 dark:bg-ink-900/60 dark:text-ink-300">
+          <span class="flex items-center gap-1 border-s border-border bg-secondary px-2 py-1.5 text-secondary-foreground">
             <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-amber-500">
               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
             </svg>

package/src/layouts/ThemeToggle.astro

@@ -24,7 +24,7 @@ const { class: className = "" } = Astro.props;
   data-theme-toggle
   aria-label="Toggle theme"
   title="Toggle theme"
-  class={`relative inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200 dark:hover:border-ink-700 dark:hover:bg-ink-900/40 ${className}`}
+  class={`inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent relative h-8 w-8 p-0 ${className}`}
 >
   {/* Sun — shown in dark mode (click to go light) */}
   <svg

package/src/styles.css

@@ -6,14 +6,9 @@
  *
  *     import "@grove-dev/astro/styles.css";
  *
- * The `grove-` prefix below is the stable contract for the showcase
- * component classes (`grove-section`, `grove-card`, `grove-btn`, etc.).
- * Tailwind v4's `@theme` block declares the same tokens as CSS custom
- * properties and Tailwind utility names — components can use either
- * bare `grove-*` classes or Tailwind utilities like `text-ink-900`.
- *
- * Namespace history: earlier V0 drafts used a different (now
- * removed) prefix. Only `grove-*` remains.
+ * This file owns only Tailwind theme tokens, runtime light/dark values,
+ * base element defaults, and rendered Markdown styles. Astro components
+ * keep their presentation in HTML with Tailwind utilities.
  */
 
 @import "tailwindcss";
@@ -127,7 +122,7 @@
   --container-narrow: 720px;
 
   /* ── Border radius scale ─────────────────────────────────────── */
-  --radius: 0.375rem;
+  --radius: 0.625rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
 
@@ -287,6 +282,35 @@
   button {
     font: inherit;
   }
+
+  :where(
+    input[type="text"],
+    input[type="search"],
+    input[type="url"],
+    input[type="email"],
+    input:not([type]),
+    select,
+    textarea
+  ) {
+    border-color: var(--grove-input) !important;
+    border-radius: var(--radius) !important;
+    background-color: var(--grove-background) !important;
+    color: var(--grove-foreground) !important;
+  }
+
+  :where(
+    input[type="text"],
+    input[type="search"],
+    input[type="url"],
+    input[type="email"],
+    input:not([type]),
+    select,
+    textarea
+  ):focus-visible {
+    border-color: var(--grove-ring) !important;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--grove-ring) 35%, transparent);
+  }
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -394,333 +418,3 @@
   padding-left: 1rem;
   color: var(--color-ink-500);
 }
-
-/* ──────────────────────────────────────────────────────────────────
- * Component classes — shared by the showcase component library.
- * Use these directly; you can also use the equivalent Tailwind
- * utilities (text-ink-900, bg-white, …) and mix freely.
- * ────────────────────────────────────────────────────────────────── */
-
-@layer components {
-  /*
-   * Stable container classes for consumers of the packaged stylesheet.
-   * Tailwind does not emit utilities referenced only inside a dependency,
-   * so relying on `max-w-container` alone can leave template content
-   * unconstrained.
-   */
-  .grove-container,
-  .grove-container-wide,
-  .grove-container-narrow {
-    width: 100%;
-    margin-inline: auto;
-  }
-
-  .grove-container {
-    max-width: var(--container-container);
-  }
-
-  .grove-container-wide {
-    max-width: var(--container-wide);
-  }
-
-  .grove-container-narrow {
-    max-width: var(--container-narrow);
-  }
-
-  /* Section spacing — consistent vertical rhythm */
-  .grove-section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-  @media (min-width: 640px) {
-    .grove-section {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-  }
-
-  .grove-section-tight {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-  @media (min-width: 640px) {
-    .grove-section-tight {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  /* Subtle card border + hover lift, used everywhere */
-  .grove-card {
-    border: 1px solid var(--color-ink-200);
-    background: #ffffff;
-    border-radius: var(--radius-lg);
-    transition:
-      border-color 150ms ease,
-      box-shadow 150ms ease,
-      background-color 150ms ease;
-  }
-  .dark .grove-card {
-    border-color: var(--color-ink-800);
-    background: var(--color-ink-950);
-  }
-
-  .grove-card-hover:hover {
-    border-color: var(--color-ink-300);
-    background: rgba(244, 244, 245, 0.6);
-    box-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.04),
-      0 4px 12px -2px rgba(0, 0, 0, 0.06);
-  }
-  .dark .grove-card-hover:hover {
-    border-color: var(--color-ink-700);
-    background: rgba(24, 24, 27, 0.4);
-    box-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.4),
-      0 4px 12px -2px rgba(0, 0, 0, 0.3);
-  }
-
-  /* Pill badge — small, neutral */
-  .grove-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    border-radius: 0.25rem;
-    border: 1px solid var(--color-ink-200);
-    background: var(--color-ink-50);
-    padding: 0.125rem 0.375rem;
-    font-size: var(--text-2xs);
-    line-height: var(--text-2xs--line-height);
-    font-weight: 500;
-    color: var(--color-ink-700);
-  }
-  .dark .grove-badge {
-    border-color: var(--color-ink-800);
-    background: rgba(24, 24, 27, 0.6);
-    color: var(--color-ink-300);
-  }
-
-  .grove-badge-accent {
-    border-color: var(--color-ink-900);
-    background: var(--color-ink-900);
-    color: #ffffff;
-  }
-  .dark .grove-badge-accent {
-    border-color: var(--color-ink-100);
-    background: var(--color-ink-100);
-    color: var(--color-ink-900);
-  }
-
-  .grove-badge-new {
-    border-color: rgba(110, 231, 183, 0.6);
-    background: var(--color-emerald-50);
-    color: var(--color-emerald-800);
-  }
-  .dark .grove-badge-new {
-    border-color: rgba(6, 95, 70, 0.6);
-    background: rgba(2, 44, 34, 0.4);
-    color: var(--color-emerald-300);
-  }
-
-  .grove-badge-hot {
-    border-color: rgba(253, 186, 116, 0.6);
-    background: var(--color-orange-50);
-    color: var(--color-orange-800);
-  }
-  .dark .grove-badge-hot {
-    border-color: rgba(154, 52, 18, 0.6);
-    background: rgba(67, 20, 7, 0.4);
-    color: var(--color-orange-300);
-  }
-
-  .grove-badge-mature {
-    border-color: rgba(147, 197, 253, 0.6);
-    background: var(--color-blue-50);
-    color: var(--color-blue-800);
-  }
-  .dark .grove-badge-mature {
-    border-color: rgba(30, 64, 175, 0.6);
-    background: rgba(23, 37, 84, 0.4);
-    color: var(--color-blue-300);
-  }
-
-  .grove-badge-stale {
-    border-color: rgba(252, 211, 77, 0.6);
-    background: var(--color-amber-50);
-    color: var(--color-amber-800);
-  }
-  .dark .grove-badge-stale {
-    border-color: rgba(146, 64, 14, 0.6);
-    background: rgba(69, 26, 3, 0.4);
-    color: var(--color-amber-300);
-  }
-
-  /* Buttons — outline / ghost / primary */
-  .grove-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    border-radius: var(--radius);
-    border: 1px solid transparent;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    transition: color 150ms ease, background-color 150ms ease,
-      border-color 150ms ease;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .grove-btn-ghost {
-    color: var(--color-ink-700);
-  }
-  .grove-btn-ghost:hover {
-    background: var(--color-ink-100);
-  }
-  .dark .grove-btn-ghost {
-    color: var(--color-ink-300);
-  }
-  .dark .grove-btn-ghost:hover {
-    background: var(--color-ink-900);
-  }
-
-  .grove-btn-outline {
-    border-color: var(--color-ink-200);
-    background: #ffffff;
-    color: var(--color-ink-900);
-  }
-  .grove-btn-outline:hover {
-    border-color: var(--color-ink-300);
-    background: var(--color-ink-50);
-  }
-  .dark .grove-btn-outline {
-    border-color: var(--color-ink-800);
-    background: var(--color-ink-950);
-    color: var(--color-ink-100);
-  }
-  .dark .grove-btn-outline:hover {
-    border-color: var(--color-ink-700);
-    background: rgba(24, 24, 27, 0.4);
-  }
-
-  .grove-btn-primary {
-    border-color: var(--color-ink-900);
-    background: var(--color-ink-900);
-    color: #ffffff;
-  }
-  .grove-btn-primary:hover {
-    background: var(--color-ink-800);
-  }
-  .dark .grove-btn-primary {
-    border-color: var(--color-ink-100);
-    background: var(--color-ink-100);
-    color: var(--color-ink-900);
-  }
-  .dark .grove-btn-primary:hover {
-    background: #ffffff;
-  }
-}
-
-/* ────────────────────────────────────────────────────────────────────
- * Backwards-compat aliases — openapps used the unprefixed utility
- * names (`card`, `btn-primary`, `btn-outline`, `btn-ghost`). New
- * components should use the `grove-` prefix. These rules mirror
- * the `grove-*` definitions above so the openapps-derived
- * components (ItemCard, AppCard, etc. — kept as `ItemCard` for V1
- * published API stability) work without per-component
- * edits.
- * ────────────────────────────────────────────────────────────────────*/
-.card {
-  border: 1px solid var(--color-ink-200);
-  background: #ffffff;
-  border-radius: 0.5rem;
-  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
-}
-.dark .card {
-  border-color: var(--color-ink-800);
-  background: var(--color-ink-950);
-}
-.card-hover:hover {
-  border-color: var(--color-ink-300);
-  background: rgba(244, 244, 245, 0.6);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
-}
-.dark .card-hover:hover {
-  border-color: var(--color-ink-700);
-  background: rgba(24, 24, 27, 0.4);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
-}
-
-/* Chip — small inline label used for platforms/stacks/etc. on
- * ItemCard. Mirrors openapps' `.chip` from the ItemCard.astro
- * (component name retained for V1 published API stability).
- * `<style>` block so the @apply in the component still works. */
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 0.375rem;
-  border: 1px solid var(--color-ink-200);
-  background: #ffffff;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--color-ink-700);
-  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
-}
-.dark .chip {
-  border-color: var(--color-ink-200);
-  background: var(--color-ink-950);
-  color: var(--color-ink-300);
-}
-.chip-stack {
-  background: var(--color-ink-50);
-}
-.dark .chip-stack {
-  background: rgba(24, 24, 27, 0.6);
-}
-.btn-primary,
-.btn-outline,
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  border-radius: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
-  cursor: pointer;
-  border: 1px solid transparent;
-  text-decoration: none;
-}
-.btn-primary {
-  border-color: var(--color-ink-900);
-  background: var(--color-ink-900);
-  color: var(--color-ink-50);
-}
-.btn-primary:hover {
-  background: var(--color-ink-700);
-  border-color: var(--color-ink-700);
-}
-.btn-outline {
-  border-color: var(--color-ink-200);
-  background: var(--color-ink-50);
-  color: var(--color-ink-700);
-}
-.btn-outline:hover {
-  border-color: var(--color-ink-300);
-  background: var(--color-ink-100);
-}
-.btn-ghost {
-  background: transparent;
-  color: var(--color-ink-500);
-}
-.btn-ghost:hover {
-  color: var(--color-ink-900);
-  background: var(--color-ink-100);
-}

package/src/theme.test.ts

@@ -7,6 +7,11 @@ const scaffoldTheme = readFileSync(
   resolve(import.meta.dirname, "../templates/default/src/styles/global.css"),
   "utf8",
 );
+const tailwindMarkup = [
+  "components/ItemCard.astro",
+  "layouts/Header.astro",
+  "../templates/default/src/pages/submit.astro",
+].map((file) => readFileSync(resolve(import.meta.dirname, file), "utf8")).join("\n");
 
 describe("Astro theme contract", () => {
   it("keeps Starlight's light and dark foundation values", () => {
@@ -49,4 +54,14 @@ describe("Astro theme contract", () => {
     expect(scaffoldTheme).not.toContain("font-family:");
     expect(scaffoldTheme).not.toContain("color-scheme:");
   });
+
+  it("styles components in HTML with Starlight-aligned Tailwind utilities", () => {
+    expect(tailwindMarkup).toContain("rounded-[calc(var(--radius)+0.25rem)]");
+    expect(tailwindMarkup).toContain("rounded-full");
+    expect(tailwindMarkup).toContain("min-h-5");
+    expect(tailwindMarkup).toContain("h-8");
+    expect(tailwindMarkup).toContain("focus-visible:ring-3");
+    expect(astroTheme).not.toContain(".grove-card");
+    expect(astroTheme).not.toContain(".grove-btn");
+  });
 });

package/templates/default/public/icons/stacks/rag.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
+  <rect width="100" height="100" rx="18" fill="#0F172A"/>
+  <path d="M29 28h42v13H29zM29 59h42v13H29z" stroke="#38BDF8" stroke-width="4" stroke-linejoin="round"/>
+  <path d="M50 41v18M42 50h16" stroke="#A78BFA" stroke-width="4" stroke-linecap="round"/>
+  <circle cx="36" cy="34.5" r="2.5" fill="#38BDF8"/>
+  <circle cx="36" cy="65.5" r="2.5" fill="#38BDF8"/>
+</svg>

package/templates/default/public/llms-full.txt

@@ -1,6 +1,6 @@
 # example.com — full directory
 
-Generated: 2026-06-22T14:50:54.564Z
+Generated: 2026-06-22T16:19:40.464Z
 Records: 8
 
 ---

package/templates/default/public/sitemap.xml

@@ -2,61 +2,61 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://example.com/</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>daily</changefreq>
     <priority>1.0</priority>
   </url>
   <url>
     <loc>https://example.com/projects</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.9</priority>
   </url>
   <url>
     <loc>https://example.com/projects/coolify</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/gitea</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/hoppscotch</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/inventree</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/label-studio</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/logseq</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/private-gpt</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://example.com/projects/wakapi</loc>
-    <lastmod>2026-06-22T14:50:53.941Z</lastmod>
+    <lastmod>2026-06-22T16:19:39.853Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>

package/templates/default/src/pages/404.astro

@@ -21,8 +21,8 @@ const description = `That page doesn't exist on ${siteConfig.name}.`;
   site={siteConfig}
   noindex
 >
-  <section class="grove-section">
-    <div class="grove-container mx-auto px-5 py-20 sm:px-7 sm:py-28">
+  <section class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-container px-5 py-20 sm:px-7 sm:py-28">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         404
       </span>
@@ -50,14 +50,14 @@ const description = `That page doesn't exist on ${siteConfig.name}.`;
             class="w-full rounded-md border border-ink-200 bg-white py-2.5 px-3 text-sm placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100"
           />
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">
+        <button type="submit" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">
           Search
         </button>
       </form>
 
       <div class="mt-6 flex flex-wrap gap-3">
-        <a href="/" class="grove-btn grove-btn-primary">Back to home</a>
-        <a href={`/${slug}`} class="grove-btn grove-btn-outline">Browse {slug}</a>
+        <a href="/" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">Back to home</a>
+        <a href={`/${slug}`} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent">Browse {slug}</a>
       </div>
     </div>
   </section>