https://github.com/ryanuo/own-cover
"Own-Cover": Your Personal Blog Cover
https://github.com/ryanuo/own-cover
cover nuxt3 picture
Last synced: 3 months ago
JSON representation
"Own-Cover": Your Personal Blog Cover
- Host: GitHub
- URL: https://github.com/ryanuo/own-cover
- Owner: ryanuo
- License: mit
- Created: 2024-04-17T21:44:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-11T12:05:31.000Z (almost 2 years ago)
- Last Synced: 2025-07-02T00:41:45.391Z (11 months ago)
- Topics: cover, nuxt3, picture
- Language: Vue
- Homepage: https://c.ryanuo.cc
- Size: 1.09 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## OCover
> [!NOTE]
> Still In Development
## Description
This is a simple web app that allows you to upload an image and get a cover of your choice.
## Features
- [x] Upload an image or Choose a cover.
- [x] Customize the cover Text.
- [x] Customize the cover Font CDN Source.
- [x] Customize the cover Font.
- [x] Customize the cover Mask Color.
- [x] Customize the cover Icon.
- [x] Support API server-side cover generation.
- [x] Download the cover.
Google Font CDN:
- https://fonts.googleapis.com/css?family=%s
- https://fonts.loli.net/css?family=%s
`%s` is the fontfamily placeholder
## Usage
### Online Demo
You can try it out at [OCover](https://c.ryanuo.cc)
### Local Development
1. Clone the repository
```
git clone https://github.com/rr210/own-cover.git
```
2. Install the dependencies
```
pnpm install
```
3. Config the .env file
```
cp .env.example .env
```
NEXT_PUBLIC_UNSPLASH_API_KEY= your unsplash api key
[apply for unsplash api key](https://unsplash.com/)
4. Run the Web
```
pnpm run dev
```
## Using Dependencies
- [nuxtjs](https://nextjs.org/)
- [tailwindcss](https://tailwindcss.com/)
- [nuxtui](https://ui.nuxt.com/getting-started)
- [dom-to-image](https://github.com/tsayen/dom-to-image)
- [tinycolor2](https://github.com/bgrins/TinyColor)
- [vue-pick-colors](https://github.com/qiuzongyuan/vue-pick-colors)
- [sharp](https://sharp.pixelplumbing.com/)
- [node-canvas](https://github.com/Automattic/node-canvas)
- [vue-photo-album](https://github.com/tenthree/vue-photo-album)
## Build
Netlify
Vercel
## Contribution
contributions of all forms are welcome including but not limited to beautifying the interface adding features improving the code fixing bugs etc.
## License
[MIT](./LICENSE) License © 2024-PRESENT [Ryan Co](https://github.com/rr210)