apache / apache/apisix-website
[Site]: Fix Plugin Icons Display and Enhance Plugins Page Functionality
- Dominant language
- JavaScript
- Stars
- 146
- Forks
- 204
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 21
Description
### Current State
## Issue Description
The **Plugins Page** has issues with **icon display** and **responsiveness**, causing inconsistent visuals and a poor user experience.
---
## Problem
- Plugin icons are not loading or displaying correctly.
- Layout breaks on smaller screens.
- UI feels inconsistent and unresponsive across devices.
---
## Expected Behavior
- All plugin icons should render properly.
- The layout should remain responsive on all screen sizes.
- User experience should be smooth and consistent.
---
## Possible Cause
- Icon rendering logic in `plugin-icon.js` may be outdated or broken.
- Missing responsive styles in `plugins.tsx`.
---
## Suggested Fix
- Update the **icon rendering logic** in JavaScript.
- Improve **the responsive design** of plugin cards.
- Optimize **loading mechanism** for icons.
---
## Files to be Modified
- `website/static/js/plugin-icon.js`
- `website/src/pages/plugins.tsx`
---
## Screenshots of the Change
### **Before Changes**
---
### **After Changes**
### Desired State
**Description of the change you are proposing**:
This update fixes the **plugin icon rendering** and **UI responsiveness** issues on the Plugins Page.
### What’s Fixed
- Corrected plugin icon loading and rendering logic in `plugin-icon.js`.
- Improved responsive design for plugin cards in `plugins.tsx`.
- Enhanced overall layout and visual consistency across browsers.
- Optimized the icon loading mechanism for better performance.
### Expected Outcome
- Plugin icons display consistently across all browsers.
- The plugins page remains fully responsive on mobile and desktop.
- Improved user experience and smoother UI behavior.
---
### Would you like to fix this issue?
Yes! Count me in
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by inspecting website/static/js/plugin-icon.js and website/src/pages/plugins.tsx to trace icon loading and the plugin-card layout. Check the Plugins Page at mobile and desktop widths; done means icons render consistently and the layout remains responsive across the stated screen sizes and browsers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100