From 0182fc25ea844e33c9dc7e92102b5a42d7760783 Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Thu, 13 Oct 2022 20:23:01 +0530 Subject: [PATCH 1/9] add: text animation --- api/top-langs.js | 2 ++ src/cards/top-languages-card.js | 40 +++++++++++++++++++++++---------- vercel.json | 2 +- 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/api/top-langs.js b/api/top-langs.js index a6a9d286d253e..e445c41a591d8 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -32,6 +32,7 @@ export default async (req, res) => { locale, border_radius, border_color, + disable_animations, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -73,6 +74,7 @@ export default async (req, res) => { border_radius, border_color, locale: locale ? locale.toLowerCase() : null, + disable_animations: parseBoolean(disable_animations), }), ); } catch (err) { diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 602d1b811b5df..f4e6afd651c8b 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -10,6 +10,7 @@ import { lowercaseTrim, measureText, } from "../common/utils.js"; +import { getStyles } from "../getStyles.js"; import { langCardLocales } from "../translations.js"; const DEFAULT_CARD_WIDTH = 300; @@ -39,21 +40,25 @@ const getLongestLang = (arr) => * Creates a node to display usage of a programming language in percentage * using text and a horizontal progress bar. * - * @param {object[]} props Function properties. + * @param {object} props Function properties. * @param {number} props.width The card width * @param {string} props.name Name of the programming language. * @param {string} props.color Color of the programming language. * @param {string} props.progress Usage of the programming language in percentage. + * @param {number} props.index Index of the programming language. * @returns {string} Programming language SVG node. */ -const createProgressTextNode = ({ width, color, name, progress }) => { +const createProgressTextNode = ({ width, color, name, progress, index }) => { + const staggerDelay = (index + 3) * 150; const paddingRight = 95; const progressTextX = width - paddingRight + 10; const progressWidth = width - paddingRight; return ` - ${name} - ${progress}% + + ${name} + ${progress}% + ${createProgressNode({ x: 0, y: 25, @@ -68,17 +73,19 @@ const createProgressTextNode = ({ width, color, name, progress }) => { /** * Creates a text only node to display usage of a programming language in percentage. * - * @param {object[]} props Function properties. + * @param {object} props Function properties. * @param {Lang} props.lang Programming language object. * @param {number} props.totalSize Total size of all languages. + * @param {number} props.index Index of the programming language. * @returns {string} Compact layout programming language SVG node. */ -const createCompactLangNode = ({ lang, totalSize }) => { +const createCompactLangNode = ({ lang, totalSize, index }) => { const percentage = ((lang.size / totalSize) * 100).toFixed(2); + const staggerDelay = (index + 3) * 150; const color = lang.color || "#858585"; return ` - + ${lang.name} ${percentage}% @@ -104,7 +111,6 @@ const createLanguageTextNode = ({ langs, totalSize }) => { createCompactLangNode({ lang, totalSize, - // @ts-ignore index, }), ); @@ -134,12 +140,13 @@ const createLanguageTextNode = ({ langs, totalSize }) => { */ const renderNormalLayout = (langs, width, totalLanguageSize) => { return flexLayout({ - items: langs.map((lang) => { + items: langs.map((lang,index) => { return createProgressTextNode({ - width: width, + width, name: lang.name, color: lang.color || DEFAULT_LANG_COLOR, progress: ((lang.size / totalLanguageSize) * 100).toFixed(2), + index, }); }), gap: 40, @@ -276,6 +283,7 @@ const renderTopLanguages = (topLangs, options = {}) => { langs_count = DEFAULT_LANGS_COUNT, border_radius, border_color, + disable_animations, } = options; const i18n = new I18n({ @@ -324,11 +332,19 @@ const renderTopLanguages = (topLangs, options = {}) => { colors, }); - card.disableAnimations(); + if (disable_animations) card.disableAnimations(); + card.setHideBorder(hide_border); card.setHideTitle(hide_title); card.setCSS( - `.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }`, + `.lang-name { + font: 400 11px "Segoe UI", Ubuntu, Sans-Serif; + fill: ${colors.textColor}; + } + .stagger { + opacity: 0; + animation: fadeInAnimation 0.3s ease-in-out forwards; + }`, ); return card.render(` diff --git a/vercel.json b/vercel.json index aee61ce054fd0..ddf82eb15666f 100644 --- a/vercel.json +++ b/vercel.json @@ -2,7 +2,7 @@ "functions": { "api/*.js": { "memory": 128, - "maxDuration": 30 + "maxDuration": 10 } }, "redirects": [ From d454bdd8a260959174a235730df13b9543e9e772 Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Thu, 13 Oct 2022 22:19:09 +0530 Subject: [PATCH 2/9] compact progress done --- src/cards/top-languages-card.js | 2 +- src/getStyles.js | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index f4e6afd651c8b..dd633ab363cd4 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -194,7 +194,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => { return ` - + ${compactProgressBar} diff --git a/src/getStyles.js b/src/getStyles.js index 79692e8579035..d6c8b63c326b0 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -59,6 +59,14 @@ const getAnimations = () => { opacity: 1; } } + @keyframes slideInAnimation { + from { + width: 0; + } + to { + width: calc(100%-100px); + } + } `; }; From cc7abc31466a4aecc9acde3115b54a6bcc7e5fce Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 11:42:42 +0530 Subject: [PATCH 3/9] cleaned code --- src/cards/top-languages-card.js | 19 ++++++++++++++++--- src/getStyles.js | 8 -------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index dd633ab363cd4..4da0e4e12c610 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -194,7 +194,7 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => { return ` - + ${compactProgressBar} @@ -337,14 +337,27 @@ const renderTopLanguages = (topLangs, options = {}) => { card.setHideBorder(hide_border); card.setHideTitle(hide_title); card.setCSS( - `.lang-name { + ` + @keyframes slideInAnimation { + from { + width: 0; + } + to { + width: calc(100%-100px); + } + } + .lang-name { font: 400 11px "Segoe UI", Ubuntu, Sans-Serif; fill: ${colors.textColor}; } .stagger { opacity: 0; animation: fadeInAnimation 0.3s ease-in-out forwards; - }`, + } + #rect-mask rect{ + animation: slideInAnimation 1s ease-in-out forwards; + } + `, ); return card.render(` diff --git a/src/getStyles.js b/src/getStyles.js index d6c8b63c326b0..79692e8579035 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -59,14 +59,6 @@ const getAnimations = () => { opacity: 1; } } - @keyframes slideInAnimation { - from { - width: 0; - } - to { - width: calc(100%-100px); - } - } `; }; From 5340d42017614b3ae89efcf729b1dd69e628968d Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 11:59:25 +0530 Subject: [PATCH 4/9] non compact animation done --- src/cards/top-languages-card.js | 28 ++++++++++++++++++++-------- src/common/createProgressNode.js | 21 +++++++++++++-------- 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 4da0e4e12c610..a098b78c7dc25 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -58,15 +58,16 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => { ${name} ${progress}% + ${createProgressNode({ + x: 0, + y: 25, + color, + width: progressWidth, + progress, + progressBarBackgroundColor: "#ddd", + delay: (staggerDelay+300), + })} - ${createProgressNode({ - x: 0, - y: 25, - color, - width: progressWidth, - progress, - progressBarBackgroundColor: "#ddd", - })} `; }; @@ -346,6 +347,14 @@ const renderTopLanguages = (topLangs, options = {}) => { width: calc(100%-100px); } } + @keyframes growWidthAnimation { + from { + width: 0; + } + to { + width: 100%; + } + } .lang-name { font: 400 11px "Segoe UI", Ubuntu, Sans-Serif; fill: ${colors.textColor}; @@ -357,6 +366,9 @@ const renderTopLanguages = (topLangs, options = {}) => { #rect-mask rect{ animation: slideInAnimation 1s ease-in-out forwards; } + .lang-progress{ + animation: growWidthAnimation 0.6s ease-in-out forwards; + } `, ); diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js index c36818b193b2f..ed73b29b5346b 100644 --- a/src/common/createProgressNode.js +++ b/src/common/createProgressNode.js @@ -10,6 +10,7 @@ import { clampValue } from "./utils.js"; * @param {string} createProgressNodeParams.color Progress color. * @param {string} createProgressNodeParams.progress Progress value. * @param {string} createProgressNodeParams.progressBarBackgroundColor Progress bar bg color. + * @param {number} createProgressNodeParams.delay Delay before animation starts. * @returns {string} Progress node. */ const createProgressNode = ({ @@ -19,20 +20,24 @@ const createProgressNode = ({ color, progress, progressBarBackgroundColor, + delay, }) => { const progressPercentage = clampValue(progress, 2, 100); return ` - - + + + + `; }; From e894b7c67fa5b9651f0c39af451e375caec8a82b Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 12:13:05 +0530 Subject: [PATCH 5/9] tests fixed + prettier --- src/cards/top-languages-card.js | 4 ++-- src/common/createProgressNode.js | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index a098b78c7dc25..1c72a693bc252 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -65,7 +65,7 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => { width: progressWidth, progress, progressBarBackgroundColor: "#ddd", - delay: (staggerDelay+300), + delay: staggerDelay + 300, })} `; @@ -141,7 +141,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => { */ const renderNormalLayout = (langs, width, totalLanguageSize) => { return flexLayout({ - items: langs.map((lang,index) => { + items: langs.map((lang, index) => { return createProgressTextNode({ width, name: lang.name, diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js index ed73b29b5346b..177b72e48aa83 100644 --- a/src/common/createProgressNode.js +++ b/src/common/createProgressNode.js @@ -27,12 +27,11 @@ const createProgressNode = ({ return ` - + From 80410e555d2c8816c47d9edfe132ddca722c736c Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 12:14:49 +0530 Subject: [PATCH 6/9] revert: vercel.json --- vercel.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vercel.json b/vercel.json index ddf82eb15666f..aee61ce054fd0 100644 --- a/vercel.json +++ b/vercel.json @@ -2,7 +2,7 @@ "functions": { "api/*.js": { "memory": 128, - "maxDuration": 10 + "maxDuration": 30 } }, "redirects": [ From e99778afa4c8baac26ecc138f5439cee95b70c44 Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 12:16:08 +0530 Subject: [PATCH 7/9] remove: unnecessary import --- src/cards/top-languages-card.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 1c72a693bc252..9396ff8e73d5e 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -10,7 +10,6 @@ import { lowercaseTrim, measureText, } from "../common/utils.js"; -import { getStyles } from "../getStyles.js"; import { langCardLocales } from "../translations.js"; const DEFAULT_CARD_WIDTH = 300; From 6e0105030c63ea3feb844c24d751f4bb93e58d93 Mon Sep 17 00:00:00 2001 From: RedHeadphone Date: Sat, 15 Oct 2022 12:20:59 +0530 Subject: [PATCH 8/9] added parameter in docs --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 9c773ff84707c..39d0174372cc2 100644 --- a/readme.md +++ b/readme.md @@ -213,6 +213,7 @@ You can provide multiple comma-separated values in the bg_color option to render - `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`. - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`. - `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`. +- `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`. > **Warning** > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) From e51d6c9af1c2ba0e86f5c359fb09dd94b614670e Mon Sep 17 00:00:00 2001 From: rickstaa Date: Sat, 15 Oct 2022 23:07:41 +0200 Subject: [PATCH 9/9] style: improve syntax --- src/cards/types.d.ts | 1 + src/common/createProgressNode.js | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index 502314c41fa92..c5945d48be71e 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -37,6 +37,7 @@ export type TopLangOptions = CommonOptions & { layout: "compact" | "normal"; custom_title: string; langs_count: number; + disable_animations: boolean; }; type WakaTimeOptions = CommonOptions & { diff --git a/src/common/createProgressNode.js b/src/common/createProgressNode.js index 177b72e48aa83..2825583c7406a 100644 --- a/src/common/createProgressNode.js +++ b/src/common/createProgressNode.js @@ -34,8 +34,7 @@ const createProgressNode = ({ rx="5" ry="5" x="0" y="0" class="lang-progress" style="animation-delay: ${delay}ms;" - > - + /> `;