jsr
satori
jsr | satori | |
---|---|---|
8 | 36 | |
1,990 | 10,252 | |
21.7% | 1.0% | |
9.5 | 7.0 | |
4 days ago | 3 months ago | |
Rust | TypeScript | |
MIT License | Mozilla Public License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
jsr
-
The new open source JavaScript s package registry
JSR Web Page
-
Creating an OG image using React and Netlify Edge Functions
For example, here's an OG image for a workspace for jsr. JSR is the new JavaScript registry from the folks from Deno.
- Poolifier Web Worker version 0.3.15
-
Show HN: Drop SSH private keys in exchange for keygen via PRNG and Ed25519
(tldr; visit https://jsr.io/@key/gen-ssh-ed25519 for details)
I have a hot take: the ~/.ssh folder should NOT contain private keys.
A private key is generated on the first day of computer setup and remains there permanently. It will have mode 600 if not misconfigured, and may also have a passphrase for protection (you do ... do you?). So, what's the catch?
During its entire lifespan, which can be months or even years, those private keys can be compromised in just a matter of seconds. This could happen if someone types "curl -d" in the command line on your behalf during a coffee break, or if an NPM package with numerous intermediate dependencies' postinstall scripts to send it elsewhere, even if guarded by a passphrase, ask yourself how confident you are that phrase you have will survive offline brute-force attacks?
ssh-agent to the rescue.
If you've enabled AddKeysToAgent and UseKeychain in your ~/.ssh/config file, you can safely remove your private key from the disk after it's automatically added to the ssh-agent (verify by ssh-add -L). This protects against all kinds of attacks, however, if you reboot your system, you'll need to set everything up again.
Thus the reproducible keygen comes into play, in a nutshell, instead of relying on entropy taken from /dev/random and letting the end user hold on to it safely forever (how?), let's use well-configured PRNG (i.e. PBKDF2 - SHA512 - 400,000 rounds in 2024 from native webcrypto in this case) with better algos (Ed25519 instead of RSA), to generate the same private key on demand on-the-fly, once the private key added onto ssh-agent, then just delete it from the disk, this greatly reduced the attack surface of the private key, no private key left means nothing to leak at the first place.
The last piece of the puzzle is coming up with a manageable salt/passphrase for PRNG, this can vary depending on your threat modeling, I will provide a few examples for inspiration, but you should choose what works best for you:
- UUID generated from system entropy, put into ~/.ssh/config as a vague comment yet you can retrieve it later on
- a strong password generated by password managers and safely stored across multiple devices
- any git commit hash that is unrelated whatsoever, this can come from one of your side projects or even some opensource project, as long as you don't lose the trace from your mental memory
- Merkle tree root hash from any given height of the blockchain
- specific version of any pkg (i.e. npm or crates) tarball's checksum
- your favorite number multiplied by the year of choice and cubed, i.e. (42 * 2024) ^ 3
- chunk of pi digits
etc...
The program is released on JSR (https://jsr.io/@key/gen-ssh-ed25519) and designed to be executed by Deno which is secure by default, it reads from command args and emits to stdout, without any file, network, or environment access.
Credit to Paul Miller by his NPM package (https://www.npmjs.com/package/ed25519-keygen) for the heavy lifting.
What is your opinion? Do you have any other suggestions or did you notice any oversights?
- JSR: The JavaScript Registry
satori
-
Creating an OG image using React and Netlify Edge Functions
View on GitHub
-
Show HN: Dropflow, a CSS layout engine for node or <canvas>
I've used satori [0] on the backend with TypeScript/Deno to render JSX as an SVG (which is then rendered to a PNG).
Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. It supports a subset of modern CSS, including flexbox.
My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats.
It's quite nice because there are almost zero server-side native dependencies (the one exception is the library to convert svg -> png requires some native libraries).
Here's what a match report looks like: [1]
Here's an example of what the JSX looks like: [2]
[0]: https://github.com/vercel/satori
[1]: https://github.com/shepherdjerred/glitter/blob/main/assets/p...
[2]: https://github.com/shepherdjerred/glitter/blob/main/packages...
-
Learn SVG with 25 examples – How to code images in HTML
Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.
This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]
[0]: https://github.com/vercel/satori
[1]: https://github.com/shepherdjerred/glitter-boys
-
Open-graph image generation with Astro
Install the @vercel/og package. This library is designed to convert React code into PNG images. It is built on Satori, a library that converts HTML and CSS into SVGs.
-
All you need to know about metadata in next.js 13 by Anik Routh
Examples are available in the Vercel OG Playground.
-
Making Dynamic Website Thumbnail
In this version, we no longer use Puppeteer to capture HTML and return images. Instead, we utilize the @vercel/og library, which employs Satori as its core engine. Satori is a library that converts HTML and CSS into SVG.
-
Generate Dynamic Open Graph and Twitter Images in Next.js
This is made possible thanks to the Dynamic Open Graph Image Generation feature introduced with Next.js version 13.3, and the new Metadata API. In summary, it involves generating images using code (in our case, TSX, HTML, and CSS) with the help of the libraries @vercel/og (already integrated in the App router) and Satori. Satori converts HTML and CSS to SVG, and then resvg-js converts the SVG to a PNG image. All of this in just a few milliseconds!
-
How to generate dynamic OG image using new NextJs with App directory
Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time. Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image. For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.
-
x-satori --- using Vue file to generate Open Graph SVG or PNG by satori
Use Vue files to generate SVG images by Satori. The image can be generated by running ESM script or CLI.
-
Printing Django view with chart.js graphs, in a PDF
I'm not familiar with it but looks like it's made with nodejs, node uses the same js engine used by chrome, node renders the template and converts it to plain html/css and then they use this library to convert it to png but in the library github page it says that they don't support everything so it's kinda similar to xhtml2pdf or weasyprint
What are some alternatives?
Tailwind CSS - A utility-first CSS framework for rapid UI development.
html2canvas - Screenshots with JavaScript
tremor - React components to build charts and dashboards
canvas2svg - Translates HTML5 Canvas draw commands to SVG
SVG-to-PDFKit - Insert SVG into a PDF document created with PDFKit
yoga - Yoga is an embeddable layout engine targeting web standards.
og-image - Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc
slash - A collection of TypeScript/JavaScript packages to build high-quality web services.
opentype.js - Read and write OpenType fonts using JavaScript.
BrowserBox - 🌀 Browse the web from a browser you run on a server, rather than on your local device. Lightweight virtual browser. For security, privacy and more! By https://github.com/dosyago
resvg-js - A high-performance SVG renderer and toolkit, powered by Rust based resvg and napi-rs.
svg2pdf.js - A javascript-only SVG to PDF conversion utility that runs in the browser. Brought to you by yWorks - the diagramming experts