Custom Cards

api/wild/index.js

@@ -0,0 +1,75 @@
+import { renderStatsCard } from "../../src/cards/stats-card.js";
+import {
+  clampValue,
+  CONSTANTS,
+  parseArray,
+  parseBoolean,
+  renderError,
+} from "../../src/common/utils.js";
+
+export default async (req, res) => {
+  const {
+    hide,
+    hide_title,
+    hide_border,
+    card_width,
+    hide_rank,
+    show_icons,
+    line_height,
+    title_color,
+    ring_color,
+    icon_color,
+    text_color,
+    text_bold,
+    bg_color,
+    theme,
+    disable_animations,
+    border_radius,
+    border_color,
+  } = req.query;
+  res.setHeader("Content-Type", "image/svg+xml");
+
+  try {
+    const stats = {
+      totalStars: req.query.total_stars,
+      totalCommits: req.query.total_commits,
+      totalIssues: req.query.total_issues,
+      totalPRs: req.query.total_prs,
+      contributedTo: req.query.total_contribs,
+      rank: {
+        level: req.query.level || 'S',
+        score: req.query.score || 10
+      },
+      starsTitle: req.query.stars_title,
+      commitsTitle: req.query.commits_title,
+      issuesTitle: req.query.issues_title,
+      PRsTitle: req.query.prs_title,
+      contribsTitle: req.query.contribs_title,
+      title: req.query.title,
+    };
+
+    return res.send(
+      renderStatsCard(stats, {
+        hide: parseArray(hide),
+        show_icons: parseBoolean(show_icons),
+        hide_title: parseBoolean(hide_title),
+        hide_border: parseBoolean(hide_border),
+        card_width: parseInt(card_width, 10),
+        hide_rank: parseBoolean(hide_rank),
+        line_height,
+        title_color,
+        ring_color,
+        icon_color,
+        text_color,
+        text_bold: parseBoolean(text_bold),
+        bg_color,
+        theme,
+        border_radius,
+        border_color,
+        disable_animations: parseBoolean(disable_animations),
+      }),
+    );
+  } catch (err) {
+    return res.send(renderError(err.message, err.secondaryMessage));
+  }
+};

api/wild/pin.js

@@ -0,0 +1,51 @@
+import { renderRepoCard } from "../../src/cards/repo-card.js";
+import {
+  clampValue,
+  CONSTANTS,
+  parseBoolean,
+  renderError,
+} from "../../src/common/utils.js";
+
+export default async (req, res) => {
+  const {
+    hide_border,
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+    border_radius,
+    border_color,
+  } = req.query;
+
+  res.setHeader("Content-Type", "image/svg+xml");
+
+  try {
+    const repoData = {
+      name: req.query.title || "awesome/repo",
+      description: req.query.description || "What an awesome repo!",
+      primaryLanguage: {
+        name: req.query.footer || "Awesome",
+        color: req.query.badge ? `#${req.query.badge}` : "#4287f5",
+      },
+      starCount: req.query.stars || 12838,
+      forkCount: req.query.forks || 8929,
+      highlight: req.query.highlight || "AWESOME",
+    };
+
+    return res.send(
+      renderRepoCard(repoData, {
+        hide_border: parseBoolean(hide_border),
+        title_color,
+        icon_color,
+        text_color,
+        bg_color,
+        theme,
+        border_radius,
+        border_color,
+      }),
+    );
+  } catch (err) {
+    return res.send(renderError(err.message, err.secondaryMessage));
+  }
+};

api/wild/top-langs.js

