5 ms·

Show HN: A GitHub business card generator

210 points by scastiel 4y ago

I built this small app for fun, to play with image generation thanks to Vercel’s new library [1]. You enter your GitHub username (or anyone’s), and it generates an image with a few info about your account. [1] https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation https://vercel.com/docs/concepts/functions/edge-functions/og...

learndeeply 4y ago
Brilliant way to get thousands of tech people to look at your business card. Edit: This was updated, it used to point to his real Github username. Not that there's anything wrong with that! It's clever marketing.
- andirk 4y ago
  I didn't look what does it say?
  - version_five 4y ago
    It says he works at Dunder Mifflin, it doesn't look like its about self promotion
jansan 4y ago
I really like that suble off-white coloring (sorry, someone had to say it).
- V__ 4y ago
  You have nothing to apologise for.
- deleted 4y ago
  [deleted]
- seangrogg 4y ago
  I came to the comments explicitly looking for this :)
simonw 4y ago
Suggestion: instead of just my GitHub username under my name, it would be nice if it showed github.com/simonw
- scastiel 4y ago
  Fantastic idea, let me add it ;)
mthld 4y ago
Nice project! Sadly the emojis present in my GitHub bio aren’t being rendered. I can’t see them in the image. :)
- scastiel 4y ago
  Yes, there was a bug with the image not rendering with certain emojis, so I had to remove them as a quick fix. But I’ll investigate to find a way to show them :)
  - franky47 4y ago
    You'd have to load a special font that has extended Unicode support to render Emoji. Not sure how that's done in Vercel's OG generator.
  - leerob 4y ago
    You can use fonts to handle emojis! https://vercel.fyi/og-image-with-emoji-font https://vercel.fyi/og-image-with-emoji-font
sureglymop 4y ago
I'm interested in your book. Is it available as epub or pdf somewhere? Or do I get those formats when I buy it on Amazon?
- scastiel 4y ago
  Hi, for now the book is available only on Amazon (Kindle format), but you’ll find many tools on the web to convert it to ePub or other. Also, you can read the book online using Amazon’s reader. Hopefully this is good enough for you :)
bonney_io 4y ago
Very cool project! What do you think about including a QR code linking back to the user's GitHub page on the rendered card?
- scastiel 4y ago
  I did it at the beginning (it’s quite easy), but I think it took too much place on the image, and wasn’t sure it was that helpful. I’m planning on adding a few customization options to the generation. I may add the QR code as one :)
Phelinofist 4y ago
Doesn't render for me: https://github-business-card.vercel.app/api/github?username=31KM https://github-business-card.vercel.app/api/github?username=...
- tomcam 4y ago
  I see it fine on my iPhone
  - Phelinofist 4y ago
    I'm on Firefox on Linux and it just renders 40% and then stops
zadjii 4y ago
Silly suggestion - show something like the contribution graph along the very bottom of the card, like a border. Those who know what it means will _know_, to everyone else it's just decorative.
- scastiel 4y ago
  Interesting idea. Noted :)
DistractionRect 4y ago
Seems broken on Firefox for Android (mobile). It displays half the card [0]. [0] https://imgur.com/a/CQ7QXkB https://imgur.com/a/CQ7QXkB
- jonas-w 4y ago
  I'm using firefox nightly on android and it displays normally. Maybe your internet connection?
  - isatty 4y ago
    Nah it happened to me too (Chrome stable, perfect internet connection). Refreshing fixed it.
cobertos 4y ago
Huh, `@vercel/og` is interesting! It looks like the same approach as `html2canvas` (implement custom rendering for each HTML element + CSS property), with all the tradeoffs that entails, but they actually rightly limited some of the features they're willing to support (like external stylesheets). And it looks like it'll be more supported than `html2canvas` currently is. I quite like `dom-to-image-more` (sorta active fork of `dom-to-image`) that renders a SVG with a foreignElement that is a data URL of an XHTML page to a canvas. It also led me to rewriting my own image rendering stuff to just build an SVG in DOM, use toDataURL on it, and then render that in a canvas. So much simpler
- notpushkin 4y ago
  SVG is a really underrated medium. The only thing I miss compared to HTML is flexboxes (but there's always stuff like react-flexbox-svg [1]). [1]: https://github.com/metabolize/react-flexbox-svg https://github.com/metabolize/react-flexbox-svg Edit: for a React-less implementation, see https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.ht...
  - benatkin 4y ago
    With WebAssembly, layout engines should be easy pickings. Just have to grab the code from an open source browser and get it to build, and put the license on it. Edit: well, not that easy :) https://github.com/servo/servo/discussions/28070 https://github.com/servo/servo/discussions/28070
