https://github.com/devcer/eleventy-plugin-monetization

An Eleventy plugin to monetize posts and site content
https://github.com/devcer/eleventy-plugin-monetization

hacktoberfest interledger interledger-hacktoberfest web-monetization

Last synced: 30 days ago
JSON representation

An Eleventy plugin to monetize posts and site content

• Host: GitHub
• URL: https://github.com/devcer/eleventy-plugin-monetization
• Owner: devcer
• License: mit
• Created: 2020-05-12T00:23:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-18T17:22:57.000Z (3 months ago)
• Last Synced: 2024-10-31T18:58:48.710Z (about 1 month ago)
• Topics: hacktoberfest, interledger, interledger-hacktoberfest, web-monetization
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 19
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-web-monetization - eleventy-plugin-monetization - An Eleventy plugin to monetize posts and site content.  (Resources / Packages)

README

        
# Monetize 11ty

An [Eleventy](https://www.11ty.dev/) plugin to monetize posts and site content by creating exclusive content areas.

## Web Monetization

A JavaScript browser API which allows the creation of a payment stream from the user agent to the website.

[Find out more](https://webmonetization.org/)

## Setting up Web Monetization Provider

For Testing purposes, You will find the [Web Monetization Provider](https://github.com/interledger/web-monetization-extension/) here. You will find instructions to run the extension locally in the README.md file. Hopefully, we will have the extension published soon.

If you would like to generate a sample payment pointer for testing. You could use [rafiki.money](https://rafiki.money/)

## Installation

`npm install eleventy-plugin-monetization`

Add the below to your `.eleventy.js` file:

```javascript

// Monetize

const monetize11ty = require("eleventy-plugin-monetization");

module.exports = function (eleventyConfig) {

  eleventyConfig.addPlugin(monetize11ty);

};

```

## Usage

Add the shortcode below to the `` of your 11ty site where you wish to start monetizing. For example, this could be added to the `` of a post [template file](https://www.11ty.dev/docs/data/) or create a monetize template file.

```html

{% monetize11ty "provider_url", "unique_id" %}

```

### Hiding content

Add `id="monetization-exclusive" class="hidden"` to the parent of the content you wish to monetize. This will then hide the content until a monetization plugin is active.

### CTA

Add the below divs just above the `id="monetization-exclusive"` area. This will prompt a user to start a Web Monetization extension in order to show this content.

```html

Loading exclusive content...




  
This content is exclusive to my supporters.

  


    Please install a

    Web Monetization extension

    to support me!

  



```


### Complete Example

```html

Loading exclusive content...




  
This content is exclusive to my supporters.

  
Please install a Web Monetization provider extension to support me!





  
Exclusive content.



```