@@ -0,0 +1,84 @@
+import { renderTopLanguages } from "../../src/cards/top-languages-card.js";
+import {
+  clampValue,
+  CONSTANTS,
+  parseArray,
+  parseBoolean,
+  renderError,
+} from "../../src/common/utils.js";
+
+export default async (req, res) => {
+  const {
+    hide_title,
+    hide_border,
+    card_width,
+    title_color,
+    text_color,
+    bg_color,
+    theme,
+    layout,
+    border_radius,
+    border_color,
+  } = req.query;
+  res.setHeader("Content-Type", "image/svg+xml");
+
+  try {
+    let topLangs = []
+    if (req.query.langs) {
+      const split = req.query.langs.split(";");
+      split.forEach(lang => {
+        let {
+          name = "No Name",
+          size = "0",
+          color,
+          text,
+        } = JSON.parse(lang)
+        topLangs.push({
+          name,
+          size,
+          color: color ? `#${color}` : undefined,
+          text,
+        });
+      });
+    } else {
+      topLangs = [
+        {
+          name: "Javascript",
+          size: 50,
+          color: "#4287f5",
+        },
+        {
+          name: "Python",
+          size: 30,
+          color: "#eb4034",
+        },
+        {
+          name: "Ruby",
+          size: 20,
+          color: "#32a852",
+        }
+      ];
+    }
+
+    const title = req.query.title || "Most Used Languages";
+
+    return res.send(
+      renderTopLanguages(topLangs, {
+        hide_title: parseBoolean(hide_title),
+        hide_border: parseBoolean(hide_border),
+        card_width: parseInt(card_width, 10),
+        title_color,
+        text_color,
+        bg_color,
+        theme,
+        layout,
+        langs_count: topLangs.length,
+        border_radius,
+        border_color,
+        title,
+      }),
+    );
+  } catch (err) {
+    return res.send(renderError(err.message, err.secondaryMessage));
+  }
+};

readme.md

