feat: add new application icons and create ApplicationsGrid component #52
Conversation
KUASWoodyLIN
commented
Dec 22, 2025
KUASWoodyLIN
commented
- Added SVG icons for Terraform, Traefik, and Vault.
- Implemented ApplicationsGrid component to display a grid of application icons with links.
- Introduced helper functions for shuffling arrays and generating friendly names from package IDs.
- Enhanced image importing functionality for dynamic imports from JSON data.
- Updated documentation to include the new Application Store section.
- Configured TypeScript paths for better module resolution.
- Added SVG icons for Terraform, Traefik, and Vault. - Implemented ApplicationsGrid component to display a grid of application icons with links. - Introduced helper functions for shuffling arrays and generating friendly names from package IDs. - Enhanced image importing functionality for dynamic imports from JSON data. - Updated documentation to include the new Application Store section. - Configured TypeScript paths for better module resolution.
Summary of ChangesHello @KUASWoodyLIN, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the application's UI by introducing a new 'Application Store' section. It integrates a wide array of application icons and a dynamic Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Pull request overview
This PR introduces a new ApplicationsGrid component featuring an animated infinite scrolling showcase of application icons, along with supporting utilities and documentation. The changes enable the site to display a curated application ecosystem on the homepage.
Key Changes:
- Added 30+ application icons (SVG and PNG formats) for popular tools like Terraform, Vault, Prometheus, Jenkins, and others
- Created an ApplicationsGrid component with three rows of horizontally scrolling icons with hover interactions
- Implemented utility functions for array shuffling and generating friendly names from package IDs
Reviewed changes
Copilot reviewed 4 out of 42 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adds TypeScript path aliases for cleaner imports (has syntax error) |
| src/utils/imageImporter.js | Provides dynamic image import utilities for Astro |
| src/utils/helpers.js | Contains helper functions for homepage detection, array shuffling, and name generation |
| src/components/ApplicationsGrid.astro | Main component with infinite scrolling animation and 30+ application icons |
| src/content/docs/index.mdx | Adds new "Explore Application Store" section |
| src/assets/icons/*.svg | Individual SVG icon files for various applications |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Import all images from the testimonials directory | ||
| // This uses Vite's import.meta.glob feature | ||
| const testimonialImages = import.meta.glob('../assets/testimonials/*.{png,jpg,jpeg,webp}', { eager: true }); |
There was a problem hiding this comment.
The comment mentions this module is for "testimonials" but the path alias used is "@components/*" suggesting this is for general component use. Additionally, the testimonialImages constant name is misleading if this utility is meant to be generic. Consider renaming to reflect the actual purpose or making it more configurable to handle different asset directories.
|
|
||
| ## Explore Application Store | ||
|
|
||
| import IntegrationGrid from '@components/ApplicationsGrid.astro'; |
There was a problem hiding this comment.
The component import uses @components/ApplicationsGrid.astro but the component file is named ApplicationsGrid.astro. However, the imported component is aliased as IntegrationGrid, which creates confusion. Consider either renaming the component file to IntegrationGrid.astro or updating the import alias to match the actual component name for better clarity.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request adds a new ApplicationsGrid component with a scrolling grid of application icons, along with new SVG assets and helper utilities. The implementation is solid. My feedback focuses on improving the maintainability of the new component by separating data from the component logic and removing unused CSS, which will make the code cleaner and easier to manage in the long run.
| interface IconItem { | ||
| meta: ImageMetadata; | ||
| alt: string; | ||
| search: string; | ||
| url: string; | ||
| } | ||
| const icons: IconItem[] = [ | ||
| { meta: airflowIcon, alt: 'Airflow', search: 'airflow', url: 'https://airflow.apache.org/' }, | ||
| { meta: argoCdIcon, alt: 'Argo CD', search: 'argo-cd', url: 'https://argoproj.github.io/cd/' }, | ||
| { | ||
| meta: artifactHubIcon, | ||
| alt: 'Artifact Hub', | ||
| search: 'artifact-hub', | ||
| url: 'https://artifacthub.io/' | ||
| }, | ||
| { meta: authentikIcon, alt: 'Authentik', search: 'authentik', url: 'https://goauthentik.io/' }, | ||
| { meta: ciliumIcon, alt: 'Cilium', search: 'cilium', url: 'https://cilium.io/' }, | ||
| { | ||
| meta: confluenceIcon, | ||
| alt: 'Confluence', | ||
| search: 'confluence', | ||
| url: 'https://www.atlassian.com/software/confluence' | ||
| }, | ||
| { meta: consulIcon, alt: 'Consul', search: 'consul', url: 'https://www.consul.io/' }, | ||
| { meta: datadogIcon, alt: 'Datadog', search: 'datadog', url: 'https://www.datadoghq.com/' }, | ||
| { meta: droneIcon, alt: 'Drone', search: 'drone', url: 'https://www.drone.io/' }, | ||
| { | ||
| meta: elasticStackIcon, | ||
| alt: 'Elastic Stack', | ||
| search: 'elastic-stack', | ||
| url: 'https://www.elastic.co/elastic-stack' | ||
| }, | ||
| { | ||
| meta: elasticsearchIcon, | ||
| alt: 'Elasticsearch', | ||
| search: 'elasticsearch', | ||
| url: 'https://www.elastic.co/elasticsearch' | ||
| }, | ||
| { | ||
| meta: filebeatIcon, | ||
| alt: 'Filebeat', | ||
| search: 'filebeat', | ||
| url: 'https://www.elastic.co/beats/filebeat' | ||
| }, | ||
| { meta: giteaIcon, alt: 'Gitea', search: 'gitea', url: 'https://about.gitea.com/' }, | ||
| { meta: harborIcon, alt: 'Harbor', search: 'harbor', url: 'https://goharbor.io/' }, | ||
| { meta: headlampIcon, alt: 'Headlamp', search: 'headlamp', url: 'https://headlamp.dev/' }, | ||
| { meta: istioIcon, alt: 'Istio', search: 'istiod', url: 'https://istio.io/' }, | ||
| { meta: jaegerIcon, alt: 'Jaeger', search: 'jaeger', url: 'https://www.jaegertracing.io/' }, | ||
| { meta: jenkinsIcon, alt: 'Jenkins', search: 'jenkins', url: 'https://www.jenkins.io/' }, | ||
| { meta: jiraIcon, alt: 'Jira', search: 'jira', url: 'https://www.atlassian.com/software/jira' }, | ||
| { meta: jupyterhubIcon, alt: 'JupyterHub', search: 'jupyterhub', url: 'https://jupyter.org/hub' }, | ||
| { meta: kibanaIcon, alt: 'Kibana', search: 'kibana', url: 'https://www.elastic.co/kibana' }, | ||
| { meta: kongIcon, alt: 'Kong', search: 'kong', url: 'https://konghq.com/' }, | ||
| { meta: kyvernoIcon, alt: 'Kyverno', search: 'kyverno', url: 'https://kyverno.io/' }, | ||
| { | ||
| meta: logstashIcon, | ||
| alt: 'Logstash', | ||
| search: 'logstash', | ||
| url: 'https://www.elastic.co/logstash' | ||
| }, | ||
| { meta: nginxIcon, alt: 'Nginx', search: 'nginx', url: 'https://nginx.org/' }, | ||
| { meta: openebsIcon, alt: 'OpenEBS', search: 'openebs', url: 'https://openebs.io/' }, | ||
| { | ||
| meta: openmetadataIcon, | ||
| alt: 'OpenMetadata', | ||
| search: 'openmetadata', | ||
| url: 'https://open-metadata.org/' | ||
| }, | ||
| { meta: prometheusIcon, alt: 'Prometheus', search: 'prometheus', url: 'https://prometheus.io/' }, | ||
| { meta: qdrantIcon, alt: 'Qdrant', search: 'qdrant', url: 'https://qdrant.tech/' }, | ||
| { meta: redpandaIcon, alt: 'Redpanda', search: 'redpanda', url: 'https://redpanda.com/' }, | ||
| { | ||
| meta: sonarqubeIcon, | ||
| alt: 'SonarQube', | ||
| search: 'sonarqube', | ||
| url: 'https://www.sonarsource.com/products/sonarqube/' | ||
| }, | ||
| { meta: terraformIcon, alt: 'Terraform', search: 'terraform', url: 'https://www.terraform.io/' }, | ||
| { meta: traefikIcon, alt: 'Traefik', search: 'traefik', url: 'https://traefik.io/' }, | ||
| { meta: vaultIcon, alt: 'Vault', search: 'vault', url: 'https://www.vaultproject.io/' } | ||
| ]; |
There was a problem hiding this comment.
To improve maintainability and separation of concerns, consider moving the IconItem interface and the large icons array to a separate data file (e.g., src/data/applications.ts). This will make the component's code cleaner and the data easier to manage. You can then import the icons array and IconItem type into this component.
| /* Theme-aware icon switching when a light variant exists */ | ||
| .img img.icon.light { | ||
| display: none; | ||
| } | ||
| .img img.icon.dark { | ||
| display: block; | ||
| } | ||
| :global([data-theme='light']) .img img.icon.light { | ||
| display: block; | ||
| } | ||
| :global([data-theme='light']) .img img.icon.dark { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
These CSS rules for theme-aware icon switching with .light and .dark classes appear to be unused in the component's template. If this feature is not planned for implementation soon, removing these styles would be beneficial for reducing the stylesheet size. Otherwise, if the feature is intended, the Image components should be updated to apply these classes.
