Merge pull request #64 from anuraghazra/fix-nolang

fix: fixed repo card breaking in absence of primaryLanguage
This commit is contained in:
Anurag Hazra 2020-07-15 19:39:40 +05:30 committed by GitHub
commit 989079e4fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 21 deletions

View File

@ -1,23 +1,24 @@
const { kFormatter, encodeHTML, isValidHexColor } = require("../src/utils"); const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils");
const renderRepoCard = (repo, options = {}) => { const renderRepoCard = (repo, options = {}) => {
const { name, description, primaryLanguage, stargazers, forkCount } = repo; const { name, description, primaryLanguage, stargazers, forkCount } = repo;
const { title_color, icon_color, text_color, bg_color } = options; const { title_color, icon_color, text_color, bg_color } = options;
const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
const langColor = primaryLanguage ? primaryLanguage.color : "#333";
const height = 120; const height = 120;
const shiftText = primaryLanguage.name.length > 15 ? 0 : 30; const shiftText = langName.length > 15 ? 0 : 30;
let desc = description || "No description provided"; let desc = description || "No description provided";
if (desc.length > 55) { if (desc.length > 55) {
desc = `${description.slice(0, 55)}..`; desc = `${description.slice(0, 55)}..`;
} }
const titleColor = const titleColor = fallbackColor(title_color, "#2f80ed");
(isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed"; const iconColor = fallbackColor(icon_color, "#586069");
const iconColor = const textColor = fallbackColor(text_color, "#333");
(isValidHexColor(icon_color) && `#${icon_color}`) || "#586069"; const bgColor = fallbackColor(bg_color, "#FFFEFE");
const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
const totalStars = kFormatter(stargazers.totalCount); const totalStars = kFormatter(stargazers.totalCount);
const totalForks = kFormatter(forkCount); const totalForks = kFormatter(forkCount);
@ -38,12 +39,8 @@ const renderRepoCard = (repo, options = {}) => {
<text class="description" x="25" y="70">${encodeHTML(desc)}</text> <text class="description" x="25" y="70">${encodeHTML(desc)}</text>
<g transform="translate(30, 100)"> <g transform="translate(30, 100)">
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${ <circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
primaryLanguage.color <text data-testid="lang" class="gray" x="15">${langName}</text>
}" />
<text data-testid="lang" class="gray" x="15">${
primaryLanguage.name
}</text>
</g> </g>
<g transform="translate(${155 - shiftText}, 100)"> <g transform="translate(${155 - shiftText}, 100)">

View File

@ -1,4 +1,4 @@
const { kFormatter, isValidHexColor } = require("../src/utils"); const { kFormatter, fallbackColor } = require("../src/utils");
const getStyles = require("./getStyles"); const getStyles = require("./getStyles");
const createTextNode = ({ icon, label, value, id, index, lineHeight }) => { const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
@ -43,12 +43,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const lheight = parseInt(line_height); const lheight = parseInt(line_height);
const titleColor = const titleColor = fallbackColor(title_color, "#2f80ed");
(isValidHexColor(title_color) && `#${title_color}`) || "#2f80ed"; const iconColor = fallbackColor(icon_color, "#4c71f2");
const iconColor = const textColor = fallbackColor(text_color, "#333");
(isValidHexColor(icon_color) && `#${icon_color}`) || "#4c71f2"; const bgColor = fallbackColor(bg_color, "#FFFEFE");
const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
const STATS = { const STATS = {
stars: { stars: {

View File

@ -43,6 +43,10 @@ function parseBoolean(value) {
} }
} }
function fallbackColor(color, fallbackColor) {
return (isValidHexColor(color) && `#${color}`) || fallbackColor;
}
function request(data, headers) { function request(data, headers) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
axios({ axios({
@ -65,4 +69,5 @@ module.exports = {
isValidHexColor, isValidHexColor,
request, request,
parseBoolean, parseBoolean,
fallbackColor,
}; };