summaryrefslogtreecommitdiff
path: root/scripts
diff options
context:
space:
mode:
Diffstat (limited to 'scripts')
-rw-r--r--scripts/blog.js113
-rw-r--r--scripts/onload.js35
-rw-r--r--scripts/scroll.js156
-rw-r--r--scripts/video.js32
4 files changed, 229 insertions, 107 deletions
diff --git a/scripts/blog.js b/scripts/blog.js
new file mode 100644
index 0000000..cef9a28
--- /dev/null
+++ b/scripts/blog.js
@@ -0,0 +1,113 @@
+var evaluatedTags = "";
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
+
+function postList(n = 0) {
+ fetch("/data/posts.json")
+ .then((response) => response.json())
+ .then((data) => {
+ n = clamp(n, 0, data.posts.length);
+ if (n < 1) {
+ n = data.posts.length;
+ }
+
+ // i ❤ for loops
+ for (var i = n - 1; i >= 0; i--) {
+ console.log("dkfjlaafjsdk" + i)
+ postCard(data.posts[i]);
+ }
+ });
+}
+
+function postCard(post) {
+ var blogContainer = document.getElementById("blog-container");
+
+ var title = post.title;
+ var date = post.date;
+ var author = post.author;
+ var tags = post.tags;
+ var thumbnail = post.thumbnail;
+ var id = post.id;
+
+ evaluatedTags = "";
+ tags.forEach(createTags)
+
+ var template = `
+ <div class="card" tabindex="9999">
+ <img src="${thumbnail}"
+ alt="">
+ <div>
+ <div class="flex-container-normal chip-container">
+ ${evaluatedTags}
+ </div>
+ <a href="/blog/post.html?post=${id}" class="link">${title}</a>
+ <p>${date}</p>
+ </div>
+ </div>
+ `
+
+ blogContainer.innerHTML += template;
+}
+
+function createTags(tag) {
+ evaluatedTags += `<span class="chip">${tag}</span>`
+}
+
+function getUrlVars() {
+ var vars = [], hash;
+ var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+ for (var i = 0; i < hashes.length; i++) {
+ hash = hashes[i].split('=');
+ vars.push(hash[0]);
+ vars[hash[0]] = hash[1];
+ }
+ return vars;
+}
+
+// DEPENDENCIES
+// * /scripts/scroll.js
+function loadPost(n) {
+ const md = markdownit({
+ 'html': true
+ })
+
+ fetch("/data/posts.json")
+ .then((response) => response.json())
+ .then((data) => {
+ var post = data.posts[n];
+
+ var banner = document.getElementById("banner");
+ var title = document.getElementById("title");
+ var date = document.getElementById("date");
+ var author = document.getElementById("author");
+ var tags = document.getElementById("tag-container");
+ var content = document.getElementById("content");
+
+ banner.src = post.banner;
+ title.innerHTML = post.title;
+ date.innerHTML = post.date;
+ author.innerHTML = post.author;
+ post.tags.forEach(createTags);
+ tags.innerHTML = evaluatedTags;
+
+ fetch(post.path)
+ .then((response) => response.text())
+ .then((data) => {
+ data = data.replaceAll("-+-+-+", `
+<section class="normal-section">
+<div class="center-grid">
+<div class="div-sizing" id="content">
+`)
+ data = data.replaceAll("+-+-+-", `
+</div>
+</div>
+</section>
+`)
+
+ console.log(data);
+
+
+ var result = md.render(data);
+ content.innerHTML = result;
+ }).then(() => addNodes());
+ });
+}
diff --git a/scripts/onload.js b/scripts/onload.js
index 165f80d..9d9226e 100644
--- a/scripts/onload.js
+++ b/scripts/onload.js
@@ -1,15 +1,20 @@
-function addNodes() {
- const collection = document.getElementsByTagName("section");
- const container = document.getElementById("progressContainer");
-
- for (var i = 0; i < collection.length; i++) {
- var node = document.createElement("a");
- node.className = "node";
- container.appendChild(node);
- if (collection.item(i).getAttribute('id') == null) {
- collection.item(i).setAttribute('id', `section-${i}`);
- }
- node.setAttribute('id', `node-${i}`)
- node.href = `#${collection.item(i).getAttribute('id')}`
- }
-}
+function addNodes() {
+ const collection = document.getElementsByTagName("section");
+ const container = document.getElementById("progressContainer");
+
+ for (var i = 0; i < collection.length; i++) {
+ var node = document.createElement("a");
+ node.className = "node";
+ container.appendChild(node);
+ if (collection.item(i).getAttribute('id') == null) {
+ collection.item(i).setAttribute('id', `section-${i}`);
+ }
+ node.setAttribute('id', `node-${i}`)
+ node.href = `#${collection.item(i).getAttribute('id')}`
+ }
+}
+
+function blog(n) {
+ // addNodes is called in loadPost(n);
+ loadPost(n);
+}
diff --git a/scripts/scroll.js b/scripts/scroll.js
index 6c20890..f745db4 100644
--- a/scripts/scroll.js
+++ b/scripts/scroll.js
@@ -1,76 +1,80 @@
-document.addEventListener('scroll', function () {
- progress();
- hideSidebar();
-});
-
-function progress() {
- const sections = document.getElementsByTagName("section");
- const nodes = document.getElementsByClassName("node");
-
- if (nodes[0]) {
- for (var i = 0; i < sections.length; i++) {
- if (isInViewport(sections[i])) {
- nodes[i].style.width = "22px";
- nodes[i].style.height = "22px";
- nodes[i].style.backgroundColor = "black";
- }
- else {
- nodes[i].style.width = "13px";
- nodes[i].style.height = "13px";
- nodes[i].style.backgroundColor = "#555";
- }
- }
- }
-}
-
-function hideSidebar() {
- const sidebar = document.getElementById("sidebar");
- const progressContainer = document.getElementById("progressContainer");
- const sections = document.getElementsByTagName("section");
-
- if (screen.width <= 600) {
- if (window.scrollY >= 100) {
- sidebar.style.left = "-80px";
-
- for (var i = 0; i < sections.length; i++) {
- sections[i].style.marginLeft = 0;
- }
-
- if (progressContainer) {
- progressContainer.style.left = "-11px";
- }
- }
- else {
- sidebar.style.left = "0";
-
- for (var i = 0; i < sections.length; i++) {
- sections[i].style.marginLeft = "70px";
- }
-
- if (progressContainer) {
- progressContainer.style.left = "61px";
- }
- }
- }
- else {
- sidebar.style.left = "0";
- progressContainer.style.left = "61px";
- }
-}
-
-function isInViewport(element) {
- const rect = element.getBoundingClientRect();
- const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
- const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
- const elementHeight = rect.height;
- const elementWidth = rect.width;
- const halfElementHeight = elementHeight / 2;
- const halfElementWidth = elementWidth / 2;
-
- return (
- visibleHeight >= halfElementHeight &&
- visibleWidth >= halfElementWidth
- );
-}
-
-
+document.addEventListener('scroll', function () {
+ progress();
+ hideSidebar();
+});
+
+function progress() {
+ const sections = document.getElementsByTagName("section");
+ const nodes = document.getElementsByClassName("node");
+
+ if (nodes[0]) {
+ for (var i = 0; i < sections.length; i++) {
+ if (isInViewport(sections[i])) {
+ nodes[i].style.width = "22px";
+ nodes[i].style.height = "22px";
+ nodes[i].style.backgroundColor = "black";
+ }
+ else {
+ nodes[i].style.width = "13px";
+ nodes[i].style.height = "13px";
+ nodes[i].style.backgroundColor = "#555";
+ }
+ }
+ }
+}
+
+function hideSidebar() {
+ const sidebar = document.getElementById("sidebar");
+ const progressContainer = document.getElementById("progressContainer");
+ const sections = document.getElementsByTagName("section");
+
+ if (!progressContainer) {
+ return;
+ }
+
+ if (screen.width <= 600) {
+ if (window.scrollY >= 100) {
+ sidebar.style.left = "-80px";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = 0;
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "-11px";
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+
+ for (var i = 0; i < sections.length; i++) {
+ sections[i].style.marginLeft = "70px";
+ }
+
+ if (progressContainer) {
+ progressContainer.style.left = "61px";
+ }
+ }
+ }
+ else {
+ sidebar.style.left = "0";
+ progressContainer.style.left = "61px";
+ }
+}
+
+function isInViewport(element) {
+ const rect = element.getBoundingClientRect();
+ const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+ const visibleWidth = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
+ const elementHeight = rect.height;
+ const elementWidth = rect.width;
+ const halfElementHeight = elementHeight / 2;
+ const halfElementWidth = elementWidth / 2;
+
+ return (
+ visibleHeight >= halfElementHeight &&
+ visibleWidth >= halfElementWidth
+ );
+}
+
+
diff --git a/scripts/video.js b/scripts/video.js
index e1d5948..b74587e 100644
--- a/scripts/video.js
+++ b/scripts/video.js
@@ -1,16 +1,16 @@
-function playVideo(elementId) {
- var element = document.getElementById(elementId);
-
- element.style.visibility = "visible";
- element.style.opacity = "100%";
- element.play();
-}
-
-function stopVideo(elementId) {
- var element = document.getElementById(elementId);
-
- element.style.visibility = "hidden";
- element.style.opacity = "0%";
- element.pause();
- element.currentTime = 0;
-}
+function playVideo(elementId) {
+ var element = document.getElementById(elementId);
+
+ element.style.visibility = "visible";
+ element.style.opacity = "100%";
+ element.play();
+}
+
+function stopVideo(elementId) {
+ var element = document.getElementById(elementId);
+
+ element.style.visibility = "hidden";
+ element.style.opacity = "0%";
+ element.pause();
+ element.currentTime = 0;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 16:54:42 +0000