DEV Community

Eka
Eka

Posted on

gatsby-theme-web-monetization for the GftW Hackathon

GitHub logo ekafyi / gatsby-theme-web-monetization

A theme for integrating the Web Monetization API on your Gatsby site šŸ¤‘

Gatsby Theme Web Monetization

Set up Web Monetization on your Gatsby site in 5 minutes šŸ¤‘

NPM

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

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.

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)