From 9cba57e6111cda1197121a1d5cfa6492fa1e326b Mon Sep 17 00:00:00 2001
From: Alexander Karan <tech@alexanderkaran.com>
Date: Wed, 14 Jan 2026 17:36:35 +0800
Subject: [PATCH 1/2] Added build stats

---
 .../docs/src/components/DependencyStats.astro | 29 ++++++++++++++++++-
 packages/docs/src/content/config.ts           |  6 ++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/components/DependencyStats.astro b/packages/docs/src/components/DependencyStats.astro
index 175cbc6..990cc1c 100644
--- a/packages/docs/src/components/DependencyStats.astro
+++ b/packages/docs/src/components/DependencyStats.astro
@@ -23,6 +23,9 @@ const stats = statsEntries.map((entry) => entry.data)
         </a>.
       </p>
 
+      <p>All stats are taken from the basic starter kits each meta-framework sets based on their current docs</p>
+
+
       <h2>Dev Time Performance</h2>
 
       <div class="table-wrapper">
@@ -47,7 +50,6 @@ const stats = statsEntries.map((entry) => entry.data)
           </tbody>
         </table>
       </div>
-
       <div class="details-section">
         <h3>Details</h3>
         <ul class="framework-links">
@@ -75,6 +77,31 @@ const stats = statsEntries.map((entry) => entry.data)
         </ul>
       </div>
 
