Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xiaoluoboding/bookmark.style
🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.
https://github.com/xiaoluoboding/bookmark.style
bookmark notion-web-bookmark twitter-card web-bookmark
Last synced: 24 days ago
JSON representation
🪄 Turn any link into a stylish visual web bookmark, one-click to copy the beautiful web bookmark image.
- Host: GitHub
- URL: https://github.com/xiaoluoboding/bookmark.style
- Owner: xiaoluoboding
- License: mit
- Created: 2022-04-08T10:44:26.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-03T14:17:37.000Z (7 months ago)
- Last Synced: 2024-08-02T17:32:43.285Z (3 months ago)
- Topics: bookmark, notion-web-bookmark, twitter-card, web-bookmark
- Language: Vue
- Homepage: https://bookmark.style
- Size: 3.58 MB
- Stars: 309
- Watchers: 3
- Forks: 22
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - xiaoluoboding/bookmark.style - 🪄 Transform any link into an elegant visual web bookmark with just one click to copy the stunning bookmark image. (Vue)
- project-awesome - xiaoluoboding/bookmark.style - 🪄 Transform any link into an elegant visual web bookmark with just one click to copy the stunning bookmark image. (Vue)
README
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](https://github.com/xiaoluoboding/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?》](https://xlbd.me/posts/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](https://chrome.google.com/webstore/detail/web-visual-bookmark/jcfidgjldodhkpiebmemhnhgpgdakham/)
## Usage Tips
You can create a new bookmarklet in your browser and enter the URL below:
```js
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](https://bookmark.style).
[bookmark.style](https://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
```markdown
[](https://onetab.group)
```
### Preview
| Card Style | Light Mode | Dark Mode |
| :----------: | :------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
| Twitter Like |  |  |
| Notion Like |  |  |
## Development Setup
### Install
Install the dependencies
```bash
yarn
# or
pnpm i
```
### Development
Run the development server
```bash
yarn dev
# or
pnpm dev
```
### Production
Build the extension
```bash
yarn build
# or
pnpm build
```
## Template
[This repo is created from this template on GitHub](https://github.com/xiaoluoboding/nuxt3-starter/generate).
## License
MIT [@xiaoluoboding](https://github.com/xiaoluoboding)