Skip to content

Added option to show upvotes and answers as well. #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added option to show upvotes and answers as well. #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1c9578
Added option to show upvotes and answers as well.
kashifo Dec 2, 2024
9c9e652
Updated vercel.json to run on latest versions of Vercel
kashifo Dec 2, 2024
832ac0c
Updated Readme to link to my Vercel instance
kashifo Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 17 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<br>

<p align="center">
<img width="120px" src="https://raw.githubusercontent.com/omidnikrah/github-readme-stackoverflow/master/stackoverflow.svg" />
<img width="120px" src="https://raw.githubusercontent.com/kashifo/github-readme-stackoverflow/master/stackoverflow.svg" />
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please revert all the usernames and userIDs to what is in the README file.

<h2 align="center">GitHub Readme StackOverflow</h2>
<p align="center">Show your StackOverflow profile status on your READMEs!</p>
</p>
Expand All @@ -15,18 +15,26 @@ Copy paste following markdown into your markdown content, and that's it. Easy Ea
Change the `?userID=` value to your StackOverflow's userID.

```md
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209)](https://stackoverflow.com/users/4034209/kashif-anwaar
```

[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042)](https://stackoverflow.com/users/6558042/omid-nikrah)
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&theme=dark)](https://stackoverflow.com/users/6558042/omid-nikrah)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209)](https://stackoverflow.com/users/4034209/kashif-anwaar)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209&theme=dark)](https://stackoverflow.com/users/4034209/kashif-anwaar)

#### Compact Layout

If you want to have a compact layout, just you need to add `layout=compact` as a parameter. Check out the options.

[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&layout=compact)](https://stackoverflow.com/users/6558042/omid-nikrah)
[![Omid Nikrah StackOverflow](https://github-readme-stackoverflow.vercel.app/?userID=6558042&layout=compact&theme=dark)](https://stackoverflow.com/users/6558042/omid-nikrah)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209&layout=compact)](https://stackoverflow.com/users/4034209/kashif-anwaar)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209&layout=compact&theme=dark)](https://stackoverflow.com/users/4034209/kashif-anwaar)


#### Full Layout

If you want to show upvotes and answers count as well, just you need to add `layout=full` as a parameter. Check out the options.

[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209&layout=full)](https://stackoverflow.com/users/4034209/kashif-anwaar)
[![Kashif's StackOverflow](https://github-readme-stackoverflow-kashifo.vercel.app/?userID=4034209&layout=full&theme=dark)](https://stackoverflow.com/users/4034209/kashif-anwaar)


<br>
Expand All @@ -36,15 +44,16 @@ If you want to have a compact layout, just you need to add `layout=compact` as a
| ---------- | ------------------------------- | -------------------------- |
| userID | Your StackOverflow userID | REQUIRED |
| theme | Theme of the StackOverflow card (light or dark) | light |
| layout | Layout of the StackOverflow card (compact or default) | default |
| layout | Layout of the StackOverflow card (compact or full or default) | default |

<br>

## Contributors
- [Omid Nikrah](https://github.com/omidnikrah)
- [Soroush Chehresa](https://github.com/soroushchehresa)
- [Kashif Anwaar](https://github.com/kashifo)

<br>

## Deploy your own
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/omidnikrah/github-readme-stackoverflow)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/kashifo/github-readme-stackoverflow)
76 changes: 76 additions & 0 deletions src/StackOverflowCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,82 @@ const StackOverflowCard = async (data, theme, layout) => {
</g>
</svg>
`;
} else if (layout === 'full') {
return `
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please DO NOT generate the whole card again for the full layout, only add those extra data if the layout is full.

<svg width="210" height="312" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M5 0h200a5 5 0 015 5v302a5 5 0 01-5 5H5a5 5 0 01-5-5V5a5 5 0 015-5m1 2h198a4 4 0 014 4v300a4 4 0 01-4 4H6a4 4 0 01-4-4V6a4 4 0 014-4"
fill="${isDark ? '#4A4E51' : '#eff0f1'}" fill-rule="nonzero" />
<path d="M5 1h200a4 4 0 014 4v302a4 4 0 01-4 4H5a4 4 0 01-4-4V5a4 4 0 014-4" fill="${isDark ? '#2D2D2D' : '#fff'}" fill-rule="nonzero" />
<path
d="M1 1h208v100H1V1m4 24h200c2.209 0 4 .439 4 .98v74.04c0 .54-1.791.98-4 .98H5c-2.21 0-4-.44-4-.98V25.98c0-.54 1.79-.98 4-.98"
fill="${isDark ? '#3D3D3D' : '#eff0f1'}" fill-rule="nonzero" />
<g transform="translate(40 31)" stroke-linecap="square">
<image width="130" height="130" xlink:href="${thumbnailBase64}" />
<use stroke="#000" xlink:href="#a" />
</g>
<text transform="translate(${namePosition} 171)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#0f0f0f'}"
font-family="Arial-BoldMT, Arial" font-size="15" font-weight="bold">
<tspan x=".5" y="14">${data.display_name}</tspan>
</text>
<text transform="translate(48 195)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="16">
<tspan x="${-data.reputation.toString().length * 2}" y="14">${data.reputation.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</tspan>
</text>
<text transform="translate(88 195)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="14">
<tspan x="${data.reputation.toString().length > 4 ? data.reputation.toString().length * 2 : .5}" y="12.5">Reputation</tspan>
</text>

<text transform="translate(48 215)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="16">
<tspan x="${-data.up_vote_count.toString().length * 2}" y="14">${data.up_vote_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</tspan>
</text>
<text transform="translate(88 215)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="14">
<tspan x="${data.up_vote_count.toString().length > 4 ? data.up_vote_count.toString().length * 2 : .5}" y="12.5">Upvotes</tspan>
</text>
<text transform="translate(48 235)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="16">
<tspan x="${-data.answer_count.toString().length * 2}" y="14">${data.answer_count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}</tspan>
</text>
<text transform="translate(88 235)" stroke-linecap="square" stroke-linejoin="bevel" fill="${isDark ? '#F2F2F3' : '#3c4146'}"
font-family="ArialMT, Arial" font-size="14">
<tspan x="${data.answer_count.toString().length > 4 ? data.answer_count.toString().length * 2 : .5}" y="12.5">Answers</tspan>
</text>

<path
d="M21 266h49a3 3 0 013 3v22a3 3 0 01-3 3H21a3 3 0 01-3-3v-22a3 3 0 013-3m1 2h47a2 2 0 012 2v20a2 2 0 01-2 2H22a2 2 0 01-2-2v-20a2 2 0 012-2"
fill="#F1B600" fill-rule="nonzero" />
<path d="M21 267h49a2 2 0 012 2v22a2 2 0 01-2 2H21a2 2 0 01-2-2v-22a2 2 0 012-2" fill="${isDark ? '#5E553C' : '#fff4d1'}"
fill-rule="nonzero" />
<text transform="translate(42 274)" stroke-linecap="square" stroke-linejoin="bevel"
fill="${isDark ? '#CFD2D6' : '#3c4146'}" font-family="ArialMT, Arial" font-size="11">
<tspan x="0" y="10">${data.badge_counts.gold}</tspan>
</text>
<path d="M29 277a3 3 0 110 6 3 3 0 010-6" fill="#F1B600" fill-rule="nonzero" />
<path
d="M80 266h50a3 3 0 013 3v22a3 3 0 01-3 3H80a3 3 0 01-3-3v-22a3 3 0 013-3m1 2h48a2 2 0 012 2v20a2 2 0 01-2 2H81a2 2 0 01-2-2v-20a2 2 0 012-2"
fill="#9A9C9F" fill-rule="nonzero" />
<path d="M80 267h50a2 2 0 012 2v22a2 2 0 01-2 2H80a2 2 0 01-2-2v-22a2 2 0 012-2" fill="${isDark ? '#424242' : '#e8e8e8'}"
fill-rule="nonzero" />
<text transform="translate(101 274)" stroke-linecap="square" stroke-linejoin="bevel"
fill="${isDark ? '#CFD2D6' : '#3c4146'}" font-family="ArialMT, Arial" font-size="11">
<tspan x="0" y="10">${data.badge_counts.silver}</tspan>
</text>
<path d="M88 277a3 3 0 110 6 3 3 0 010-6" fill="#9A9C9F" fill-rule="nonzero" />
<path
d="M140 266h49a3 3 0 013 3v22a3 3 0 01-3 3h-49a3 3 0 01-3-3v-22a3 3 0 013-3m1 2h47a2 2 0 012 2v20a2 2 0 01-2 2h-47a2 2 0 01-2-2v-20a2 2 0 012-2"
fill="#AB825F" fill-rule="nonzero" />
<path d="M140 267h49a2 2 0 012 2v22a2 2 0 01-2 2h-49a2 2 0 01-2-2v-22a2 2 0 012-2" fill="${isDark ? '#4D433B' : '#f2e9e1'}"
fill-rule="nonzero" />
<text transform="translate(161 274)" stroke-linecap="square" stroke-linejoin="bevel"
fill="${isDark ? '#CFD2D6' : '#3c4146'}" font-family="ArialMT, Arial" font-size="11">
<tspan x="0" y="10">${data.badge_counts.bronze}</tspan>
</text>
<path d="M148 277a3 3 0 110 6 3 3 0 010-6" fill="#AB825F" fill-rule="nonzero" />
</svg>
`;
}

return `
Expand Down
12 changes: 7 additions & 5 deletions vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{
"builds": [{
"src": "index.js",
"use": "@now/node-server"
}]
}
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}