Propose landing UI refresh

.github/workflows/deploy-docs.yml

@@ -40,9 +40,6 @@ jobs:
     runs-on: ubuntu-latest
     needs: typos
     timeout-minutes: 30
-    env:
-      NODE_OPTIONS: '--max-old-space-size=16384'
-      UV_THREADPOOL_SIZE: '32'
     steps:
       # actions/checkout v5
       - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd

.github/workflows/deploy-web.yml

@@ -39,9 +39,6 @@ jobs:
     runs-on: ubuntu-latest
     needs: typos
     timeout-minutes: 30
-    env:
-      NODE_OPTIONS: '--max-old-space-size=16384'
-      UV_THREADPOOL_SIZE: '32'
     steps:
       # actions/checkout v5
       - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd

.github/workflows/test.yml

@@ -82,9 +82,6 @@ jobs:
     if: needs.changes.outputs.web == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 45
-    env:
-      NODE_OPTIONS: '--max-old-space-size=16384'
-      UV_THREADPOOL_SIZE: '32'
     steps:
       - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd
       - uses: actions/setup-node@v4
@@ -125,9 +122,6 @@ jobs:
     if: needs.changes.outputs.docs == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 45
-    env:
-      NODE_OPTIONS: '--max-old-space-size=16384'
-      UV_THREADPOOL_SIZE: '32'
     steps:
       - uses: actions/checkout@93cb6efe18208431cddfb8368fd83d5badbf9bfd
       - uses: actions/setup-node@v4

AGENTS.md

@@ -38,4 +38,4 @@ bunx @tailwindcss/upgrade --force
 - Register documented plugins in `apps/docs/src/config/sidebar.mjs` so they appear in the Starlight plugin sidebar.
 - Register documented plugins in `apps/docs/src/config/llmsCustomSets.ts` so they appear in the docs search and LLM sets.
 - Refresh metadata after adding a plugin with `bun run fetch:stars` and `bun run fetch:downloads`.
-- Validate the change with `bunx prettier --write <touched-files>` and `NODE_OPTIONS=--max-old-space-size=16384 bunx astro check` in both `apps/web` and `apps/docs`, or `bun run check` from the repo root.
+- Validate the change with `bunx prettier --write <touched-files>` and `bunx astro check` in both `apps/web` and `apps/docs`, or `bun run check` from the repo root.

apps/docs/package.json

@@ -31,7 +31,7 @@
     "dev": "bun run sync:public && bun run paraglide:compile && astro dev",
     "start": "bun run sync:public && bun run paraglide:compile && astro dev",
     "clean:build-cache": "rm -rf dist .astro/content-modules.mjs .astro/content-assets.mjs .wrangler/deploy",
-    "build": "bun run sync:public && bun run paraglide:compile && bun run clean:build-cache && NODE_OPTIONS=${NODE_OPTIONS:---max-old-space-size=16384} BUILD_CONCURRENCY=${BUILD_CONCURRENCY:-1} UV_THREADPOOL_SIZE=${UV_THREADPOOL_SIZE:-16} astro build",
+    "build": "bun run sync:public && bun run paraglide:compile && bun run clean:build-cache && astro build",
     "check": "bun run sync:public && bun run paraglide:compile && astro check",
     "preview": "astro preview",
     "preview:worker": "rm -rf .wrangler/deploy && wrangler dev",

apps/web/package.json

@@ -13,10 +13,10 @@
     "validate:agent-skills": "bun ../../scripts/validate-agent-skills-digests.mjs",
     "paraglide:compile": "bunx paraglide-js compile --project ../../project.inlang --outdir ./src/paraglide --emit-ts-declarations --silent",
     "astro": "astro",
-    "dev": "bun run paraglide:compile && NODE_OPTIONS=${NODE_OPTIONS:---max-old-space-size=16384} astro dev",
-    "start": "bun run paraglide:compile && NODE_OPTIONS=${NODE_OPTIONS:---max-old-space-size=16384} astro dev",
+    "dev": "bun run paraglide:compile && astro dev",
+    "start": "bun run paraglide:compile && astro dev",
     "clean:build-cache": "rm -rf dist .astro/content-modules.mjs .astro/content-assets.mjs",
