Posted on June 4, 2020
I built a developer portfolio website. I would like to hide sensitive information (e.g. contact information) from public.
ittus
/
vue-developer-profile
Developer profile's built with Gridsome + VueJS
Checkout demo
npm install
npm run develop
npm run build
Most of information is pulled from profile.json file. Please change it to your information.
Portfolio (or project) data is read from Markdown file in /src/data/projects folder. Feel free to use any Markdown syntax in there.
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
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.
Posted on June 4, 2020
Sign up to receive the latest update from our blog.