Show HN: A GitHub business card generator

[scastiel]

https://github-business-card.vercel.app/

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...

[zadjii]

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 → zadjii]

Interesting idea. Noted :)

[cobertos]

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 → cobertos]

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

Edit: for a React-less implementation, see https://blog.scottlogic.com/2015/02/02/svg-layout-flexbox.ht...

[benatkin → notpushkin]

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

[scastiel → cobertos]

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 → scastiel]

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

[learndeeply]

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 → learndeeply]

I didn't look what does it say?

[version_five → andirk]

It says he works at Dunder Mifflin, it doesn't look like its about self promotion

[strangescript]

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.

[dmak]

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

[tr1ll10nb1ll → dmak]

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 → tr1ll10nb1ll]

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.

[simonw]

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

[scastiel → simonw]

Fantastic idea, let me add it ;)

[bonney_io]

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 → bonney_io]

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 :)

[benatkin]

A repo for the @vercel/og API it uses isn't here: https://www.npmjs.com/package/@vercel/og

...but it's easy enough to find on 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/yisibl/resvg-js

Edit: fonts are here https://github.com/yisibl/resvg-js/search?q=font and the yoga part seems to be here 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/

[longerpath]

Can we see Paul Allen's card?

(Does he have a GitHub?)

[_nsme]

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

[scastiel → _nsme]

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 :)

[leerob → scastiel]

You can use fonts to handle emojis!

https://vercel.fyi/og-image-with-emoji-font

[franky47 → scastiel]

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.

[DistractionRect]

Seems broken on Firefox for Android (mobile). It displays half the card [0].

[0] https://imgur.com/a/CQ7QXkB

[jonas-w → DistractionRect]

I'm using firefox nightly on android and it displays normally. Maybe your internet connection?

[isatty → jonas-w]

Nah it happened to me too (Chrome stable, perfect internet connection). Refreshing fixed it.

[arriu]

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 → arriu]

The cache lives only in your browser, so Cmd+Shift+R (on Mac) should refresh the image :)

[twodave → scastiel]

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=...

[Phelinofist]

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

[tomcam → Phelinofist]

I see it fine on my iPhone

[Phelinofist → tomcam]

I'm on Firefox on Linux and it just renders 40% and then stops

[adolph]

Very beautiful.

Suggestion: vcard data in qr code

https://www.qr-code-generator.com/solutions/vcard-qr-code/

[blurrybird]

This is excellent! Simple, works, fast.

It would be neat to see you do a Twitter version!

[scastiel → blurrybird]

Noted :)

[prepend]

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.

[sureglymop]

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 → sureglymop]

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 :)

[btzs]

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

[twodave]

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

[quickthrower2]

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

[andirk]

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

[tillcarlos → andirk]

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

[_justlilian]

Smart way to promote your work. I like that!

[theden]

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

[abhaynayar]

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

[_dolf → abhaynayar]

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

[quesera → abhaynayar]

There are only two hard problems in Computer Science ...

[GtyJJXX666]

Yoo

[tapatio]

What's a business card?

[chrisseaton → tapatio]

Still essential in Japan.

[Piisamirotta → tapatio]

Hehe that is a funny comment.

[jansan]

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

[seangrogg → jansan]

I came to the comments explicitly looking for this :)

[V__ → jansan]

You have nothing to apologise for.