GitHub: Monetize documentation
Tags: gftwhackathon, showdev, webmonetization, github
Published: 2020-06-03 02:35:27

*(Update: June 4, 12:17pm: There was an error for users trying to sign in for the first time, which has been fixed and pushed!)*
## 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. 

{% youtube S_vnwF6TM1s %}

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

{% youtube n5GGcQULe94 %}

### 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.

{% youtube 9xNRiUTw7po %}

### 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.

{% youtube 4jT5Zz0Ka8U %}

## Link to demo

***FYI:*** *Since the backend is hosted on the free-tier of [Heroku](https://www.heroku.com/), 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/](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
{% github dummy-cntrl/test-01 no-readme %}

##### Here's the direct documentation [link](https://github-monetize.firebaseapp.com/view/5ecd6f47cdf7990017614ef5)

---


## Here's the code
Web UI
{% github abhinavchawla13/github-monetize-ui no-readme %}

Backend API
{% github abhinavchawla13/github-monetize-api no-readme %}

*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](https://nodejs.org/) with [Express](https://expressjs.com/) framework to develop my backend API. On the database side, I deployed a [MongoDB](https://www.mongodb.com/) instance on [Atlas](https://www.mongodb.com/cloud/atlas). The backend is auto-deployed on [Heroku](https://www.heroku.com/) free-dyno right now. 

I used [Firebase authentication](https://firebase.google.com/docs/auth) to manage user logging on the admin portal. For GitHub, I connected via GitHub OAuth authorization application and used [GitHub API v3](https://developer.github.com/v3/) to access user repositories.

For the UI, I decided to use [Vue.js](https://vuejs.org/). I recently started using the Vue framework, and I'm lovin' it! Besides this, I also did my debut run with [Tailwind CSS](https://tailwindcss.com/) 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!