What I built
I went through a bunch of ideas - a Vue component library, implementing this in another site, or adding it to my existing sites.
Eventually, I settled on this idea, and for the entire month of May (minus an OS reinstall and plus tonnes of Google searching), I spent some time exploring Web Components and Javascript!
I've built Revshare.js, a small Javascript library to make revsharing with Web Monetization easier. It provides an interface for a <rev-share> element with a pointers attribute to make probabilistic revsharing easier.
Submission Category:
Foundational Technology (or perhaps Creative Catalyst, I'm not sure where it fits...)
Demo
Add a <script src="http://unpkg.com/@kewbish/revshare"/> tag to your head, and that's all you need to get started.
...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]'>
<p>This is your revshared content!</p>
</rev-share>
...
If you'd also like to make your <rev-share> element exclusive, just add the exclusive attribute as well. (This will hide the element when Web Monetization is not enabled.)
...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]' exclusive>
<p>This is your revshared, exclusive content!</p>
</rev-share>
...
It works using probabilistic revsharing, and the docs I used as a guideline are available here.
Link to Code
The project is available on GitHub:
Revshare.js 💸
A JS library for revenue sharing. Made for the #gftwhackathon, won the Grand Prize as a Creative Catalyst.
Available on NPM at @kewbish/revshare.
Made in vanilla JS, May 2020.
Created by Kewbish.
Released under the MIT License.
See the project landing page. Issues and feature requests are welcome!
Installation Usage
This package is available on NPM at @kewbish/revshare.
- Run
npm i @kewbish/revshareto install it in your project. - It can then be referenced as below:
<script src="./node_modules/@kewbish/revshare/dist/index.min.js"></script>
Alternatively, add a <script> tag in your <head>:
<script src="https://unpkg.com/@kewbish/revshare"></script>
Basic Usage
Add a <rev-share> tag anywhere in your body.
This tag requires a pointers attribute, formatted in JSON.
...
<rev-share pointers='{"$john.wallet": 50, "$alicia.wallet": 50}'>
<p>This is your revenue-shared content!</p>
</rev-share>
...
Additional documentation can be found in the docs folder.
⚠️ This rev-share specification is done probablistically nature due to limitations of…
How I built it
This is built with the basic Web Components API. This was also my first proper Javascript project, and a great learning experience.
I was a bit confused with all the callbacks available, and when exactly they fired. The Mozilla Docs were super useful in this case.
If you'd like to see what else I've posted regarding the GFTW hackathon:
Additional Resources/Info
There are a couple other Web Component submissions that also add Web Monetization functionality - go check those out!
If you have any feedback, let me know! (I'm a complete newbie with Javascript - be gentle :).)
Top comments (4)
Awesome!
Thanks :)
Huge congrats on the win!!
Thank you! :)