- scastiel 4y ago
  html2canvas and similar libraries only work in the browser, and this is why @vercel/og is that interesting! Not only it runs on the server (in an Edge serverless function), but it doesn’t have to start a headless browser to make screenshot and generate the image ;)
  - cobertos 4y ago
    How could I forgot about that part! Yeah, super useful for that platform. I had so much trouble finding the GitHub repo for it to check their methodology earlier I forgot about that lol
prepend 4y ago
Neat idea. It does not render properly for me as I have multiple links, @leebrian. Maybe only use the first link. Or wrap a little bit to allow for multiple lines.
arriu 4y ago
Awesome! Made a change to my profile as a result but I guess the site is caching generated profiles. How long is the cache?
- scastiel 4y ago
  The cache lives only in your browser, so Cmd+Shift+R (on Mac) should refresh the image :)
  - twodave 4y ago
    Love the idea, but I couldn't get the refresh to work, personally. I even tried loading the image url directly in an incognito tab, no dice: https://github-business-card.vercel.app/api/github?username=davesheldon https://github-business-card.vercel.app/api/github?username=...
tapatio 4y ago
What's a business card?
- deleted 4y ago
  [deleted]
- Piisamirotta 4y ago
  Hehe that is a funny comment.
- chrisseaton 4y ago
  Still essential in Japan.
abhaynayar 4y ago
I have 40 followers, but it shows 39 on the card.
- quesera 4y ago
  There are only two hard problems in Computer Science ...
- jojo259 4y ago
  GitHub API says you have 39 for some reason. I counted on your profile and it did seem to be 40 though (and it does say 40 there). https://api.github.com/users/abhaynayar https://api.github.com/users/abhaynayar
blurrybird 4y ago
This is excellent! Simple, works, fast. It would be neat to see you do a Twitter version!
- scastiel 4y ago
  Noted :)
strangescript 4y ago
This is cool, but I am not sure how useful following count is on there. As others have pointed out, it would be neat to see some kind of aggregated contributions.
longerpath 4y ago
Can we see Paul Allen's card? (Does he have a GitHub?)
dmak 4y ago
Feels weird to be flexing github followers on a business card especially since github is less about social influence.
- tr1ll10nb1ll 4y ago
  True but after a certain threshold of like 1k followers, I think it would definitely be worth noting. Sort of like a fancy business card. But then again, people now have spam following/followers on Github so it indeed is stupid. A better way to showcase influence would be via the most starred repo perhaps?
  - dmak 4y ago
    I just see github as a productivity tool like a kitchen knife and I wouldn't flex my kitchen knife. I would flex my products though which is like the food I make as a result of the kitchen knife.
btzs 4y ago
Ideas: show loading icon while card is being created; allow hotlinking of the image and update its content periodically.
adolph 4y ago
Very beautiful. Suggestion: vcard data in qr code https://www.qr-code-generator.com/solutions/vcard-qr-code/ https://www.qr-code-generator.com/solutions/vcard-qr-code/
twodave 4y ago
Love it. Integrate this with a printing/shipping service and I'd spend $20 easily.
theden 4y ago
I dig it—any plans for generating a dark mode card?
andirk 4y ago
Fun fact: I have never had a business card with my name on it ever.
- tillcarlos 4y ago
  … have you ever had a business card with someone else’s name on it then?
quickthrower2 4y ago
Nice idea. Might be able to make money by linking to a business card company!
GtyJJXX666 4y ago
Yoo
benatkin 4y ago
A repo for the @vercel/og API it uses isn't here: https://www.npmjs.com/package/@vercel/og https://www.npmjs.com/package/@vercel/og ...but it's easy enough to find on https://www.jsdelivr.com/package/npm/@vercel/og https://www.jsdelivr.com/package/npm/@vercel/og It looks to be a tiny bit of glue code (minified but with source maps that I didn't examine), 2 wasm bundles which are probably open source, and an open source font. Clever but I happen to be looking for documented open source stuff that does this. I guess knowing the names of yoga (which is a library from Facebook I already heard about) and resvg (which I probably already heard about) is a good starting point! https://github.com/facebook/yoga https://github.com/facebook/yoga https://github.com/yisibl/resvg-js https://github.com/yisibl/resvg-js Edit: fonts are here https://github.com/yisibl/resvg-js/search?q=font https://github.com/yisibl/resvg-js/search?q=font and the yoga part seems to be here https://news.ycombinator.com/item?id=33156130 https://news.ycombinator.com/item?id=33156130 It's pretty neat but I think most of this can be had without using facebook stuff :) https://time.com/6217730/myanmar-meta-rohingya-facebook/ https://time.com/6217730/myanmar-meta-rohingya-facebook/
_justlilian 4y ago
Smart way to promote your work. I like that!

