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:

:notebook_with_decorative_cover: Table of Contents

• sveltemeacoffee
  • Options:
    • Defaults:
• :notebook_with_decorative_cover: Table of Contents
  • :star2: About the Project
    • :camera: Screenshots
    • :space_invader: Tech Stack
    • :dart: Features
  • :toolbox: Getting Started
    • :bangbang: Prerequisites
    • :gear: Installation
      • with pnpm or yarn
      • with npm
    • :test_tube: Running Tests
    • :running: Run Locally
    • :triangular_flag_on_post: Deployment
  • :eyes: Usage
  • :compass: Roadmap
  • :wave: Contributing
    • :scroll: Code of Conduct
  • :grey_question: FAQ
  • :warning: License
  • :handshake: Contact
  • :gem: Acknowledgements

: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

• Svelte
• Typescript

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

  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.

: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