feat(website): add tag filtering and searchbar #90
Conversation
Signed-off-by: Paul Schultz <[email protected]> fix:(monorepo): enable tailwind prettier plugin (#89) Signed-off-by: Paul Schultz <[email protected]> fix(website): store fonts locally (#88) Signed-off-by: Paul Schultz <[email protected]> (wip) searchbar Signed-off-by: Paul Schultz <[email protected]> finish searchbar styling Signed-off-by: Paul Schultz <[email protected]> feat(website): add tag filtering and searchbar Signed-off-by: Paul Schultz <[email protected]>
| <h3>{title}</h3> | ||
| <p className="line-clamp-3">{description}</p> | ||
| </div> | ||
| <div className="bg-pf-cyan-300 w-fit rounded px-2 py-1 text-sm text-white">{category}</div> |
There was a problem hiding this comment.
The tag on the plugin tile looks more like a button to me than a "tag" information. Also since "Frontend" and "Backend" strings look so similar when you glance over them it doesn't help me with quick orientation.
WDYT about changing this to a small React icon (for frontend), NodeJS icon (for backend) and some arbirtrary "action" or "automation" icon (for scaffolder actions) instead? All with tooltips.
Something like this? WDYT?
There was a problem hiding this comment.
I like this idea. Thoughts @serenamarie125?
|
is there a tooltip as well? so people can know how that is associated to the filter? |
A gear icon: the size and color will be the same as the other icons
Whoops, I need to add a tooltip |
|
|
Signed-off-by: Paul Schultz <[email protected]>
|
Something like this with tags/labels would be cool We could say frontend/backstage/actions but also a category like Auth/OCI etc |
I know @serenamarie125 mentioned that we should add a tag system like backstage sooner or later. I can create an issue to track this.
Edit: #122 |
Signed-off-by: Paul Schultz <[email protected]>
| "@segment/analytics-next": "1.53.0", | ||
| "clsx": "1.2.1", | ||
| "deepmerge": "4.3.1", | ||
| "encoding": "0.1.13", | ||
| "feed": "4.2.2", |
There was a problem hiding this comment.
Wasn't feed used to provide a RSS feed for the blogs?
There was a problem hiding this comment.
These were fragments from the old website (no longer needed).
| "@radix-ui/react-dropdown-menu": "2.0.5", | ||
| "@radix-ui/react-form": "0.0.3", | ||
| "@radix-ui/react-tooltip": "1.0.6", |
There was a problem hiding this comment.
If we are using Tailwindcss, do we need Radix-ui?
There was a problem hiding this comment.
Yes, Radix-UI is a headless UI component library (the components have no styling) that has a focus on ease of use and accessibility. Therefore, all I need to do with Radix-UI is the styling the individual components rather than needing to add the required logic and accessibility for these components. Here is their website.
What does this PR do / why we need it
Adds tag filtering and searchbar
Which issue(s) does this PR fix
Fixes #83
PR acceptance criteria
How to test changes / Special notes to the reviewer