Bibi, what's down the rabbit hole 🐰

#gftwhackathon #opensource #webmonetization

What we will build

Our aim is to research, design, develop and showcase a seamless solution to the 🕸️💰 experience. By demonstration of a web component and a working moneztized website.

Submission Category:

Foundational Technology

Demo

https://bibi-and-berni-gftw-hackathon.netlify.app

Link to Code

https://github.com/bernardbaker/gftw-hackathon

How we built it

So we weren't sure how. Or what with. But had a basis of research to start. Plus lots of smiles and enthusiasm 😊.

Firstly our tech stack:

CSS
Coil
GitHub
HTML5
JavaScript
Netlify
React JS
Web Components

We started by defining a custom tag called with a custom property data-article-ref which receives a gist ID. The gist ID is then passed as a parameter in the API call and retrieves the gist from GitHub.

Wondering what a Gist is? With gists, you can share single files, parts of files, and full applications. Every gist is a Git repository, which means that it can be forked and cloned.

As you can see, our Gist structure comprises of

Chapters: This is the content that will be displayed bit by bit, depending on whether payment was sent.
Length: How many chapters there are in the gist, used for internal logic.
Snippet: This is the free content the user will be able to read. Title: The title of the article.

In our code, we’ve created a NewsArticle class, you can see the ID being pulled from the data-article-ref property and passed as a parameter to the API call string.

The news-article is a custom tag, and the news-article custom element then pulls the information from the Github API.

In our website, each snippet has a “Read next paragraph” button, which has a method called getNextParagraph() that loads and displays the next Chapter on the screen.

The getNextParagraph() - this method checks the current paragraph count and returns it. It starts at zero then loops through all items looking for the next chapter, and returns the content of that chapter to be displayed.

After getting the next paragraph, then we start the payment streaming. The snippets are free and you only stream payments after you click on Read next paragraph and until you leave the page.

The payments get streamed for the duration the site is open and a payment pointer is set. The payment pointer will be changed programmatically if the user clicks on another article Read next paragraph button.

Additional Resources/Info

Our innovations team members Bibiana @bibschan, Bernard @bernardbaker + hopefully more to come... plan on building a hybrid DTD which by default organises the DOM where HTML WM tags are handled in a united nature amongst other sibling and or parent tags. Using this new technique the web browser will ultimately handle content changes by default. We will venture into the realm of web components, take a deep dive into the HTML DTD. And marvel at what we find in the rabbit hole.