@@ -92,6 +92,7 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
     -   [Repo Card Exclusive Options](#repo-card-exclusive-options)
     -   [Language Card Exclusive Options](#language-card-exclusive-options)
     -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
+-   [Wild Cards](#wild-cards)
 -   [Deploy Yourself](#deploy-on-your-own-vercel-instance)
     - [Keep your fork up to date](#keep-your-fork-up-to-date)   
 
@@ -495,6 +496,64 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
 </a>
 ```
 
+## Wild Cards
+You can also generate custom cards with custom text and custom values (these do not show any GitHub statistics - they're custom values that you provide):
+<p>
+<img src="https://github-readme-stats.zohan.tech/api/wild/top-langs?langs=%7B%22name%22%3A%22Pop%22%2C%22size%22%3A60%2C%22color%22%3A%2232a852%22%2C%22text%22%3A%2260%20Hours%22%7D%3B%7B%22name%22%3A%22Reggae%22%2C%22size%22%3A40%2C%22color%22%3A%22fcba03%22%2C%22text%22%3A%2240%20Hours%22%7D%3B%7B%22name%22%3A%22Electronic%22%2C%22size%22%3A25%2C%22color%22%3A%224287f5%22%2C%22text%22%3A%2225%20Hours%22%7D%3B%7B%22name%22%3A%22Rap%22%2C%22size%22%3A15%2C%22color%22%3A%22eb4034%22%2C%22text%22%3A%2215%20Hours%22%7D%3B%7B%22name%22%3A%22Rock%22%2C%22size%22%3A10%2C%22color%22%3A%2232a852%22%2C%22text%22%3A%2210%20Hours%22%7D%3B%7B%22name%22%3A%22Other%22%2C%22size%22%3A5%2C%22color%22%3A%22fcba03%22%2C%22text%22%3A%225%20Hours%22%7D&title=Top%20Songs%20%F0%9F%8E%B5&theme=onedark&hide_border=true">
+<img src="https://github-readme-stats.zohan.tech/api/wild?theme=onedark&level=CUST&score=50&title=Custom%20Cards%20%F0%9F%98%8E&show_icons=true&prs_title=Another%20Custom%20Title&total_stars=283%20Hours&stars_title=Non-numerical%20Value&commits_title=Recap&total_commits=%F0%9F%99%83&contribs_title=Big%20Number&total_contribs=12381&hide_border=true">
+<img src="https://github-readme-stats.zohan.tech/api/wild/top-langs?langs=%7B%22name%22%3A%22Pop%22%2C%22size%22%3A60%2C%22color%22%3A%2232a852%22%7D%3B%7B%22name%22%3A%22Reggae%22%2C%22size%22%3A40%2C%22color%22%3A%22fcba03%22%7D%3B%7B%22name%22%3A%22Electronic%22%2C%22size%22%3A25%2C%22color%22%3A%224287f5%22%7D%3B%7B%22name%22%3A%22Rap%22%2C%22size%22%3A15%2C%22color%22%3A%22eb4034%22%7D%3B%7B%22name%22%3A%22Rock%22%2C%22size%22%3A10%2C%22color%22%3A%2232a852%22%7D%3B%7B%22name%22%3A%22Other%22%2C%22size%22%3A5%2C%22color%22%3A%22fcba03%22%7D&title=Top%20Songs%20%F0%9F%8E%B5&theme=onedark&layout=compact&hide_border=true">
+<img src="https://github-readme-stats.zohan.tech/api/wild/pin?theme=onedark&title=Custom%20Repo%20%F0%9F%8E%86&description=Custom%20repo%20with%20a%20custom%20description!&highlight=CUSTOM&footer=Custom%20Language%20%F0%9F%93%9D&stars=The%20Best&hide_border=true">
+</p>
+
+The wild/custom cards can be generated by using the `/api/wild/`, `/api/wild/top-langs/`, and `/api/wild/pin/` endpoints. The following parameters can be provided:
+
+### `/api/wild/`
+
+<img src="https://github-readme-stats.zohan.tech/api/wild/?theme=dracula&hide_border=true&title=title&stars_title=stars_title&commits_title=commits_title&prs_title=prs_title&issues_title=issues_title&contribs_title=contribs_title&total_stars=total_stars&total_commits=total_commits&total_prs=total_prs&total_issues=total_issues&total_contribs=total_contribs&level=level&score=90">
+
+Additionally, the `score` parameter must be given a value from `0` to `100` where `100` doesn't fill the circle at all, and `0` fills the circle completely (the demo above has `score=90`).
+
+### `/api/wild/top-langs/`
+
+<img src="https://github-readme-stats.zohan.tech/api/wild/top-langs?theme=dracula&hide_border=true&title=title&langs={%22name%22:%22Category1%22,%22size%22:30,%22color%22:%224287f5%22,%22text%22:%223%20thousand%22};{%22name%22:%22Category2%22,%22size%22:20,%22color%22:%22fcba03%22,%22text%22:%222%20thousand%22}">
+
+Here, the languages are defined using the `langs` parameter. It is of the following format (JSON with `;` separating the objects):
+```json
+{
+  "name": "Category1",
+  "size": 60,
+  "color": "4287f5",
+  "text": "3 thousand"
+};
+{
+  "name": "Category2",
+  "size": 40,
+  "color": "fcba03",
+  "text": "3 thousand"
+}
+```
+
+`name` is the name of the category. `size` is an arbitary size used to calculate percentages. This can be hours, percent, or any other unit you wish to use. `color` is the color of the category. `text` is what text to display next to the categry. If left blank, a percentage will be calculated and displayed.
+
+### `/api/wild/pin/`
+
+<img src="https://github-readme-stats.zohan.tech/api/wild/pin?theme=dracula&hide_border=true&title=title&description=description&highlight=highlight&stars=stars&forks=forks&footer=footer&badge=4287f5">
+
+Here, the `badge` parameter was used to set the color of the small round icon (`4287f5`) was passed.
+
+Finally, here are some specifications that apply to all three endpoints.
+
+### All Three
+Colors are passed as hex codes without the `#` character. For example, `ffffff`. This is the same as the main API.
+
+Parameters like `total_stars` and `forks` can accept both numbers and text. If a number is given, it will automatically be formatted to use k-notation for thousands.
+
+Parameters that apply only to the main API such as `username`, `repo`, `show_owner`, `locale`, etc won't work for this API. Other parameters like `layout` and `text_color` ***will*** work.
+
+The new parameters that have been added are explained above (shown in the images). Parameters are lowercase snake-cased like for the main API.
+
+Finally, no parameter is required, and parameters that aren't given will default to the most sensible option (original titles, ambigous descriptions, theme-based colors, and fake numbers).
+
 ## Deploy on your own Vercel instance
 
 #### [Check Out Step By Step Video Tutorial By @codeSTACKr](https://youtu.be/n6d4KHSKqGk?t=107)