Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f2936add74 | ||
|
|
b5c4cc71f5 | ||
|
|
8372346626 |
@@ -1,35 +0,0 @@
|
||||
name: Generate Theme Readme
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
paths:
|
||||
- "themes/index.js"
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: "12.x"
|
||||
|
||||
- name: npm install, generate readme
|
||||
run: |
|
||||
npm install
|
||||
npm run theme-readme-gen
|
||||
env:
|
||||
CI: true
|
||||
|
||||
- name: Run Script
|
||||
uses: skx/github-action-tester@master
|
||||
with:
|
||||
script: ./scripts/push-theme-readme.sh
|
||||
env:
|
||||
CI: true
|
||||
PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
|
||||
GH_REPO: ${{ secrets.GH_REPO }}
|
||||
@@ -20,7 +20,6 @@ module.exports = async (req, res) => {
|
||||
bg_color,
|
||||
theme,
|
||||
cache_seconds,
|
||||
layout
|
||||
} = req.query;
|
||||
let topLangs;
|
||||
|
||||
@@ -50,7 +49,6 @@ module.exports = async (req, res) => {
|
||||
text_color,
|
||||
bg_color,
|
||||
theme,
|
||||
layout
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
+2
-4
@@ -5,8 +5,7 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "jest --coverage",
|
||||
"test:watch": "jest --watch",
|
||||
"theme-readme-gen": "node scripts/generate-theme-doc"
|
||||
"test:watch": "jest --watch"
|
||||
},
|
||||
"author": "Anurag Hazra",
|
||||
"license": "MIT",
|
||||
@@ -21,8 +20,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"dotenv": "^8.2.0",
|
||||
"emoji-name-map": "^1.2.8",
|
||||
"word-wrap": "^1.2.3"
|
||||
"emoji-name-map": "^1.2.8"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
||||
@@ -57,12 +57,12 @@ _Note: Ranks are calculated based on user's stats, see [src/calculateRank.js](./
|
||||
|
||||
### Hiding individual stats
|
||||
|
||||
To hide any specific stats, you can pass a query parameter `?hide=` with comma separated values.
|
||||
To hide any specific stats, you can pass a query parameter `?hide=` with comma seperated values.
|
||||
|
||||
> Options: `&hide=stars,commits,prs,issues,contribs`
|
||||
|
||||
```md
|
||||

|
||||

|
||||
```
|
||||
|
||||
### Adding private contributions count to total commits count
|
||||
@@ -122,10 +122,9 @@ Customization Options:
|
||||
| hide_border | boolean | hides the stats card border | false | N/A | N/A |
|
||||
| show_owner | boolean | shows owner name in repo card | N/A | false | N/A |
|
||||
| show_icons | boolean | shows icons | false | N/A | N/A |
|
||||
| theme | string | sets inbuilt theme | 'default' | 'default_repocard' | 'default' |
|
||||
| theme | string | sets inbuilt theme | 'default' | 'default_repocard' | 'default |
|
||||
| cache_seconds | number | manually set custom cache control | 1800 | 1800 | '1800' |
|
||||
| count_private | boolean | counts private contributions too if enabled | false | N/A | N/A |
|
||||
| layout | string | choose a layout option | N/A | N/A | "default" |
|
||||
|
||||
> Note on cache: Repo cards have default cache of 30mins (1800 seconds) if the fork count & star count is less than 1k otherwise it's 2hours (7200). Also note that cache is clamped to minimum of 30min and maximum of 24hours
|
||||
|
||||
@@ -177,22 +176,10 @@ You can use `?hide=language1,language2` parameter to hide individual languages.
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### Compact Language Card Layout
|
||||
|
||||
You can use the `&layout=compact` option to change the card design.
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### Demo
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
- Compact layout
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
---
|
||||
|
||||
### All Demos
|
||||
@@ -203,7 +190,7 @@ You can use the `&layout=compact` option to change the card design.
|
||||
|
||||
- Hiding specific stats
|
||||
|
||||

|
||||