210 points by scastiel 4y ago

learndeeply 4y ago

Brilliant way to get thousands of tech people to look at your business card. Edit: This was updated, it used to point to his real Github username. Not that there's anything wrong with that! It's clever marketing.

andirk 4y ago
I didn't look what does it say?
- version_five 4y ago
  It says he works at Dunder Mifflin, it doesn't look like its about self promotion

jansan 4y ago

I really like that suble off-white coloring (sorry, someone had to say it).

V__ 4y ago
You have nothing to apologise for.
deleted 4y ago
[deleted]
seangrogg 4y ago
I came to the comments explicitly looking for this :)

simonw 4y ago

Suggestion: instead of just my GitHub username under my name, it would be nice if it showed github.com/simonw

scastiel 4y ago
Fantastic idea, let me add it ;)

mthld 4y ago

Nice project! Sadly the emojis present in my GitHub bio aren’t being rendered. I can’t see them in the image. :)

scastiel 4y ago
Yes, there was a bug with the image not rendering with certain emojis, so I had to remove them as a quick fix. But I’ll investigate to find a way to show them :)
- franky47 4y ago
  You'd have to load a special font that has extended Unicode support to render Emoji. Not sure how that's done in Vercel's OG generator.
- leerob 4y ago
  You can use fonts to handle emojis! https://vercel.fyi/og-image-with-emoji-font https://vercel.fyi/og-image-with-emoji-font

sureglymop 4y ago

I'm interested in your book. Is it available as epub or pdf somewhere? Or do I get those formats when I buy it on Amazon?

scastiel 4y ago
Hi, for now the book is available only on Amazon (Kindle format), but you’ll find many tools on the web to convert it to ePub or other. Also, you can read the book online using Amazon’s reader. Hopefully this is good enough for you :)

bonney_io 4y ago

Very cool project! What do you think about including a QR code linking back to the user's GitHub page on the rendered card?

scastiel 4y ago
I did it at the beginning (it’s quite easy), but I think it took too much place on the image, and wasn’t sure it was that helpful. I’m planning on adding a few customization options to the generation. I may add the QR code as one :)

Phelinofist 4y ago

Doesn't render for me: https://github-business-card.vercel.app/api/github?username=31KM https://github-business-card.vercel.app/api/github?username=...

tomcam 4y ago
I see it fine on my iPhone
- Phelinofist 4y ago
  I'm on Firefox on Linux and it just renders 40% and then stops

zadjii 4y ago

Silly suggestion - show something like the contribution graph along the very bottom of the card, like a border. Those who know what it means will _know_, to everyone else it's just decorative.

scastiel 4y ago
Interesting idea. Noted :)

DistractionRect 4y ago

Seems broken on Firefox for Android (mobile). It displays half the card [0]. [0] https://imgur.com/a/CQ7QXkB https://imgur.com/a/CQ7QXkB

jonas-w 4y ago
I'm using firefox nightly on android and it displays normally. Maybe your internet connection?
- isatty 4y ago
  Nah it happened to me too (Chrome stable, perfect internet connection). Refreshing fixed it.

cobertos 4y ago

Huh, `@vercel/og` is interesting! It looks like the same approach as `html2canvas` (implement custom rendering for each HTML element + CSS property), with all the tradeoffs that entails, but they actually rightly limited some of the features they're willing to support (like external stylesheets). And it looks like it'll be more supported than `html2canvas` currently is. I quite like `dom-to-image-more` (sorta active fork of `dom-to-image`) that renders a SVG with a foreignElement that is a data URL of an XHTML page to a canvas. It also led me to rewriting my own image rendering stuff to just build an SVG in DOM, use toDataURL on it, and then render that in a canvas. So much simpler

notpushkin 4y ago
SVG is a really underrated medium. The only thing I miss compared to HTML is flexboxes (but there's always stuff like react-flexbox-svg [1]). [1]: https://github.com/metabolize/react-flexbox-svg https://github.com/metabolize/react-flexbox-svg Edit: for a React-less implementation, see https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.html https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.ht...
- benatkin 4y ago
  With WebAssembly, layout engines should be easy pickings. Just have to grab the code from an open source browser and get it to build, and put the license on it. Edit: well, not that easy :) https://github.com/servo/servo/discussions/28070 https://github.com/servo/servo/discussions/28070
scastiel 4y ago
html2canvas and similar libraries only work in the browser, and this is why @vercel/og is that interesting! Not only it runs on the server (in an Edge serverless function), but it doesn’t have to start a headless browser to make screenshot and generate the image ;)
- cobertos 4y ago
  How could I forgot about that part! Yeah, super useful for that platform. I had so much trouble finding the GitHub repo for it to check their methodology earlier I forgot about that lol

prepend 4y ago

Neat idea. It does not render properly for me as I have multiple links, @leebrian. Maybe only use the first link. Or wrap a little bit to allow for multiple lines.

arriu 4y ago

Awesome! Made a change to my profile as a result but I guess the site is caching generated profiles. How long is the cache?

scastiel 4y ago
The cache lives only in your browser, so Cmd+Shift+R (on Mac) should refresh the image :)
- twodave 4y ago
  Love the idea, but I couldn't get the refresh to work, personally. I even tried loading the image url directly in an incognito tab, no dice: https://github-business-card.vercel.app/api/github?username=davesheldon https://github-business-card.vercel.app/api/github?username=...

tapatio 4y ago

What's a business card?

deleted 4y ago
[deleted]
Piisamirotta 4y ago
Hehe that is a funny comment.
chrisseaton 4y ago
Still essential in Japan.

abhaynayar 4y ago

I have 40 followers, but it shows 39 on the card.

quesera 4y ago
There are only two hard problems in Computer Science ...
jojo259 4y ago
GitHub API says you have 39 for some reason. I counted on your profile and it did seem to be 40 though (and it does say 40 there). https://api.github.com/users/abhaynayar https://api.github.com/users/abhaynayar

blurrybird 4y ago

This is excellent! Simple, works, fast. It would be neat to see you do a Twitter version!

scastiel 4y ago
Noted :)

strangescript 4y ago

This is cool, but I am not sure how useful following count is on there. As others have pointed out, it would be neat to see some kind of aggregated contributions.

longerpath 4y ago

Can we see Paul Allen's card? (Does he have a GitHub?)

dmak 4y ago

Feels weird to be flexing github followers on a business card especially since github is less about social influence.

tr1ll10nb1ll 4y ago
True but after a certain threshold of like 1k followers, I think it would definitely be worth noting. Sort of like a fancy business card. But then again, people now have spam following/followers on Github so it indeed is stupid. A better way to showcase influence would be via the most starred repo perhaps?
- dmak 4y ago
  I just see github as a productivity tool like a kitchen knife and I wouldn't flex my kitchen knife. I would flex my products though which is like the food I make as a result of the kitchen knife.

btzs 4y ago

Ideas: show loading icon while card is being created; allow hotlinking of the image and update its content periodically.

adolph 4y ago

Very beautiful. Suggestion: vcard data in qr code https://www.qr-code-generator.com/solutions/vcard-qr-code/ https://www.qr-code-generator.com/solutions/vcard-qr-code/

twodave 4y ago

Love it. Integrate this with a printing/shipping service and I'd spend $20 easily.

theden 4y ago

I dig it—any plans for generating a dark mode card?

andirk 4y ago

Fun fact: I have never had a business card with my name on it ever.

tillcarlos 4y ago
… have you ever had a business card with someone else’s name on it then?

quickthrower2 4y ago

Nice idea. Might be able to make money by linking to a business card company!

GtyJJXX666 4y ago

Yoo

benatkin 4y ago

A repo for the @vercel/og API it uses isn't here: https://www.npmjs.com/package/@vercel/og https://www.npmjs.com/package/@vercel/og ...but it's easy enough to find on https://www.jsdelivr.com/package/npm/@vercel/og https://www.jsdelivr.com/package/npm/@vercel/og It looks to be a tiny bit of glue code (minified but with source maps that I didn't examine), 2 wasm bundles which are probably open source, and an open source font. Clever but I happen to be looking for documented open source stuff that does this. I guess knowing the names of yoga (which is a library from Facebook I already heard about) and resvg (which I probably already heard about) is a good starting point! https://github.com/facebook/yoga https://github.com/facebook/yoga https://github.com/yisibl/resvg-js https://github.com/yisibl/resvg-js Edit: fonts are here https://github.com/yisibl/resvg-js/search?q=font https://github.com/yisibl/resvg-js/search?q=font and the yoga part seems to be here https://news.ycombinator.com/item?id=33156130 https://news.ycombinator.com/item?id=33156130 It's pretty neat but I think most of this can be had without using facebook stuff :) https://time.com/6217730/myanmar-meta-rohingya-facebook/ https://time.com/6217730/myanmar-meta-rohingya-facebook/

_justlilian 4y ago

Smart way to promote your work. I like that!