frontend: Add CNCF and verification badge to charts

[vyncent-t]

Enhance App Catalog with ArtifactHub Badges

Description

fixes issue #20

This PR aims to enhance our app catalog by incorporating important badges from ArtifactHub. These badges indicate whether an app is official, verified, or a CNCF project. Displaying these badges will help users make informed decisions about which packages to install, ensuring they opt for secure and verified applications.

Changes

• Added support for displaying ArtifactHub badges (official, verified, and CNCF project) in the app catalog.
• Updated the UI to prominently feature these badges next to corresponding apps in the catalog.
• Ensured that the CNCF badge is included and correctly displayed for relevant apps.
• Implemented logic to fetch and display badge information from ArtifactHub.

Verification

• Verified that the badges are correctly displayed for apps that are marked as official, verified, or CNCF projects.
• Tested the UI to ensure that the addition of badges does not disrupt the existing layout or functionality of the app catalog.
• Confirmed that the badges provide clear and accurate information to users about the status and security of the apps.

Images

[illume]

@vyncent-t from our discussions...

We were looking at showing the "not verified states" too.

Notice the extra description, explaining what exactly each of the badges means https://artifacthub.io/packages/helm/nginx-gateway-fabric/nginx-gateway-fabric

Additionally, perhaps sharing the iconography as artifact hub will make it easier for users. So they can reuse that knowledge of what icon is what?

[joaquimrocha]

Left a couple of notes. It would also be nice if we sorted the list of charts to show them in this order:

• CNCF
• Official
• Verified
• rest

[vyncent-t]

I updated the visuals to match those of artifact hub with matching labels for non verified and others @illume

[sniok]

Is it just me or does it look a bit too "busy"? A lot of different colors makes it a bit hard to parse visually. What if we kept the icons only when the app is "verified", "official", etc and kept them monochrome at all times? Something like this:

doesn't have to be changed within this PR, we can discuss and iterate later

[joaquimrocha]

I agree with @illume that we should keep the icons aligned with ArtifactHub, meaning that a star would be for official, and a check mark for verified, but we can use different icons and in the monochromatic version as @sniok said. The important thing is to make sure users can have direct access to an official Nginx chart, before they even see any unofficial versions. That's why the sorting is so important.

In a different PR we should also not show unofficial charts unless the user specifically toggled a switch to include those in the plugin settings.

[vyncent-t]

Made some slight changes with the monochrome as the dark mode CNCF Icon isnt exactly easy to see as its an image and not an icon

Dark & Dark mode

Color & Dark mode

[vyncent-t]

noticed in some places artifact hub will use either chart.cncf or chart.repository.cncf on their icons to choose to display so I implemented that

[joaquimrocha]

I have reduced the size of the cncf icon slightly + made the official badge appear first, as we had chatted (most important to least important).