|
||||
|
||||
- Showing icons
|
||||
|
||||
|
||||
+51
-59
@@ -1,16 +1,13 @@
|
||||
<p align="center">
|
||||
<img width="100px" src="https://res.cloudinary.com/anuraghazra/image/upload/v1594908242/logo_ccswme.svg" align="center" alt="Github Readme Stats" />
|
||||
<h2 align="center">GitHub Readme Stats</h2>
|
||||
<p align="center">在你的 README 中获取动态生成的 GitHub 统计信息!</p>
|
||||
<p align="center">在你的 README 中 获取动态生成的 GitHub 统计信息!</p>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/anuraghazra/github-readme-stats/actions">
|
||||
<img alt="Tests Passing" src="https://github.com/anuraghazra/github-readme-stats/workflows/Test/badge.svg" />
|
||||
</a>
|
||||
<a href="https://codecov.io/gh/anuraghazra/github-readme-stats">
|
||||
<img src="https://codecov.io/gh/anuraghazra/github-readme-stats/branch/master/graph/badge.svg" />
|
||||
</a>
|
||||
<a href="https://github.com/anuraghazra/github-readme-stats/issues">
|
||||
<img alt="Issues" src="https://img.shields.io/github/issues/anuraghazra/github-readme-stats?color=0088ff" />
|
||||
</a>
|
||||
@@ -26,11 +23,6 @@
|
||||
·
|
||||
<a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">请求增加功能</a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="readme.md">English</a>
|
||||
·
|
||||
<a href="readme_es.md">Español</a>
|
||||
</p>
|
||||
</p>
|
||||
<p align="center">喜欢这个项目?请考虑<a href="https://www.paypal.me/anuraghazra">捐赠</a>来帮助它完善!
|
||||
|
||||
@@ -46,35 +38,22 @@
|
||||
# GitHub 统计卡片
|
||||
|
||||
将这行代码复制到你的 markdown 文件中,简单如此!
|
||||
|
||||
更改 `?username=` 的值为你的 GitHub 用户名。
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
_注: 排名基于用户的统计信息计算得出,详见 [src/calculateRank.js](./src/calculateRank.js)_
|
||||
_Note: 排名基于用户的统计信息计算得出,详见 [src/calculateRank.js](./src/calculateRank.js)_
|
||||
|
||||
### 隐藏个别统计项
|
||||
### 隐藏个人统计信息
|
||||
|
||||
想要隐藏指定统计信息,你可以调用参数 `?hide=`,其值用 `,` 分隔。
|
||||
想要隐藏某项统计信息,你可以调用参数 `?hide=`,并调用 你想要隐藏的项目 组成的数组。
|
||||
|
||||
> 选项:`&hide=stars,commits,prs,issues,contribs`
|
||||
> 选项:`&hide=["stars","prs","issues","contribs"]`
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||
### 把私人贡献计数添加到总提交计数中
|
||||
|
||||
你可以用参数 `?count_private=true` 把私人贡献计数添加到总提交计数中。
|
||||
|
||||
_注:如果你是自己部署本项目,私人贡献将会默认被计数,如果不是自己部署,你需要分享你的私人贡献计数。_
|
||||
|
||||
> Options: `&count_private=true`
|
||||
|
||||
```md
|
||||

|
||||

|
||||
```
|
||||
|
||||
### 显示图标
|
||||
@@ -109,26 +88,51 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr
|
||||
|
||||
自定义选项:
|
||||
|
||||
| Option | type | description | Stats Card (default) | Repo Card (default) | Top Lang Card (default) |
|
||||
| ----------- | --------- | --------------------------| -------------------- | ------------------- | ------------------- |
|
||||
| title_color | hex color | 标题颜色 | 2f80ed | 2f80ed | 2f80ed |
|
||||
| text_color | hex color | 字体颜色 | 333 | 333 | 333 |
|
||||
| icon_color | hex color | 图标颜色 | 4c71f2 | 586069 | 586069 |
|
||||
| bg_color | hex color | 卡片背景颜色 | FFFEFE | FFFEFE | FFFEFE |
|
||||
| line_height | number | 文字行高 | 30 | N/A | N/A |
|
||||
| hide | CSV | 隐藏指定统计项 | undfined | N/A | undefined |
|
||||
| hide_rank | boolean | 隐藏评分等级 | false | N/A | N/A |
|
||||
| hide_title | boolean | 隐藏卡片标题 | false | N/A | false |
|
||||
| hide_border | boolean | 隐藏卡片边框 | false | N/A | N/A |
|
||||
| show_owner | boolean | 显示 Repo 卡片所属账户用户名 | N/A | false | N/A |
|
||||
| show_icons | boolean | 显示图标 | false | N/A | N/A |
|
||||
| theme | string | 设置主题 | 'default' | 'default_repocard' | 'default' |
|
||||
| cache_seconds | number | 手动设置自定义缓存控制 | 1800 | 1800 |'1800' |
|
||||
| count_private | boolean | 统计私人贡献计数 | false | N/A | N/A |
|
||||
| layout | string | 布局方式 | N/A | N/A | 'default' |
|
||||
| Option | type | description | 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 | 卡片背景颜色 | FFFEFE | FFFEFE |
|
||||
| line_height | number | 文字行高 | 30 | N/A |
|
||||
| hide_rank | boolean | 隐藏评分等级 | false | N/A |
|
||||
| hide_title | boolean | 隐藏卡片标题 | false | N/A |
|
||||
| hide_border | boolean | 隐藏卡片边框 | false | N/A |
|
||||
| show_owner | boolean | 显示 Repo 卡片所属账户用户名 | N/A | false |
|
||||
| show_icons | boolean | 显示图标 | false | N/A |
|
||||
| theme | string | 设置主题 | 'default' | 'default_repocard' |
|
||||
|
||||
---
|
||||
|
||||
> 注意缓存:Repo 卡片默认缓存 30 分钟,如果 fork 数和 star 数小于 1k ,则默认为 2小时。缓存被限制为最少30分钟,最长24小时。
|
||||
### Demo
|
||||
|
||||
- 默认
|
||||
|
||||

