Duplicate responsive action buttons across program pages (GSOD, LFX, MLH) #2535
Description
Current State of the Meshery.io site
Across multiple program pages on meshery.io (including GSOD, LFX, and MLH) the same call-to-action (e.g., “Participate”, "Join Slack") is implemented as two separate buttons:
- One button intended for desktop
- One button intended for mobile
These buttons:
- Share the same destination link
- Are conditionally shown/hidden using CSS based on screen size
- Both exist simultaneously in the DOM, even though only one is visible at a time
- This pattern is repeated across multiple pages, resulting in duplicate markup for the same action.
Desired State of the Meshery.io site
Use a single reusable button element for each call-to-action that:
- Is styled responsively using CSS/media queries
- Works consistently across desktop and mobile views
- Eliminates duplicate DOM elements for the same link
This approach would improve:
- Maintainability
- Consistency across program pages
- Accessibility and overall DOM cleanliness
Screenshot
Scope
- GSOD program pages
- LFX program pages
- MLH-related pages
Contributor Guides
The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.
- 📚 See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
- 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack