https://github.com/zaubrik/portrait
An Open Graph image generator for images that you can embed in your meta tags. Written in Deno.
https://github.com/zaubrik/portrait
deno open-graph
Last synced: 5 months ago
JSON representation
An Open Graph image generator for images that you can embed in your meta tags. Written in Deno.
- Host: GitHub
- URL: https://github.com/zaubrik/portrait
- Owner: Zaubrik
- License: mit
- Created: 2022-03-24T03:49:25.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-14T00:11:13.000Z (almost 2 years ago)
- Last Synced: 2025-02-17T19:45:23.336Z (11 months ago)
- Topics: deno, open-graph
- Language: TypeScript
- Homepage: https://dev.zaubrik.com/og-image/
- Size: 158 KB
- Stars: 6
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# portrait
Portrait is a service, written in Deno, that generates dynamic
[Open Graph](http://ogp.me) images that you can embed in your `meta` tags. Try
it out on [Zaubrik](https://dev.zaubrik.com/og-image/) for free.
## What is this?
This is Zaubrik's service that for each keystroke generates customized dynamic
images that you can embed in your meta tags.
Lots of services like Twitter, Discord and LinkedIn can render the specified
image to make your link stand out from the rest!
## How does it work?
In short, what this service does, is take in a request through its REST API,
generate an
[HTML Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) using
the provided variables and respond with a cached image having the appropriate
image properties and headers. Try it out and deploy your own image generator on
[Deno](https://deno.land/).
## Quick start
```bash
deno task serve
```
## Todo
- `deno bundle` seems to be broken. It works with
`deno upgrade --version 1.29.0`.
- More options
- Some browser tests
- Add markdown's **bold** and _italic_ syntax to the text input.
- Idea:
[ctx.measureText](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText)
from the Canvas API and RegExp?
```ts
const regexBold = /\*\*([^*]*)\*\*/g;
const regexItalic = /\*([^*]*)\*/g;
function parse(regExp: RegExp) {
return (str: string) => {
return [...str.matchAll(regExp)];
};
}
const parseBold = parse(regexBold);
const parseItalic = parse(regexItalic);
let r1 = parseBold("aaa bb**ff**ccc,c**cc d**dd");
```