initial commit for personal git repo server

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;

+}