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.<p>[1] <a href="https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation" rel="nofollow">https://vercel.com/docs/concepts/functions/edge-functions/og...</a>
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.
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.<p>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
Brilliant way to get thousands of tech people to look at your business card.<p>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.
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.
A repo for the @vercel/og API it uses isn't here: <a href="https://www.npmjs.com/package/@vercel/og" rel="nofollow">https://www.npmjs.com/package/@vercel/og</a><p>...but it's easy enough to find on <a href="https://www.jsdelivr.com/package/npm/@vercel/og" rel="nofollow">https://www.jsdelivr.com/package/npm/@vercel/og</a><p>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.<p>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! <a href="https://github.com/facebook/yoga" rel="nofollow">https://github.com/facebook/yoga</a> <a href="https://github.com/yisibl/resvg-js" rel="nofollow">https://github.com/yisibl/resvg-js</a><p>Edit: fonts are here <a href="https://github.com/yisibl/resvg-js/search?q=font" rel="nofollow">https://github.com/yisibl/resvg-js/search?q=font</a> and the yoga part seems to be here <a href="https://news.ycombinator.com/item?id=33156130" rel="nofollow">https://news.ycombinator.com/item?id=33156130</a> It's pretty neat but I think most of this can be had without using facebook stuff :) <a href="https://time.com/6217730/myanmar-meta-rohingya-facebook/" rel="nofollow">https://time.com/6217730/myanmar-meta-rohingya-facebook/</a>
Seems broken on Firefox for Android (mobile). It displays half the card [0].<p>[0] <a href="https://imgur.com/a/CQ7QXkB" rel="nofollow">https://imgur.com/a/CQ7QXkB</a>
Very beautiful.<p>Suggestion: vcard data in qr code<p><a href="https://www.qr-code-generator.com/solutions/vcard-qr-code/" rel="nofollow">https://www.qr-code-generator.com/solutions/vcard-qr-code/</a>
Neat idea. It does not render properly for me as I have multiple links, @leebrian.<p>Maybe only use the first link. Or wrap a little bit to allow for multiple lines.