This blog is taken from the DEV.to article I wrote as part of the #gftwhackathon.
As a fellow developer, I think I would need to go out of my way to explain the importance of proper documentation to everyone in the community. We all know that source code itself is not a substitute to a readable and easy to understand documentation. Nonetheless, a lot of developers choose not to spend enough time to write proper supporting documentation for the projects (We all have gone through times where going through the source code isn't fun 😅).
To incentivize the developers, I decided to web-monetize README.md documentation on GitHub. I hope it becomes a stepping stone to help the community to invest time into writing documentations and show support for each other's work!
I implemented GitHub OAuth enabling users to simply sign in with their GitHub account.
Once logged in, you can easily add (or update) your wallet pointer. After you have done so, you can connect any repository(s), public or private, within your GitHub account. This will automatically create a documentation link (unpublished initially)
This is the exciting part! I built a markdown editor and you can use it to edit your documentation here and save it. Once you publish it, the GitHub repository will have an updated README file with monetized label (named it Documento) and link to the documentation.
Further, once you unpublish the documentation, the GitHub README will be updated with the documentation you have saved on the application.
This documentation link in the README is web monetized with the wallet pointer you added in step 2. Users without an enabled Coil browser would not be able to view it.
FYI: Since the backend is hosted on the free-tier of Heroku, it goes off to sleep after every 30 minutes of inactivity. The first time you sign in, it may take 8-12 seconds to load, since the server has to wake up before responding. (Sorry about that!)
I created a dummy GitHub account for users who do not have a GitHub account or maybe do not want to share access to the application.
(Update: I received few verification emails for this GitHub account for verification codes, so you may not be able to log in without them. In that case, I'll recommend you to use your personal GitHub account!)
Here's the direct documentation link
I have not monetized the documentations for these GitHub repos so anyone can have a look at them
For the UI, I decided to use Vue.js. I recently started using the Vue framework, and I'm lovin' it! Besides this, I also did my debut run with Tailwind CSS and I'm impressed again! Overall, great two new tools in my UI toolkit.
Being new to Vue, I had some issues setting up the meta tags with the monetization pointer. Since, I used the same host for each documentation link, I needed to dynamically update the meta tag with the pointer for the owner of the repository. In the end, I used the handy
vue-meta plugin to help me resolve the issue.
I also had some issue when I tried to compile Tailwind CSS. Initially the CSS wasn't purging as expected, and later it was overriding the CSS for a notification library (
vuejs-noty) I was using. Eventually I was able to fix it by adding
whitelistPatterns inside the Tailwind configuration.
This was my first deep dive into the web monetization, and I can see it harnessing use into multiple web streams. Point being, this new payment standard seems promising and looking forward to interesting projects being build using it in the near future.
Lastly, let's save ourselves from the nightmares of reverse-engineering undocumented code 🙅♂️. Feel free to reach out if you have any concerns or want to collaborate on interesting projects in the future!