Unverified Commit 2c26329e authored by Anurag Hazra's avatar Anurag Hazra Committed by GitHub
Browse files

feat: added inbuilt themes (#105) 

* feat: added inbuilt themes

* docs: added theming docs

* docs: update docs
parent b4a9bd44

api/index.js

+2 −0
Original line number Diff line number Diff line
@@ -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,

    })

  );

};

api/pin.js

+2 −0
Original line number Diff line number Diff line
@@ -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),

    })

  );

readme.md

+27 −5
Original line number Diff line number Diff line
@@ -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.

src/renderRepoCard.js

+18 −7
Original line number Diff line number Diff line 
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>

src/renderStatsCard.js

+11 −6
Original line number Diff line number Diff line 
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"

CRA Git | Maintained and supported by SUSTech CRA and CCSE