Skip to content

ptkdev-components/webcomponent-patreon-box

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

13 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽ WebComponent: Patreon Box

My Patreon Tier Box with avatars and link from rest/json api.

โ›” DISCLAIMER: This is an unofficial patreon library and offers no warranty! All trademarks and logos belong to their respective owners.

๐ŸŽ Support: Donate

This project is free, open source and I try to provide excellent free support. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. THANK YOU!

๐Ÿ“Ž Menu

๐Ÿ’ก Features

  • [โœ”๏ธ] Easy to use
  • [โœ”๏ธ] MIT License
  • [โœ”๏ธ] Without jQuery depencence
  • [โœ”๏ธ] Configurable with attributes
  • [โœ”๏ธ] Work with: Browserify / Webpack / ReactJS / Angular / Wordpress
  • [โœ”๏ธ] My Patreon Tier Box with avatars and link from rest/json api.
  • [โœ”๏ธ] Translations: ๐Ÿ‡ฌ๐Ÿ‡ง ๐Ÿ‡ฎ๐Ÿ‡น ๐Ÿ‡ต๐Ÿ‡ฑ (Help me โค๏ธ)

๐Ÿ‘” Screenshot

See Demo here. Photos from ptkdev's patreon rest api:

WebComponent: PatreonBox

๐Ÿš€ Installation (Web)

  1. Add html code to your page (and replace api with your endpoint):
<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px"></patreon-box>
  1. Require javascript in yourpage (before </body>):
<script src="https://cdn.jsdelivr.net/npm/@ptkdev/webcomponent-patreon-box@latest/dist/lib/en/patreon-box.min.js"></script>

You can replace en in jsdelivr cdn with it or pl and load different languages or replace @latest with specific version, example @2.0.1.

See folder examples, run with npm run example. Below is available a description of options values and all logger methods.

๐Ÿ“ฆ Installation (NPM Module - Browserify/Webpack)

  1. Install npm module: npm install @ptkdev/webcomponent-patreon-box --save
  2. Add html code to your page (and replace api with your endpoint):
<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px"></patreon-box>
  1. Require javascript in your app:
require("@ptkdev/webcomponent-patreon-box");

or

import '@ptkdev/webcomponent-patreon-box';

See folder examples, run with npm run example. Below is available a description of options values and all logger methods.

๐Ÿ“– Installation (Wordpress)

  1. Download wordpress-plugin and install it.
  2. Add code to your html widget, example: Appearance --> Widget --> insert HTML Widget and paste html code (and replace api with your endpoint):
<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px"></patreon-box>

You can insert this html code in posts, widget, html box or theme. Where you want see patreon photos box.

โš›๏ธ Installation (React)

  1. Install npm module with npm install @ptkdev/webcomponent-patreon-box@latest --save:
  2. Import module in your src/App.js on header:
import '@ptkdev/webcomponent-patreon-box';
  1. Add html code to your App.js template (and replace api with your endpoint):
<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px"></patreon-box>

Below is available a description of options values and all logger methods.

๐Ÿ…ฐ๏ธ Installation (Angular)

  1. Install npm module with npm install @ptkdev/webcomponent-patreon-box@latest --save:
  2. Import module in your app/app.modules.ts on header:
import '@ptkdev/webcomponent-patreon-box';
  1. Add html code to your html component (and replace api with your endpoint):
<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px"></patreon-box>

Below is available a description of options values and all logger methods.

๐Ÿงฐ Options / Attributes

Parameter Description Values Default value Available since
api REST Api url URI / URL of endpoint https://api.ptkdev.io/backers/ v1.0.0
items-limit Set the max number of pictures number: from 0 to 100 100 v1.0.0
grid Set grid aspect ratio 1x1, 2x2, 3x3, etc... or responsive responsive v1.0.0
image-width Set width of images (NOTE: grid different than responsive overwrite this value) length units: 100%, 100px, 100pt 100% v1.0.0
image-height Set height of images length units: 100%, 100px, 100 100% v1.0.0
border-spacing Set spacing around images length units: 5%, 5px, 5pt 2px v1.0.0
border-corners Set border radius of corners: 0: square / 15: rounded / 100: circle number: from 0 to 100 5 v1.0.0
force-square Force square aspect ratio if you post photos with different size on your patreon yes / no yes v1.0.0
cache Enable/disable cache enabled / disabled enabled v1.0.0

HTML Code with attributes:

<patreon-box api="https://api.ptkdev.io/backers/" image-width="80px" image-height="80px" force-square="yes" items-limit="9" image-width="100%" image-height="100%" border-corners="5" border-spacing="2px" />

๐Ÿ”จ Developer Mode

  1. Download nightly, beta or stable.
  2. Remove .tpl suffix from config.js.tpl file in configs folder and fill it properly.
  3. Run npm install
  4. Run npm run dev

๐Ÿ“š Documentation

Run npm run docs

๐Ÿ‘‘ Sponsors

Support this project by becoming a sponsor. ๐Ÿ™ Become a sponsor on patreon or become top3 sponsor on ko-fi. Your logo will show up here with a link to your website.

๐Ÿฆ„ Backers

Thank you to all our backers! ๐Ÿ™ Become a backer on patreon.

๐Ÿ‘จโ€๐Ÿ’ป Contributing

I โค๏ธ contributions! I will happily accept your pull request! Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together ๐Ÿ‘ฏ and remember to insert your name in .all-contributorsrc and package.json file.

Thanks goes to these wonderful people (emoji key):


Patryk Rzucidล‚o

๐Ÿ’ป ๐ŸŒ ๐Ÿ“– ๐Ÿ›

Emanuele Fricano
๐Ÿ’ป ๐Ÿ›

Dominik Lubaล„ski
๐Ÿ›

๐Ÿ’ฐ In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!

๐Ÿ“ฒ Tools

๐Ÿ Sorry for snake_case

I love snake_case syntax sorry for this ๐Ÿ˜ญ don't hate me.

๐Ÿ’ซ License

  • Code and Contributions have MIT License
  • Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
  • Documentations and Translations have CC BY 4.0 License