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
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
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.
Top comments (1)
I made a plugin for this specific case if you want to try it out. 😄