From c16a75cb2b079da92882f654177d91fa268486b5 Mon Sep 17 00:00:00 2001 From: ankita Date: Thu, 19 Feb 2026 19:38:20 +0530 Subject: [PATCH 1/6] feat: add toggle to filter out unfocused frameworks --- .../docs/src/components/DependencyStats.astro | 238 +++++++++++++----- 1 file changed, 177 insertions(+), 61 deletions(-) diff --git a/packages/docs/src/components/DependencyStats.astro b/packages/docs/src/components/DependencyStats.astro index e0b1865..132de59 100644 --- a/packages/docs/src/components/DependencyStats.astro +++ b/packages/docs/src/components/DependencyStats.astro @@ -2,6 +2,7 @@ import { getCollection } from 'astro:content' import { formatBytesToMB, formatTimeMs, getFrameworkSlug } from '../lib/utils' import '../styles/shared.css' +import frameworksConfig from '../../../../.github/frameworks.json'; const devtimeEntries = await getCollection('devtime') const runtimeEntries = await getCollection('runtime') @@ -31,6 +32,17 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) our methodology and testing process.

+ +
+ +
+

Dev Time Performance

@@ -43,7 +55,7 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) Framework - Prod Deps + Dev Deps Size Size (Prod Only) @@ -52,32 +64,37 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) { - starterStats.map((framework) => ( - - - - {framework.name} - - - {framework.prodDependencies} - {framework.devDependencies} - {formatBytesToMB(framework.nodeModulesSize)} - {formatBytesToMB(framework.nodeModulesSizeProdOnly)} - - - View - - - - )) + starterStats.map((framework) => { + const config = frameworksConfig.find(f => f.displayName === framework.name); + const isFocused = config?.focusedFramework === false ? 'false' : 'true'; + + return ( + + + + {framework.name} + + + {framework.prodDependencies} + {framework.devDependencies} + {formatBytesToMB(framework.nodeModulesSize)} + {formatBytesToMB(framework.nodeModulesSizeProdOnly)} + + + View + + + + ); + }) } @@ -98,24 +115,29 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) { - starterStats.map((framework) => ( - - - - {framework.name} - - - {formatTimeMs(framework.installTime.avgMs)} - {formatTimeMs(framework.installTime.minMs)} - {formatTimeMs(framework.installTime.maxMs)} - {formatTimeMs(framework.coldBuildTime.avgMs)} - {formatTimeMs(framework.warmBuildTime.avgMs)} - {formatBytesToMB(framework.buildOutputSize)} - - )) + starterStats.map((framework) => { + const config = frameworksConfig.find(f => f.displayName === framework.name); + const isFocused = config?.focusedFramework === false ? 'false' : 'true'; + + return ( + + + + {framework.name} + + + {formatTimeMs(framework.installTime.avgMs)} + {formatTimeMs(framework.installTime.minMs)} + {formatTimeMs(framework.installTime.maxMs)} + {formatTimeMs(framework.coldBuildTime.avgMs)} + {formatTimeMs(framework.warmBuildTime.avgMs)} + {formatBytesToMB(framework.buildOutputSize)} + + ); + }) } @@ -143,22 +165,27 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) { - ssrStats.map((framework) => ( - - - - {framework.name} - - - {framework.ssrOpsPerSec?.toLocaleString()} - {framework.ssrAvgLatencyMs}ms - {framework.ssrBodySizeKb}kb - {framework.ssrDuplicationFactor}x - - )) + ssrStats.map((framework) => { + const config = frameworksConfig.find(f => f.displayName === framework.name); + const isFocused = config?.focusedFramework === false ? 'false' : 'true'; + + return ( + + + + {framework.name} + + + {framework.ssrOpsPerSec?.toLocaleString()} + {framework.ssrAvgLatencyMs}ms + {framework.ssrBodySizeKb}kb + {framework.ssrDuplicationFactor}x + + ); + }) } @@ -473,6 +500,75 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) color: var(--ft-muted); } + /* --- Filter switch style --- */ + .filter-container { + margin-bottom: 2em; + display: flex; + align-items: center; + } + + .toggle-label { + display: flex; + align-items: center; + gap: 12px; + cursor: pointer; + } + + .toggle-switch { + position: relative; + width: 44px; + height: 24px; + } + + .toggle-switch input { + opacity: 0; + width: 0; + height: 0; + } + + .toggle-slider { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--ft-border); + transition: 0.3s; + border-radius: 24px; + } + + .toggle-slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: var(--ft-text); + transition: 0.3s; + border-radius: 50%; + } + + input:checked + .toggle-slider { + background-color: var(--ft-accent); + } + + input:checked + .toggle-slider:before { + transform: translateX(20px); + background-color: var(--ft-bg); + } + + input:focus-visible + .toggle-slider { + outline: 2px solid var(--ft-text); + outline-offset: 2px; + } + + .toggle-text { + color: var(--ft-text); + font-size: 15px; + font-weight: 500; + } + @media screen and (max-width: 768px) { main { padding: 20px 16px; @@ -501,3 +597,23 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) } } + + \ No newline at end of file From 918d0973d03ffce6733ef1811790390ca61a2422 Mon Sep 17 00:00:00 2001 From: ankita Date: Fri, 20 Feb 2026 13:20:55 +0530 Subject: [PATCH 2/6] chore: format code with prettier --- .../docs/src/components/DependencyStats.astro | 66 +++++++++++-------- 1 file changed, 40 insertions(+), 26 deletions(-) diff --git a/packages/docs/src/components/DependencyStats.astro b/packages/docs/src/components/DependencyStats.astro index 132de59..d9e33d3 100644 --- a/packages/docs/src/components/DependencyStats.astro +++ b/packages/docs/src/components/DependencyStats.astro @@ -2,7 +2,7 @@ import { getCollection } from 'astro:content' import { formatBytesToMB, formatTimeMs, getFrameworkSlug } from '../lib/utils' import '../styles/shared.css' -import frameworksConfig from '../../../../.github/frameworks.json'; +import frameworksConfig from '../../../../.github/frameworks.json' const devtimeEntries = await getCollection('devtime') const runtimeEntries = await getCollection('runtime') @@ -32,7 +32,6 @@ const ssrStats = runtimeEntries.map((entry) => entry.data) our methodology and testing process.

-