Added Depot Logo

packages/docs/src/components/FocusedToggle.astro

@@ -8,13 +8,12 @@
       <input type="checkbox" id="focused-toggle" checked />
       <span class="toggle-slider"></span>
     </div>
-    <span class="toggle-text">Show focused frameworks only</span>
+    <span class="toggle-text">Core frameworks</span>
   </label>
 </div>
 
 <style>
   .filter-container {
-    margin-bottom: 2em;
     display: flex;
     align-items: center;
   }

packages/docs/src/components/MPAStatsTable.astro

@@ -1,7 +1,6 @@
 ---
 import { mpaStats } from '../lib/collections'
 import { getFrameworkSlug } from '../lib/utils'
-import MethodologyTag from './MethodologyTag.astro'
 import StatsTable from './StatsTable.astro'
 
 const columns = [
@@ -22,10 +21,6 @@ const columns = [
 const tableData = mpaStats
 ---
 
-<MethodologyTag>
-  Measured on GitHub Actions (ubuntu-latest, Node 24) using Lighthouse flow with
-  Chromium.
-</MethodologyTag>
 <StatsTable
   label="MPA performance by framework"
   columns={columns}

packages/docs/src/components/PageHeader.astro

@@ -1,20 +1,48 @@
-<h1><slot /></h1>
+---
+import FocusedToggle from './FocusedToggle.astro'
+
+interface Props {
+  showToggle?: boolean
+}
+
+const { showToggle = false } = Astro.props
+---
+
+<div class="h1-wrapper">
+  <h1><slot /></h1>
+  {showToggle && <FocusedToggle />}
+</div>
 
 <style>
-  h1 {
-    font-size: 32px;
+  .h1-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    width: 100%;
     margin-top: 0.25em;
     margin-bottom: 0.5em;
+  }
+
+  h1 {
+    font-size: 26px;
     font-weight: 700;
     background: var(--ft-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    align-self: flex-start;
   }
 
-  @media screen and (max-width: 768px) {
+  @media screen and (min-width: 768px) {
+    .h1-wrapper {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
     h1 {
-      font-size: 26px;
+      font-size: 32px;
+      align-self: auto;
     }
   }
 </style>

packages/docs/src/components/SPAStatsTable.astro

@@ -1,7 +1,6 @@
 ---
 import { spaStats } from '../lib/collections'
 import { getFrameworkSlug } from '../lib/utils'
-import MethodologyTag from './MethodologyTag.astro'
 import StatsTable from './StatsTable.astro'
 
 const columns = [
@@ -22,10 +21,6 @@ const columns = [
 const tableData = spaStats
 ---
 
-<MethodologyTag>
-  Measured on GitHub Actions (ubuntu-latest, Node 24) using Lighthouse flow with
-  Chromium.
-</MethodologyTag>
 <StatsTable
   label="SPA performance by framework"
   columns={columns}

packages/docs/src/components/SSRStatsTable.astro

@@ -1,7 +1,6 @@
 ---
 import { ssrStats } from '../lib/collections'
 import { getFrameworkSlug } from '../lib/utils'
-import MethodologyTag from './MethodologyTag.astro'
 import StatsTable from './StatsTable.astro'
 
 const columns = [
@@ -31,10 +30,6 @@ const tableData = ssrStats.map((f) => ({
 }))
 ---
 
-<MethodologyTag>
-  Measured on GitHub Actions (ubuntu-latest, Node 24) using custom SSR benchmark
-  apps.
-</MethodologyTag>
 <StatsTable
   label="SSR performance by framework"
   columns={columns}

packages/docs/src/pages/dev-time.astro

@@ -5,19 +5,13 @@ import CoreJsTable from '../components/CoreJsTable.astro'
 import DependencyCharts from '../components/DependencyCharts.astro'
 import DependencyStatsTable from '../components/DependencyStatsTable.astro'
 import NodeModulesSizeCharts from '../components/NodeModulesSizeCharts.astro'
-import FocusedToggle from '../components/FocusedToggle.astro'
 import MethodologyTag from '../components/MethodologyTag.astro'
 import PageHeader from '../components/PageHeader.astro'
 import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <PageHeader>Dev Time Stats</PageHeader>
-  <FocusedToggle />
-  <MethodologyTag>
-    Measured using pnpm on GitHub Actions (ubuntu-latest, Node 24) based on the
-    starter project set up by each framework's CLI.
-  </MethodologyTag>
+  <PageHeader showToggle>Dev Time Stats</PageHeader>
   <h2 id="dependency-counts">Dependency Counts</h2>
   <DependencyStatsTable />
   <DependencyCharts />

packages/docs/src/pages/framework/[slug].astro

@@ -2,7 +2,6 @@
 import { getCollection } from 'astro:content'
 import BackLink from '../../components/BackLink.astro'
 import DevTimeChart from '../../components/DevTimeChart.astro'
-import MethodologyTag from '../../components/MethodologyTag.astro'
 import MPAStatsMethodologyNotes from '../../components/MPAStatsMethodologyNotes.astro'
 import PageHeader from '../../components/PageHeader.astro'
 import SPAStatsMethodologyNotes from '../../components/SPAStatsMethodologyNotes.astro'
@@ -224,10 +223,6 @@ const mpaData = runtime
   </header>
 
   <h2>Dev Time Performance</h2>
-  <MethodologyTag>
-    Measured using pnpm on GitHub Actions (ubuntu-latest, Node 24) based on the
-    starter project set up by each framework's CLI.
-  </MethodologyTag>
   <StatsTable label="Dependency counts" columns={depsColumns} data={depsData} />
   <StatsTable
     label="Build and install times"
@@ -331,32 +326,20 @@ const mpaData = runtime
       <>
         <h2>Runtime Performance</h2>
         <h3>SSR Performance</h3>
-        <MethodologyTag>
-          Measured on GitHub Actions (ubuntu-latest, Node 24) using custom SSR
-          benchmark apps.
-        </MethodologyTag>
         <StatsTable
           label="SSR performance"
           columns={ssrColumns}
           data={ssrData}
         />
         <SSRStatsMethodologyNotes />
         <h3>SPA Performance</h3>
-        <MethodologyTag>
-          Measured on GitHub Actions (ubuntu-latest, Node 24) using Lighthouse
-          flow with Chromium.
-        </MethodologyTag>
         <StatsTable
           label="SPA performance"
           columns={spaColumns}
           data={spaData}
         />
         <SPAStatsMethodologyNotes />
         <h3>MPA Performance</h3>
-        <MethodologyTag>
-          Measured on GitHub Actions (ubuntu-latest, Node 24) using Lighthouse
-          flow with Chromium.
-        </MethodologyTag>
         <StatsTable
           label="MPA performance"
           columns={mpaColumns}

packages/docs/src/pages/index.astro

@@ -6,15 +6,16 @@ import MPACharts from '../components/MPACharts.astro'
 import NodeModulesSizeCharts from '../components/NodeModulesSizeCharts.astro'
 import Description from '../components/Description.astro'
 import DetailsLink from '../components/DetailsLink.astro'
-import FocusedToggle from '../components/FocusedToggle.astro'
 import PageHeader from '../components/PageHeader.astro'
 import SPACharts from '../components/SPACharts.astro'
 import SSRCharts from '../components/SSRCharts.astro'
 import Layout from '../layouts/Layout.astro'
+import DepotLogoDark from '../assets/depot-logo-horizontal-on-dark.svg'
+import DepotLogoLight from '../assets/depot-logo-horizontal-on-light.svg'
 ---
 
 <Layout>
-  <PageHeader>Framework Tracker</PageHeader>
+  <PageHeader showToggle>Framework Tracker</PageHeader>
   <Description>
     For a full list of what we plan to track see{' '}
     <a
@@ -30,7 +31,23 @@ import Layout from '../layouts/Layout.astro'
     Stats are currently in active development and may change as we refine our
     methodology and testing process.
   </Description>
-  <FocusedToggle />
+
+  <p class="depot-text">
+    All tests and stat generation is run on Depot runners to ensure fairer and
+    faster testing.
+  </p>
+  <div class="depot-logo">
+    <a
+      href="https://depot.dev/"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Depot"
+    >
+      <DepotLogoLight class="logo logo-light" />
+      <DepotLogoDark class="logo logo-dark" />
+    </a>
+  </div>
+
   <h2>Dev Time Performance</h2>
   <h3>Dependency Counts</h3>
   <DependencyCharts />
@@ -72,4 +89,30 @@ import Layout from '../layouts/Layout.astro'
   .roadmap-link {
     font-weight: 500;
   }
+
+  .depot-text {
+    color: var(--ft-muted);
+    display: inline;
+  }
+
+  .depot-logo {
+    display: inline;
+  }
+
+  .depot-logo :global(svg) {
+    transform: scale(0.75);
+    transform-origin: left center;
+  }
+
+  .logo-dark {
+    display: none;
+  }
+
+  :global(html.dark) .logo-light {
+    display: none;
+  }
+
+  :global(html.dark) .logo-dark {
+    display: inline;
+  }
 </style>

packages/docs/src/pages/run-time.astro

@@ -1,5 +1,4 @@
 ---
-import FocusedToggle from '../components/FocusedToggle.astro'
 import MPACharts from '../components/MPACharts.astro'
 import MPAStatsMethodologyNotes from '../components/MPAStatsMethodologyNotes.astro'
 import MPAStatsTable from '../components/MPAStatsTable.astro'
@@ -13,8 +12,7 @@ import Layout from '../layouts/Layout.astro'
 ---
 
 <Layout>
-  <PageHeader>Run Time Stats</PageHeader>
-  <FocusedToggle />
+  <PageHeader showToggle>Run Time Stats</PageHeader>
   <h2 id="ssr-performance">SSR Performance</h2>
   <SSRStatsTable />
   <SSRStatsMethodologyNotes />