Skip to content
Hugo theme component that enables web monetization and exclusive content
HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
layouts feat: custom messages for exclusive content Jan 20, 2020
screenshots feat: custom messages for exclusive content Jan 20, 2020
LICENSE chore: add license Jan 9, 2020
README.md feat: custom messages for exclusive content Jan 20, 2020
theme.toml feat: add config file Jan 9, 2020

README.md

Hugo Web Monetization Component

Note: This is not a standalone theme but a theme component that enables web monetization on your entire hugo website.

Web monetization is a standard. It is a JavaScript browser API which allows the creation of a payment stream from the reader to the content creator using the Interledger Protocol. The user needs a browser extension like Coil or Minute, or they are ahead of their time and use the Puma Browser. These will check the website for the existence of a meta tag called "monetization" which includes the payment pointer. You, the content and website creator, need such a a payment pointer.

This component adds a partial including the "monetization" meta tag and the payment pointer of the creator.

How to add the component to your site

Add the component as second theme to your hugo site:

git submodule add git@github.com:sabinebertram/hugo-webmonetization-component.git themes/webmonetization

How to configure and enable web monetization

In your config.toml, add the component to theme:

theme = ["YOUR-MAIN-THEME", "webmonetization"]

Additionally, add your payment pointer in the params section of your config.toml:

[params]
  monetization = "$twitter.xrptipbot.com/sabinebertram_"

The last part is a bit more tricky. You need to add the partial to the head of your website. Because you don't want to mess with the actual theme, you need to create a file that overwrites the file that is defining the head, usually a file called baseof.html or a partial called head.html. Depending on how your main theme is set up, the location may be different. Here are two possibilities:

  1. There is a partial called head.html, usually in themes/<YOUR-MAIN-THEME>/layouts/partials/ or themes/<YOUR-MAIN-THEME>/layouts/partials/head/:

    a) Create a file in layouts/partials/ called head.html and copy the contents from themes/<YOUR-MAIN-THEME>/layouts/partials/head.html or themes/<YOUR-MAIN-THEME>/layouts/partials/head/head.html.

    b) Include the web monetization partial in the bottom of this new head.html:

    {{ partial "webmonetization.html" .}}
  2. The head is defined in themes/<YOUR-MAIN-THEME>/layouts/_default/baseof.html:

    a) Create a file in layouts/ called baseof.html and copy the contents from themes/<YOUR-MAIN-THEME>/layouts/_default/baseof.html

    b) Include the partial within the head tag:

    <head>
    
      <!-- whatever else is there  -->
    
      {{ partial "webmonetization.html" .}}
    </head>

How to have different payment pointers for different pages

In some cases you may want to have a different payment pointer for each page, e.g. when you are writing a blog together with other people. You can define a different payment pointer, different from the one defined in the config.toml, in every markdown file by adding it to the markdown head.

---
title: "My First Post"
date: 2020-01-09T21:45:39+01:00
draft: true
monetization: "$twitter.xrptipbot.com/WietseWind"
---

Now, every individual blogger gets credit for their content. Moreover, you may even omit the payment pointer in the config.toml to only have individual blog posts web monetized.

How to create exclusive content

If you want to hide parts of your website that should only be visible to users that have web monetization enabled, you can do so by enframing this part with the {{% exclusive %}} and {{% /exclusive %}} tags. For example

## Free content

This content is free, everybody can read it.

## Exclusive content

{{% exclusive %}}

This content is exclusive. Only users with web monetization enabled can view read it.

{{% /exclusive %}}

Additionally, you have to set your markdown renderer in your config.toml to blackfriday:

[markup]
  defaultMarkdownHandler = "blackfriday"

This is how locked content is displayed: No web monetization

This is how unlocked exclusive content is displayed: Web monetization enabled

Note that the exclusive content is only hidden to the non-tech-savvy users. Those that know how to access the DOM will find it. This is due to the fact that Hugo is a static website generator and content is not stored on some server.

How to add custom messages to exclusive content

The standard messages are No web monetization enabled and Web monetization enabled

You can add custom messages by setting the parameters exclusiveThanks and exclusiveError in the params section of your config.toml:

[params]
  monetization = "$twitter.xrptipbot.com/sabinebertram_"
  exclusiveError = "The part below requires web monetization to be enabled."
  exclusiveThanks = "You rock!"

Now, the messages are the following: No web monetization enabled and Web monetization enabled

TODO:

  • Multiple payment pointers
  • Exclusive content
  • Custom message for exclusive content
  • Possibility to add a banner that shows that the page is web monetized.
You can’t perform that action at this time.