diff --git a/README.md b/README.md index 84138fe..de4394a 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,12 @@

github-card 🌈

Beautiful embeddable GitHub profile card for your portfolio.
- Here is a live codepen Demo

+ https://rocktimsaikia.github.io/github-card/

CI npm version

-

+

@@ -61,6 +61,18 @@ Or skip the install and load it straight from a CDN in an HTML file: ``` +## Customization + +Override the accent color with the `--gh-accent` CSS custom property on the element: + +```css +github-card { + --gh-accent: #6366f1; +} +``` + +The card also surfaces `location`, `company`, and `website` from the GitHub profile when present. + ## License 2026 © MIT [Rocktim Saikia](https://rocktimcodes.site) diff --git a/examples/index.html b/examples/index.html index 552e7ed..a3d7103 100644 --- a/examples/index.html +++ b/examples/index.html @@ -2,31 +2,108 @@ - Github-card - - + figcaption code { + display: inline-block; + margin: 2px; + padding: 3px 8px; + border-radius: 6px; + background: #eaeef2; + font-size: 12px; + color: #1f2328; + } + + -
- - - +

github-card

+

+ Each example below shows the exact attributes the card is using. +

+ +
+
+ +
+ Default · light theme + data-user="rocktimsaikia" +
+
+ +
+ +
+ Dark theme + data-theme="dark" +
+
+ +
+ +
+ Custom accent + style="--gh-accent: #6366f1" +
+
+ +
+ +
+ Dark + custom accent + data-theme="dark" + --gh-accent: #22c55e +
+
+ - diff --git a/src/index.js b/src/index.js index b2dd242..26694a1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,15 @@ import escapeHtml from './escape.js'; import nFormatter from './format.js'; import widgetStyle from './style.js'; +import safeUrl from './url.js'; + +// Inline monochrome icons (Material Symbols) for the profile meta row. +const ICON_LOCATION = + ''; +const ICON_COMPANY = + ''; +const ICON_LINK = + ''; const template = document.createElement('template'); @@ -60,35 +69,61 @@ class myCard extends HTMLElement { const login = escapeHtml(user.login); const htmlUrl = escapeHtml(user.html_url); const name = escapeHtml(user.name); - const bio = escapeHtml(user.bio ?? ''); + const bioHtml = user.bio + ? `

${escapeHtml(user.bio)}

` + : ''; + + const meta = []; + if (user.location) { + meta.push( + `${ICON_LOCATION}${escapeHtml(user.location)}`, + ); + } + if (user.company) { + meta.push( + `${ICON_COMPANY}${escapeHtml(user.company)}`, + ); + } + const blog = safeUrl(user.blog); + if (blog) { + const label = escapeHtml(String(user.blog).replace(/^https?:\/\//i, '')); + meta.push( + `${ICON_LINK}${label}`, + ); + } + const metaHtml = meta.length + ? `
${meta.join('')}
` + : ''; + return ` -
-
- -
-
${name}
-

${name}

-
@${login}
-

${bio}

-
-
-
-
${nFormatter(user.followers)}
-
Followers
-
-
-
${nFormatter(user.following)}
-
Following
-
-
-
${nFormatter(user.public_repos)}
-
Repositories
-
-
-
-
-
- `; +
+
+ +
+
${name}
+

${name}

+
@${login}
+ ${bioHtml} + ${metaHtml} +
+
+
+
${nFormatter(user.followers)}
+
Followers
+
+
+
${nFormatter(user.following)}
+
Following
+
+
+
${nFormatter(user.public_repos)}
+
Repos
+
+
+
+
+
+ `; } } diff --git a/src/style.js b/src/style.js index f9ef03e..886dd47 100644 --- a/src/style.js +++ b/src/style.js @@ -1,133 +1,176 @@ const widgetStyle = ` -h1, div, p { - margin: 0px; - padding: 0px; - font-family: 'system-ui' -} -a{ - text-decoration: none; - color: inherit; -} -#github-logo{ - height: 20px; - position: absolute; - top: 10px; - right: 10px; -} -.cover{ - height: 120px; - width: 100%; - background: #FF5C5C; - position: absolute; - left: 0px; - top: 0px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; +*, *::before, *::after { + box-sizing: border-box; } .card { - position: relative; - display: inline-block; - background: #ffffff; - border-radius: 5px; - box-shadow: 0 12px 13px rgba(0,0,0,0.16), 0 12px 13px rgba(0,0,0,0.16); - text-align: center; - padding: 20px 50px; - margin: 5px; - padding-top: 5px; - transition: all 0.5s; + --accent: var(--gh-accent, #ff5c5c); + --bg: #ffffff; + --surface: #f6f8fa; + --title: #1f2328; + --text: #57606a; + --muted: #8b949e; + --border: rgba(31, 35, 40, 0.1); + --shadow: 0 1px 3px rgba(31, 35, 40, 0.08), 0 12px 28px rgba(31, 35, 40, 0.12); + + position: relative; + display: inline-block; + width: 320px; + padding: 0 28px 20px; + background: var(--bg); + border-radius: 16px; + box-shadow: var(--shadow); + text-align: center; + overflow: hidden; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: translateY(-3px); + box-shadow: 0 2px 6px rgba(31, 35, 40, 0.1), 0 20px 44px rgba(31, 35, 40, 0.18); +} + +/* Dark theme just remaps the palette variables — no !important overrides. */ +.card.dark { + --bg: #16181d; + --surface: #1f242c; + --title: #e6edf3; + --text: #adbac7; + --muted: #768390; + --border: rgba(255, 255, 255, 0.1); + --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 16px 36px rgba(0, 0, 0, 0.55); +} + +a { + text-decoration: none; + color: inherit; +} + +.cover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 96px; + background: var(--accent); +} + +#github-logo { + position: absolute; + top: 14px; + right: 14px; + height: 22px; + opacity: 0.85; + transition: opacity 0.2s ease; +} +#github-logo:hover { + opacity: 1; +} + +.card-img-wrapper { + position: relative; + width: 104px; + height: 104px; + margin: 44px auto 8px; +} +.card-img-wrapper img { + width: 100%; + height: 100%; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--bg); + background: var(--bg); +} + +h1 { + font-size: 21px; + line-height: 1.2; } -/* Dark Theme */ -.card.dark{ - background: #1C1D21; -} -.dark .card-title{ - color: #E4E4E4 !important; - font-weight: 500 !important; -} -.dark .card-desc{ - font-weight: 400 !important; - color: #c6c6c6 !important; -} -.dark .count{ - color: #c6c6c6 !important; - font-weight: 600 !important; -} -.dark .box-text{ - color: #797979 !important; - font-weight: 500 !important; -} -.dark .footer-box{ - background: #1D2025 !important; - box-shadow: 0px 0.2px 5px rgba(255, 255, 255, 0.15), 0px 4px 10px rgba(0, 0, 0, 0.25) !important; +.card-title { + display: inline-block; + color: var(--title); + font-size: 21px; + font-weight: 700; + letter-spacing: -0.01em; } +.card-responsename { + margin-top: 2px; + color: var(--muted); + font-size: 14px; +} +.card-desc { + margin: 12px auto 0; + max-width: 250px; + color: var(--text); + font-size: 13.5px; + line-height: 1.5; +} + +.card-meta { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: 4px 14px; + margin-top: 12px; +} +.meta-item { + display: inline-flex; + align-items: center; + gap: 5px; + max-width: 100%; + color: var(--muted); + font-size: 12.5px; + line-height: 1.4; +} +.meta-item svg { + flex-shrink: 0; + width: 14px; + height: 14px; + opacity: 0.8; +} +.meta-link { + transition: color 0.2s ease; +} +.meta-link:hover { + color: var(--accent); +} -.card .fa-github { - position: absolute; - color: #646464; - font-size: 20px; - top: 10px; - right: 10px; -} -.card .card-title { - color: #434343; - margin-bottom: -8px; - font-size: 25px; - font-weight: 600; -} -.card .card-responsename { - margin-bottom: 20px; - color: #797979; -} -.card .card-desc { - font-weight: 500; - width: 250px; - margin: auto; - display: block; - color: #3c3c3c; -} -.card .card-img-wrapper { - position: relative; - height: 160px; - width: 160px; - margin: 10px auto; - margin-bottom: 20px; -} -.card .card-img-wrapper img { - height: 100%; - width: 100%; - border-radius: 50%; -} -.card .card-footer { - margin-top: 40px; -} -.card .card-footer .footer-box { - position: relative; - border-top: 2px solid #ff9b9b; - box-shadow: 0 3px 6px -1px rgb(0 0 0 / 26%), 0 2px 4px -1px rgb(0 0 0 / 6%); - border-radius: 5px; - margin: 0 auto; - padding: 10px; - display: flex; - justify-content: space-around; -} -.card .card-footer .footer-box .box-wrapper { - position: relative; -} -.card .card-footer .footer-box .box-wrapper .count { - font-family: 'consolas'; - color: #434343; - font-size: 20px; - font-weight: 600; -} -.card .card-footer .footer-box .box-wrapper .box-text { - font-size: 12px; - font-weight: 600; - color: #00000085; - letter-spacing: 0.5px; +.card-footer { + margin-top: 20px; +} +.footer-box { + display: flex; + justify-content: space-around; + align-items: center; + padding: 13px 6px; + border: 1px solid var(--border); + border-top: 2px solid var(--accent); + border-radius: 12px; + background: var(--surface); +} +.box-wrapper { + flex: 1; +} +.count { + color: var(--title); + font-size: 18px; + font-weight: 700; + font-variant-numeric: tabular-nums; + line-height: 1.2; +} +.box-text { + margin-top: 3px; + color: var(--muted); + font-size: 10.5px; + font-weight: 600; + letter-spacing: 0.4px; + text-transform: uppercase; } `; diff --git a/src/url.js b/src/url.js new file mode 100644 index 0000000..e793bac --- /dev/null +++ b/src/url.js @@ -0,0 +1,12 @@ +// Sanitize a user-supplied URL (e.g. a GitHub profile's `blog` field) before +// using it in an href: allow only http(s), assume https when no scheme is given, +// and reject anything else (javascript:, data:, …) to avoid script injection. +function safeUrl(value) { + if (!value) return ''; + const url = String(value).trim(); + if (/^https?:\/\//i.test(url)) return url; + if (/^[a-z][a-z\d+.-]*:/i.test(url)) return ''; // some other scheme → reject + return `https://${url}`; +} + +export default safeUrl;