Get it on GitHub

Why I built it

The problem I tried to solve

When building a website the HTML file can get heavily nested quite fast. I wanted to split up the website into multiple HTML files, so I can work on each component separately without the file getting too confusing to look at. Then I would simply put every component together in one clearly structured HTML file.

But as I didn't want to learn a complex JS framework with tons of features that would slow down my website, I decided to make my own lightweight and robust framework.

Name

The original name of the script was really simple and overused component_loader.js. So I came up with this idea: As this framework makes your code clearer and more readable, I chose jasna.js for publishing it. Ясно ("Yasno") is the Russian word for "understand" or "clear" and it is pronounced like "Jansa".

Development

Selector

First of all, I had to figure out how to clarify which parts of the HTML document should be affected at all. First I had the idea to go through each <div> tag and check if it has the value "component" in the class attribute. But then I had a much better idea. I could just create a unique tag: <component>. This one is very easy to remember and you can find it more quickly in the code, so I decided on this. Also, this was very simple to implement:

var components = document.getElementsByTagName("component");

Now I had a collection of every element with this specific tag name.

Looping through

Now I had a collection of items. But I could only work with one at a time. So I made a simple for-loop to accomplish this.

var components = document.getElementsByTagName("component");
for (let i = 0; i < components.length; i++) {
    // do stuff with each components[i]
}

Source

Next, I had to come up with an Idea, how the developer specifies, where the component is stored at. In the first version of the script, I checked the id attribute for the URL of the source.

var url = component.id; //was a bad Idea

But later I figured, that it would be much smarter to check the src attribute. Like in <img src=""> or <script src="">.

var components = document.getElementsByTagName("component");
for (let i = 0; i < components.length; i++) {
    var url = components[i].attributes['src'].textContent; //beter idea
}

Fletching my teeth on fetching data

Now, for this part, I was overwhelmed, as I have barely used asynchronous functions before. I have used "threading" in Python before, which is roughly the equivalent of JavaScript's async functions.

At the end of watching several YouTube Videos, reading some documentations at MDN, and some tutorials. I have decided to go with XMLHttpRequest.
On W3Schools I found exactly what I was looking for:

var components = document.getElementsByTagName("component");
for (let i = 0; i < components.length; i++) {
    var url = components[i].attributes['src'].textContent; 

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           content = xhttp.responseText;
           components[i].innerHTML = content;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();

}

At this point, the code was already working (I think). But I have decided to split the code up a bit because I wanted to implement live data. I made a separate function called load_component():

function load_content(component) {
    var url = component.attributes['src'].textContent;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           content = xhttp.responseText;
           component.innerHTML = content;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

var components = document.getElementsByTagName("component");
for (let i = 0; i < components.length; i++) {
    load_content(components[i]);
}

You can see this in action on my webpage (website updated by now)

Extra feature: "live_components"

At this point, you could only load everything just once. But I have decided, that dynamic content would be cooler. I won't go into details here, because the article is already really long.

Extending the for-Loop

for (let i = 0; i < components.length; i++) {
    load_content(components[i]);

    // If the first value of the class attribute is "refresh", then the component will be passed to a async function, which contains a never ending while-Loop
    if (components[i].classList[0] == "refresh") {
        live_components(components[i])
    }
}

Example:

<component src="https://examp.le/dynamic.php" class="refresh"></component>

The asynchronous function

async function live_components(component) {
    if (isNaN(component.classList[1])){
        // If the second value of the class attribute is not a number (NaN), the function will check every 2 seconds (2000ms) if the content is new
        sleep_time = 2000;
    } else {
        // If the second value is a number, then this will be taken as the "sleep_time"
        sleep_time = parseInt(component.classList[1]);
    }

    while (true) {
        await new Promise(r => setTimeout(r, sleep_time));
        load_content(component);
    }
}

Now you can specify in what time intervals it should check for updated content:

<component src="dynamic.php" class="refresh 10000"></component>
<!-- it will re-check every 10 seconds -->

Only reload the content if it has changed

function load_content(component) {
    var url = component.attributes['src'].textContent;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            content = xhttp.responseText;

            // I have added this if-condition, to check if the content of the component is already the same as the newly fetched content
            if (content !== component.innerHTML) {
                // Only updates if the source content has changed
                component.innerHTML = content;
            }
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

Finished Code

jasna.js

function load_content(component) {
    var url = component.id;

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           content = xhttp.responseText;
           component.innerHTML = content;
        }
    };
    xhttp.open("GET", url, true);
    xhttp.send();
}

async function live_components(component) {
    if (isNaN(component.classList[1])){
        sleep_time = 2000;
    } else {
        sleep_time = parseInt(component.classList[1]);
    }
    while (true) {
        await new Promise(r => setTimeout(r, sleep_time));
        load_content(component);
    }
}

var components = document.getElementsByTagName("component");

for (let i = 0; i < components.length; i++) {
    load_content(components[i]);
    if (components[i].classList[0] == "refresh") {
        live_components(components[i])
    }
}

Live Example

