feat: added inbuilt themes (anuraghazra#105)

* feat: added inbuilt themes * docs: added theming docs * docs: update docs
rpvos · Jul 19, 2020 · 2c26329 · 2c26329
1 parent b4a9bd4
commit 2c26329
Show file tree

Hide file tree

Showing 10 changed files with 320 additions and 29 deletions.
diff --git a/api/index.js b/api/index.js
@@ -16,6 +16,7 @@ module.exports = async (req, res) => {
     icon_color,
     text_color,
     bg_color,
+    theme,
   } = req.query;
   let stats;
 
@@ -40,6 +41,7 @@ module.exports = async (req, res) => {
       icon_color,
       text_color,
       bg_color,
+      theme,
     })
   );
 };
diff --git a/api/pin.js b/api/pin.js
@@ -11,6 +11,7 @@ module.exports = async (req, res) => {
     icon_color,
     text_color,
     bg_color,
+    theme,
     show_owner,
   } = req.query;
 
@@ -32,6 +33,7 @@ module.exports = async (req, res) => {
       icon_color,
       text_color,
       bg_color,
+      theme,
       show_owner: parseBoolean(show_owner),
     })
   );

diff --git a/readme.md b/readme.md
@@ -33,6 +33,7 @@
 
 - [GitHub Stats Card](#github-stats-card)
 - [GitHub Extra Pins](#github-extra-pins)
+- [Themes](#themes)
 - [Customization](#customization)
 - [Deploy Yourself](#deploy-on-your-own-vercel-instance)
 
@@ -66,6 +67,22 @@ To enable icons, you can pass `show_icons=true` in the query param, like so:
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
 ```
 
+### Themes
+
+With inbuilt themes you can customize the look of the card without doing any [manual customization](#customization).
+
+Use `?theme=THEME_NAME` parameter like so :-
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+```
+
+#### All inbuilt themes :-
+
+dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula
+
+Check out more themes at [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D
+
 ### Customization
 
 You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params.
@@ -84,12 +101,9 @@ Customization Options:
 | hide_border | boolean   | hides the stats card border          | false                | N/A                 |
 | show_owner  | boolean   | shows owner name in repo card        | N/A                  | false               |
 | show_icons  | boolean   | shows icons                          | false                | N/A                 |
+| theme       | string    | sets inbuilt theme                   | 'default'            | 'default_repocard'  |
 
-- You can also customize the cards to be compatible with dark mode
-
-```md
-![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
-```
+---
 
 ### Demo
 
@@ -105,6 +119,12 @@ Customization Options:
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
 
+- Themes
+
+Choose from any of the [default themes](#themes)
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
+
 - Customizing stats card
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)
@@ -113,6 +133,8 @@ Customization Options:
 
 ![Customized Card](https://github-readme-stats.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515)
 
+---
+
 # GitHub Extra Pins
 
 GitHub extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.

diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js
@@ -1,7 +1,7 @@
 const {
   kFormatter,
   encodeHTML,
-  fallbackColor,
+  getCardColors,
   FlexLayout,
 } = require("../src/utils");
 const icons = require("./icons");
@@ -16,7 +16,14 @@ const renderRepoCard = (repo, options = {}) => {
     isArchived,
     forkCount,
   } = repo;
-  const { title_color, icon_color, text_color, bg_color, show_owner } = options;
+  const {
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    show_owner,
+    theme = "default_repocard",
+  } = options;
 
   const header = show_owner ? nameWithOwner : name;
   const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
@@ -30,10 +37,14 @@ const renderRepoCard = (repo, options = {}) => {
     desc = `${description.slice(0, 55)}..`;
   }
 
-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#586069");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });
 
   const totalStars = kFormatter(stargazers.totalCount);
   const totalForks = kFormatter(forkCount);
@@ -82,7 +93,7 @@ const renderRepoCard = (repo, options = {}) => {
       .archive-badge { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; }
       .archive-badge rect { opacity: 0.2 }
       </style>
-      <rect data-testid="card-border" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
+      <rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
       <svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
         ${icons.contribs}
       </svg>

diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
@@ -1,4 +1,4 @@
-const { kFormatter, fallbackColor, FlexLayout } = require("../src/utils");
+const { kFormatter, getCardColors, FlexLayout } = require("../src/utils");
 const getStyles = require("./getStyles");
 const icons = require("./icons");
 
@@ -44,14 +44,19 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     icon_color,
     text_color,
     bg_color,
+    theme = "default",
   } = options;
 
   const lheight = parseInt(line_height);
 
-  const titleColor = fallbackColor(title_color, "#2f80ed");
-  const iconColor = fallbackColor(icon_color, "#4c71f2");
-  const textColor = fallbackColor(text_color, "#333");
-  const bgColor = fallbackColor(bg_color, "#FFFEFE");
+  // returns theme based colors with proper overrides and defaults
+  const { titleColor, textColor, iconColor, bgColor } = getCardColors({
+    title_color,
+    icon_color,
+    text_color,
+    bg_color,
+    theme,
+  });
 
   // Meta data for creating text nodes with createTextNode function
   const STATS = {
@@ -127,7 +132,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     ? ""
     : `
     <rect 
-      data-testid="card-border"
+      data-testid="card-bg"
       x="0.5"
       y="0.5"
       width="494"

diff --git a/src/utils.js b/src/utils.js
@@ -1,4 +1,5 @@
 const axios = require("axios");
+const themes = require("../themes");
 
 const renderError = (message) => {
   return `
@@ -77,6 +78,40 @@ function FlexLayout({ items, gap, direction }) {
   });
 }
 
+// returns theme based colors with proper overrides and defaults
+function getCardColors({
+  title_color,
+  text_color,
+  icon_color,
+  bg_color,
+  theme,
+  fallbackTheme = "default",
+}) {
+  const defaultTheme = themes[fallbackTheme];
+  const selectedTheme = themes[theme] || defaultTheme;
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid fallback to default theme
+  const titleColor = fallbackColor(
+    title_color || selectedTheme.title_color,
+    "#" + defaultTheme.title_color
+  );
+  const iconColor = fallbackColor(
+    icon_color || selectedTheme.icon_color,
+    "#" + defaultTheme.icon_color
+  );
+  const textColor = fallbackColor(
+    text_color || selectedTheme.text_color,
+    "#" + defaultTheme.text_color
+  );
+  const bgColor = fallbackColor(
+    bg_color || selectedTheme.bg_color,
+    "#" + defaultTheme.bg_color
+  );
+
+  return { titleColor, iconColor, textColor, bgColor };
+}
+
 module.exports = {
   renderError,
   kFormatter,
@@ -86,4 +121,5 @@ module.exports = {
   parseBoolean,
   fallbackColor,
   FlexLayout,
+  getCardColors,
 };
diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js
@@ -3,6 +3,7 @@ const cssToObject = require("css-to-object");
 const renderRepoCard = require("../src/renderRepoCard");
 
 const { queryByTestId } = require("@testing-library/dom");
+const themes = require("../themes");
 
 const data_repo = {
   repository: {
@@ -108,13 +109,13 @@ describe("Test renderRepoCard", () => {
     const stylesObject = cssToObject(styleTag.innerHTML);
 
     const headerClassStyles = stylesObject[".header"];
-    const statClassStyles = stylesObject[".description"];
+    const descClassStyles = stylesObject[".description"];
     const iconClassStyles = stylesObject[".icon"];
 
     expect(headerClassStyles.fill).toBe("#2f80ed");
-    expect(statClassStyles.fill).toBe("#333");
+    expect(descClassStyles.fill).toBe("#333");
     expect(iconClassStyles.fill).toBe("#586069");
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
       "#FFFEFE"
     );
@@ -136,18 +137,63 @@ describe("Test renderRepoCard", () => {
     const stylesObject = cssToObject(styleTag.innerHTML);
 
     const headerClassStyles = stylesObject[".header"];
-    const statClassStyles = stylesObject[".description"];
+    const descClassStyles = stylesObject[".description"];
     const iconClassStyles = stylesObject[".icon"];
 
     expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
-    expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
+    expect(descClassStyles.fill).toBe(`#${customColors.text_color}`);
     expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
-    expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
       "fill",
       "#252525"
     );
   });
 
+  it("should render custom colors with themes", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "5a0",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const descClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe("#5a0");
+    expect(descClassStyles.fill).toBe(`#${themes.radical.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
+  it("should render custom colors with themes and fallback to default colors if invalid", () => {
+    document.body.innerHTML = renderRepoCard(data_repo.repository, {
+      title_color: "invalid color",
+      text_color: "invalid color",
+      theme: "radical",
+    });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[".header"];
+    const descClassStyles = stylesObject[".description"];
+    const iconClassStyles = stylesObject[".icon"];
+
+    expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`);
+    expect(descClassStyles.fill).toBe(`#${themes.default.text_color}`);
+    expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      `#${themes.radical.bg_color}`
+    );
+  });
+
   it("should render archive badge if repo is archived", () => {
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
@@ -176,7 +222,7 @@ describe("Test renderRepoCard", () => {
 
     expect(queryByTestId(document.body, "stargazers")).toBeDefined();
     expect(queryByTestId(document.body, "forkcount")).toBeNull();
-    
+
     document.body.innerHTML = renderRepoCard({
       ...data_repo.repository,
       stargazers: { totalCount: 0 },