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

📔 Table of Contents

• sveltemeacoffee
  • Options:
    • Defaults:
• 📔 Table of Contents
  • 🌟 About the Project
    • 📷 Screenshots
    • 👾 Tech Stack
    • 🎯 Features
  • 🧰 Getting Started
    • ‼️ Prerequisites
    • ⚙️ Installation
      • with pnpm or yarn
      • with npm
    • 🧪 Running Tests
    • 🏃 Run Locally
    • 🚩 Deployment
  • 👀 Usage
  • 🧭 Roadmap
  • 👋 Contributing
    • 📜 Code of Conduct
  • ❔ FAQ
  • ⚠️ License
  • 🤝 Contact
  • 💎 Acknowledgements

🌟 About the Project

📷 Screenshots

As soon as I get a demo page up and running, I will add a screenshot.

👾 Tech Stack

• Svelte
• Typescript

🎯 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)

🧰 Getting Started

‼️ Prerequisites

This project uses pnpm as package manager, but any node package manager will do.

 npm install --global pnpm

⚙️ Installation

with pnpm or yarn

  pnpm add sveltemeacoffee

OR

  yarn add sveltemeacoffee

with npm

  npm install sveltemeacoffee

🧪 Running Tests

To run tests, run the following command

  yarn test test

🏃 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

🚩 Deployment

To deploy this project run

  yarn deploy

👀 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/>

🧭 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

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

📜 Code of Conduct

Please read the Code of Conduct

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

  1. There are only a handful of colored images to choose from.

  2. If you try to use a custom color or text, you can't get an image link for that custom value.

  3. 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.

⚠️ License

Distributed under the Unlicense. See LICENSE.txt for more information.

🤝 Contact

Your Name - @skamansam - skamansam@gmail.com

Project Link: https://github.com/skamansam/sveltemeacoffee

💎 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