[Feature Request] Custom Widget Designs - Open for Contributions

[TejasS1233]

Custom Widget Designs

We're looking for creative widget designs to expand our collection! This is an ongoing issue that will remain open to accept multiple widget implementations.

Current Widgets

• Card (300×180)
• Full (495×195)
• Score (600×420)
• Skills (600×400)
• Languages (500×320)
• Activity (800×240)
• Commits (700×280)
• Stats (400×120)

Widget Ideas (Feel free to suggest your own!)

• Streak widget (showing contribution streaks)
• Trophy/Achievement widget
• Top repositories showcase
• Contribution calendar (GitHub-style)
• Language timeline (language usage over time)
• Follower growth chart
• Pull request stats
• Issue resolution stats
• Code review stats
• Repository health score

Guidelines for Contributors

Before starting:

1. Comment on this issue with your widget idea
2. Wait for approval/feedback to avoid duplicate work
3. Check existing PRs to see what's already in progress

Implementation Requirements:

• Widget function in server/src/controllers/widget.controller.js
• Add widget type to switch case in generateWidget()
• Update frontend widget list in client/src/pages/WidgetGenerator.jsx
• Add widget size to widgetSizes object
• Support both light and dark themes
• Support custom colors (accent, success, purple)
• Include proper caching headers
• SVG format with proper viewBox
• Responsive sizing

Code Structure:

async function generateYourWidget(username, theme, customColors = {}) {
  // 1. Get colors
  const isDark = theme === "dark";
  const accent = customColors.accent || (isDark ? "#58a6ff" : "#0969da");
  
  // 2. Fetch data from cache
  const WidgetCache = (await import("../models/widgetCache.model.js")).default;
  const cached = await WidgetCache.findOne({ username }).lean();
  
  // 3. Return SVG
  return `<svg width="..." height="...">...</svg>`;
}

PR Checklist:

• Widget renders correctly in both themes
• Custom colors work properly
• No console errors
• Widget size added to frontend
• Tested with real data
• Screenshot included in PR

[github-actions]

This GitHub issue invites developers to contribute creative custom widget designs to expand the project’s widget collection. It outlines existing widgets and proposes new ideas, such as a streak widget, a trophy/achievement widget, and a contribution calendar, while also encouraging contributors to suggest their own designs. The issue includes detailed guidelines for starting contributions, requiring approval to avoid duplicated work, and defines implementation details such as integrating the widget into the backend, frontend, and supporting features like light/dark themes, custom colors, responsive SVG sizing, and caching. It includes a sample widget function structure and a checklist for PRs to ensure quality and functionality. The issue remains open to encourage ongoing contributions from the community.

[ekxnsh22005]

Hi, I'm participating in Hacktoberfest and would love to work on this issue. Could you please assign it to me?

[TejasS1233]

sure!
do tell me about your widget idea @ekxnsh22005

[ekxnsh22005]

Hi @TejasS1233 ,

Thanks for the quick response! I've gone with the Trophy/Achievement Widget idea.

As I am a beginner in open source contribution so I thought of going for something simple in this case. Hope it is alright

[XxKaliCharanxX]

can i try working on this as well??

[TejasS1233]

@XxKaliCharanxX sure do tell me if u have any widgets in mind and go ahead