xiaoluoboding / bookmark.style

🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.

bookmark.style

🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.

Concepts

This web app is built on top of metafy, which provides serverless api to fetch websites metadata easily and turn the metadata into the visual bookmark. like Twitter does.

Articles

• 《How to create a visual web bookmark?》

Features

• 🔮 Turn any given links into a stylish visual web bookmark
• 🐦 Twitter card like
• 🔖 Notion web-bookmark like
• 🖼️ Copy image to your clipboard
• 💾 Download image to your computer.
• 📷 Toggle the QRCode on the bookmark
• 🌛 Dark mode support

Chrome web extension for bookmark.style

Go to chrome web store

Usage Tips

You can create a new bookmarklet in your browser and enter the URL below:

javascript: window.location =
  'https://www.bookmark.style/?url=' + encodeURIComponent(document.location)

When you click on the bookmarklet, it will redirect the page you're on to the bookmark.style.

bookmark.style will auto-parse the URL and render the visual bookmark.

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

Development Setup

Install

Install the dependencies

yarn
# or
pnpm i

Development

Run the development server

yarn dev
# or
pnpm dev

Production

Build the extension

yarn build
# or
pnpm build

Template

This repo is created from this template on GitHub.

License

MIT @xiaoluoboding

bookmark.style's Issues

现在使用504错误

比如 这个链接
https://svg.bookmark.style/api?url=https://www.zhangzhiyu.live:8900&mode=dark&style=horizontal

notion的文章无法识别标题

把notion的一篇文章粘贴进去，没有识别出来文章的标题，展示的是notion的介绍。
原文链接：https://welkinbai.notion.site/web3-910dd224c6be4b68896397f495acf626

visual wb bookmark in Obsidian

Hello , i'm wondering how can i replicate or use the webbookmark in Obsidian ? Any suggestion?

support bookmarklet?

javascript:window.location=%22http://news.ycombinator.com/submitlink?u=%22+encodeURIComponent(document.location)+%22&t=%22+encodeURIComponent(document.title)

This is a bookmarklet for submit post to Hacker News, I hope bookmark.style could add this kinds of support.

2 Issues

I've had 2 problems with 1 serious & the other catastrophic:

1. I saved one Chrome window and after I saw the group of about 12 tabs in the OneTab.Group, it just disappeared.
2. My system had a shutdown problem where I had to click "shutdown' several times, and after rebooting everything I had saved was lost.

Please advise.

npm 包支持

也许这个可以成为一个非常好用的 npm 包 😂

URL parser for the logo is not working

All my websites are not working with this tool, because the URL parser does not work correctly.
It leaves the language prefix in the URL, which leads to a 404 error.

In this screenshot you can see the parsed URL by the tool:

The parsed URL is https://www.cankarka.com/en/assets/frontend/img/logo.png, but it should be https://www.cankarka.com/assets/frontend/img/logo.png

It would be great if you could fix this issue, other than that the tool works great and the styling looks really awesome!
Thanks for your work! :)

Can I embed generated bookmark image in GitHub README?

Beautiful bookmark generator! nice work! By the way, Can I use it in GitHub README by image link, for example:

![bookmark](https://bookmark.style/?url=<url>&<other options>)

点击下载图片失败，和跨域问题有关

这个工具很酷。
使用时遇到下载图片失败的问题。如下面截图。
测试 URL： https://discuss-cn.bestxtools.com/d/29

Can I change the background picture, URL title and URL?

This tool is cool, but it's even friendlier if it supports changing the background, title, and URL of our website

Improve the website mobile design

I saw your project, it's very interesting!
However, the website is a bit difficult to browse. This is that it looks like:

500 server error when using the svg api

I am trying to use the SVG api for my github readme, but if I replace the link of your demo https://svg.bookmark.style/api?url=https://bookmark.style/&mode=light&style=horizontal with my link https://svg.bookmark.style/api?url=https://cankarka.com/&mode=light&style=horizontal I am getting the attached error.