quite a big commit

4 files changed, 247 insertions, 0 deletions

diff --git a/www/scripts/blog.js b/www/scripts/blog.js
new file mode 100644
index 0000000..1cf6657
--- /dev/null
+++ b/www/scripts/blog.js
@@ -0,0 +1,120 @@
+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 = data.posts.length - 1; i >= 0; i--) {
+				if (i >= data.posts.length - n) {
+					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"><h2>${title}</h2></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 description = document.getElementById("description");
+			var content = document.getElementById("content");
+
+			banner.src = post.banner;
+			title.innerHTML = post.title;
+			date.innerHTML = post.date;
+			author.innerHTML = post.author;
+			description.innerHTML = post.description;
+			post.tags.forEach(createTags);
+			tags.innerHTML = evaluatedTags;
+
+			document.title = `Blog / ${post.title} • altaf-creator`;
+
+			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);
+					result = result.replaceAll("<a", `<a class="link"`);
+					result = result.replaceAll("<img", `<img style="max-width: 100%;"`);
+					content.innerHTML = result;
+				}).then(() => addNodes());
+		});
+}
diff --git a/www/scripts/onload.js b/www/scripts/onload.js
new file mode 100644
index 0000000..1e15e8e
--- /dev/null
+++ b/www/scripts/onload.js
@@ -0,0 +1,30 @@
+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);

+}

+

+function index() {

+	postList(2);

+	addNodes();

+}

+

+function library() {

+	postList();

+	addNodes();

+}

diff --git a/www/scripts/scroll.js b/www/scripts/scroll.js
new file mode 100644
index 0000000..d7ab5da
--- /dev/null
+++ b/www/scripts/scroll.js
@@ -0,0 +1,81 @@
+document.addEventListener('scroll', function () {

+	progress();

+	// hideSidebar();

+});

+

+window.addEventListener("load", function () {

+	progress();

+});

+

+nodeBigSize = "25px";

+nodeDefaultSize = "16px";

+

+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 = nodeBigSize;

+				nodes[i].style.height = nodeBigSize;

+				nodes[i].style.backgroundColor = "black";

+			}

+			else {

+				nodes[i].style.width = nodeDefaultSize;

+				nodes[i].style.height = nodeDefaultSize;

+				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";

+	}

+}

+

+// Imagine a line in the middle of your viewport.

+// Hence, it moves along gas you scroll.

+// If this line is inside the element, returns true, else false.

+function isInViewport(element) {

+	const rect = element.getBoundingClientRect();

+	const scroll = window.scrollY;

+	const position = window.scrollY + window.innerHeight / 2;

+	if (position < rect.bottom + scroll && position > rect.top + scroll) return true;

+	else return false;

+}

diff --git a/www/scripts/video.js b/www/scripts/video.js
new file mode 100644
index 0000000..b74587e
--- /dev/null
+++ b/www/scripts/video.js
@@ -0,0 +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;

+}