diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8145137..b344e20 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -31,7 +31,7 @@ _(make sure you already have a [vercel](https://vercel.com/) account)_ ## Themes Contribution -Github readme stats supports custom theming and you can also contribute new themes! +GitHub Readme Stats supports custom theming and you can also contribute new themes! All you need to do is edit [themes/index.js](./themes/index.js) file and add your theme at the end of the file. @@ -43,7 +43,7 @@ While creating the Pull request to add a new theme **don't forget to add a scree In short, when you submit changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern. -## Report issues/bugs using Github's [issues](https://github.com/anuraghazra/github-readme-stats/issues) +## Report issues/bugs using GitHub's [issues](https://github.com/anuraghazra/github-readme-stats/issues) We use GitHub issues to track public bugs. Report a bug by [opening a new issue](https://github.com/anuraghazra/github-readme-stats/issues/new/choose); it's that easy! @@ -55,7 +55,7 @@ We use GitHub issues to track public bugs. Report a bug by [opening a new issue] - Steps to reproduce - Be specific! - Share the snapshot, if possible. - - Github Readme Stats' live link + - GitHub Readme Stats' live link - What actually happens - What you expected would happen - Notes (possibly including why you think this might be happening, or stuff you tried that didn't work) diff --git a/api/top-langs.js b/api/top-langs.js index 840f88b..a758e33 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -14,13 +14,14 @@ module.exports = async (req, res) => { username, hide, hide_title, + hide_border, card_width, title_color, text_color, bg_color, theme, cache_seconds, - layout + layout, } = req.query; let topLangs; @@ -42,15 +43,15 @@ module.exports = async (req, res) => { res.send( renderTopLanguages(topLangs, { - theme, hide_title: parseBoolean(hide_title), + hide_border: parseBoolean(hide_border), card_width: parseInt(card_width, 10), hide: parseArray(hide), title_color, text_color, bg_color, theme, - layout + layout, }) ); }; diff --git a/readme.md b/readme.md index 3c1feed..62377fe 100644 --- a/readme.md +++ b/readme.md @@ -1,9 +1,8 @@

- Github Readme Stats + GitHub Readme Stats

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

-

Tests Passing @@ -17,6 +16,14 @@ GitHub pull requests +
+
+ + + + + +

@@ -103,7 +110,7 @@ Use `?theme=THEME_NAME` parameter like so :- dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula -Github Readme Stat Themes +GitHub Readme Stat Themes You can look at a preview for [all available themes](./themes/README.md) or checkout the [theme config file](./themes/index.js) & **you can also contribute new themes** if you like :D @@ -111,28 +118,43 @@ You can look at a preview for [all available themes](./themes/README.md) or chec You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params. -Customization Options: +#### Common Options: -| Option | type | description | Stats Card (default) | Repo Card (default) | Top Lang Card (default) | -| ------------- | --------- | ------------------------------------------- | -------------------- | ------------------- | ----------------------- | -| title_color | hex color | title color | 2f80ed | 2f80ed | 2f80ed | -| text_color | hex color | body color | 333 | 333 | 333 | -| icon_color | hex color | icon color | 4c71f2 | 586069 | 586069 | -| bg_color | hex color | card bg color | FFFEFE | FFFEFE | FFFEFE | -| line_height | number | control the line-height between text | 30 | N/A | N/A | -| hide | CSV | hides the items specified | undefined | N/A | undefined | -| hide_rank | boolean | hides the ranking | false | N/A | N/A | -| hide_title | boolean | hides the stats title | false | N/A | false | -| 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' | -| 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" | +- `title_color` - Card's title color _(hex color)_ +- `text_color` - Body text color _(hex color)_ +- `icon_color` - Icons color if available _(hex color)_ +- `bg_color` - Card's background color _(hex color)_ +- `theme` - name of the theme, choose from [all available themes](./themes/README.md) +- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_ > 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 +#### Stats Card Exclusive Options: + +- `hide` - Hide's the specified items from stats _(Comma seperated values)_ +- `hide_title` - _(boolean)_ +- `hide_rank` - _(boolean)_ +- `show_icons` - _(boolean)_ +- `count_private` - Count private commits _(boolean)_ +- `line_height` - Sets the line-height betweent text _(number)_ + +#### Repo Card Exclusive Options: + +- `show_owner` - Show the owner name of the repo _(boolean)_ + +#### Language Card Exclusive Options: + +- `hide` - Hide the languages specified from the card _(Comma seperated values)_ +- `hide_title` - _(boolean)_ +- `layout` - Switch between two available layouts `default` & `compact` +- `card_width` - Set the card's width manually _(number)_ + +> :warning: **Important:** +> Language names should be uri-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) +> (i.e: `c++` should become `c%2B%2B`, `jupyter notebook` should become `jupyter%20notebook`, etc.) + +--- + # 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/readme_cn.md b/readme_cn.md index 5613500..9d5f9fd 100644 --- a/readme_cn.md +++ b/readme_cn.md @@ -1,5 +1,5 @@

- Github Readme Stats + GitHub Readme Stats

GitHub Readme Stats

在你的 README 中获取动态生成的 GitHub 统计信息！

@@ -17,6 +17,14 @@ GitHub pull requests +
+
+ + + + + +

@@ -101,7 +109,7 @@ _注：如果你是自己部署本项目，私人贡献将会默认被计数， dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula -Github Readme Stat Themes +GitHub Readme Stat Themes 在 [theme config 文件](./themes/index.js) 中查看更多主题，或者 **贡献新的主题** :D @@ -111,26 +119,25 @@ 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) | 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' | - -> 注意缓存：Repo 卡片默认缓存 30 分钟，如果 fork 数和 star 数小于 1k ，则默认为 2小时。缓存被限制为最少30分钟，最长24小时。 +> 注意缓存：Repo 卡片默认缓存 30 分钟，如果 fork 数和 star 数小于 1k ，则默认为 2 小时。缓存被限制为最少 30 分钟，最长 24 小时。 # GitHub 更多置顶 @@ -158,9 +165,9 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` # 热门语言卡片 -热门语言卡片显示了Github用户常用的编程语言。 +热门语言卡片显示了 GitHub 用户常用的编程语言。 -*注意：热门语言并不表示我的技能水平或类似的水平，它是用户在Github上拥有最多代码的一项指标，它是github-readme-stats的新功能* +_注意：热门语言并不表示我的技能水平或类似的水平，它是用户在 GitHub 上拥有最多代码的一项指标，它是 github-readme-stats 的新功能_ ### 使用细则 @@ -198,7 +205,7 @@ Endpoint: `api/top-langs?username=anuraghazra` --- -### 全部Demo +### 全部 Demo - 默认 @@ -250,7 +257,7 @@ Endpoint: `api/top-langs?username=anuraghazra` 因为 GitHub 的 API 每个小时只允许 5 千次请求，我的 `https://github-readme-stats.vercel.app/api` 很有可能会触发限制 如果你将其托管在自己的 Vercel 服务器上，那么你就不必为此担心。点击 deploy 按钮来开始你的部署！ -注意: 从 [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 开始，我们应该能够处理超过 5千 的请求，并且不会出现宕机问题 :D +注意: 从 [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 开始，我们应该能够处理超过 5 千 的请求，并且不会出现宕机问题 :D [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats) diff --git a/readme_de.md b/readme_de.md index e0a1962..49b80a0 100644 --- a/readme_de.md +++ b/readme_de.md @@ -1,5 +1,5 @@

- Github Readme Stats + GitHub Readme Stats

GitHub Readme Stats

Zeige dynamisch generierte GitHub-Statistiken in deinen Readmes!

@@ -17,6 +17,14 @@ GitHub pull requests +
+
+ + + + + +

@@ -82,7 +90,7 @@ Benutze den `?theme=THEME_NAME`-Parameter wie folgt :- dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula -Github Readme Stat Themes +GitHub Readme Stat Themes Du kannst dir eine Vorschau [aller verfügbaren Themes](./themes/README.md) ansehen oder die [theme config Datei](./themes/index.js) auschecken. Außerdem **kannst du neue Themes beisteuern** wenn du möchtest, contributions sind gern gesehen :D @@ -93,21 +101,21 @@ Du kannst das Erscheinungsbild deiner `Stats Card` oder `Repo Card`, mithilfe vo Anpassungsoptionen: -| Option | Type | Beschreibung | Statistiken (default) | Repo (default) | Top Programmiersprachen (default) | -| ---------------- | --------- | -----------------------------------------------------| --------------------- | ------------------- | ----------------------- | -| title_color | hex color | Titelfarbe | 2f80ed | 2f80ed | 2f80ed | -| text_color | hex color | Textkörperfarbe | 333 | 333 | 333 | -| icon_color | hex color | Iconfarbe | 4c71f2 | 586069 | 586069 | -| bg_color | hex color | Hintergrundfarbe | FFFEFE | FFFEFE | FFFEFE | -| line_height | number | kontrolliert die Zeilenhöhe zwischen dem Text | 30 | N/A | N/A | -| hide_rank | boolean | blendet das Ranking aus | false | N/A | N/A | -| hide_title | boolean | blendet den Statistik-Titel aus | false | N/A | false | -| hide_border | boolean | blendet den Rahmen aus | false | N/A | N/A | -| show_owner | boolean | zeigt den Namen des Besitzers in der Repo-Karte | N/A | false | N/A | -| show_icons | boolean | zeige Icons an | false | N/A | N/A | -| theme | string | setze eingebaute themes | 'default' | 'default_repocard' | 'default' | -| cache_seconds | number | manuelles setzen der Cachezeiten | 1800 | 1800 | '1800' | -| hide_langs_below | number | verberge Sprachen unter einem bestimmten Schwellwert | N/A | N/A | undefined | +| Option | Type | Beschreibung | Statistiken (default) | Repo (default) | Top Programmiersprachen (default) | +| ---------------- | --------- | ---------------------------------------------------- | --------------------- | ------------------ | --------------------------------- | +| title_color | hex color | Titelfarbe | 2f80ed | 2f80ed | 2f80ed | +| text_color | hex color | Textkörperfarbe | 333 | 333 | 333 | +| icon_color | hex color | Iconfarbe | 4c71f2 | 586069 | 586069 | +| bg_color | hex color | Hintergrundfarbe | FFFEFE | FFFEFE | FFFEFE | +| line_height | number | kontrolliert die Zeilenhöhe zwischen dem Text | 30 | N/A | N/A | +| hide_rank | boolean | blendet das Ranking aus | false | N/A | N/A | +| hide_title | boolean | blendet den Statistik-Titel aus | false | N/A | false | +| hide_border | boolean | blendet den Rahmen aus | false | N/A | N/A | +| show_owner | boolean | zeigt den Namen des Besitzers in der Repo-Karte | N/A | false | N/A | +| show_icons | boolean | zeige Icons an | false | N/A | N/A | +| theme | string | setze eingebaute themes | 'default' | 'default_repocard' | 'default' | +| cache_seconds | number | manuelles setzen der Cachezeiten | 1800 | 1800 | 1800 | +| hide_langs_below | number | verberge Sprachen unter einem bestimmten Schwellwert | N/A | N/A | undefined | > Hinweis bzgl. des Caches: Wenn die Anzahl der Forks und Stars geringer als 1Tsd ist, haben die Repo-Cards eine default Cachezeit von 30 Minuten (1800 Sekunden), ansonsten beträgt diese 2 Stunden (7200 Sekunden). Außerdem ist der Cache auf eine Minimum von 30 Minuten und ein Maximum von 24 Stunden begrenzt. diff --git a/readme_es.md b/readme_es.md index 66ad7a6..28a338b 100644 --- a/readme_es.md +++ b/readme_es.md @@ -1,5 +1,5 @@

- Github Readme Stats + GitHub Readme Stats

GitHub Readme Stats

¡Obtén tus estadísticas de GitHub generadas dinámicamente en tu README!

@@ -14,6 +14,14 @@ GitHub pull requests +
+
+ + + + + +

@@ -97,7 +105,7 @@ Utiliza el parámetro `?theme=THEME_NAME`, de esta manera: dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula -Github Readme Stat Themes +GitHub Readme Stat Themes Puedes ver una vista previa de [todos los temas disponibles](./themes/README.md) o ver el [archivo de configuración](./themes/index.js) del tema y también **puedes contribuir con nuevos temas** si lo deseas: D diff --git a/readme_ja.md b/readme_ja.md index ed17ceb..31d775a 100644 --- a/readme_ja.md +++ b/readme_ja.md @@ -1,5 +1,5 @@

- Github Readme Stats + GitHub Readme Stats

GitHub Readme Stats

あなたのREADMEに動的に生成されたGitHubの統計情報を載せましょう！

@@ -17,6 +17,14 @@ GitHub pull requests +
+
+ + + + + +

@@ -47,7 +55,7 @@ # GitHub Stats Card -以下の構文をコピーして、あなたのMarkdownファイルに貼り付けるだけです。 +以下の構文をコピーして、あなたの Markdown ファイルに貼り付けるだけです。 簡単ですね！ `?username=` の値は、あなたの GitHub アカウントのユーザー名に変更してください。 @@ -102,7 +110,7 @@ _Note: このプロジェクトを自分でデプロイしている場合、デ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula -Github Readme Stat Themes +GitHub Readme Stat Themes 用意されている全てのテーマの[プレビュー](./themes/README.md)や[設定ファイル](./themes/index.js)を見ることができます。もしよろしければ、**新しいテーマを投稿してみてください** (´∀` ) @@ -112,31 +120,31 @@ dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontr Customization Options: -| Option | type | description | Stats Card (default) | Repo Card (default) | Top Lang Card (default) | -| ------------- | --------- | ------------------------------------------- | -------------------- | ------------------- | ----------------------- | +| 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 | 項目の非表示 | undefined | N/A | undefined | -| hide_rank | boolean | rankingの非表示 | false | N/A | N/A | +| hide_rank | boolean | ranking の非表示 | false | N/A | N/A | | hide_title | boolean | タイトルの非表示 | false | N/A | false | | hide_border | boolean | 枠線の非表示 | false | N/A | N/A | | show_owner | boolean | オーナー名の表示 | 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 | private contributions 数をコミット総数に追加 | false | N/A | N/A | -| layout | string | レイアウトのオプション選択 | N/A | N/A | "default" | +| theme | string | 用意されているテーマ | 'default' | 'default_repocard' | 'default' | +| cache_seconds | number | キャッシュコントロール | 1800 | 1800 | 1800 | +| count_private | boolean | private contributions 数をコミット総数に追加 | false | N/A | N/A | +| layout | string | レイアウトのオプション選択 | N/A | N/A | 'default' | -> キャッシュに関する注意点: Repo cards のデフォルトのキャッシュは、フォーク数とスター数が 1k 未満の場合は 30分(1800秒) で、それ以外の場合は 2時間(7200) です。また、キャッシュは最低でも 30分、最大でも 24時間に制限されていることに注意してください。 +> キャッシュに関する注意点: Repo cards のデフォルトのキャッシュは、フォーク数とスター数が 1k 未満の場合は 30 分(1800 秒) で、それ以外の場合は 2 時間(7200) です。また、キャッシュは最低でも 30 分、最大でも 24 時間に制限されていることに注意してください。 # GitHub Extra Pins -GitHub extra pins を使うと、GitHub の readme プロフィールを使って、自分のプロフィールに 6つ以上のリポジトリをピン留めすることができます。 +GitHub extra pins を使うと、GitHub の readme プロフィールを使って、自分のプロフィールに 6 つ以上のリポジトリをピン留めすることができます。 -イェーイ! もはや6つのピン留めされたリポジトリに制限されることはありません。 +イェーイ! もはや 6 つのピン留めされたリポジトリに制限されることはありません。 ### Usage @@ -152,7 +160,7 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` [![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats) -リポジトリのオーナーのユーザー名を含める場合は、show_owner変数を使用します。 +リポジトリのオーナーのユーザー名を含める場合は、show_owner 変数を使用します。 [![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats) @@ -160,7 +168,7 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats` Top languages card には、その GitHub ユーザーが最も利用している Top languages が表示されます。 -_NOTE: Top languagesは、ユーザのスキルレベルを示すものではなく、GitHub上でどの言語で最も多くのコードを書いているかを示すGitHubの指標です。_ +_NOTE: Top languages は、ユーザのスキルレベルを示すものではなく、GitHub 上でどの言語で最も多くのコードを書いているかを示す GitHub の指標です。_ ### Usage @@ -249,7 +257,7 @@ Endpoint: `api/top-langs?username=anuraghazra` GitHub API は 1 時間あたり 5k リクエストしか受け付けていないので、私の `https://github-readme-stats.vercel.app/api` がレートリミッターを超えてしまう可能性があります。自分の Vercel サーバーでホストしているのであれば、何も心配する必要はありません。デプロイボタンをクリックして始めましょう！ -NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降は5k以上のリクエストに対応できるようになり、ダウンタイムの問題もなくなりました (´∀` ) +NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降は 5k 以上のリクエストに対応できるようになり、ダウンタイムの問題もなくなりました (´∀` ) [![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/anuraghazra/github-readme-stats) @@ -259,7 +267,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降 1. [vercel.com](https://vercel.com/)に行きます。 1. `Log in`をクリックします。 ![](https://files.catbox.moe/tct1wg.png) -1. `Continue with GitHub` を押してGitHubにサインインします。 +1. `Continue with GitHub` を押して GitHub にサインインします。 ![](https://files.catbox.moe/btd78j.jpeg) 1. GitHub にサインインし、すべてのリポジトリへのアクセスを許可します。 1. このリポジトリをフォークします。 @@ -270,7 +278,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降 ![](https://files.catbox.moe/pqub9q.png) 1. root を選択して、すべてをそのままにしておき、PAT_1 という名前の環境変数を（下図のように）追加します。これには個人アクセストークン (PAT) が含まれており、[ここ](https://github.com/settings/tokens/new)で簡単に作成することができます (すべてをそのままにしておいて、何かに名前を付けてください。) ![](https://files.catbox.moe/0ez4g7.png) -1. デプロイをクリックすれば完了です。APIを使用するためにあなたのドメインを参照してください! +1. デプロイをクリックすれば完了です。API を使用するためにあなたのドメインを参照してください! @@ -283,7 +291,7 @@ NOTE: [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) 以降 - あなたの readme で github-readme-stats を使用して適切なクレジットを付与し、それにリンクします (´∀` ) - 主演とプロジェクトの共有 :rocket: -- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - PayPalを介して1回限りの寄付を行うことができます。私はおそらく ~~コーヒー~~ お茶買うでしょう。 :tea: +- [![paypal.me/anuraghazra](https://ionicabizau.github.io/badges/paypal.svg)](https://www.paypal.me/anuraghazra) - PayPal を介して 1 回限りの寄付を行うことができます。私はおそらく ~~コーヒー~~ お茶買うでしょう。 :tea: Thanks! :heart: diff --git a/src/Card.js b/src/Card.js new file mode 100644 index 0000000..50475e7 --- /dev/null +++ b/src/Card.js @@ -0,0 +1,146 @@ +const { FlexLayout } = require("./utils"); +const { getAnimations } = require("./getStyles"); + +class Card { + constructor({ + width = 100, + height = 100, + colors = {}, + title = "", + titlePrefixIcon, + }) { + this.width = width; + this.height = height; + + this.hideBorder = false; + this.hideTitle = false; + + // returns theme based colors with proper overrides and defaults + this.colors = colors; + this.title = title; + this.css = ""; + + this.paddingX = 25; + this.paddingY = 35; + this.titlePrefixIcon = titlePrefixIcon; + this.animations = true; + } + + disableAnimations() { + this.animations = false; + } + + setCSS(value) { + this.css = value; + } + + setHideBorder(value) { + this.hideBorder = value; + } + + setHideTitle(value) { + this.hideTitle = value; + if (value) { + this.height -= 30; + } + } + + setTitle(text) { + this.title = text; + } + + renderTitle() { + const titleText = ` + ${this.title} + `; + + const prefixIcon = ` + + ${this.titlePrefixIcon} + + `; + return ` + + ${FlexLayout({ + items: [this.titlePrefixIcon && prefixIcon, titleText], + gap: 25, + }).join("")} + + `; + } + + render(body) { + return ` + + + + ${typeof this.colors.bgColor == 'object' ? ` + + + + + ` : ""} + + + + ${this.hideTitle ? "" : this.renderTitle()} + + + ${body} + + + `; + } +} + +module.exports = Card; diff --git a/src/getStyles.js b/src/getStyles.js index 1012624..b15f46d 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -9,10 +9,23 @@ const calculateCircleProgress = (value) => { return percentage; }; -const getAnimations = ({ progress }) => { +const getProgressAnimation = ({ progress }) => { + return ` + @keyframes rankAnimation { + from { + stroke-dashoffset: ${calculateCircleProgress(0)}; + } + to { + stroke-dashoffset: ${calculateCircleProgress(progress)}; + } + } + `; +}; + +const getAnimations = () => { return ` /* Animations */ - @keyframes scaleIn { + @keyframes scaleInAnimation { from { transform: translate(-5px, 5px) scale(0); } @@ -20,7 +33,7 @@ const getAnimations = ({ progress }) => { transform: translate(-5px, 5px) scale(1); } } - @keyframes fadeIn { + @keyframes fadeInAnimation { from { opacity: 0; } @@ -28,14 +41,6 @@ const getAnimations = ({ progress }) => { opacity: 1; } } - @keyframes rankAnimation { - from { - stroke-dashoffset: ${calculateCircleProgress(0)}; - } - to { - stroke-dashoffset: ${calculateCircleProgress(progress)}; - } - } `; }; @@ -47,20 +52,16 @@ const getStyles = ({ progress, }) => { return ` - .header { - font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; - animation: fadeIn 0.8s ease-in-out forwards; - } - .stat { + .stat { font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; } - .stagger { + .stagger { opacity: 0; - animation: fadeIn 0.3s ease-in-out forwards; + animation: fadeInAnimation 0.3s ease-in-out forwards; } - .rank-text { + .rank-text { font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; - animation: scaleIn 0.3s ease-in-out forwards; + animation: scaleInAnimation 0.3s ease-in-out forwards; } .bold { font-weight: 700 } @@ -86,9 +87,8 @@ const getStyles = ({ transform: rotate(-90deg); animation: rankAnimation 1s forwards ease-in-out; } - - ${process.env.NODE_ENV === "test" ? "" : getAnimations({ progress })} + ${process.env.NODE_ENV === "test" ? "" : getProgressAnimation({ progress })} `; }; -module.exports = getStyles; +module.exports = { getStyles, getAnimations }; diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index 2e7583d..5845e32 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -7,6 +7,7 @@ const { } = require("../src/utils"); const icons = require("./icons"); const toEmoji = require("emoji-name-map"); +const Card = require("./Card"); const renderRepoCard = (repo, options = {}) => { const { @@ -90,68 +91,75 @@ const renderRepoCard = (repo, options = {}) => { ` : ""; + const iconWithLabel = (icon, label, testid) => { + return ` + + ${icon} + + ${label} + `; + }; const svgStars = stargazers.totalCount > 0 && - ` - - ${icons.star} - - ${totalStars} - `; - + iconWithLabel(icons.star, totalStars, "stargazers"); const svgForks = - forkCount > 0 && - ` - - ${icons.fork} - - ${totalForks} - `; + forkCount > 0 && iconWithLabel(icons.fork, totalForks, "forkcount"); - return ` - - - ${isGradient ? gradient : ""} - - - ${icons.contribs} - + const starAndForkCount = FlexLayout({ + items: [svgStars, svgForks], + gap: 65, + }).join(""); - ${header} + const card = new Card({ + title: header, + titlePrefixIcon: icons.contribs, + width: 400, + height, + colors: { + titleColor, + textColor, + iconColor, + bgColor, + }, + }); - ${ - isTemplate - ? getBadgeSVG("Template") - : isArchived - ? getBadgeSVG("Archived") - : "" - } + card.disableAnimations(); + card.setHideBorder(false); + card.setHideTitle(false); + card.setCSS(` + .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} } + .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; } + .badge rect { opacity: 0.2 } + `); - - ${multiLineDescription - .map((line) => `${encodeHTML(line)}`) - .join("")} - + return card.render(` + ${ + isTemplate + ? getBadgeSVG("Template") + : isArchived + ? getBadgeSVG("Archived") + : "" + } - - ${svgLanguage} + + ${multiLineDescription + .map((line) => `${encodeHTML(line)}`) + .join("")} + - - ${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")} - + + ${svgLanguage} + + + ${starAndForkCount} - - `; + + `); }; module.exports = renderRepoCard; diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index 93c39eb..1e9ef3c 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -4,8 +4,9 @@ const { FlexLayout, encodeHTML, } = require("../src/utils"); -const getStyles = require("./getStyles"); +const { getStyles } = require("./getStyles"); const icons = require("./icons"); +const Card = require("./Card"); const createTextNode = ({ icon, label, value, id, index, showIcons }) => { const kValue = kFormatter(value); @@ -52,7 +53,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { theme = "default", } = options; - const lheight = parseInt(line_height); + const lheight = parseInt(line_height, 10); // returns theme based colors with proper overrides and defaults @@ -118,52 +119,11 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { hide_rank ? 0 : 150 ); - // the better user's score the the rank will be closer to zero so - // subtracting 100 to get the progress in 100% - const progress = 100 - rank.score; - - const styles = getStyles({ - titleColor, - textColor, - iconColor, - show_icons, - progress, - }); - // Conditionally rendered elements - - const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s"; - const title = hide_title - ? "" - : `${encodeHTML(name)}'${apostrophe} GitHub Stats`; - - const border = ` - - `; - - const gradient = isGradient ? ` - - - - - - ` - : undefined const rankCircle = hide_rank ? "" - : ` + : ` @@ -179,35 +139,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { `; - if (hide_title) { - height -= 30; - } + // the better user's score the the rank will be closer to zero so + // subtracting 100 to get the progress in 100% + const progress = 100 - rank.score; + const cssStyles = getStyles({ + titleColor, + textColor, + iconColor, + show_icons, + progress, + }); - return ` - - - - ${isGradient ? gradient : ""} - ${border} - ${title} + const apostrophe = ["x", "s"].includes(name.slice(-1)) ? "" : "s"; + const card = new Card({ + title: `${encodeHTML(name)}'${apostrophe} GitHub Stats`, + width: 495, + height, + colors: { + titleColor, + textColor, + iconColor, + bgColor, + }, + }); - - ${rankCircle} + card.setHideBorder(hide_border); + card.setHideTitle(hide_title); + card.setCSS(cssStyles); - - ${FlexLayout({ - items: statItems, - gap: lheight, - direction: "column", - }).join("")} - - - - `; + return card.render(` + ${rankCircle} + + + ${FlexLayout({ + items: statItems, + gap: lheight, + direction: "column", + }).join("")} + + `); }; module.exports = renderStatsCard; diff --git a/src/renderTopLanguages.js b/src/renderTopLanguages.js index 8c1b0a9..cd85cd7 100644 --- a/src/renderTopLanguages.js +++ b/src/renderTopLanguages.js @@ -1,4 +1,5 @@ const { getCardColors, FlexLayout, clampValue } = require("../src/utils"); +const Card = require("./Card"); const createProgressNode = ({ width, color, name, progress }) => { const paddingRight = 95; @@ -63,6 +64,7 @@ const lowercaseTrim = (name) => name.toLowerCase().trim(); const renderTopLanguages = (topLangs, options = {}) => { const { hide_title, + hide_border, card_width, title_color, text_color, @@ -169,37 +171,29 @@ const renderTopLanguages = (topLangs, options = {}) => { }).join(""); } - if (hide_title) { - height -= 30; - } - const gradient = isGradient ? ` - - - - - - ` - : undefined - return ` - - - ${isGradient ? gradient : ""} - + const card = new Card({ + title: "Most Used Languages", + width, + height, + colors: { + titleColor, + textColor, + bgColor, + }, + }); - ${ - hide_title - ? "" - : `Most Used Languages` - } + card.disableAnimations(); + card.setHideBorder(hide_border); + card.setHideTitle(hide_title); + card.setCSS(` + .lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} } + `); - - ${finalLayout} - + return card.render(` + + ${finalLayout} - `; + `); }; module.exports = renderTopLanguages; diff --git a/src/utils.js b/src/utils.js index 6ee98d6..e0b0218 100644 --- a/src/utils.js +++ b/src/utils.js @@ -13,7 +13,7 @@ const renderError = (message, secondaryMessage = "") => { Something went wrong! file an issue at https://git.io/JJmN9 - ${message} + ${encodeHTML(message)} ${secondaryMessage} diff --git a/tests/card.test.js b/tests/card.test.js new file mode 100644 index 0000000..318cf56 --- /dev/null +++ b/tests/card.test.js @@ -0,0 +1,136 @@ +require("@testing-library/jest-dom"); +const cssToObject = require("css-to-object"); +const Card = require("../src/Card"); +const icons = require("../src/icons"); +const { getCardColors } = require("../src/utils"); +const { queryByTestId } = require("@testing-library/dom"); + +describe("Card", () => { + it("should hide border", () => { + const card = new Card({}); + card.setHideBorder(true); + + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( + "stroke-opacity", + "0" + ); + }); + + it("should not hide border", () => { + const card = new Card({}); + card.setHideBorder(false); + + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( + "stroke-opacity", + "1" + ); + }); + + it("should hide title", () => { + const card = new Card({}); + card.setHideTitle(true); + + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "card-title")).toBeNull(); + }); + + it("should not hide title", () => { + const card = new Card({}); + card.setHideTitle(false); + + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "card-title")).toBeInTheDocument(); + }); + + it("title should have prefix icon", () => { + const card = new Card({ title: "ok", titlePrefixIcon: icons.contribs }); + + document.body.innerHTML = card.render(``); + expect(document.getElementsByClassName("icon")[0]).toBeInTheDocument(); + }); + + it("title should not have prefix icon", () => { + const card = new Card({ title: "ok" }); + + document.body.innerHTML = card.render(``); + expect(document.getElementsByClassName("icon")[0]).toBeUndefined(); + }); + + it("should have proper height, width", () => { + const card = new Card({ height: 200, width: 200, title: "ok" }); + document.body.innerHTML = card.render(``); + expect(document.getElementsByTagName("svg")[0]).toHaveAttribute( + "height", + "200" + ); + expect(document.getElementsByTagName("svg")[0]).toHaveAttribute( + "height", + "200" + ); + }); + + it("should have less height after title is hidden", () => { + const card = new Card({ height: 200, title: "ok" }); + card.setHideTitle(true); + + document.body.innerHTML = card.render(``); + expect(document.getElementsByTagName("svg")[0]).toHaveAttribute( + "height", + "170" + ); + }); + + it("main-card-body should have proper when title is visible", () => { + const card = new Card({ height: 200 }); + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute( + "transform", + "translate(0, 55)" + ); + }); + + it("main-card-body should have proper position after title is hidden", () => { + const card = new Card({ height: 200 }); + card.setHideTitle(true); + + document.body.innerHTML = card.render(``); + expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute( + "transform", + "translate(0, 25)" + ); + }); + + it("should render with correct colors", () => { + // returns theme based colors with proper overrides and defaults + const { titleColor, textColor, iconColor, bgColor } = getCardColors({ + title_color: "f00", + icon_color: "0f0", + text_color: "00f", + bg_color: "fff", + theme: "default", + }); + + const card = new Card({ + height: 200, + colors: { + titleColor, + textColor, + iconColor, + bgColor, + }, + }); + document.body.innerHTML = card.render(``); + + const styleTag = document.querySelector("style"); + const stylesObject = cssToObject(styleTag.innerHTML); + const headerClassStyles = stylesObject[".header"]; + + expect(headerClassStyles.fill).toBe("#f00"); + expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( + "fill", + "#fff" + ); + }); +}); diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 04cdadb..983a406 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -69,20 +69,6 @@ describe("Test renderStatsCard", () => { expect(queryByTestId(document.body, "contribs")).toBeNull(); }); - it("should hide_border", () => { - document.body.innerHTML = renderStatsCard(stats, { hide_border: true }); - expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( - "stroke-opacity", - "0" - ); - - document.body.innerHTML = renderStatsCard(stats, { hide_border: false }); - expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( - "stroke-opacity", - "1" - ); - }); - it("should hide_rank", () => { document.body.innerHTML = renderStatsCard(stats, { hide_rank: true }); @@ -202,35 +188,6 @@ describe("Test renderStatsCard", () => { ); }); - it("should hide the title", () => { - document.body.innerHTML = renderStatsCard(stats, { - hide_title: true, - }); - - expect(document.getElementsByClassName("header")[0]).toBeUndefined(); - expect(document.getElementsByTagName("svg")[0]).toHaveAttribute( - "height", - "165" - ); - expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute( - "transform", - "translate(0, -30)" - ); - }); - - it("should not hide the title", () => { - document.body.innerHTML = renderStatsCard(stats, {}); - - expect(document.getElementsByClassName("header")[0]).toBeDefined(); - expect(document.getElementsByTagName("svg")[0]).toHaveAttribute( - "height", - "195" - ); - expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute( - "transform", - "translate(0, 0)" - ); - }); it("should render icons correctly", () => { document.body.innerHTML = renderStatsCard(stats, { diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js index a6f94a8..9996038 100644 --- a/tests/renderTopLanguages.test.js +++ b/tests/renderTopLanguages.test.js @@ -98,25 +98,6 @@ describe("Test renderTopLanguages", () => { expect(document.querySelector("svg")).toHaveAttribute("height", "245"); }); - it("should hide_title", () => { - document.body.innerHTML = renderTopLanguages(langs, { hide_title: false }); - expect(document.querySelector("svg")).toHaveAttribute("height", "205"); - expect(queryByTestId(document.body, "lang-items")).toHaveAttribute( - "y", - "55" - ); - - // Lets hide now - document.body.innerHTML = renderTopLanguages(langs, { hide_title: true }); - expect(document.querySelector("svg")).toHaveAttribute("height", "175"); - - expect(queryByTestId(document.body, "header")).not.toBeInTheDocument(); - expect(queryByTestId(document.body, "lang-items")).toHaveAttribute( - "y", - "25" - ); - }); - it("should render with custom width set", () => { document.body.innerHTML = renderTopLanguages(langs, {});