Fix :Broken "See All Integrations" button on Home page #2455

[safiya2610]

Fixed Broken "See All Integrations" button on Home page #2455 Description

The “Show More / See Less Integrations” button on the Meshery homepage was not functioning as expected. Clicking the button did not reliably update the integrations grid, and several integration icons failed to load, resulting in multiple 404 errors during the site build.

Root Causes Integrations data loading The integrations data was exposed as a global variable (window.integrationsData), but the homepage script attempted to import it as an ES module. This caused the script to fail silently, preventing the button click handler from being attached.

Script execution timing The homepage script executed before the DOM and the integrations data were fully loaded, causing null references and preventing event listeners from registering.

Incorrect image path generation Integration icon paths were generated by incorrectly prefixing meshery.io/, resulting in paths like: /meshery.io/assets/images/... These paths do not exist in the site build, causing multiple “file not found” errors.

Fix Implemented Ensured the integrations data is loaded before the homepage script by including data.js as a standard script and accessing it via window.integrationsData.

Wrapped the homepage logic in a DOMContentLoaded listener to guarantee that DOM elements are available before attaching event handlers.

Updated the image path generation logic to normalize icon paths to: /assets/images/integration/... which resolves all 404 errors for integration icons.

Bound the click handler specifically to the “Show More Integrations” toggle and prevented the default anchor behavior to ensure consistent expand/collapse behavior.

Result The Show More / See Less Integrations button now correctly expands and collapses the integrations grid. Integration icons load correctly with no missing asset errors. The homepage behavior is consistent across browsers and the site builds cleanly without asset resolution errors.

Here's the Fixed Button:

screen-capture (1).webm

@saurabhraghuvanshii you can review the PR, I solved the issue also attach the video sample of working code.

[netlify[bot]]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	a116350b978ad6079f81fd1456195c049600327a
🔍 Latest deploy log	https://app.netlify.com/projects/mesheryio-preview/deploys/6945aa4b5d96f70008cd98e8
😎 Deploy Preview	https://deploy-preview-2463--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist[bot]]

Summary of Changes

Hello @safiya2610, I'm Gemini Code Assist[^1]! 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 addresses critical issues affecting the 'See All Integrations' button and integration icon loading on the homepage. The changes ensure that integration data is correctly loaded and processed, script execution is properly timed with DOM availability, and image paths are accurately generated. As a result, the integration grid now functions as expected, all icons load without errors, and the homepage provides a consistent user experience.

Highlights

• Integrations Data Loading Fix: The integration data, previously exposed as a global variable, was incorrectly imported as an ES module. This has been corrected by loading data.js as a standard script and accessing window.integrationsData directly.
• Script Execution Timing: The homepage script now executes only after the DOM is fully loaded, thanks to wrapping the logic in a DOMContentLoaded listener, preventing null reference errors.
• Corrected Image Paths: The logic for generating integration icon paths has been updated to remove the erroneous meshery.io/ prefix, resolving multiple 404 errors for missing assets.
• Enhanced Button Functionality: The 'Show More / See Less Integrations' button now reliably expands and collapses the integration grid, with its click handler specifically bound and default anchor behavior prevented.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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 :thumbsup: and :thumbsdown: 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.

[^1]: Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

[safiya2610]

@saurabhraghuvanshii I made changes, can you please review it.

[saurabhraghuvanshii]

@safiya2610 build failing https://app.netlify.com/projects/mesheryio-preview/deploys/693d5407a986040007ddd95a

[kishore08-07]

@safiya2610 Thank you for your contribution! Let's discuss this during the website call today at 6:30 PM IST | 8 AM CT Add it as an agenda item to the meeting minutes, if you would :)

[safiya2610]

@kishore08-07 I'm working on this issue, also will join the meet to discuss. Thankyou!

[kishore08-07]

@safiya2610 revert the changes that belongs to deploy preview and resolve merge conflicts.

[safiya2610]

@kishore08-07 sure

[parthivsaikia]

@safiya2610 add the hardcoded Google API key in js/calendar.js to the _config.yml and _config_dev.yml file and replace it with googleCalendarApiKey: '{{ site.google_calendar_api_key }}' in the calendar.js file

[saurabhraghuvanshii]

@safiya2610 revert all changes this Pr is releted to button change so keep that logic only and for workflows failing I'll open a pr thanks for your work. And please resolve merged conflicts also. And sign your commits -s

[safiya2610]

@saurabhraghuvanshii ok doing

[safiya2610]

The changes I had made were reflected correctly in the deployed preview. I verified the Netlify build and deployment, and everything appears to be working as expected.

[saurabhraghuvanshii]

@safiya2610 open a new PR with your google calender changes so that I can check id this is working or not

[safiya2610]

ok

[saurabhraghuvanshii]

Thanks @safiya2610, I really appreciate your work — it’s awesome. I’ve closed this for now since some more changes are needed. Thanks!