sveltemeacoffee
Fully Configurable Buy Me A Coffee button in svelte
Options:
There are SVG images in the BMAC creator kit, so I used those to create a SVG image of the button and used the svg transform="scale()" for scaling.
Defaults:
Svelte Me A Coffee
A Svelte SVG component for a buymeacoffee.com button.
View Demo · Documentation · Report Bug · Request Feature
:notebook_with_decorative_cover: Table of Contents
- sveltemeacoffee
- :notebook_with_decorative_cover: Table of Contents
:star2: About the Project
:camera: Screenshots
As soon as I get a demo page up and running, I will add a screenshot.
:space_invader: Tech Stack
:dart: Features
- SVG Output
- Configure Color for:
- background
- text
- coffee cup
- coffee
- Configure text
- Use any font from https://fonts.google.com (and any variant)
- adjust size, as a multiplicitave (sorry, not adjustable for exact pixel size yet)
- adjust width, to accomodate longer text (sorry, no automatic width yet)
:toolbox: Getting Started
:bangbang: Prerequisites
This project uses pnpm as package manager, but any node package manager will do.
npm install --global pnpm
:gear: Installation
with pnpm or yarn
pnpm add sveltemeacoffee
yarn add sveltemeacoffee
with npm
npm install sveltemeacoffee
:test_tube: Running Tests
To run tests, run the following command
yarn test test
:running: Run Locally
Clone the project
git clone https://github.com/skamansam/sveltemeacoffee.git
Go to the project directory
cd my-project
Install dependencies
yarn install
Start the server
yarn start
:triangular_flag_on_post: Deployment
To deploy this project run
yarn deploy
:eyes: Usage
Use this space to tell a little more about your project and how it can be used. Show additional screenshots, code samples, demos or link to other resources.
<script>
import BuyMeACoffee from 'sveltemeacoffee';
</script>
<BuyMeACoffee/>
:compass: Roadmap
- Initial Release
- Add size adjustment in pixels
- Add automatic width adjustment to accommodate text
- Optional output in HTML/CSS instead of SVG.
- Create a customElement for use anywhere
:wave: Contributing
Contributions are always welcome!
See contributing.md for ways to get started.
:scroll: Code of Conduct
Please read the Code of Conduct
:grey_question: FAQ
Can you implement feature X,Y, or Z?
- If you create a feature request, I will be happy to see if it is within the scope of this project. TBH, this is just a kind of one-off project I created to get a button in my blog, but I will try to respond within a reasonable amount of time. If, however, you would like to get your hands wet and fix something or add a feature, feel free to fork this repo and submit a pull request.
Why does this exist?
When trying to use the Buy Me A Coffee button, I noticed there are a few things wrong with the buttons you can create:
There are only a handful of colored images to choose from.
If you try to use a custom color or text, you can't get an image link for that custom value.
If you try to use the script code they give you, it fails in Svelte/Kit (and maybe Nuxt, etc, as well) with the following error:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
:warning: License
Distributed under the Unlicense. See LICENSE.txt for more information.
:handshake: Contact
Your Name - @skamansam - skamansam@gmail.com
Project Link: https://github.com/skamansam/sveltemeacoffee
:gem: Acknowledgements
I would like to say, "Thank You" to all the amazing developers who have chosen to share their talents with the world! A special shout-out goes to the following:
- Shields.io
- for making a great API for created badges for READMEs
- Readme Template
- For creating the template I used for this README
- @svelte-web-fonts/google
- For creating the only 3rd party library used in this project
