The Interledger Community 🌱: Documento

Documento — Grant Report #1 (Final)

Abhinav Chawla — Sun, 24 Jan 2021 03:10:42 +0000

Image

Project Update

The project has been completed.

The project can be accessed at: https://github-monetize.web.app/

Source code

Web UI

abhinavchawla13 / github-monetize-ui

Backend API

abhinavchawla13 / github-monetize-api

Progress on objectives

The project was an extension of the hackathon submission and proposed certain objectives, explained in detail here. Progress has been timely, and no major hiccups came in the middle.

Key activities

As mentioned in the other blog, there were three key features we aimed to complete:

Branch-specific push ✅
Support for multiple pointers ✅
Customizable preview for READMEs ✅

Communications and marketing

The project has only been discussed through DEV and this web monetization community, for now.

What’s next?

With the project completed, we would request further ideas from the community on how to take the project further. For us, it was more of an attempt to explore the technology and present a possible use case for the extended developer community.

What community support would benefit your project?

As mentioned, probably ideas on how to extend the project, or possible integrations with other projects in the future would be beneficial going forward.

Additional comments

Thanks for believing and funding the project. We thoroughly believe in the future of technology and hope the project would serve as a baby step in the longer game.

Documento: Part 2

Abhinav Chawla — Sun, 24 Jan 2021 02:01:48 +0000

Extending my submission in the hackathon, I had applied for the grant to work on three specific features:

Branch-specific push
Support for multiple pointers
Customizable preview for READMEs

Branch-specific push

The app now supports to push different READMEs to different branches within a repository. All the branches would be automatically pulled on load. The user can select a specific branch, add a pointer to it and its README file.

Support for multiple pointers

This new feature allows users to have multiple pointers in their profile, can select any pointer for individual branches in every repository.

Customizable preview for READMEs

As per phase 1 of the project, the README would be appended with a fixed header providing the link to the monetized content. Since users might want to customize to their likings, the application provides the support to preview the final README before posting, and fully customize as they wish.
The only necessity is to include the link for the monetized webpage, how and where is up to to the user.

With these features in place, the project is completed. It's live at https://github-monetize.web.app/ and can be tested out by users. I hope the project becomes an asset to the Web Monetization's library of projects and can help the developers eventually monetize their documents.

Feel free to provide any feedback and/or suggestion you may have.

Stay safe and healthy!

Documento: Part 1

Abhinav Chawla — Tue, 19 Jan 2021 03:34:02 +0000

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

dummy-cntrl / test-01

Here's the direct documentation link

Here's the code

Web UI

abhinavchawla13 / github-monetize-ui

Backend API

abhinavchawla13 / github-monetize-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!