Bibi, what's down the rabbit hole 🐰
Tags: gftwhackathon, opensource, webmonetization
Published: 2020-05-12 19:41:46

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What we will build
Our aim is to research, design, develop and showcase a seamless solution to the :spider_web::moneybag: 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
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

---

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


[Note]: # (image)

<img src="https://media.discordapp.net/attachments/705529523491307574/722258099863552010/Screen_Shot_2020-06-15_at_6.15.04_PM.png" alt="image of GitHub Gists" title="GitHub Gists" width="60%" height="60%" />


As you can see, our Gist structure comprises of 
1. Chapters: This is the content that will be displayed bit by bit, depending on whether payment was sent. 
2. Length: How many chapters there are in the gist, used for internal logic.
3. 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.

[Note]: # (image)

<img src="https://media.discordapp.net/attachments/705529523491307574/722257965398229102/Screen_Shot_2020-06-15_at_6.14.49_PM.png" alt="image of GitHub Gists" title="GitHub Gists" width="60%" height="60%" />


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.

[Note]: # (image)

<img src="https://media.discordapp.net/attachments/705529523491307574/722258166557179904/Screen_Shot_2020-06-15_at_6.14.39_PM.png" alt="image of GitHub Gists" title="GitHub Gists" width="60%" height="60%" />

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.

[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)