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

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);
document.getElementById('message').innerHTML = '<em>' + messages[message] + '</em>';
document.getElementById('message').innerHTML = `<em>${messages[message]}</em>`;
</script>
</p>
<p class="go-home">

61
node/blog.js
View file

@ -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;
}
}

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

@ -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>`;
});
}
}];

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

@ -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>';
}

19
node/rss.js
View file

@ -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);
}
});
}
});

14
scripts/about.js
View file

@ -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);

24
scripts/blog.js
View file

@ -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);
});

19
scripts/cookieinfo.js
View file

@ -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);

10
scripts/main.js
View file

@ -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');

30
scripts/projects.js
View file

@ -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);

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",
"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 = '';
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>
`);

8
scripts/util.js
View file

@ -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