As I said, I have written my website with the help of this little framework. And the index file looks really clear and readable.

(Website updated by now)

<!DOCTYPE html>
<html>
    <head>
        <title>One Remboldt</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" href="css/bulma.min.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <component src="components/navbar.html"></component>
        <component src="components/header.html"></component>
        <component src="components/about_me.html"></component>
        <component src="components/links.html"></component>
        <component src="components/bottom_part.html"></component>
        <component src="components/footer.html"></component>

        <script src="js/component_loader.js"></script>
        <script src="js/counter.js"></script>
    </body>
</html>

View JasnaJS on GitHub.

Step 1 - Analyzing JavaScript

1.1 - Unminifying the Full-Page Script

The full-page script is hosted on https://publisher.linkvertise.com/cdn/linkvertise.js. But they recently minified their script, after I criticized their method of generating links with junk data in them to make them look more complex.

So, when I started working on my script, I had to first unminify the code with https://unminify.com/.

1.2 - Understanding, how their links work

From lines 34 to 38, I found this:

 debug("Converting '" + base_href + "'");
 var base_url = "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/";
 var href = base_url + "?r=" + btoa(encodeURI(base_href));
 link.href = href;
 link.setAttribute("_target", "blank");

The base URL is https://link-to.net/, after that we have the user id, then a random number to make it look more confusing, then /dynamic/?r=, and finally we encode the URL into an ASCII Format with encodeURI(url). The URI is then encoded in base64 with the btoa() function. In the end, we get this URL-Format:

"https://link-to.net/${user_id}/${random_number}/dynamic/?r=${base64}"

Step 2 - Writing own Script

2.1 - Link transformer

The first step was really simple. I took the URL format, we saw in Part 1, and have put it into a separate function, so developers can use it in their JavaScript code.

function linkvertise_url(user_id, base_href) {
    return "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/?r=" + btoa(encodeURI(base_href));
}

2.2 - Replacing links in HTML DOM

First I had to find an easy way, someone could select individual links in their HTML code, and "linkvertise" them.

My solution was to first select every <a> tag and store it in a variable:

let elements = document.getElementsByTagName("a");

Now I will loop through every <a> tag with this for-loop:

for (let i = 0; i < elements.length; i++) {
    // Code goes here
}

In this for-loop, I will check for every element, if the class attribute contains "linkvertise":

for (let i = 0; i < elements.length; i++) {
    if (elements[i].classList[0] == "linkvertise") {
        // Rest here
    }
}

Lastly, I will read out the href attribute's content and pass it to linkvertise_url(); to replace the current href with the newly generated Linkvertise link:

for (let i = 0; i < elements.length; i++) {
    if (elements[i].classList[0] == "linkvertise") {
        // Reading out current href
        let base_href = elements[i].attributes['href'].textContent;

        // Generating Linkvertise URL
        let url = linkvertise_url(user_id, base_href);

        // Set new href attribute
        elements[i].setAttribute("href", url);

        // Always in new tab
        elements[i].setAttribute("target", "_blank");
    }
}

I will have to put the for-loop into a function (linkvertise) and only call it, once the <body> has loaded. The easiest way, if the developer simply includes onload="linkvertise()".

Full Code

You can either host the script for yourself or include it in your <script> tag. But I recommend you just use my CDN, which would be the easiest and cleanest way in my oppinion.

JavaScript

Copy + Paste

function linkvertise_url(user_id, base_href) {
    return "https://link-to.net/" + user_id + "/" + Math.random() * 1000 + "/dynamic/?r=" + btoa(encodeURI(base_href));
}

function linkvertise(user_id) {
    // Get every <a> tag
    let elements = document.getElementsByTagName("a");

    // Loop through every <a> tag
    for (let i = 0; i < elements.length; i++) {
        // If class of <a> tag contains "linkverse"
        if (elements[i].classList[0] == "linkvertise") {
            // Extract the url from href attribute
            let base_href = elements[i].attributes['href'].textContent;

            // Pass the user_id and url to linkvertise_url();
            url = linkvertise_url(user_id, base_href);

            // Replace current url with new one, and link in new tab
            elements[i].setAttribute("href", url);
            elements[i].setAttribute("target", "_blank");
        }
    }
}

CDN

<script src="https://cdn.remboldt.eu/linkvertise_single_url.js">
</script>

Example Usage in HTML

<!DOCTYPE html>
<html>
<head>
    <title>linkvertise single url example</title>
    <meta charset="UTF-8">
</head>
<body onload="linkvertise('644202');">
<!-- Replace 644202 with your user id -->

    <a href="https://blog.remboldt.eu/" class="linkvertise">My Blog</a>
    <!-- add class="linkvertise" to a-tag -->

    <script src="https://cdn.remboldt.eu/linkvertise_single_url.js"></script>
    <!-- include script at the bottom -->

    <script>
        let url = linkvertise_url('644202', 'https://blog.remboldt.eu/');
        // Use this function to convert URLs in JavaScript

        console.log("Generatrd in JavaScript: " + url);
    </script>
</body>
</html>

Live Demo

Thanks for reading :)