Using Web Monetization with Gridsome

Vu Minh Thang — Thu, 04 Jun 2020 15:50:33 +0000

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

ittus / vue-developer-profile

Developer's portfolio built with Gridsome + VueJS

Developer profile

Developer profile's built with Gridsome + VueJS

Checkout demo

Support

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

View on GitHub

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.

My developer profile page built with VuejS + Gridsome

Vu Minh Thang — Mon, 29 Apr 2019 14:12:20 +0000

I've built my developer profile with VueJS + Gridsome over the weekend.

If you're interested, please take a look.

Demo: https://me.coddeine.com/
Github: https://github.com/ittus/vue-developer-profile

I'm glad to receive your comment.

DEV Community: Vu Minh Thang