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

Related tags

Display images bookmark twitter-card notion-web-bookmark web-bookmark
Overview

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

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

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

Comments
  • Can I embed generated bookmark image in GitHub README?

    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>)
    idea 
    opened by kaichii 4
  • 500 server error when using the svg api

    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.

    Screenshot

    opened by Cankar001 1
  • URL parser for the logo is not working

    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: Screenshot

    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! :)

    opened by Cankar001 1
  • support bookmarklet?

    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.

    idea 
    opened by jiacai2050 1
  • 2 Issues

    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.

    invalid 
    opened by BubbaWang 0
Releases(v1.0.0)
Owner
onetab.group
A Chrome extension for reorganizing your open tabs, restoring saved tab sessions, and also restoring tab groups.
onetab.group
GitHub https://bookmark.style
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한국어 Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 60 Dec 7, 2022
🌈 A Vue image component. Simple realization of image shadow.

?? vue-image-shadow A Vue image component. Simple realization of image shadow. ?? Example Online: https://image-component.github.io/vue-image-shadow/

null 21 Aug 13, 2022
vue-image-markup will provide you to edit uploaded image easily and save it.

Markup Image with Vue.js (customizable) vue-image-markup will provide you to edit uploaded image easily and save it. Installation npm i vue-image-mark

Lionix 92 Dec 9, 2022
Vue-image-loader: image loader for vue js with prevue

Vue-image-loader: image loader for vue js with prevue

null 0 Feb 1, 2020
A Directive for setting fall back image in a vue js application if in case image is not loaded

vue-fall-back-image-directive A Directive for setting fall back image in a vue js application. Installation npm install Run npm install --save vue-fal

Arun sivan 1 Oct 15, 2019
A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

A Vue.js port of Boring Avatars, a JS library that generates custom, SVG-based, round avatars from any username and color palette.

Mujahid Anuar 84 Dec 19, 2022
A Vue version of an excellent peity library for beautiful mini svg graphs.

Peity A Vue version of an excellent peity library for beautiful mini graphs.

null 65 Dec 22, 2022
KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever!

KéMeet is a Simple, beautiful, fast and secured Open-source zoom alternative, 100% FREE forever! Simply enter a meeting room ID and connect to anyone else in that room! You can even share your screen if you are on desktop!

fotiecodes 31 Jul 6, 2022
A Simple and Beautiful 360° Product Viewer built on Vue.js

vue-360 A Simple and Beautiful 360° Product Viewer built on Vue.js Click here for React Version Demo Demo | Documentation Features 360° View Zoom Pan

Rajeev 88 Dec 5, 2022
image-diff client: client web application to compare multiple images. online demo -

image-diff client web application to compare multiple images. you can pan, zoom and diff multiple images at the same time. currently support 8bit jpg,

Junik Jo 5 Mar 29, 2022
Spacestagram - Web application that shares photos from NASA's today's image API

?? Spacestagram A webpage that pulls images using the NASA's "Picture of The Day

Alain Nguyen 2 Jan 27, 2022
A Vue.js (https://github.com/vuejs/vue) plugin that offers a reusable directive to get image from Cloudinary (https://cloudinary.com)

vue-cloudinary A Vue.js plugin that offers a reusable directive to get image from cloudinary Overview This is a port of the angular-cloudinary library

Diego Pamio 25 Dec 5, 2020
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

img-vuer An Mobile-First image viewer for Vue2 中文 README ??‍♀️ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

DJJo 260 Sep 20, 2022
Vue progressive image loader plugin like Medium

vue-image-loader Vue progressive image loading plugin Article here : https://www.kevindesousa.me/vue-image-loader/ Installation $ npm install @kevinde

Kevin De Sousa 57 Jul 19, 2022
🙋‍♀️ Image magic animation drawing effect component for Vue 2.x | 图像动态绘制效果

vue-image-painter English | 简体中文 ?? Example Demo Demo Source Code ?? QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

Komo 26 Sep 19, 2022
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

XiongAmao 272 Jan 3, 2023
Vue image placeholder directive for broken images.

Vue Image Fallback v-img-fallback Vue image placeholder directive for broken images. If you like this project, please give it a star, and consider fol

Joff Tiquez 46 Oct 13, 2022
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Willy Hong 266 Dec 23, 2022