Hi, I'm Sabine, a software engineer at Coil. Lately, I have been working on some Web Monetization demos and I also participated in the DeFi Hackathon at San Francisco Blockchain Week last year, where my team's project won one of Xpring's prizes:

Warren Paul Anderson

@warpaul

Congrats to all #DeFiHackathon Winners! Especially @XpringDev Challengers:
- Web monetization w/ XRP collateralized interest bearing loans
- XRP collateralized margin lending
- #XRP ERC-20 token on @ethereum
- Web Monetization on @GoHugoIO
- Charity Mode on @PumaBrowser

02:10 AM - 04 Nov 2019

32 128

I thought I should share these little hacks with you to serve as inspiration for this epic hackathon. This will be a mini-series, so stay tuned for more!

Hugo + Web Monetization: The hackathon

Hugo is a static webpage generator that allows people with some coding skills to set up a beautiful webpage in just a few minutes by writing all of its content in markdown. If you want to do any changes apart from adding pages and post, though, it becomes complicated and you have to dig into the theme's code.

For the hackathon project, we tweaked an existing Hugo theme called Newsroom to allow for simple Web Monetization via the Hugo config.toml file and exclusive content using a div tag. Here is the devpost submission.

I must admit, it wasn't the greatest hack but it made me want to continue to work on it.

Hugo + Web Monetization: The Hugo theme component

A tweaked Hugo theme does not help anybody who wants to use a different theme, so I looked into avenues to get Web Monetization and exclusive content included into every webpage more easily. The fact that Web Monetization is proposed for incubation in the Web Platform Incubator Community Group (WICG) was not enough for the Hugo community to add it to their core - understandable. They pointed me towards theme components, which ended up being my solution:

git submodule add [email protected]:sabinebertram/hugo-webmonetization-component.git

A Hugo theme component is installed together with the actual theme, adding extra functionality but has no styling capabilities. It is not a stand-alone theme.

The Hugo - Web Monetization theme component allows for multiple payment pointers, one per page, such that collaborators do not have to worry about splitting payments later. Exclusive content is wrapped in {{% exclusive %}} and {{% /exclusive %}}. Additionally, the lock and unlock messages are freely customizable.

Let me know in the comments if you have ideas of what else I could add to it!