overhauled most of the script code

404.html

@@ -75,7 +75,7 @@
                 ];
 
                 let message = Math.floor(Math.random() * messages.length);
-                document.getElementById('message').innerHTML = '<em>' + messages[message] + '</em>';
+                document.getElementById('message').innerHTML = `<em>${messages[message]}</em>`;
             </script>
         </p>
         <p class="go-home">

node/blog.js

@@ -4,10 +4,10 @@ const {
 const fs = require("fs");
 const converter = require("./showdown")(2);
 
-let folder = __dirname + "/../";
+let folder = `${__dirname}/../`;
 console.log("Refreshing blog sub-sites...");
 
-fs.readFile(folder + "index.html", function (_, html) {
+fs.readFile(`${folder}index.html`, function (_, html) {
     let templateDom = new JSDOM(html);
     // remove all non-blog stuff from the template (which is just our index.html)
     let noBlog = templateDom.window.document.getElementsByClassName("no-blog");
@@ -18,53 +18,50 @@ fs.readFile(folder + "index.html", function (_, html) {
     for (let i = 0; i < elements.length; i++) {
         let element = elements[i];
         if (element.src && element.src.startsWith("./"))
-            element.src = "../" + element.src.substring(2);
+            element.src = `../${element.src.substring(2)}`;
         if (element.href && element.href.startsWith("./"))
-            element.href = "../" + element.href.substring(2);
+            element.href = `../${element.href.substring(2)}`;
     }
     let template = templateDom.serialize();
 
-    fs.readFile(folder + "blog/src/posts.json", function (_, data) {
-        let json = JSON.parse(data);
+    fs.readFile(`${folder}blog/src/posts.json`, function (_, data) {
+        let json = JSON.parse(data.toString());
         for (let i = 0; i < json.length; i++) {
             let post = json[i];
-            fs.readFile(folder + "blog/src/" + post.id + ".md", function (_, content) {
+            fs.readFile(`${folder}blog/src/${post.id}.md`, function (_, content) {
                 let dom = new JSDOM(template);
                 let document = dom.window.document;
 
-                document.title += " - " + post.name;
+                document.title += ` - ${post.name}`;
                 document.querySelector('meta[property="og:title"]').setAttribute("content", post.name);
                 document.querySelector('meta[name="description"]').setAttribute("content", post.summary);
                 document.querySelector('meta[property="og:description"]').setAttribute("content", post.summary);
 
-                let nav = "";
-                nav += '<a class="nav-item nav-link" href="/#blog">Back to Main Page</a>';
                 let last = getAdjacentPost(json, i, -1);
-                if (last)
-                    nav += '<a class="nav-item nav-link" href="/blog/' + last.id + '">Previous ' + post.cat + ' Post</a>';
                 let next = getAdjacentPost(json, i, 1);
-                if (next)
-                    nav += '<a class="nav-item nav-link" href="/blog/' + next.id + '">Next ' + post.cat + ' Post</a>';
-                document.getElementById("nav-items").innerHTML = nav;
+                document.getElementById("nav-items").innerHTML = /*html*/ `
+                    <a class="nav-item nav-link" href="/#blog">Back to Main Page</a>
+                    ${last ? /*html*/ `<a class="nav-item nav-link" href="/blog/${last.id}">Previous ${post.cat} Post</a>` : ""} 
+                    ${next ? /*html*/ `<a class="nav-item nav-link" href="/blog/${next.id}">Next ${post.cat} Post</a>` : ""}
+                `;
 
-                let c = "";
-                c += '<div class="list-display rounded">';
-                c += '<div class="blog-isolated">'
-                c += '<h1>' + post.name + '</h1>';
-                c += '<div id="blog-post-' + post.id + '">'
-                if (post.archived)
-                    c += "<p><i>This post has been archived.</i></p>"
-                c += converter.makeHtml(content.toString());
-                c += '</div>';
-                c += '<span class="text-muted project-status blog-isolated-status">' + post.date + "</span>";
-                if (post.discuss)
-                    c += '<a href="' + post.discuss + '" class="blog-discuss" id="blog-discuss-' + post.id + '">Discuss this post</a>'
-                c += '</div></div>';
-                document.getElementById("main").innerHTML = c;
+                document.getElementById("main").innerHTML = /*html*/ `
+                    <div class="list-display rounded">
+                        <div class="blog-isolated">
+                            <h1>${post.name}</h1>
+                            <div id="blog-post-${post.id}">
+                                ${post.archived ? /*html*/ `<p><i>This post has been archived.</i></p>` : ""}
+                                ${converter.makeHtml(content.toString())}
+                            </div>
+                            <span class="text-muted project-status blog-isolated-status">${post.date}</span>
+                            ${post.discuss ? /*html*/ `<a href="${post.discuss}" class="blog-discuss" id="blog-discuss-${post.id}">Discuss this post</a>` : ""}
+                        </div>
+                    </div>
+                `;
 
                 let ret = dom.serialize();
-                fs.mkdir(folder + "blog", function () {
-                    fs.writeFile(folder + "blog/" + post.id + ".html", ret, function (_, _) {});
+                fs.mkdir(`${folder}blog`, function () {
+                    fs.writeFile(`${folder}blog/${post.id}.html`, ret, function () {});
                 });
             });
         }
@@ -78,7 +75,7 @@ function getAdjacentPost(json, index, move) {
         let post = json[index];
         if (!post)
             break;
-        if (post.cat == cat && !post.archived)
+        if (post.cat === cat && !post.archived)
             return post;
     }
 }

node/lib/showdown-footnotes.js

@@ -21,22 +21,22 @@
             type: 'lang',
             filter: function filter(text) {
                 return text.replace(/\[\^([\d\w]+)\]:\s*((\n+(\s{2,4}|\t).+)+)/mgi, function (str, name, rawContent, _, padding) {
-                    var content = converter.makeHtml(rawContent.replace(new RegExp('^' + padding, 'gm'), ''));
-                    return '<a class="blog-anchor" id="footnote-' + name + '"></a><div class="footnote">[' + name + ']:' + content + '</div>';
+                    let content = converter.makeHtml(rawContent.replace(new RegExp(`^${padding}`, 'gm'), ''));
+                    return `<a class="blog-anchor" id="footnote-${name}"></a><div class="footnote">[${name}]:${content}</div>`;
                 });
             }
         }, {
             type: 'lang',
             filter: function filter(text) {
                 return text.replace(/\[\^([\d\w]+)\]:( |\n)((.+\n)*.+)/mgi, function (str, name, _, content) {
-                    return '<a class="blog-anchor" id="footnote-' + name + '"></a><small class="footnote"><a href="#footnote-reference-' + name + '">[' + name + ']</a>: ' + content + '</small>';
+                    return `<a class="blog-anchor" id="footnote-${name}"></a><small class="footnote"><a href="#footnote-reference-${name}">[${name}]</a>: ${content}</small>`;
                 });
             }
         }, {
             type: 'lang',
             filter: function filter(text) {
                 return text.replace(/\[\^([\d\w]+)\]/mgi, function (str, name) {
-                    return '<a class="blog-anchor" id="footnote-reference-' + name + '"><a href="#footnote-' + name + '"><sup>[' + name + ']</sup></a>';
+                    return `<a class="blog-anchor" id="footnote-reference-${name}"><a href="#footnote-${name}"><sup>[${name}]</sup></a>`;
                 });
             }
         }];

node/lib/showdown-prettify.js

@@ -22,7 +22,7 @@
             filter: function (source) {
                 return source.replace(/(<pre[^>]*>)?[\n\s]?<code([^>]*)>/gi, function (match, pre, codeClass) {
                     if (pre) {
-                        return '<pre class="prettyprint linenums"><code' + codeClass + '>';
+                        return `<pre class="prettyprint linenums"><code${codeClass}>`;
                     } else {
                         return ' <code>';
                     }

node/rss.js

@@ -4,12 +4,12 @@ const {
 const fs = require("fs");
 const converter = require("./showdown")(1);
 
-let folder = __dirname + "/../";
+let folder = `${__dirname}/../`;
 console.log("Refreshing feeds...");
 createFeed(function (feed) {
-    fs.writeFile(folder + "feed.json", feed.json1(), function (_, _) {});
-    fs.writeFile(folder + "rss.xml", feed.rss2(), function (_, _) {});
-    fs.writeFile(folder + "atom.xml", feed.atom1(), function (_, _) {});
+    fs.writeFile(`${folder}feed.json`, feed.json1(), function (_) {});
+    fs.writeFile(`${folder}rss.xml`, feed.rss2(), function (_) {});
+    fs.writeFile(`${folder}atom.xml`, feed.atom1(), function (_) {});
 });
 
 function createFeed(callback) {
@@ -33,17 +33,17 @@ function createFeed(callback) {
         }
     });
 
-    fs.readFile(__dirname + "/../blog/src/posts.json", function (_, data) {
+    fs.readFile(`${__dirname}/../blog/src/posts.json`, function (_, data) {
         let json = JSON.parse(data);
         for (let i = json.length - 1; i >= 0; i--) {
             let post = json[i];
             let date = new Date(post.date);
 
-            fs.readFile(__dirname + "/../blog/src/" + post.id + ".md", function (_, content) {
+            fs.readFile(`${__dirname}/../blog/src/${post.id}.md`, function (_, content) {
                 let html = converter.makeHtml(content.toString());
                 feed.addItem({
-                    title: post.name + (post.archived ? " (Archived)" : ""),
-                    link: "https://ellpeck.de/blog/" + post.id,
+                    title: `${post.name}${post.archived ? " (Archived)" : ""}`,
+                    link: `https://ellpeck.de/blog/${post.id}`,
                     description: post.summary,
                     content: html,
                     date: date,
@@ -55,9 +55,8 @@ function createFeed(callback) {
                 if (feed.categories.indexOf(post.cat) < 0)
                     feed.addCategory(post.cat);
 
-                if (i == 0) {
+                if (i === 0) 
                     callback(feed);
-                }
             });
         }
     });

scripts/about.js

@@ -22,7 +22,7 @@ const facts = [
 
 const questions = [{
         q: 'How old are you?',
-        a: "I'm " + getAge() + " years old. This automatically updates now, too, so I won't ever forget to update it again!"
+        a: `I'm ${getAge()} years old. This automatically updates now, too, so I won't ever forget to update it again!`
     },
     {
         q: 'Where are you from?',
@@ -71,11 +71,13 @@ const questions = [{
 ];
 
 let a = '';
-for (question of questions) {
-    a += '<p>';
-    a += '<strong>Q: ' + question.q + '</strong><br>';
-    a += '<strong>A:</strong> ' + question.a;
-    a += '</p>';
+for (let question of questions) {
+    a += /*html*/ `
+        <p>
+            <strong>Q: ${question.q}</strong><br>
+            <strong>A:</strong> ${question.a}
+        </p>
+    `;
 }
 $('#about-list').html(a);
 

scripts/blog.js

@@ -24,17 +24,19 @@ function populateBlog(json, cat) {
 
     addCatButton(json, cats, "All");
     for (let i = json.length - 1; i >= 0; i--) {
-        var obj = json[i];
+        let obj = json[i];
         addCatButton(json, cats, obj.cat);
-        if (cat == "All" || obj.cat == cat) {
-            let p = "";
-            p += '<div class="card bg-light blog-entry rounded-0">';
-            p += '<div class="card-body">';
-            p += '<h4 class="card-title blog-title"><a class="blog-button" href="/blog/' + obj.id + '">' + obj.name + '</a></h4>';
-            p += '<div class="card-text text-muted blog-summary">' + obj.summary + '</div>';
-            p += '<span class="text-muted project-status">' + obj.date + "</span>";
-            p += '<span class="text-muted blog-cat">' + obj.cat + "</span>";
-            p += '</div></div>';
+        if (cat === "All" || obj.cat === cat) {
+            let p = /*html*/ `
+                <div class="card bg-light blog-entry rounded-0">
+                    <div class="card-body">
+                        <h4 class="card-title blog-title"><a class="blog-button" href="/blog/${obj.id}">${obj.name}</a></h4>
+                        <div class="card-text text-muted blog-summary">${obj.summary}</div>
+                        <span class="text-muted project-status">${obj.date}</span>
+                        <span class="text-muted blog-cat">${obj.cat}</span>
+                    </div>
+                </div>
+            `;
             if (obj.archived) {
                 archive.append(p);
             } else {
@@ -47,7 +49,7 @@ function populateBlog(json, cat) {
 function addCatButton(json, cats, cat) {
     let catAnchor = `blog-cat-${cat.toLowerCase().replace(" ", "_")}`;
     if (!$(`#${catAnchor}`).length) {
-        cats.append(`<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor}>${cat}</button>`);
+        cats.append( /*html*/ `<button type="button" class="btn btn-link blog-cat-button" id=${catAnchor}>${cat}</button>`);
         $(`#${catAnchor}`).on('click', function () {
             populateBlog(json, cat);
         });

scripts/cookieinfo.js

@@ -1,13 +1,14 @@
 if (getCookie("notification") !== "true") {
-    let notif = "";
-    notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
-    notif += "This site uses cookies to store information about your browsing activity.";
-    notif += "<br>For more information, check out the <a href=\"/#privacy\">privacy policy</a>.";
-    notif += "<br>Have a nice day!";
-    notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
-    notif += '<span>&times;</span>';
-    notif += '</button></div>';
-    document.write(notif);
+    document.write( /*html*/ `
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            This site uses cookies to store information about your browsing activity.
+            <br>For more information, check out the <a href=\"/#privacy\">privacy policy</a>.
+            <br>Have a nice day!
+            <button type="button" class="close" data-dismiss="alert" id="notif-close">
+                <span>&times;</span>
+            </button>
+        </div>
+    `);
 
     $("#notif-close").on("click", function () {
         setCookie("notification", "true", 365);

scripts/main.js

@@ -1,13 +1,13 @@
 const dark = getCookie("dark") === "true";
-const pride = new Date().getMonth() == 5;
+const pride = new Date().getMonth() === 5;
 const loc = $("script").last().attr("src").split("/")[0];
 
 if (dark) {
-    document.write(`<link rel="stylesheet" href="${loc}/style/dark.css">`)
-    document.write(`<link rel="stylesheet" href="${loc}/style/prettify-dark.css">`)
+    document.write( /*html*/ `<link rel="stylesheet" href="${loc}/style/dark.css">`);
+    document.write( /*html*/ `<link rel="stylesheet" href="${loc}/style/prettify-dark.css">`);
 }
 if (pride)
-    document.write(`<link rel="stylesheet" href="${loc}/style/pride.css">`)
+    document.write( /*html*/ `<link rel="stylesheet" href="${loc}/style/pride.css">`);
 
 $(function () {
     let openModals = function (hash) {
@@ -20,7 +20,7 @@ $(function () {
     openModals(window.location.hash);
     $('a').on('click', function () {
         openModals($(this).attr('href'));
-    });;
+    });
 
     $('.navbar-collapse a').on('click', function () {
         $('.navbar-collapse').collapse('hide');

scripts/projects.js

@@ -66,23 +66,23 @@ const projects = [{
 ];
 
 let p = '';
-for (project of projects) {
-    p += '<div class="card bg-light project rounded-0">';
-    p += '<div class="card-body">';
-    p += '<img class="project-image" src="res/projects/' + project.icon + '.png" alt="">';
-
-    p += '<h4 class="card-title">' + project.name + '</h4>';
-    p += '<p class="card-text">' + project.desc + '</p>';
-    if (project.status)
-        p += '<span class="text-muted project-status">' + project.status + '</span>';
-
+for (let project of projects) {
+    let links = "";
     if (project.links) {
-        for (let name in project.links) {
-            p += '<a href="' + project.links[name] + '" class="card-link btn ' + (dark ? "btn-outline-light" : "btn-outline-info") + ' rounded-0">' + name + '</a>';
-        }
+        for (let name in project.links)
+            links += /*html*/ `<a href="${project.links[name]}" class="card-link btn ${dark ? "btn-outline-light" : "btn-outline-info"} rounded-0">${name}</a>`;
     }
 
-    p += '</div>';
-    p += '</div>';
+    p += /*html*/ `
+        <div class="card bg-light project rounded-0">
+            <div class="card-body">
+                <img class="project-image" src="res/projects/${project.icon}.png" alt="">
+                <h4 class="card-title">${project.name}</h4>
+                <p class="card-text">${project.desc}</p>
+                ${project.status ? /*html*/ `<span class="text-muted project-status">${project.status}</span>` : ""}
+                ${links}
+            </div>
+        </div>
+    `;
 }
 $('#project-list').html(p);

scripts/quote.js

@@ -341,4 +341,4 @@ const quotes = [
     "Dann sagt ihr schau, the end is near, bitte face your final curtain",
     "Diese Geister singen schief und sind nicht einfach auszutreiben"
 ];
-$('#quote-text').html('&#x1F3B5 <em>' + quotes[Math.floor(Math.random() * quotes.length)] + '</em>');
+$('#quote-text').html(`&#x1F3B5 <em>${quotes[Math.floor(Math.random() * quotes.length)]}</em>`);

scripts/social.js

@@ -36,17 +36,20 @@ const socials = [{
 ];
 
 let s = '';
-for (social of socials) {
-    s += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' social-button rounded-0" href="' + social.link + '"">';
+for (let social of socials) {
     let icon = social.name.toLowerCase();
     if (dark && social.darkIcon)
         icon += '_dark';
-    s += '<img class="social-image" src="res/social/' + icon + '.png" alt="">';
-    s += social.name;
-    s += '</a>'
+    s += /*html*/ `
+        <a class="btn ${dark ? "btn-dark" : "btn-light"} social-button rounded-0" href="${social.link}"">
+            <img class="social-image" src="res/social/${icon}.png" alt=""> ${social.name}
+        </a>
+    `;
 }
 $('#social-list').html(s);
 
-var disc = $("#discord-div");
-var theme = dark ? "dark" : "light";
-disc.html('<iframe id="discord-widget" src="https://discordapp.com/widget?id=181435613147430913&theme=' + theme + '" width="300" height="450" allowtransparency="true" frameborder="0"></iframe>');
+let disc = $("#discord-div");
+let theme = dark ? "dark" : "light";
+disc.html( /*html*/ `
+    <iframe id="discord-widget" src="https://discordapp.com/widget?id=181435613147430913&theme=${theme}" width="300" height="450" allowtransparency="true" frameborder="0"></iframe>
+`);

scripts/util.js

@@ -2,21 +2,21 @@ function getCookie(key) {
     let c = document.cookie;
     if (!c)
         return undefined;
-    let start = c.indexOf(key + "=") + key.length + 1;
+    let start = c.indexOf(`${key}=`) + key.length + 1;
     let end = c.indexOf(";", start);
     return c.substring(start, end < 0 ? c.length : end);
 }
 
 function setCookie(key, value, days) {
-    var date = new Date();
+    let date = new Date();
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-    document.cookie = key + "=" + value + "; expires=" + date.toUTCString();
+    document.cookie = `${key}=${value}; expires=${date.toUTCString()}`;
 }
 
 function forceToAnchor() {
     // this is probably a terrible hack
     if (window.location.hash.startsWith("#")) {
-        var anchor = $(window.location.hash);
+        let anchor = $(window.location.hash);
         if (anchor.length) {
             $('html, body').animate({
                 scrollTop: anchor.offset().top