Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

overhauled most of the script code
All checks were successful
Web/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Ell 2021-03-19 07:55:18 +01:00
parent f4a041bfec
commit ee5c7b64f0
13 changed files with 111 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
404.html
View file

@ -75,7 +75,7 @@
]; ];
let message = Math.floor(Math.random() * messages.length); 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> </script>
</p> </p>
<p class="go-home"> <p class="go-home">

61
node/blog.js
View file

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

8
node/lib/showdown-footnotes.js
View file

@ -21,22 +21,22 @@
type: 'lang', type: 'lang',
filter: function filter(text) { filter: function filter(text) {
return text.replace(/\[\^([\d\w]+)\]:\s*((\n+(\s{2,4}|\t).+)+)/mgi, function (str, name, rawContent, _, padding) { 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'), '')); 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>'; return `<a class="blog-anchor" id="footnote-${name}"></a><div class="footnote">[${name}]:${content}</div>`;
}); });
} }
}, { }, {
type: 'lang', type: 'lang',
filter: function filter(text) { filter: function filter(text) {
return text.replace(/\[\^([\d\w]+)\]:( |\n)((.+\n)*.+)/mgi, function (str, name, _, content) { 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', type: 'lang',
filter: function filter(text) { filter: function filter(text) {
return text.replace(/\[\^([\d\w]+)\]/mgi, function (str, name) { 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>`;
}); });
} }
}]; }];

2
node/lib/showdown-prettify.js
View file

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

19
node/rss.js
View file

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

14
scripts/about.js
View file

@ -22,7 +22,7 @@ const facts = [
const questions = [{ const questions = [{
q: 'How old are you?', 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?', q: 'Where are you from?',
@ -71,11 +71,13 @@ const questions = [{
]; ];
let a = ''; let a = '';
for (question of questions) { for (let question of questions) {
a += '<p>'; a += /*html*/ `
a += '<strong>Q: ' + question.q + '</strong><br>'; <p>
a += '<strong>A:</strong> ' + question.a; <strong>Q: ${question.q}</strong><br>
a += '</p>'; <strong>A:</strong> ${question.a}
</p>
`;
} }
$('#about-list').html(a); $('#about-list').html(a);

24
scripts/blog.js
View file

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

19
scripts/cookieinfo.js
View file

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

10
scripts/main.js
View file

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

30
scripts/projects.js
View file

@ -66,23 +66,23 @@ const projects = [{
]; ];
let p = ''; let p = '';
for (project of projects) { for (let project of projects) {
p += '<div class="card bg-light project rounded-0">'; let links = "";
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>';
if (project.links) { if (project.links) {
for (let name in 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>'; 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 += /*html*/ `
p += '</div>'; <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); $('#project-list').html(p);

2
scripts/quote.js
View file

@ -341,4 +341,4 @@ const quotes = [
"Dann sagt ihr schau, the end is near, bitte face your final curtain", "Dann sagt ihr schau, the end is near, bitte face your final curtain",
"Diese Geister singen schief und sind nicht einfach auszutreiben" "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>`);

19
scripts/social.js
View file

@ -36,17 +36,20 @@ const socials = [{
]; ];
let s = ''; let s = '';
for (social of socials) { for (let social of socials) {
s += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' social-button rounded-0" href="' + social.link + '"">';
let icon = social.name.toLowerCase(); let icon = social.name.toLowerCase();
if (dark && social.darkIcon) if (dark && social.darkIcon)
icon += '_dark'; icon += '_dark';
s += '<img class="social-image" src="res/social/' + icon + '.png" alt="">'; s += /*html*/ `
s += social.name; <a class="btn ${dark ? "btn-dark" : "btn-light"} social-button rounded-0" href="${social.link}"">
s += '</a>' <img class="social-image" src="res/social/${icon}.png" alt=""> ${social.name}
</a>
`;
} }
$('#social-list').html(s); $('#social-list').html(s);
var disc = $("#discord-div"); let disc = $("#discord-div");
var theme = dark ? "dark" : "light"; let 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>'); 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>
`);

8
scripts/util.js
View file

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