Skip to content

feat: add focused framework filter toggle#140

Open
Ankita562 wants to merge 6 commits intoe18e:mainfrom
Ankita562:feature/focused-framework-filter
Open

feat: add focused framework filter toggle#140
Ankita562 wants to merge 6 commits intoe18e:mainfrom
Ankita562:feature/focused-framework-filter

Conversation

@Ankita562
Copy link

This PR resolves #136 by adding a "Show focused frameworks only" toggle to the comparison lists on the homepage.

Changes made:

  • Added a custom-styled toggle switch UI above the Dev Time Performance table.
  • Updated DependencyStats.astro to read the focusedFramework property from .github/frameworks.json to determine the default state of each framework.
  • Added data-focused attributes to the table rows across all three performance tables.
  • Implemented client-side vanilla JavaScript to toggle the display style of unfocused framework rows, allowing the list to filter instantly without requiring a page reload or React hydration.
  • Unfocused frameworks are successfully hidden by default on initial load.

Checklist

  • If updating UI/UX components ensure you have added screenshots or a gif or video of the changes to the PR description
  • If this is a dependabot PR that bumps a metaframework version, ensure that all package versions in the package match the versions installed by the metaframework version being bumped
  • If this is a dependabot PR that bumps a metaframework version in a starter-* package, ensure that the deps, and file content matches the output of the metaframeworks recommended starter/default project

Screenshots

Toggle Unchecked (Showing all frameworks):
Screenshot 2026-02-19 194952

Toggle Checked (Default - Showing focused frameworks only):
image

@AlexanderKaran
Copy link
Collaborator

@Ankita562 Thank you so much for this, great work. If you make the tweak suggested in the comment we can get this merged

@Ankita562
Copy link
Author

All set! @AlexanderKaran I followed your example from #139. I updated the Zod schemas in config.ts, prepopulated all the content JSON files with the isFocused flag, and updated the stats-generator script to emit it automatically going forward. I also went back to the Astro component and cleaned out the old lookup logic so it just reads the flag directly from the stats now. Let me know if everything looks good!

our methodology and testing process.
</p>

<div class="filter-container">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ankita562 Can you turn this into its own Astro Component and then just import it, will help keep this page a little cleaner

{
"name": "Next.js",
"package": "app-next-js",
"isFocused": false,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Ankita562 Should be true

@AlexanderKaran
Copy link
Collaborator

@Ankita562 Just a few more litle tweaks and were good to go

@Ankita562
Copy link
Author

All set! @AlexanderKaran

I've wrapped up the final tweaks:

  • Extracted the toggle logic and CSS into a dedicated component to keep DependencyStats.astro clean.
  • Resolved the merge conflicts with the latest main branch to ensure the new tabbed charts and the toggle play nicely together.
  • Updated the Next.js JSON files to isFocused: true.
  • Added the missing isFocused: false flags to the background/baseline JSON files (baseline-html, mastro) so the Astro schema validation passes cleanly.

Let me know if everything looks good to merge!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Focused Framework Filter

3 participants

Comments