Documento: Part 1

This blog is taken from the DEV.to article I wrote as part of the #gftwhackathon.

What I built

"We have met the enemy, and it is us." - Walt Kelly

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!

Demo

Step 1: Sign in with your GitHub

I implemented GitHub OAuth enabling users to simply sign in with their GitHub account.

Step 2: Add your wallet pointer and connect a repository

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)

Step 3: Add documentation and publish it

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.

Step 4: Your web monetized documentation is good to go!

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.

Link to demo

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!)

https://github-monetize.web.app/

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.
Username: dummy-cntrl
Password: Dummy#12

(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!)

Sample repository with monetized documentation

Here's the direct documentation link

Here's the code

Web UI

Backend API

I have not monetized the documentations for these GitHub repos so anyone can have a look at them

How I built it

I used Node.js with Express framework to develop my backend API. On the database side, I deployed a MongoDB instance on Atlas. The backend is auto-deployed on Heroku free-dyno right now.

I used Firebase authentication to manage user logging on the admin portal. For GitHub, I connected via GitHub OAuth authorization application and used GitHub API v3 to access user repositories.

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.

Some hurdles (might get a bit too techy 🤐)

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.

Finals thoughts

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!