-    "build": "bun run paraglide:compile && bun run clean:build-cache && NODE_OPTIONS=${NODE_OPTIONS:---max-old-space-size=16384} BUILD_CONCURRENCY=${BUILD_CONCURRENCY:-1} UV_THREADPOOL_SIZE=${UV_THREADPOOL_SIZE:-16} astro build && rm -rf dist/.prerender",
+    "build": "bun run paraglide:compile && bun run clean:build-cache && BUILD_CONCURRENCY=${BUILD_CONCURRENCY:-1} UV_THREADPOOL_SIZE=${UV_THREADPOOL_SIZE:-16} astro build && rm -rf dist/.prerender",
     "check": "bun run validate:agent-skills && bun run paraglide:compile && astro check",
     "preview": "bun run build && bun run preview:worker",
     "preview:astro": "astro preview",

apps/web/src/layouts/Layout.astro

@@ -14,7 +14,7 @@ const enableThirdPartyScripts = !isLocalhost && !disableThirdPartyScripts
 ---
 
 <!doctype html>
-<html lang={Astro.locals.locale.toLowerCase()}>
+<html lang={Astro.locals.locale.toLowerCase()} class="antialiased">
   <head>
     <link rel="preload" as="font" type="font/woff" href="/fonts/AirbnbCerealLight.woff" crossorigin />
     <link rel="preload" as="font" type="font/woff" href="/fonts/AirbnbCerealMedium.woff" crossorigin />
@@ -30,7 +30,7 @@ const enableThirdPartyScripts = !isLocalhost && !disableThirdPartyScripts
     >
       Skip to main content
     </a>
-    <div class="overflow-x-hidden bg-gray-900 text-white">
+    <div class="isolate overflow-x-hidden bg-gray-900 text-white">
       <Header />
       <main id="main-content">
         <slot />

apps/web/src/pages/plugins.astro