+            <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              <th>Framework</th>
+              <th>Install</th>
+              <th>Cold Build</th>
+              <th>Warm Build</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              stats.map((framework) => (
+                <tr>
+                  <td class="framework-name">{framework.name}</td>
+                  <td>{(framework.installTimeMs / 1000).toFixed(2)}s</td>
+                  <td>{(framework.coldBuildTimeMs / 1000).toFixed(2)}s</td>
+                  <td>{(framework.warmBuildTimeMs / 1000).toFixed(2)}s</td>
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+      </div>
+
       <h2>Runtime Performance</h2>
       <p class="coming-soon">Coming soon...</p>
     </section>
diff --git a/packages/docs/src/content/config.ts b/packages/docs/src/content/config.ts
index 72cdffa..ea386c9 100644
--- a/packages/docs/src/content/config.ts
+++ b/packages/docs/src/content/config.ts
@@ -4,9 +4,15 @@ const statsCollection = defineCollection({
   type: 'data',
   schema: z.object({
     name: z.string(),
+    type: z.string(),
     prodDependencies: z.number(),
     devDependencies: z.number(),
     npmGraphUrl: z.string().url().optional(),
+    installTimeMs: z.number(),
+    coldBuildTimeMs: z.number(),
+    warmBuildTimeMs: z.number(),
+    timingMeasuredAt: z.string(),
+    runner: z.string(),
   }),
 })
 

From f4cb78fdf5dc6397dd2bb4f02145270650198e4c Mon Sep 17 00:00:00 2001
From: Alexander Karan <tech@alexanderkaran.com>
Date: Wed, 14 Jan 2026 18:11:15 +0800
Subject: [PATCH 2/2] Updated styling

---
 packages/docs/src/assets/background.svg       |  1 -
 .../docs/src/components/DependencyStats.astro | 88 ++++++++++---------
 packages/docs/src/layouts/Layout.astro        | 14 ++-
 3 files changed, 60 insertions(+), 43 deletions(-)
 delete mode 100644 packages/docs/src/assets/background.svg

diff --git a/packages/docs/src/assets/background.svg b/packages/docs/src/assets/background.svg
deleted file mode 100644
index 4b2be0a..0000000
--- a/packages/docs/src/assets/background.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M-217.58 475.75c91.82-72.02 225.52-29.38 341.2-44.74C240 415.56 372.33 315.14 466.77 384.9c102.9 76.02 44.74 246.76 90.31 366.31 29.83 78.24 90.48 136.14 129.48 210.23 57.92 109.99 169.67 208.23 155.9 331.77-13.52 121.26-103.42 264.33-224.23 281.37-141.96 20.03-232.72-220.96-374.06-196.99-151.7 25.73-172.68 330.24-325.85 315.72-128.6-12.2-110.9-230.73-128.15-358.76-12.16-90.14 65.87-176.25 44.1-264.57-26.42-107.2-167.12-163.46-176.72-273.45-10.15-116.29 33.01-248.75 124.87-320.79Z" clip-rule="evenodd" style="opacity:.154"/><path fill="url(#b)" fill-rule="evenodd" d="M1103.43 115.43c146.42-19.45 275.33-155.84 413.5-103.59 188.09 71.13 409 212.64 407.06 413.88-1.94 201.25-259.28 278.6-414.96 405.96-130 106.35-240.24 294.39-405.6 265.3-163.7-28.8-161.93-274.12-284.34-386.66-134.95-124.06-436-101.46-445.82-284.6-9.68-180.38 247.41-246.3 413.54-316.9 101.01-42.93 207.83 21.06 316.62 6.61Z" clip-rule="evenodd" style="opacity:.154"/><defs><linearGradient id="b" x1="373" x2="1995.44" y1="1100" y2="118.03" gradientUnits="userSpaceOnUse"><stop stop-color="#D83333"/><stop offset="1" stop-color="#F041FF"/></linearGradient><linearGradient id="a" x1="107.37" x2="1130.66" y1="1993.35" y2="1026.31" gradientUnits="userSpaceOnUse"><stop stop-color="#3245FF"/><stop offset="1" stop-color="#BC52EE"/></linearGradient></defs></svg>
diff --git a/packages/docs/src/components/DependencyStats.astro b/packages/docs/src/components/DependencyStats.astro
index 990cc1c..4de7d2c 100644
--- a/packages/docs/src/components/DependencyStats.astro
+++ b/packages/docs/src/components/DependencyStats.astro
@@ -1,13 +1,11 @@
 ---
 import { getCollection } from 'astro:content'
-import background from '../assets/background.svg'
 
 const statsEntries = await getCollection('stats')
 const stats = statsEntries.map((entry) => entry.data)
 ---
 
 <div id="container">
-  <img id="background" src={background.src} alt="" fetchpriority="high" />
   <main>
     <section id="hero">
       <h1>Framework Tracker</h1>
@@ -23,18 +21,20 @@ const stats = statsEntries.map((entry) => entry.data)
         </a>.
       </p>
 
-      <p>All stats are taken from the basic starter kits each meta-framework sets based on their current docs</p>
-
+      <p class="description">
+        All stats are taken from the basic starter kits each meta-framework
+        provides based on their current docs.
+      </p>
 
       <h2>Dev Time Performance</h2>
 
       <div class="table-wrapper">
-        <table>
+        <table aria-label="Dependency counts by framework">
           <thead>
             <tr>
-              <th>Framework</th>
-              <th>Prod Deps</th>
-              <th>Dev Deps</th>
+              <th scope="col">Framework</th>
+              <th scope="col">Prod Deps</th>
+              <th scope="col">Dev Deps</th>
             </tr>
           </thead>
           <tbody>
@@ -77,14 +77,14 @@ const stats = statsEntries.map((entry) => entry.data)
         </ul>
       </div>
 
-            <div class="table-wrapper">
-        <table>
+      <div class="table-wrapper">
+        <table aria-label="Build and install times by framework">
           <thead>
             <tr>
-              <th>Framework</th>
-              <th>Install</th>
-              <th>Cold Build</th>
-              <th>Warm Build</th>
+              <th scope="col">Framework</th>
+              <th scope="col">Install</th>
+              <th scope="col">Cold Build</th>
+              <th scope="col">Warm Build</th>
             </tr>
           </thead>
           <tbody>
@@ -109,21 +109,24 @@ const stats = statsEntries.map((entry) => entry.data)
 </div>
 
 <style>
-  #background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    filter: blur(100px);
-  }
-
   #container {
     font-family:
-      Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial,
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
       sans-serif;
     min-height: 100vh;
+    color: #213547;
+    background-color: #ffffff;
+    line-height: 1.5;
   }
 
   main {
@@ -138,10 +141,14 @@ const stats = statsEntries.map((entry) => entry.data)
   }
 
   h1 {
-    font-size: 28px;
+    font-size: 32px;
     margin-top: 0.25em;
     margin-bottom: 0.5em;
     font-weight: 700;
+    background: linear-gradient(120deg, #7cb560 0%, #cf8c3c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
   }
 
   h2 {
@@ -149,7 +156,7 @@ const stats = statsEntries.map((entry) => entry.data)
     margin-top: 2em;
     margin-bottom: 1em;
     font-weight: 600;
-    color: #111827;
+    color: #213547;
   }
 
   h3 {
@@ -157,14 +164,14 @@ const stats = statsEntries.map((entry) => entry.data)
     margin-top: 1.5em;
     margin-bottom: 0.75em;
     font-weight: 600;
-    color: #111827;
+    color: #213547;
   }
 
   .description {
     font-size: 16px;
     color: #4b5563;
     line-height: 1.6;
-    margin-bottom: 2em;
+    margin-bottom: 1em;
     max-width: 700px;
   }
 
@@ -186,7 +193,7 @@ const stats = statsEntries.map((entry) => entry.data)
 
   .framework-links li {
     padding: 8px 0;
-    color: #111827;
+    color: #213547;
   }
 
   .coming-soon {
@@ -198,15 +205,14 @@ const stats = statsEntries.map((entry) => entry.data)
   table {
     width: 100%;
     border-collapse: collapse;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 16px;
+    background: #ffffff;
+    border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid white;
+    border: 1px solid #e5e7eb;
   }
 
   thead {
-    background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
+    background: linear-gradient(120deg, #7cb560 0%, #cf8c3c 100%);
     color: white;
   }
 
@@ -234,12 +240,12 @@ const stats = statsEntries.map((entry) => entry.data)
   }
 
   tbody tr:hover {
-    background: #f9fafb;
+    background: rgba(207, 140, 60, 0.05);
   }
 
   .framework-name {
     font-weight: 500;
-    color: #111827;
+    color: #213547;
   }
 
   td:not(.framework-name) {
@@ -249,15 +255,15 @@ const stats = statsEntries.map((entry) => entry.data)
 
   .graph-link,
   .roadmap-link {
-    color: #3245ff;
+    color: #c37822;
     text-decoration: none;
     font-weight: 500;
-    transition: opacity 0.2s;
+    transition: color 0.2s;
   }
 
   .graph-link:hover,
   .roadmap-link:hover {
-    opacity: 0.7;
+    color: #cf8c3c;
     text-decoration: underline;
   }
 
@@ -267,7 +273,7 @@ const stats = statsEntries.map((entry) => entry.data)
     }
 
     h1 {
-      font-size: 24px;
+      font-size: 26px;
     }
 
     h2 {
diff --git a/packages/docs/src/layouts/Layout.astro b/packages/docs/src/layouts/Layout.astro
index 645f4d3..5889f0d 100644
--- a/packages/docs/src/layouts/Layout.astro
+++ b/packages/docs/src/layouts/Layout.astro
@@ -2,8 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light" />
+    <meta
+      name="description"
+      content="Track and compare framework performance metrics across popular meta-frameworks"
+    />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <meta name="generator" content={Astro.generator} />
     <title>Framework Tracker</title>
   </head>
@@ -18,5 +29,6 @@
     margin: 0;
     width: 100%;
     height: 100%;
+    background-color: #ffffff;
   }
 </style>