[HN Gopher] Show HN: A GitHub business card generator
___________________________________________________________________
Show HN: A GitHub business card generator
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...
Author : scastiel
Score : 99 points
Date : 2022-11-12 18:17 UTC (4 hours ago)
(HTM) web link (github-business-card.vercel.app)
(TXT) w3m dump (github-business-card.vercel.app)
| prepend wrote:
| 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.
| mthld wrote:
| Nice project! Sadly the emojis present in my GitHub bio aren't
| being rendered. I can't see them in the image. :)
| scastiel wrote:
| 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 wrote:
| 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 wrote:
| You can use fonts to handle emojis!
|
| https://vercel.fyi/og-image-with-emoji-font
| sureglymop wrote:
| 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 wrote:
| 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 :)
| abhaynayar wrote:
| I have 40 followers, but it shows 39 on the card.
| bonney_io wrote:
| 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 wrote:
| 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 :)
| jansan wrote:
| I really like that suble off-white coloring (sorry, someone had
| to say it).
| seangrogg wrote:
| I came to the comments explicitly looking for this :)
| [deleted]
| V__ wrote:
| You have nothing to apologise for.
| arriu wrote:
| 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 wrote:
| The cache lives only in your browser, so Cmd+Shift+R (on Mac)
| should refresh the image :)
| simonw wrote:
| Suggestion: instead of just my GitHub username under my name, it
| would be nice if it showed github.com/simonw
| scastiel wrote:
| Fantastic idea, let me add it ;)
| blurrybird wrote:
| This is excellent! Simple, works, fast.
|
| It would be neat to see you do a Twitter version!
| tapatio wrote:
| What's a business card?
| Piisamirotta wrote:
| Hehe that is a funny comment.
| chrisseaton wrote:
| Still essential in Japan.
| [deleted]
| Phelinofist wrote:
| Doesn't render for me: https://github-business-
| card.vercel.app/api/github?username=...
| tomcam wrote:
| I see it fine on my iPhone
| Phelinofist wrote:
| I'm on Firefox on Linux and it just renders 40% and then
| stops
| zadjii wrote:
| 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 wrote:
| Interesting idea. Noted :)
| DistractionRect wrote:
| Seems broken on Firefox for Android (mobile). It displays half
| the card [0].
|
| [0] https://imgur.com/a/CQ7QXkB
| jonas-w wrote:
| I'm using firefox nightly on android and it displays normally.
| Maybe your internet connection?
| cobertos wrote:
| 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 wrote:
| 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...
| scastiel wrote:
| 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 ;)
___________________________________________________________________
(page generated 2022-11-12 23:00 UTC)