Metafy SVG

Easily crawl a website's metadata and generate SVG as a service.

Render In README.md

You can render the bookmark.style card as a SVG in the GitHub README.md now.

Code

[![onetab.group](https://svg.bookmark.style/api?url=https://onetab.group&mode=light)](https://onetab.group)

Preview

Card Style	Light Mode	Dark Mode
Twitter Like
Notion Like

Customize the gradient color

The hex color in the URL can not contain the # character, so you can write like this #000000 to 000000

Type

type GradidentColor = {
  formColor: string
  viaColor?: string
  toColor: string
}

URL

curl https://svg.bookmark.style/api?url=$URL&formColor=$FROM_COLOR&viaColor=$VIA_COLOR&toColor=$TO_COLOR

Demo without viaColor

https://svg.bookmark.style/api?url=https://onetab.group&mode=light&fromColor=fa4&toColor=a4f

Demo with viaColor

https://svg.bookmark.style/api?url=https://onetab.group&mode=light&fromColor=fa4&viaColor=4af&toColor=a4f

Usage

Enter a valid $URL as params

curl https://svg.bookmark.style/api?url=$URL

Types

type Params = {
  url: string
  mode?: 'light' | 'dark'
  style?: 'vertical' | 'horizontal'
  formColor?: string
  viaColor?: string
  toColor?: string
}

Example

Input

curl https://svg.bookmark.style/api?url=https://onetab.group&mode=light

Output

Deploy your own instance

Deploy your Metafy on your own instance with one-click.

Tech Stack

• vercel - Develop. Preview. Ship. For the best frontend teams.
• metascraper - metascraper, easily scrape metadata from an article on the web.
• typescript - Typed JavaScript at Any Scale.
• got - 🌐 Human-friendly and powerful HTTP request library for Node.js
• html-escaper - A simple module to escape/unescape common problematic entities.
• esno - TypeScript / ESNext node runtime powered by esbuild

License

MIT xiaoluoboding