Intro
I just made public a Deno project on GitHub that tries to simplify the embed of (GitHub) profiles into markdown files by using just a Deno server (hosted on Deno Deploy) and a resulting SVG image of the wanted profile, like you can see for GitHub badges.
An example
This is how looks like a profile in Markdown
This is GitHub Profilator
Look how looks good! And also errors are good to see (visually) ;)
(This is just a preview, because DEV.to does not support SVG uploads...)
How the SVG is built
For the first time (I'm not a designer and I never used this tool) I used Figma and exported the resulting SVG, then I manually modified the text (transforming it from SVG to <text> tag for easily template changes) and the image (using a data URL to embed on GitHub).
For all these, I wanted to use Handlebars but because Deno Deploy doesn't allow eval function (I discovered it with a Deploy crash) I decided to build my own (simple) template parser with the same {{var_name}} syntax of Handlebars (without all the Handlebars logic template, just to use vars).
Looking for users and contributors
This project is in Alpha now and I'm looking for help developing and debugging.
If you want, you can find this project here:
https://github.com/Bellisario/profilator
https://profilator.deno.dev/
Top comments (6)
Cool idea. Works well. I'm a bit confused by your indication that dev.to doesn't support svgs. DEV.to definitely supports svgs. Here is an example using your service:
Wow, maybe I was missing something!
Another thing... thanks to your embed on DEV.to, I noticed the font is not the same as GitHub... I'll try to fix!
Interesting that the fonts would be different on different sites. On different operating systems, I'd expect it since might not all have same fonts in your font stack. I'm guessing either DEV.to or GitHub must be loading a font that is earlier in your font stack but not available by default on your OS.
Yes, very strange... anyway I saw that the difference is that GitHub sends to clients SVGs so they're rendered by you, instead as you said DEV.to may use a headless browser to "shoot" a photo of the SVG and replace it for better (old) devices compatibility...
This means there is no way to use chosen fonts on DEV.to without pre-render all text as SVG... I don't think I'll do this, since would be a big hard-coded effort and not so useful for the client and server loading/rendering time.
Anyway, thanks for the comments!
Feel free to contribute to my project (link on the article) if you want!
DEV might convert svg to png for security reasons. GitHub runs any SVGs that are embedded in READMEs through a sanitizer removing certain tags, etc that can potentially be abused. But GitHub serves them as is if you link to an SVG stored in a GitHub repo from a website. I'm thinking that DEV converts to png for the same reason just a different approach.
DEV may also convert to png as a spam mitigation. By converting to png, any links embedded in the svg will no longer be there. So a spammer attempting to sneak in backlinks on DEV can't do so with an svg. I know they recently posted about other spam mitigation they do. GitHub's svg sanitizer doesn't touch links in the svg.
DEV actually appears to host all images from posts themselves regardless of format, even png. I suspect this is also for spam mitigation. By hosting images themselves, they know they will continue to serve the images as originally seen at time of post, preventing spammer from making real-looking post and then later changing linked image to advertise something shady.
Since my prior reply, I investigated a bit. It appears that DEV converts SVGs to PNGs and serves from their own cache of images. I verified with both the embed from your service in my earlier comment as well as an SVG from one of my posts. I had browser open image in a new tab and then viewed source. They keep filename as it is, including extension, which in your case doesn't have one, but my SVG it still has svg extension. But the file served is a PNG.
So I'm guessing it might be an OS thing. Whatever font you've specified probably isn't available on OS that DEV uses on system that does the conversion to PNG. So when they convert it probably uses a fall-back font.