Compare commits

..
Author SHA1 Message Date
Zohan Subhash c151822839 Revert "add holi_theme (#2539)"
This reverts commit 5f20e6c97a.
2023-02-25 13:44:47 +05:30
Oleksandr PerlovandZohan Subhash a6ff0fa521 Add one_dark_pro (#2507)
This colors were taken from One Dark Pro theme in VSCode extention. Please add it and I will use it in my profile

Co-authored-by: Zohan Subhash <zohan.subhash@gmail.com>
2023-02-25 12:20:00 +05:30
Mohamed Hassan 5f20e6c97a add holi_theme (#2539)
* add holi_theme

* add holi_theme
2023-02-25 12:19:30 +05:30
4 changed files with 83 additions and 108 deletions
+35 -51
View File
@@ -87,6 +87,16 @@ const iconWithLabel = (icon, label, testid) => {
* @returns {string} Repository card SVG object.
*/
const renderRepoCard = (repo, options = {}) => {
const {
name,
nameWithOwner,
description,
primaryLanguage,
isArchived,
isTemplate,
starCount,
forkCount,
} = repo;
const {
hide_border = false,
title_color,
@@ -99,42 +109,6 @@ const renderRepoCard = (repo, options = {}) => {
border_color,
locale,
} = options;
const i18n = new I18n({
locale,
translations: repoCardLocales,
});
const colors = getCardColors({
title_color,
icon_color,
text_color,
bg_color,
border_color,
theme,
});
const {
name,
nameWithOwner,
description,
primaryLanguage,
isArchived,
isTemplate,
starCount,
forkCount,
} = repo;
const highlight = repo.highlight
? // @ts-ignore
getBadgeSVG(repo.highlight, colors.textColor)
: isTemplate
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
: isArchived
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
: ""
const lineHeight = 10;
const header = show_owner ? nameWithOwner : name;
@@ -151,25 +125,27 @@ const renderRepoCard = (repo, options = {}) => {
const height =
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
const i18n = new I18n({
locale,
translations: repoCardLocales,
});
// returns theme based colors with proper overrides and defaults
const colors = getCardColors({
title_color,
icon_color,
text_color,
bg_color,
border_color,
theme,
});
const svgLanguage = primaryLanguage
? createLanguageNode(langName, langColor)
: "";
let totalStars
let totalForks
if (isNaN(starCount)) {
totalStars = starCount;
} else {
totalStars = kFormatter(starCount);
}
if (isNaN(forkCount)) {
totalForks = forkCount;
} else {
totalForks = kFormatter(forkCount);
}
const totalStars = kFormatter(starCount);
const totalForks = kFormatter(forkCount);
const svgStars = iconWithLabel(icons.star, totalStars, "stargazers");
const svgForks = iconWithLabel(icons.fork, totalForks, "forkcount");
@@ -204,7 +180,15 @@ const renderRepoCard = (repo, options = {}) => {
`);
return card.render(`
${highlight}
${
isTemplate
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
: isArchived
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
: ""
}
<text class="description" x="25" y="-5">
${descriptionSvg}
+32 -44
View File
@@ -40,12 +40,7 @@ const createTextNode = ({
shiftValuePos,
bold,
}) => {
let kValue
if (isNaN(value)) {
kValue = value;
} else {
kValue = kFormatter(value);
}
const kValue = kFormatter(value);
const staggerDelay = (index + 3) * 150;
const labelOffset = showIcons ? `x="25"` : "";
@@ -80,6 +75,15 @@ const createTextNode = ({
* @returns {string} The stats card SVG object.
*/
const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const {
name,
totalStars,
totalCommits,
totalIssues,
totalPRs,
contributedTo,
rank,
} = stats;
const {
hide = [],
show_icons = false,
@@ -102,37 +106,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
locale,
disable_animations = false,
} = options;
const name = stats.name || "GitHub User"
const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
? ""
: "s";
const i18n = new I18n({
locale,
translations: statCardLocales({ name, apostrophe }),
});
const {
totalStars = "2018",
totalCommits = "29019",
totalIssues = "203",
totalPRs = "127",
contributedTo = "232",
rank = {
level: "S",
score: 10
},
starsTitle = i18n.t("statcard.totalstars"),
commitsTitle = `${i18n.t("statcard.commits")}${
include_all_commits ? "" : ` (${new Date().getFullYear()})`
}`,
issuesTitle = i18n.t("statcard.issues"),
PRsTitle = i18n.t("statcard.prs"),
contribsTitle = i18n.t("statcard.contribs") + " (last year)",
title = i18n.t("statcard.title"),
} = stats;
const lheight = parseInt(String(line_height), 10);
@@ -148,35 +121,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
theme,
});
const apostrophe = ["x", "s"].includes(name.slice(-1).toLocaleLowerCase())
? ""
: "s";
const i18n = new I18n({
locale,
translations: statCardLocales({ name, apostrophe }),
});
// Meta data for creating text nodes with createTextNode function
const STATS = {
stars: {
icon: icons.star,
label: starsTitle,
label: i18n.t("statcard.totalstars"),
value: totalStars,
id: "stars",
},
commits: {
icon: icons.commits,
label: commitsTitle,
label: `${i18n.t("statcard.commits")}${
include_all_commits ? "" : ` (${new Date().getFullYear()})`
}`,
value: totalCommits,
id: "commits",
},
prs: {
icon: icons.prs,
label: PRsTitle,
label: i18n.t("statcard.prs"),
value: totalPRs,
id: "prs",
},
issues: {
icon: icons.issues,
label: issuesTitle,
label: i18n.t("statcard.issues"),
value: totalIssues,
id: "issues",
},
contribs: {
icon: icons.contribs,
label: contribsTitle,
label: i18n.t("statcard.contribs") + " (last year)",
value: contributedTo,
id: "contribs",
},
@@ -232,7 +215,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
});
const calculateTextWidth = () => {
return measureText(custom_title ? custom_title : title);
return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
};
/*
@@ -258,7 +241,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const card = new Card({
customTitle: custom_title,
defaultTitle: title,
defaultTitle: i18n.t("statcard.title"),
width,
height,
border_radius,
@@ -323,6 +306,11 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const labels = Object.keys(STATS)
.filter((key) => !hide.includes(key))
.map((key) => {
if (key === "commits") {
return `${i18n.t("statcard.commits")} ${
include_all_commits ? "" : `in ${new Date().getFullYear()}`
} : ${totalStars}`;
}
return `${STATS[key].label}: ${STATS[key].value}`;
})
.join(", ");
+10 -13
View File
@@ -47,7 +47,6 @@ const getLongestLang = (arr) =>
* @param {number} props.index Index of the programming language.
* @returns {string} Programming language SVG node.
*/
const createProgressTextNode = ({ width, color, name, progress, index }) => {
const staggerDelay = (index + 3) * 150;
const paddingRight = 95;
@@ -57,7 +56,7 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
return `
<g class="stagger" style="animation-delay: ${staggerDelay}ms">
<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
<text x="${progressTextX}" y="34" class="lang-name">${text || `${progress}%`}</text>
<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
${createProgressNode({
x: 0,
y: 25,
@@ -90,7 +89,7 @@ const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
<g class="stagger" style="animation-delay: ${staggerDelay}ms">
<circle cx="5" cy="6" r="5" fill="${color}" />
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
${lang.name} ${hideProgress ? "" : (lang.text || `${percentage}%`)}
${lang.name} ${hideProgress ? "" : percentage + "%"}
</text>
</g>
`;
@@ -127,7 +126,7 @@ const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
const percent = ((longestLang.size / totalSize) * 100).toFixed(2);
const minGap = 150;
const maxGap = 20 + measureText(`${longestLang.name} ${longestLang.text || `${percent}%`}`, 11);
const maxGap = 20 + measureText(`${longestLang.name} ${percent}%`, 11);
return flexLayout({
items: layouts,
gap: maxGap < minGap ? minGap : maxGap,
@@ -150,7 +149,6 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
name: lang.name,
color: lang.color || DEFAULT_LANG_COLOR,
progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
text: lang.text,
index,
});
}),
@@ -280,12 +278,6 @@ const useLanguages = (topLangs, hide, langs_count) => {
* @returns {string} Language card SVG object.
*/
const renderTopLanguages = (topLangs, options = {}) => {
const locale = options.locale
const i18n = new I18n({
locale,
translations: langCardLocales,
});
const {
hide_title = false,
hide_border,
@@ -298,13 +290,18 @@ const renderTopLanguages = (topLangs, options = {}) => {
theme,
layout,
custom_title,
locale,
langs_count = DEFAULT_LANGS_COUNT,
border_radius,
border_color,
title = i18n.t("langcard.title"),
disable_animations,
} = options;
const i18n = new I18n({
locale,
translations: langCardLocales,
});
const { langs, totalLanguageSize } = useLanguages(
topLangs,
hide,
@@ -345,7 +342,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
const card = new Card({
customTitle: custom_title,
defaultTitle: title,
defaultTitle: i18n.t("langcard.title"),
width,
height,
border_radius,
+6
View File
@@ -374,6 +374,12 @@ export const themes = {
border_color: "170F0C",
bg_color: "170F0C",
},
one_dark_pro: {
title_color: "61AFEF",
text_color: "E5C06E",
icon_color: "C678DD",
border_color: "3B4048",
bg_color: "23272E",
rose: {
title_color: "8d192b",
text_color: "862931",