ekafyi / gatsby-theme-web-monetization
A theme for integrating the Web Monetization API on your Gatsby site š¤
Gatsby Theme Web Monetization
Features
-
šø Accept payment stream via the Web Monetization API on your website/app -
š Display monetization status, call to action banner, and show exclusive content to users with Web Monetization -
š No imports required! (for MDX content)
Web Monetization?
Web Monetization provides an open, native, efficient, and automatic way to compensate creators, pay for API calls, and support crucial web infrastructure.
Web Monetization is āa JavaScript browser API which allows the creation of a payment stream from the user agent to the websiteā. Learn more about the API and about Interledger as the transfer protocol on webmonetization.org.
Installation
New site
# create a new site at the directory "my-monetized-site"
gatsby new my-monetized-site https://github.com/ekafyi/starter-web-monetized-theme
Go to your site directory, open gatsby-config.js
, and modify the paymentPointer
option with your own walletās paymentā¦
What I built
I built gatsby-theme-web-monetization, a Gatsby theme that makes it quicker and easier to implement web monetization on Gatsby sites.
Themes in Gatsby refer to a set of functionalities, components, etc in an installable package that can be combined with other themes and plugins. With the ever-growing Gatsby themes and plugins ecosystem, this theme helps users monetize a wide range of websites/apps.
The theme comes with ready-to-use examples that only requires changing one line of codeāthe userās payment pointer.
Submission Category:
Foundational Technology. (While the theme itself is the former, the examples may come under the Creative Catalysts category, though.)
Demo
-
Blog example
-
Photography portfolio site example
All starter sites come with the instant deploy to Netlify button.
Link to Code
https://github.com/ekafyi/gatsby-theme-web-monetization
How I built it
I already built and submitted react-web-monetization-ui for this hackathon. Then I thought for React sites generated from Gatsby, adopting Web Monetization and communicating it to the site visitors could be made even simpler by leveraging Gatsby themesā composable nature.
In this theme, I bundle these monetization-related packages so users donāt have to install and configure them one by one.
- react-web-monetization-ui for the UI components
- sharafian/react-web-monetization for the hook and components detecting monetization site
- Daudr/gatsby-plugin-web-monetization to add payment pointer metadata
With the breadth of existing Gatsby starters and themes, users can add monetization features to various types of sites. In the first example site, I make a monetized blog site without writing any code by combining this theme with Gatsbyās official themes. In the second, I make a monetized portfolio site by importing and customizing the themeās UI components.
This theme does not (yet!) address more complex use cases such as revenue sharing, manually starting.stopping monetization, and securing data sent to monetized visitors. Instead, this theme seeks to be first step for Gatsby site creators of all levels to to get started with Web Monetization.
Top comments (0)