mirror of
https://github.com/anuraghazra/github-readme-stats.git
synced 2024-12-15 06:04:17 +08:00
resolve conflicts
This commit is contained in:
Omid Nikrah
commit
7a7ad717a8
16
api/index.js
16
api/index.js
@ -4,7 +4,17 @@ const fetchStats = require("../src/fetchStats");
|
||||
const renderStatsCard = require("../src/renderStatsCard");
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
const { username, hide, hide_border, show_icons, line_height } = req.query;
|
||||
const {
|
||||
username,
|
||||
hide,
|
||||
hide_border,
|
||||
show_icons,
|
||||
line_height,
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
} = req.query;
|
||||
let stats;
|
||||
|
||||
res.setHeader("Content-Type", "image/svg+xml");
|
||||
@ -20,6 +30,10 @@ module.exports = async (req, res) => {
|
||||
show_icons,
|
||||
hide_border,
|
||||
line_height,
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
18
api/pin.js
18
api/pin.js
@ -4,7 +4,14 @@ const fetchRepo = require("../src/fetchRepo");
|
||||
const renderRepoCard = require("../src/renderRepoCard");
|
||||
|
||||
module.exports = async (req, res) => {
|
||||
const { username, repo } = req.query;
|
||||
const {
|
||||
username,
|
||||
repo,
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
} = req.query;
|
||||
|
||||
let repoData;
|
||||
res.setHeader("Content-Type", "image/svg+xml");
|
||||
@ -16,5 +23,12 @@ module.exports = async (req, res) => {
|
||||
return res.send(renderError(err.message));
|
||||
}
|
||||
|
||||
res.send(renderRepoCard(repoData));
|
||||
res.send(
|
||||
renderRepoCard(repoData, {
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"@testing-library/jest-dom": "^5.11.0",
|
||||
"axios": "^0.19.2",
|
||||
"axios-mock-adapter": "^1.18.1",
|
||||
"css-to-object": "^1.1.0",
|
||||
"jest": "^26.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
28
readme.md
28
readme.md
@ -10,6 +10,7 @@ Get dynamically generated GitHub stats on your readmes!
|
||||
|
||||
- [Github Stats Card](#github-stats-card)
|
||||
- [Github Extra Pins](#github-extra-pins)
|
||||
- [Customization](#customization)
|
||||
- [Deploy Yourself](#deploy-on-your-own-vercel-instance)
|
||||
|
||||
# Github Stats Card
|
||||
@ -45,6 +46,25 @@ Other options:
|
||||
- `&hide_border=true` hide the border box if you don't like it :D.
|
||||
- `&line_height=30` control the line-height between text.
|
||||
|
||||
### Customization
|
||||
|
||||
You can customize the appearance of your `Stats Card` or `Repo Card` however you want with url params.
|
||||
|
||||
Customization Options:
|
||||
|
||||
| Option | type | Stats Card (default) | Repo Card (default) |
|
||||
| ----------- | --------- | ---------------------- | ---------------------- |
|
||||
| title_color | hex color | #2f80ed | #2f80ed |
|
||||
| text_color | hex color | #333 | #333 |
|
||||
| icon_color | hex color | #4c71f2 | #586069 |
|
||||
| bg_color | hex color | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) |
|
||||
|
||||
- You can also customize the cards to be compatible with dark mode
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
### Demo
|
||||
|
||||
- Default
|
||||
@ -59,6 +79,14 @@ Other options:
|
||||
|
||||
![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
|
||||
|
||||
- Customizing stats card
|
||||
|
||||
|
||||
|
||||
- Customizing repo card
|
||||
|
||||
|
||||
|
||||
# Github Extra Pins
|
||||
|
||||
Github extra pins allow you to pin more than 6 repositories in your profile using a GitHub readme profile.
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
const { kFormatter, encodeHTML } = require("../src/utils");
|
||||
const { kFormatter, encodeHTML, isValidHexColor } = require("../src/utils");
|
||||
|
||||
const renderRepoCard = (repo) => {
|
||||
const renderRepoCard = (repo, options = {}) => {
|
||||
const { name, description, primaryLanguage, stargazers, forkCount } = repo;
|
||||
const { title_color, icon_color, text_color, bg_color } = options;
|
||||
|
||||
const height = 120;
|
||||
const shiftText = primaryLanguage.name.length > 15 ? 0 : 30;
|
||||
|
||||
@ -10,20 +12,26 @@ const renderRepoCard = (repo) => {
|
||||
desc = `${description.slice(0, 55)}..`;
|
||||
}
|
||||
|
||||
const titleColor =
|
||||
(isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed";
|
||||
const iconColor =
|
||||
(isValidHexColor(icon_color) && `#${icon_color}`) || "#586069";
|
||||
const bgColor =
|
||||
(isValidHexColor(bg_color) && `#${bg_color}`) || "rgba(255, 255, 255, 0)";
|
||||
const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
|
||||
|
||||
const totalStars = kFormatter(stargazers.totalCount);
|
||||
const totalForks = kFormatter(forkCount);
|
||||
return `
|
||||
<svg width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
|
||||
.stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
|
||||
.star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
|
||||
.bold { font-weight: 700 }
|
||||
.description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: #586069 }
|
||||
.gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #586069 }
|
||||
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
|
||||
.description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
|
||||
.gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
|
||||
.icon { fill: ${iconColor} }
|
||||
</style>
|
||||
<rect x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
|
||||
<svg x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
|
||||
<rect data-testid="card-border" 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">
|
||||
<path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
|
||||
</svg>
|
||||
|
||||
@ -40,14 +48,14 @@ const renderRepoCard = (repo) => {
|
||||
</g>
|
||||
|
||||
<g transform="translate(${155 - shiftText}, 100)">
|
||||
<svg y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
|
||||
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path>
|
||||
</svg>
|
||||
<text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(${220 - shiftText}, 100)">
|
||||
<svg y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16" fill="#586069">
|
||||
<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
|
||||
<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>
|
||||
</svg>
|
||||
<text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
const { kFormatter } = require("../src/utils");
|
||||
const { kFormatter, isValidHexColor } = require("../src/utils");
|
||||
|
||||
const createTextNode = ({ icon, label, value, lineHeight, id }) => {
|
||||
const classname = icon === "★" && "star-icon";
|
||||
const kValue = kFormatter(value);
|
||||
return `
|
||||
<tspan x="25" dy="${lineHeight}" class="stat bold">
|
||||
<tspan data-testid="icon" class="icon ${classname}" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
|
||||
<tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
|
||||
<tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
|
||||
`;
|
||||
};
|
||||
@ -24,10 +24,22 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
show_icons = false,
|
||||
hide_border = false,
|
||||
line_height = 25,
|
||||
title_color,
|
||||
icon_color,
|
||||
text_color,
|
||||
bg_color,
|
||||
} = options;
|
||||
|
||||
const lheight = parseInt(line_height);
|
||||
|
||||
const titleColor =
|
||||
(isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed";
|
||||
const iconColor =
|
||||
(isValidHexColor(icon_color) && `#${icon_color}`) || "#4c71f2";
|
||||
const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
|
||||
const bgColor =
|
||||
(isValidHexColor(bg_color) && `#${bg_color}`) || "rgba(255, 255, 255, 0)";
|
||||
|
||||
const STAT_MAP = {
|
||||
stars: createTextNode({
|
||||
icon: "★",
|
||||
@ -72,15 +84,16 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
|
||||
|
||||
const height = 45 + (statItems.length + 1) * lheight;
|
||||
|
||||
const border = `<rect data-testid="card-border" x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>`;
|
||||
const border = `<rect data-testid="card-border" x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>`;
|
||||
return `
|
||||
<svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
|
||||
.stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
|
||||
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; }
|
||||
.stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; }
|
||||
.star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
|
||||
.bold { font-weight: 700 }
|
||||
.icon {
|
||||
fill: ${iconColor};
|
||||
display: ${!!show_icons ? "block" : "none"};
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,6 +27,12 @@ function kFormatter(num) {
|
||||
: Math.sign(num) * Math.abs(num);
|
||||
}
|
||||
|
||||
function isValidHexColor(hexColor) {
|
||||
return new RegExp(
|
||||
/^([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{4})$/
|
||||
).test(hexColor);
|
||||
}
|
||||
|
||||
function request(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios({
|
||||
@ -42,4 +48,4 @@ function request(data) {
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { renderError, kFormatter, encodeHTML, request };
|
||||
module.exports = { renderError, kFormatter, encodeHTML, isValidHexColor, request };
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
require("@testing-library/jest-dom");
|
||||
const cssToObject = require("css-to-object");
|
||||
const renderRepoCard = require("../src/renderRepoCard");
|
||||
|
||||
const { queryByTestId } = require("@testing-library/dom");
|
||||
@ -88,4 +89,51 @@ describe("Test renderRepoCard", () => {
|
||||
"translate(125, 100)"
|
||||
);
|
||||
});
|
||||
|
||||
it("should render default colors properly", () => {
|
||||
document.body.innerHTML = renderRepoCard(data_repo.repository);
|
||||
|
||||
const styleTag = document.querySelector("style");
|
||||
const stylesObject = cssToObject(styleTag.innerHTML);
|
||||
|
||||
const headerClassStyles = stylesObject[".header"];
|
||||
const statClassStyles = stylesObject[".description"];
|
||||
const iconClassStyles = stylesObject[".icon"];
|
||||
|
||||
expect(headerClassStyles.fill).toBe("#2f80ed");
|
||||
expect(statClassStyles.fill).toBe("#333");
|
||||
expect(iconClassStyles.fill).toBe("#586069");
|
||||
expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
|
||||
"fill",
|
||||
"rgba(255, 255, 255, 0)"
|
||||
);
|
||||
});
|
||||
|
||||
it("should render custom colors properly", () => {
|
||||
const customColors = {
|
||||
title_color: "5a0",
|
||||
icon_color: "1b998b",
|
||||
text_color: "9991",
|
||||
bg_color: "252525",
|
||||
};
|
||||
|
||||
document.body.innerHTML = renderRepoCard(data_repo.repository, {
|
||||
...customColors,
|
||||
});
|
||||
|
||||
const styleTag = document.querySelector("style");
|
||||
const stylesObject = cssToObject(styleTag.innerHTML);
|
||||
|
||||
const headerClassStyles = stylesObject[".header"];
|
||||
const statClassStyles = stylesObject[".description"];
|
||||
const iconClassStyles = stylesObject[".icon"];
|
||||
|
||||
expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
|
||||
expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
|
||||
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
|
||||
expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
|
||||
"fill",
|
||||
"#252525"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
require("@testing-library/jest-dom");
|
||||
const cssToObject = require("css-to-object");
|
||||
const renderStatsCard = require("../src/renderStatsCard");
|
||||
|
||||
const { getByTestId, queryByTestId } = require("@testing-library/dom");
|
||||
@ -51,4 +52,49 @@ describe("Test renderStatsCard", () => {
|
||||
|
||||
expect(queryByTestId(document.body, "card-border")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should render default colors properly", () => {
|
||||
document.body.innerHTML = renderStatsCard(stats);
|
||||
|
||||
const styleTag = document.querySelector("style");
|
||||
const stylesObject = cssToObject(styleTag.innerHTML);
|
||||
|
||||
const headerClassStyles = stylesObject[".header"];
|
||||
const statClassStyles = stylesObject[".stat"];
|
||||
const iconClassStyles = stylesObject[".icon"];
|
||||
|
||||
expect(headerClassStyles.fill).toBe("#2f80ed");
|
||||
expect(statClassStyles.fill).toBe("#333");
|
||||
expect(iconClassStyles.fill).toBe("#4c71f2");
|
||||
expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
|
||||
"fill",
|
||||
"rgba(255, 255, 255, 0)"
|
||||
);
|
||||
});
|
||||
|
||||
it("should render custom colors properly", () => {
|
||||
const customColors = {
|
||||
title_color: "5a0",
|
||||
icon_color: "1b998b",
|
||||
text_color: "9991",
|
||||
bg_color: "252525",
|
||||
};
|
||||
|
||||
document.body.innerHTML = renderStatsCard(stats, { ...customColors });
|
||||
|
||||
const styleTag = document.querySelector("style");
|
||||
const stylesObject = cssToObject(styleTag.innerHTML);
|
||||
|
||||
const headerClassStyles = stylesObject[".header"];
|
||||
const statClassStyles = stylesObject[".stat"];
|
||||
const iconClassStyles = stylesObject[".icon"];
|
||||
|
||||
expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
|
||||
expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
|
||||
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
|
||||
expect(queryByTestId(document.body, "card-border")).toHaveAttribute(
|
||||
"fill",
|
||||
"#252525"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user