apache / apache/apisix-website

[Site]: Fix Plugin Icons Display and Enhance Plugins Page Functionality

Open
#1,963 1 comment 0 reactions 0 assignees View on GitHub
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**
Before 1
Before 2
Before 3
Before 4

---

### **After Changes**
After 1
After 2
After 3
After 4
After 5
After 6

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.