@@ -126,55 +126,59 @@ const content = {
 <Layout content={content}>
   <div class="relative min-h-screen">
     <!-- Plugins Directory -->
-    <section class="px-6 py-12 lg:px-8 lg:py-16">
+    <section class="px-6 pt-12 pb-8 lg:px-8 lg:pt-16 lg:pb-10">
       <div class="mx-auto max-w-7xl">
-        <div class="mb-12">
+        <div class="mb-10">
           <div class="mb-6 inline-flex items-center rounded-full border border-gray-600/40 bg-gray-800/40 px-4 py-2 text-sm font-medium text-gray-200">
             <span class="mr-2 h-2 w-2 animate-pulse rounded-full bg-blue-400"></span>
             {plugins.length}+ {m.plugins({}, { locale: Astro.locals.locale })}
           </div>
 
-          <h1 class="font-pj text-3xl font-bold text-white sm:text-4xl md:text-5xl">
+          <h1 class="font-pj max-w-[22ch] text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl md:text-5xl">
             {m.plugins({}, { locale: Astro.locals.locale })} Directory
           </h1>
-          <p class="mt-4 max-w-2xl text-gray-300">Technical list of published plugins with direct links, npm download data, and GitHub stars.</p>
+          <p class="mt-4 max-w-[60ch] text-base leading-7 text-pretty text-gray-300">Technical list of published plugins with direct links, npm download data, and GitHub stars.</p>
         </div>
         <div class="mb-8 grid grid-cols-1 gap-6 text-sm text-gray-300 md:grid-cols-3">
-          <div class="flex items-center justify-between rounded-xl border border-gray-700 bg-gray-900/40 px-4 py-3">
+          <div class="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 py-3">
             <span class="text-gray-400">Total plugins</span>
-            <span class="font-semibold text-white">{plugins.length}+</span>
+            <span class="font-semibold text-white tabular-nums">{plugins.length}+</span>
           </div>
-          <div class="flex items-center justify-between rounded-xl border border-gray-700 bg-gray-900/40 px-4 py-3">
+          <div class="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 py-3">
             <span class="text-gray-400">npm weekly</span>
-            <span class="font-semibold text-white">{formatCount(totalDownloads)}</span>
+            <span class="font-semibold text-white tabular-nums">{formatCount(totalDownloads)}</span>
           </div>
-          <div class="flex items-center justify-between rounded-xl border border-gray-700 bg-gray-900/40 px-4 py-3">
+          <div class="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 py-3">
             <span class="text-gray-400">GitHub stars</span>
-            <span class="font-semibold text-white">{formatCount(totalStars)}+</span>
+            <span class="font-semibold text-white tabular-nums">{formatCount(totalStars)}+</span>
           </div>
         </div>
       </div>
     </section>
 
     <!-- Plugins Grid -->
-    <section id="plugins" class="py-20">
+    <section id="plugins" class="pt-8 pb-20">
       <div class="mx-auto max-w-7xl px-6 lg:px-8">
-        <div class="mb-16 text-center">
-          <h2 class="font-pj mb-6 text-4xl font-bold text-white">{m.browse_plugin_library({}, { locale: Astro.locals.locale })}</h2>
-          <p class="mx-auto max-w-2xl text-xl text-gray-300">
-            {m.discover_ready_plugins({}, { locale: Astro.locals.locale })}
-          </p>
+        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+          <div>
+            <h2 class="font-pj max-w-[24ch] text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl">
+              {m.browse_plugin_library({}, { locale: Astro.locals.locale })}
+            </h2>
+            <p class="mt-4 max-w-[56ch] text-base leading-7 text-pretty text-gray-300 sm:text-lg">
+              {m.discover_ready_plugins({}, { locale: Astro.locals.locale })}
+            </p>
+          </div>
         </div>
 
         <!-- Search and Sort Controls -->
-        <div class="mx-auto mb-8 flex max-w-3xl flex-col items-center justify-center gap-4 sm:flex-row">
+        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center">
           <div class="relative w-full flex-1">
             <input
               type="text"
               id="plugin-search"
               aria-label="Search plugins by name or description"
               placeholder="Search plugins by name or description..."
-              class="w-full rounded-xl border border-gray-700 bg-white/5 px-6 py-4 text-white placeholder-gray-400 backdrop-blur-sm transition-all duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none"
+              class="w-full rounded-xl border border-white/10 bg-white/5 px-5 py-4 text-white placeholder-gray-400 backdrop-blur-sm transition-all duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 focus:outline-none"
             />
             <svg
               aria-hidden="true"
@@ -195,7 +199,7 @@ const content = {
               aria-controls="plugin-sort-menu"
               aria-label="Sort plugins by"
               data-sort-value={defaultSortOption.value}
-              class="group flex w-full items-center justify-between gap-4 rounded-2xl border border-blue-400/30 bg-linear-to-b from-[#111827] to-[#0f172a] px-5 py-4 text-left shadow-[0_18px_40px_rgba(15,23,42,0.35)] transition-all duration-200 hover:border-blue-300/50 hover:shadow-[0_20px_50px_rgba(37,99,235,0.18)] focus-visible:border-blue-300 focus-visible:ring-2 focus-visible:ring-blue-400/30 focus-visible:outline-none sm:w-72"
+              class="group flex w-full items-center justify-between gap-4 rounded-xl border border-blue-400/30 bg-linear-to-b from-[#111827] to-[#0f172a] px-5 py-4 text-left shadow-[0_18px_40px_rgba(15,23,42,0.35)] transition-all duration-200 hover:border-blue-300/50 hover:shadow-[0_20px_50px_rgba(37,99,235,0.18)] focus-visible:border-blue-300 focus-visible:ring-2 focus-visible:ring-blue-400/30 focus-visible:outline-none sm:w-72"
             >
               <span class="min-w-0">
                 <span class="block text-[11px] font-semibold tracking-[0.28em] text-blue-200/70 uppercase">Sort plugins</span>
@@ -260,7 +264,7 @@ const content = {
           {
             plugins.map((item) => (
               <div
-                class="plugin-card group relative rounded-2xl border border-gray-700 bg-white/5 p-6 backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:border-gray-500/50 hover:bg-white/10"
+                class="plugin-card group relative rounded-xl border border-white/10 bg-white/5 p-6 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/10"
                 data-title={item.title.toLowerCase()}
                 data-description={item.description.toLowerCase()}
                 data-author={item.author.toLowerCase()}