loading...

Using Web Monetization with Gridsome

ittus profile image Vu Minh Thang ・1 min read

What I built

I built a developer portfolio website. I would like to hide sensitive information (e.g. contact information) from public.

Submission Category: Exciting Experiments

Demo

https://me.coddeine.com/

Link to Code

GitHub logo ittus / vue-developer-profile

Developer's portfolio built with Gridsome + VueJS

Developer profile

Developer profile's built with Gridsome + VueJS

Checkout demo

Gridsome + Vue

Support

Buy Me A Coffee

Develop

  • Fork this repository
  • Run following command
npm install
npm run develop

Build

npm run build

Customize

Most of information is pulled from profile.json file. Please change it to your information.

Portfolio section

Portfolio (or project) data is read from Markdown file in /src/data/projects folder. Feel free to use any Markdown syntax in there.

License

MIT




How I built it

Integrated Web Monetization (Coil) and Gridsome is quite easy.
First I created index.html and in src folder and add Coil meta's tag

<!DOCTYPE html>
<html ${htmlAttrs}>
  <head>
    ${head}
    <meta name="monetization" content="$ilp.uphold.com/fPDnd2Pr32mP">
  </head>
  <body ${bodyAttrs}>
    ${app}
    ${scripts}
  </body>
</html>

Then I add the code to check if user is a paid user or not

  data: () => ({
    isPaid: false
  }),
  created() {
    if (process.isClient) {
      if (document.monetization) {
        document.monetization.addEventListener('monetizationstart', event => {
          if (document.monetization.state === 'started') {
            this.isPaid = true
          }
        });
      }
    }
  }

and then I can use the isPaid flag in other conditional statement

    downloadResume() {
      if (!this.isPaid) {
         // do something
      } else {
        // do something else
      }
    }

You can see more detail implementation in my Github repository

Additional Resources/Info

Web Monetization is a nice idea for me. I hope it will be adopted soon by other developers and content creators. Using Coil, it's very easy to add it to your website.

Discussion

markdown guide