|
||||
|
||||
- 隐藏特定数据
|
||||
|
||||

|
||||
|
||||
- 显示图标
|
||||
|
||||

|
||||
|
||||
- 主题
|
||||
|
||||
从 [默认主题](#主题) 中进行选择
|
||||
|
||||

|
||||
|
||||
- 自定义统计卡片
|
||||
|
||||

|
||||
|
||||
- 自定义代码库卡片
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
# GitHub 更多置顶
|
||||
|
||||
@@ -178,22 +182,10 @@ Endpoint: `api/top-langs?username=anuraghazra`
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### 紧凑的语言卡片布局
|
||||
|
||||
你可以使用 `&layout=compact` 参数来改变卡片的样式。
|
||||
|
||||
```md
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
```
|
||||
|
||||
### Demo
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
- 紧凑布局
|
||||
|
||||
[](https://github.com/anuraghazra/github-readme-stats)
|
||||
|
||||
---
|
||||
|
||||
### 全部Demo
|
||||
@@ -204,11 +196,11 @@ Endpoint: `api/top-langs?username=anuraghazra`
|
||||
|
||||
- 隐藏特定数据
|
||||
|
||||

|
||||

|
||||
|
||||
- 显示图标
|
||||
|
||||

|
||||

|
||||
|
||||
- 主题
|
||||
|
||||
|
||||
@@ -56,18 +56,6 @@ Para ocultar alguna estadística específica, puedes utilizar el parámetro `?hi
|
||||

|
||||
```
|
||||
|
||||
### Agregar contribuciones privadas al total de commits contados
|
||||
|
||||
Puede agregar el recuento de todas sus contribuciones privadas al recuento total de confirmaciones utilizando el parámetro de consulta `?count_private=true`.
|
||||
|
||||
_Nota: Si está desplegando este proyecto usted mismo, las contribuciones privadas se contarán de manera predeterminada; de lo contrario, deberá elegir compartir sus recuentos de contribuciones privadas._
|
||||
|
||||
> Opciones: `&count_private=true`
|
||||
|
||||
```md
|
||||

|
||||
```
|
||||
|
||||
### Mostrar íconos
|
||||
|
||||
Para habilitar los íconos, puedes utilizar `show_icons=true` como parámetro, de esta manera:
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
const theme = require("../themes/index");
|
||||
const fs = require("fs");
|
||||
|
||||
const TARGET_FILE = "./themes/README.md";
|
||||
const REPO_CARD_LINKS_FLAG = "<!-- REPO_CARD_LINKS -->";
|
||||
const STAT_CARD_LINKS_FLAG = "<!-- STATS_CARD_LINKS -->";
|
||||
|
||||
const STAT_CARD_TABLE_FLAG = "<!-- STATS_CARD_TABLE -->";
|
||||
const REPO_CARD_TABLE_FLAG = "<!-- REPO_CARD_TABLE -->";
|
||||
|
||||
const THEME_TEMPLATE = `## Available Themes
|
||||
|
||||
<!-- DO NOT EDIT THIS FILE DIRECTLY -->
|
||||
|
||||
With inbuilt themes you can customize the look of the card without doing any manual customization.
|
||||
|
||||
Use \`?theme=THEME_NAME\` parameter like so :-
|
||||
|
||||
\`\`\`md
|
||||

|
||||
\`\`\`
|
||||
|
||||
## Stats
|
||||
|
||||
> These themes work both for the Stats Card and Repo Card.
|
||||
|
||||
| | | |
|
||||
| :--: | :--: | :--: |
|
||||
${STAT_CARD_TABLE_FLAG}
|
||||
|
||||
## Repo Card
|
||||
|
||||
> These themes work both for the Stats Card and Repo Card.
|
||||
|
||||
| | | |
|
||||
| :--: | :--: | :--: |
|
||||
${REPO_CARD_TABLE_FLAG}
|
||||
|
||||
${STAT_CARD_LINKS_FLAG}
|
||||
|
||||
${REPO_CARD_LINKS_FLAG}
|
||||
|
||||
|
||||
[add-theme]: https://github.com/anuraghazra/github-readme-stats/edit/master/themes/index.js
|
||||
|
||||
Wanted to add a new theme? Consider reading the [contribution guidelines](../CONTRIBUTING.md#themes-contribution) :D
|
||||
`;
|
||||
|
||||
const createRepoMdLink = (theme) => {
|
||||
return `\n[${theme}_repo]: https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&cache_seconds=86400&theme=${theme}`;
|
||||
};
|
||||
const createStatMdLink = (theme) => {
|
||||
return `\n[${theme}]: https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&hide=contribs,prs&cache_seconds=86400&theme=${theme}`;
|
||||
};
|
||||
|
||||
const generateLinks = (fn) => {
|
||||
return Object.keys(theme)
|
||||
.map((name) => fn(name))
|
||||
.join("");
|
||||
};
|
||||
|
||||
const createTableItem = ({ link, label, isRepoCard }) => {
|
||||
if (!link || !label) return "";
|
||||
return `\`${label}\` ![${link}][${link}${isRepoCard ? "_repo" : ""}]`;
|
||||
};
|
||||
const generateTable = ({ isRepoCard }) => {
|
||||
const rows = [];
|
||||
const themes = Object.keys(theme).filter(
|
||||
(name) => name !== (!isRepoCard ? "default_repocard" : "default")
|
||||
);
|
||||
|
||||
for (let i = 0; i < themes.length; i += 3) {
|
||||
const one = themes[i];
|
||||
const two = themes[i + 1];
|
||||
const three = themes[i + 2];
|
||||
|
||||
let tableItem1 = createTableItem({ link: one, label: one, isRepoCard });
|
||||
let tableItem2 = createTableItem({ link: two, label: two, isRepoCard });
|
||||
let tableItem3 = createTableItem({ link: three, label: three, isRepoCard });
|
||||
|
||||
if (three === undefined) {
|
||||
tableItem3 = `[Add your theme][add-theme]`;
|
||||
}
|
||||
rows.push(`| ${tableItem1} | ${tableItem2} | ${tableItem3} |`);
|
||||
|
||||
// if it's the last row & the row has no empty space push a new row
|
||||
if (three && i + 3 === themes.length) {
|
||||
rows.push(`| [Add your theme][add-theme] | | |`);
|
||||
}
|
||||
}
|
||||
|
||||
return rows.join("\n");
|
||||
};
|
||||
|
||||
const buildReadme = () => {
|
||||
return THEME_TEMPLATE.split("\n")
|
||||
.map((line) => {
|
||||
if (line.includes(REPO_CARD_LINKS_FLAG)) {
|
||||
return generateLinks(createRepoMdLink);
|
||||
}
|
||||
if (line.includes(STAT_CARD_LINKS_FLAG)) {
|
||||
return generateLinks(createStatMdLink);
|
||||
}
|
||||
if (line.includes(REPO_CARD_TABLE_FLAG)) {
|
||||
return generateTable({ isRepoCard: true });
|
||||
}
|
||||
if (line.includes(STAT_CARD_TABLE_FLAG)) {
|
||||
return generateTable({ isRepoCard: false });
|
||||
}
|
||||
return line;
|
||||
})
|
||||
.join("\n");
|
||||
};
|
||||
|
||||
fs.writeFileSync(TARGET_FILE, buildReadme());
|
||||
@@ -1,14 +0,0 @@
|
||||
#!/bin/bash
|
||||
set -x
|
||||
set -e
|
||||
|
||||
export BRANCH_NAME=updated-theme-readme
|
||||
git --version
|
||||
git config --global user.email "no-reply@githubreadmestats.com"
|
||||
git config --global user.name "Github Readme Stats Bot"
|
||||
git branch -d $BRANCH_NAME || true
|
||||
git checkout -b $BRANCH_NAME
|
||||
git add --all
|
||||
git commit --message "docs(theme): Auto update theme readme" || exit 0
|
||||
git remote add origin-$BRANCH_NAME https://${PERSONAL_TOKEN}@github.com/${GH_REPO}.git
|
||||
git push --force --quiet --set-upstream origin-$BRANCH_NAME $BRANCH_NAME
|
||||
@@ -8,10 +8,9 @@ const fetcher = (variables, token) => {
|
||||
query: `
|
||||
query userInfo($login: String!) {
|
||||
user(login: $login) {
|
||||
# fetch only owner repos & not forks
|
||||
repositories(ownerAffiliations: OWNER, isFork: false, first: 100) {
|
||||
repositories(isFork: false, first: 100) {
|
||||
nodes {
|
||||
languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
|
||||
languages(first: 1) {
|
||||
edges {
|
||||
size
|
||||
node {
|
||||
@@ -50,13 +49,18 @@ async function fetchTopLanguages(username) {
|
||||
.filter((node) => {
|
||||
return node.languages.edges.length > 0;
|
||||
})
|
||||
.reduce((acc, curr) => curr.languages.edges.concat(acc), [])
|
||||
.sort((a, b) => b.size - a.size)
|
||||
.sort((a, b) => {
|
||||
return b.languages.edges[0].size - a.languages.edges[0].size;
|
||||
})
|
||||
.map((node) => {
|
||||
return node.languages.edges[0];
|
||||
})
|
||||
.reduce((acc, prev) => {
|
||||
let langSize = prev.size;
|
||||
if (acc[prev.node.name] && prev.node.name === acc[prev.node.name].name) {
|
||||
langSize = prev.size + acc[prev.node.name].size;
|
||||
}
|
||||
|
||||
return {
|
||||
...acc,
|
||||
[prev.node.name]: {
|
||||
|
||||
+17
-28
@@ -3,7 +3,6 @@ const {
|
||||
encodeHTML,
|
||||
getCardColors,
|
||||
FlexLayout,
|
||||
wrapTextMultiline,
|
||||
} = require("../src/utils");
|
||||
const icons = require("./icons");
|
||||
const toEmoji = require("emoji-name-map");
|
||||
@@ -32,6 +31,7 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
|
||||
const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
|
||||
|
||||
const height = 120;
|
||||
const shiftText = langName.length > 15 ? 0 : 30;
|
||||
|
||||
let desc = description || "No description provided";
|
||||
@@ -41,12 +41,9 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
return toEmoji.get(emoji) || "";
|
||||
});
|
||||
|
||||
const multiLineDescription = wrapTextMultiline(desc);
|
||||
const descriptionLines = multiLineDescription.length;
|
||||
const lineHeight = 10;
|
||||
|
||||
const height =
|
||||
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
|
||||
if (desc.length > 55) {
|
||||
desc = `${desc.slice(0, 55)}..`;
|
||||
}
|
||||
|
||||
// returns theme based colors with proper overrides and defaults
|
||||
const { titleColor, textColor, iconColor, bgColor } = getCardColors({
|
||||
@@ -63,11 +60,11 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
const getBadgeSVG = (label) => `
|
||||
<g data-testid="badge" class="badge" transform="translate(320, 38)">
|
||||
<rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
|
||||
<text
|
||||
<text
|
||||
x="23" y="-5"
|
||||
alignment-baseline="central"
|
||||
dominant-baseline="central"
|
||||
text-anchor="middle"
|
||||
alignment-baseline="central"
|
||||
dominant-baseline="central"
|
||||
text-anchor="middle"
|
||||
fill="${textColor}"
|
||||
>
|
||||
${label}
|
||||
@@ -77,7 +74,7 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
|
||||
const svgLanguage = primaryLanguage
|
||||
? `
|
||||
<g data-testid="primary-lang" transform="translate(30, 0)">
|
||||
<g data-testid="primary-lang" transform="translate(30, 100)">
|
||||
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
|
||||
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
|
||||
</g>
|
||||
@@ -127,23 +124,15 @@ const renderRepoCard = (repo, options = {}) => {
|
||||
? getBadgeSVG("Archived")
|
||||
: ""
|
||||
}
|
||||
|
||||
<text class="description" x="25" y="50">
|
||||
${multiLineDescription
|
||||
.map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
|
||||
.join("")}
|
||||
</text>
|
||||
|
||||
<g transform="translate(0, ${height - 20})">
|
||||
${svgLanguage}
|
||||
|
||||
<g
|
||||
data-testid="star-fork-group"
|
||||
transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 0)"
|
||||
>
|
||||
${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
|
||||
</g>
|
||||
|
||||
<text class="description" x="25" y="70">${encodeHTML(desc)}</text>
|
||||
|
||||
${svgLanguage}
|
||||
|
||||
<g transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 100)">
|
||||
${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
`;
|
||||
};
|
||||
|
||||
+20
-110
@@ -11,11 +11,11 @@ const createProgressNode = ({ width, color, name, progress }) => {
|
||||
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
|
||||
<svg width="${progressWidth}">
|
||||
<rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
|
||||
<rect
|
||||
height="8"
|
||||
<rect
|
||||
height="8"
|
||||
fill="${color}"
|
||||
rx="5" ry="5" x="0" y="25"
|
||||
data-testid="lang-progress"
|
||||
rx="5" ry="5" x="0" y="25"
|
||||
data-testid="lang-progress"
|
||||
width="${progressPercentage}%"
|
||||
>
|
||||
</rect>
|
||||
@@ -23,41 +23,6 @@ const createProgressNode = ({ width, color, name, progress }) => {
|
||||
`;
|
||||
};
|
||||
|
||||
const createCompactLangNode = ({ lang, totalSize, x, y }) => {
|
||||
const percentage = ((lang.size / totalSize) * 100).toFixed(2);
|
||||
const color = lang.color || "#858585";
|
||||
|
||||
return `
|
||||
<g transform="translate(${x}, ${y})">
|
||||
<circle cx="5" cy="6" r="5" fill="${color}" />
|
||||
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
|
||||
${lang.name} ${percentage}%
|
||||
</text>
|
||||
</g>
|
||||
`;
|
||||
};
|
||||
|
||||
const createLanguageTextNode = ({ langs, totalSize, x, y }) => {
|
||||
return langs.map((lang, index) => {
|
||||
if (index % 2 === 0) {
|
||||
return createCompactLangNode({
|
||||
lang,
|
||||
x,
|
||||
y: 12.5 * index + y,
|
||||
totalSize,
|
||||
index,
|
||||
});
|
||||
}
|
||||
return createCompactLangNode({
|
||||
lang,
|
||||
x: 150,
|
||||
y: 12.5 + 12.5 * index,
|
||||
totalSize,
|
||||
index,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const lowercaseTrim = (name) => name.toLowerCase().trim();
|
||||
|
||||
const renderTopLanguages = (topLangs, options = {}) => {
|
||||
@@ -69,7 +34,6 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
bg_color,
|
||||
hide,
|
||||
theme,
|
||||
layout,
|
||||
} = options;
|
||||
|
||||
let langs = Object.values(topLangs);
|
||||
@@ -90,7 +54,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
return !langsToHide[lowercaseTrim(lang.name)];
|
||||
});
|
||||
|
||||
const totalLanguageSize = langs.reduce((acc, curr) => {
|
||||
const totalSize = langs.reduce((acc, curr) => {
|
||||
return acc + curr.size;
|
||||
}, 0);
|
||||
|
||||
@@ -102,78 +66,12 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
theme,
|
||||
});
|
||||
|
||||
let width = isNaN(card_width) ? 300 : card_width;
|
||||
const width = isNaN(card_width) ? 300 : card_width;
|
||||
let height = 45 + (langs.length + 1) * 40;
|
||||
|
||||
let finalLayout = "";
|
||||
|
||||
// RENDER COMPACT LAYOUT
|
||||
if (layout === "compact") {
|
||||
width = width + 50;
|
||||
height = 30 + (langs.length / 2 + 1) * 40;
|
||||
|
||||
// progressOffset holds the previous language's width and used to offset the next language
|
||||
// so that we can stack them one after another, like this: [--][----][---]
|
||||
let progressOffset = 0;
|
||||
const compactProgressBar = langs
|
||||
.map((lang) => {
|
||||
const percentage = (
|
||||
(lang.size / totalLanguageSize) *
|
||||
(width - 50)
|
||||
).toFixed(2);
|
||||
|
||||
const progress =
|
||||
percentage < 10 ? parseFloat(percentage) + 10 : percentage;
|
||||
|
||||
const output = `
|
||||
<rect
|
||||
mask="url(#rect-mask)"
|
||||
data-testid="lang-progress"
|
||||
x="${progressOffset}"
|
||||
y="0"
|
||||
width="${progress}"
|
||||
height="8"
|
||||
fill="${lang.color || "#858585"}"
|
||||
/>
|
||||
`;
|
||||
progressOffset += parseFloat(percentage);
|
||||
return output;
|
||||
})
|
||||
.join("");
|
||||
|
||||
finalLayout = `
|
||||
<mask id="rect-mask">
|
||||
<rect x="0" y="0" width="${
|
||||
width - 50
|
||||
}" height="8" fill="white" rx="5" />
|
||||
</mask>
|
||||
${compactProgressBar}
|
||||
${createLanguageTextNode({
|
||||
x: 0,
|
||||
y: 25,
|
||||
langs,
|
||||
totalSize: totalLanguageSize,
|
||||
}).join("")}
|
||||
`;
|
||||
} else {
|
||||
finalLayout = FlexLayout({
|
||||
items: langs.map((lang) => {
|
||||
return createProgressNode({
|
||||
width: width,
|
||||
name: lang.name,
|
||||
color: lang.color || "#858585",
|
||||
progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
|
||||
});
|
||||
}),
|
||||
gap: 40,
|
||||
direction: "column",
|
||||
}).join("");
|
||||
}
|
||||
|
||||
if (hide_title) {
|
||||
height -= 30;
|
||||
}
|
||||
|
||||
return `
|
||||
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
@@ -182,14 +80,26 @@ const renderTopLanguages = (topLangs, options = {}) => {
|
||||
</style>
|
||||
<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
|
||||
|
||||
|
||||
${
|
||||
hide_title
|
||||
? ""
|
||||
: `<text data-testid="header" x="25" y="35" class="header">Most Used Languages</text>`
|
||||
: `<text data-testid="header" x="25" y="35" class="header">Top Languages</text>`
|
||||
}
|
||||
|
||||
<svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">
|
||||
${finalLayout}
|
||||
${FlexLayout({
|
||||
items: langs.map((lang) => {
|
||||
return createProgressNode({
|
||||
width: width,
|
||||
name: lang.name,
|
||||
color: lang.color || "#858585",
|
||||
progress: ((lang.size / totalSize) * 100).toFixed(2),
|
||||
});
|
||||
}),
|
||||
gap: 40,
|
||||
direction: "column",
|
||||
}).join("")}
|
||||
</svg>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
+2
-21
@@ -1,5 +1,4 @@
|
||||
const axios = require("axios");
|
||||
const wrap = require("word-wrap");
|
||||
const themes = require("../themes");
|
||||
|
||||
const renderError = (message, secondaryMessage = "") => {
|
||||
@@ -128,27 +127,10 @@ function getCardColors({
|
||||
return { titleColor, iconColor, textColor, bgColor };
|
||||
}
|
||||
|
||||
function wrapTextMultiline(text, width = 60, maxLines = 3) {
|
||||
const wrapped = wrap(encodeHTML(text), { width })
|
||||
.split("\n") // Split wrapped lines to get an array of lines
|
||||
.map((line) => line.trim()); // Remove leading and trailing whitespace of each line
|
||||
|
||||
const lines = wrapped.slice(0, maxLines); // Only consider maxLines lines
|
||||
|
||||
// Add "..." to the last line if the text exceeds maxLines
|
||||
if (wrapped.length > maxLines) {
|
||||
lines[maxLines - 1] += "...";
|
||||
}
|
||||
|
||||
// Remove empty lines if text fits in less than maxLines lines
|
||||
const multiLineText = lines.filter(Boolean);
|
||||
return multiLineText;
|
||||
}
|
||||
|
||||
const noop = () => {};
|
||||
const fn = () => {};
|
||||
// return console instance based on the environment
|
||||
const logger =
|
||||
process.env.NODE_ENV !== "test" ? console : { log: noop, error: noop };
|
||||
process.env.NODE_ENV !== "test" ? console : { log: fn, error: fn };
|
||||
|
||||
const CONSTANTS = {
|
||||
THIRTY_MINUTES: 1800,
|
||||
@@ -168,7 +150,6 @@ module.exports = {
|
||||
FlexLayout,
|
||||
getCardColors,
|
||||
clampValue,
|
||||
wrapTextMultiline,
|
||||
logger,
|
||||
CONSTANTS,
|
||||
};
|
||||
|
||||
@@ -29,7 +29,7 @@ describe("Test renderRepoCard", () => {
|
||||
expect(header).toHaveTextContent("convoychat");
|
||||
expect(header).not.toHaveTextContent("anuraghazra");
|
||||
expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
|
||||
"Help us take over the world! React + TS + GraphQL Chat App"
|
||||
"Help us take over the world! React + TS + GraphQL Chat .."
|
||||
);
|
||||
expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
|
||||
expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
|
||||
@@ -55,16 +55,12 @@ describe("Test renderRepoCard", () => {
|
||||
document.body.innerHTML = renderRepoCard({
|
||||
...data_repo.repository,
|
||||
description:
|
||||
"The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
|
||||
"Very long long long long long long long long text it should trim it",
|
||||
});
|
||||
|
||||
expect(
|
||||
document.getElementsByClassName("description")[0].children[0].textContent
|
||||
).toBe("The quick brown fox jumps over the lazy dog is an");
|
||||
|
||||
expect(
|
||||
document.getElementsByClassName("description")[0].children[1].textContent
|
||||
).toBe("English-language pangram—a sentence that contains all");
|
||||
expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
|
||||
"Very long long long long long long long long text it sh.."
|
||||
);
|
||||
|
||||
// Should not trim
|
||||
document.body.innerHTML = renderRepoCard({
|
||||
@@ -99,9 +95,9 @@ describe("Test renderRepoCard", () => {
|
||||
});
|
||||
|
||||
expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
|
||||
expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
|
||||
expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
|
||||
"transform",
|
||||
"translate(155, 0)"
|
||||
"translate(155, 100)"
|
||||
);
|
||||
|
||||
// Small lang
|
||||
@@ -113,9 +109,9 @@ describe("Test renderRepoCard", () => {
|
||||
},
|
||||
});
|
||||
|
||||
expect(queryByTestId(document.body, "star-fork-group")).toHaveAttribute(
|
||||
expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
|
||||
"transform",
|
||||
"translate(125, 0)"
|
||||
"translate(125, 100)"
|
||||
);
|
||||
});
|
||||
|
||||
@@ -158,7 +154,7 @@ describe("Test renderRepoCard", () => {
|
||||
expect(iconClassStyles.fill).toBe("#586069");
|
||||
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
|
||||
"fill",
|
||||
"#fffefe"
|
||||
"#FFFEFE"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ describe("Test renderStatsCard", () => {
|
||||
expect(iconClassStyles.fill).toBe("#4c71f2");
|
||||
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
|
||||
"fill",
|
||||
"#fffefe"
|
||||
"#FFFEFE"
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ describe("Test renderTopLanguages", () => {
|
||||
document.body.innerHTML = renderTopLanguages(langs);
|
||||
|
||||
expect(queryByTestId(document.body, "header")).toHaveTextContent(
|
||||
"Most Used Languages"
|
||||
"Top Languages"
|
||||
);
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
|
||||
@@ -139,7 +139,7 @@ describe("Test renderTopLanguages", () => {
|
||||
expect(langNameStyles.fill).toBe("#333");
|
||||
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
|
||||
"fill",
|
||||
"#fffefe"
|
||||
"#FFFEFE"
|
||||
);
|
||||
});
|
||||
|
||||
@@ -207,19 +207,4 @@ describe("Test renderTopLanguages", () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('should render with layout compact', () => {
|
||||
document.body.innerHTML = renderTopLanguages(langs, {layout: 'compact'});
|
||||
|
||||
expect(queryByTestId(document.body, "header")).toHaveTextContent("Most Used Languages");
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent("HTML 40.00%");
|
||||
expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute("width","120.00");
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent("javascript 40.00%");
|
||||
expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute("width","120.00");
|
||||
|
||||
expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent("css 20.00%");
|
||||
expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute("width","60.00");
|
||||
})
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ const data_langs = {
|
||||
nodes: [
|
||||
{
|
||||
languages: {
|
||||
edges: [{ size: 150, node: { color: "#0f0", name: "HTML" } }],
|
||||
edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -55,7 +55,7 @@ const langs = {
|
||||
HTML: {
|
||||
color: "#0f0",
|
||||
name: "HTML",
|
||||
size: 250,
|
||||
size: 200,
|
||||
},
|
||||
javascript: {
|
||||
color: "#0ff",
|
||||
|
||||
@@ -5,7 +5,6 @@ const {
|
||||
renderError,
|
||||
FlexLayout,
|
||||
getCardColors,
|
||||
wrapTextMultiline,
|
||||
} = require("../src/utils");
|
||||
|
||||
const { queryByTestId } = require("@testing-library/dom");
|
||||
@@ -109,28 +108,3 @@ describe("Test utils.js", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("wrapTextMultiline", () => {
|
||||
it("should not wrap small texts", () => {
|
||||
{
|
||||
let multiLineText = wrapTextMultiline("Small text should not wrap");
|
||||
expect(multiLineText).toEqual(["Small text should not wrap"]);
|
||||
}
|
||||
});
|
||||
it("should wrap large texts", () => {
|
||||
let multiLineText = wrapTextMultiline(
|
||||
"Hello world long long long text",
|
||||
20,
|
||||
3
|
||||
);
|
||||
expect(multiLineText).toEqual(["Hello world long", "long long text"]);
|
||||
});
|
||||
it("should wrap large texts and limit max lines", () => {
|
||||
let multiLineText = wrapTextMultiline(
|
||||
"Hello world long long long text",
|
||||
10,
|
||||
2
|
||||
);
|
||||
expect(multiLineText).toEqual(["Hello", "world long..."]);
|
||||
});
|
||||
});
|
||||
|
||||
+43
-65
@@ -1,90 +1,68 @@
|
||||
## Available Themes
|
||||
|
||||
<!-- DO NOT EDIT THIS FILE DIRECTLY -->
|
||||
|
||||
With inbuilt themes you can customize the look of the card without doing any manual customization.
|
||||
|
||||
Use `?theme=THEME_NAME` parameter like so :-
|
||||
|
||||
```md
|
||||

|
||||
 :D
|
||||
|
||||
+10
-34
@@ -3,13 +3,13 @@ const themes = {
|
||||
title_color: "2f80ed",
|
||||
icon_color: "4c71f2",
|
||||
text_color: "333",
|
||||
bg_color: "fffefe",
|
||||
bg_color: "FFFEFE",
|
||||
},
|
||||
default_repocard: {
|
||||
title_color: "2f80ed",
|
||||
icon_color: "586069", // icon color is different
|
||||
text_color: "333",
|
||||
bg_color: "fffefe",
|
||||
bg_color: "FFFEFE",
|
||||
},
|
||||
dark: {
|
||||
title_color: "fff",
|
||||
@@ -87,44 +87,20 @@ const themes = {
|
||||
title_color: "41b883",
|
||||
icon_color: "41b883",
|
||||
text_color: "273849",
|
||||
bg_color: "fffefe",
|
||||
bg_color: "FFFEFE",
|
||||
},
|
||||
"shades-of-purple": {
|
||||
title_color: "fad000",
|
||||
icon_color: "b362ff",
|
||||
text_color: "a599e9",
|
||||
bg_color: "2d2b55",
|
||||
title_color: "FAD000",
|
||||
icon_color: "FB94FF",
|
||||
text_color: "A599E9",
|
||||
bg_color: "2D2B55",
|
||||
},
|
||||
nightowl: {
|
||||
title_color: "c792ea",
|
||||
icon_color: "ffeb95",
|
||||
text_color: "7fdbca",
|
||||
title_color: "C792EA",
|
||||
icon_color: "FFEB95",
|
||||
text_color: "7FDBCA",
|
||||
bg_color: "011627",
|
||||
},
|
||||
buefy: {
|
||||
title_color: "7957d5",
|
||||
icon_color: "ff3860",
|
||||
text_color: "363636",
|
||||
bg_color: "ffffff",
|
||||
},
|
||||
"blue-green": {
|
||||
title_color: "2f97c1",
|
||||
icon_color: "f5b700",
|
||||
text_color: "0cf574",
|
||||
bg_color: "040f0f",
|
||||
},
|
||||
"algolia": {
|
||||
title_color: "00AEFF",
|
||||
icon_color: "2DDE98",
|
||||
text_color: "FFFFFF",
|
||||
bg_color: "050F2C",
|
||||
},
|
||||
"great-gatsby":{
|
||||
title_color: "ffa726",
|
||||
icon_color: "ffb74d",
|
||||
text_color: "ffd95b",
|
||||
bg_color: "000000",
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = themes;
|
||||
|
||||
Reference in New Issue
Block a user