From ae42c9b93d98bb0ea071605e2530d702f27d163c Mon Sep 17 00:00:00 2001 From: Maxim Lebedev Date: Sun, 6 Dec 2020 06:48:49 +0500 Subject: [PATCH] :sparkles: Added WebMonetization module --- webmonetization/README.md | 99 +++++++++++++++++++ webmonetization/assets/monetization.js | 14 +++ webmonetization/config.yaml | 12 +++ webmonetization/go.mod | 3 + .../layouts/partials/monetization.html | 13 +++ .../layouts/shortcodes/monetization.html | 12 +++ 6 files changed, 153 insertions(+) create mode 100644 webmonetization/README.md create mode 100644 webmonetization/assets/monetization.js create mode 100644 webmonetization/config.yaml create mode 100644 webmonetization/go.mod create mode 100644 webmonetization/layouts/partials/monetization.html create mode 100644 webmonetization/layouts/shortcodes/monetization.html diff --git a/webmonetization/README.md b/webmonetization/README.md new file mode 100644 index 0000000..4abcbc6 --- /dev/null +++ b/webmonetization/README.md @@ -0,0 +1,99 @@ +# WebMonetization +Simple [WebMonetization](https://webmonetization.org/) support for Hugo static generated site. + +## Install +### Config +[Import module](https://gohugo.io/hugo-modules/use-modules/#use-a-module-for-a-theme) in your site configuration: + +```yaml +imports: +- path: gitlab.com/toby3d/hugo/webmonetization +``` + +### Template +And inject `monetization` partial in your `` (better in the `_default/baseof.html` layout): + +```html + + ... + {{ partial "monetization" . }} + +``` + +The template contains logic of meta-tag displaying and preloading of non-blocking script for blocks manipulation. + +## Usage +### Global +Add `monetization` [param in your site configuration](https://gohugo.io/variables/site/#the-siteparams-variable) for monetize all pages by default: + +```yaml +baseUrl: https://example.com/ +params: + monetization: "$wallet.example.com/alice" +``` + +### Local +You can overwrite monetization tag or, if the global parameter is not set, enable monetization only on specific pages by same [param in front matter](https://gohugo.io/variables/page/#page-level-params): + +```markdown +--- +title: My monetized post +monetization: "$wallet.example.com/alice" +--- +``` + +Use the false value to force the current page monetization to be disabled (if the site is monetized globally): + +```markdown +--- +title: My demonetized post +monetization: false +--- +``` + +### Markup +Just wrap paid front matter content into `{{% monetization %}}...{{% /monetization %}}` tags: + +```markdown +... +{{% monetization %}} +## Thanks for your support! +Here is exclusive content for you. +{{% /monetization %}} +``` + +All content between these tags will be completely hidden until the successful monetization. + +### Advanced markup +Use `state` parameter to customize the display of monetized content more flexibly: +* Use the named state parameter for readability: `{{% monetization state="start" %}}` +* The parameter name can be omitted for short: `{{% monetization "start" %}}` +* If no parameter is specified, the "start" state will be used by default: `{{% monetization %}}` + +#### stop +Use this state to explain what content may be available after activate an add-on or install a compatible browser. This content will be completely hidden from the moment of monetization initialization. This event can also be useful for displaying promotional sections until the page is monetized. + +```markdown +{{% monetization state="stop" %}} +Please, install [Coil](https://coil.com/learn-more) browser extension or use [Puma Browser](https://pumabrowser.com/) to see paid content here. +{{% /monetization %}} +``` + +#### progress +This state describes the monetization initialization process and attempts to send the first coins. Use this to describe what happens to visitors with slow connections. + +```markdown +{{% monetization state="progress" %}} +Loading paid content for you... +{{% /monetization %}} +``` + +#### start +This state is activated as soon as the first coins are successfully sent. This is the standard state for the monetized block if no parameter was specified. + +```markdown +{{% monetization state="start" %}} +## Thanks for your support! +Here is exclusive content for you. +{{% /monetization %}} +``` \ No newline at end of file diff --git a/webmonetization/assets/monetization.js b/webmonetization/assets/monetization.js new file mode 100644 index 0000000..62d98c8 --- /dev/null +++ b/webmonetization/assets/monetization.js @@ -0,0 +1,14 @@ +window.addEventListener('load', () => { + if (document.monetization) { + let started = document.querySelectorAll('.monetization.monetization_state_start'); + let pending = document.querySelectorAll('.monetization.monetization_state_progress'); + let stopped = document.querySelectorAll('.monetization.monetization_state_stop'); + + stopped.forEach((el) => el.toggleAttribute('hidden')); + pending.forEach((el) => el.toggleAttribute('hidden')); + document.monetization.addEventListener('monetizationstart', () => { + pending.forEach((el) => el.toggleAttribute('hidden')); + started.forEach((el) => el.toggleAttribute('hidden')); + }); + } +}); diff --git a/webmonetization/config.yaml b/webmonetization/config.yaml new file mode 100644 index 0000000..50b97bc --- /dev/null +++ b/webmonetization/config.yaml @@ -0,0 +1,12 @@ +--- +module: + hugoVersion: + extended: false + min: "0.79.0" + mounts: + - source: assets/monetization.js + target: assets/monetization.js + - source: layouts/partials/monetization.html + target: layouts/partials/monetization.html + - source: layouts/shortcodes/monetization.html + target: layouts/shortcodes/monetization.html \ No newline at end of file diff --git a/webmonetization/go.mod b/webmonetization/go.mod new file mode 100644 index 0000000..053e6f4 --- /dev/null +++ b/webmonetization/go.mod @@ -0,0 +1,3 @@ +module gitlab.com/toby3d/hugo/webmonetization + +go 1.15 diff --git a/webmonetization/layouts/partials/monetization.html b/webmonetization/layouts/partials/monetization.html new file mode 100644 index 0000000..166ba50 --- /dev/null +++ b/webmonetization/layouts/partials/monetization.html @@ -0,0 +1,13 @@ +{{ $content := "" }} +{{ if eq $.Page.Params.monetization false }} +{{ else if $.Page.Params.monetization }} + {{ $content = $.Page.Params.monetization }} +{{ else if $.Site.Params.monetization }} + {{ $content = $.Site.Params.monetization }} +{{ end }} +{{ if ne $content "" }} + + {{ $script := resources.Get "monetization.js" | minify }} + + +{{ end }} \ No newline at end of file diff --git a/webmonetization/layouts/shortcodes/monetization.html b/webmonetization/layouts/shortcodes/monetization.html new file mode 100644 index 0000000..4d9cb43 --- /dev/null +++ b/webmonetization/layouts/shortcodes/monetization.html @@ -0,0 +1,12 @@ +{{ $state := "start" }} +{{ if and .IsNamedParams (.Get "state") }} + {{ $state = .Get "state" }} +{{ else if .Get 0 }} + {{ $state = .Get 0 }} +{{ end }} +{{ if (and (and (ne $state "start") (ne $state "progress")) (ne $state "stop")) }} + {{ errorf "monetization shortcode: state must be 'stop', 'progress' or 'start'" }} +{{ end }} +
+ {{ .Inner }} +
\ No newline at end of file