From db1c6676a13798ee57dbac429a1d5045b60356fb Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Thu, 30 Apr 2026 22:01:53 +0800 Subject: quite a big commit --- www/scripts/blog.js | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++ www/scripts/onload.js | 30 +++++++++++++ www/scripts/scroll.js | 81 ++++++++++++++++++++++++++++++++++ www/scripts/video.js | 16 +++++++ 4 files changed, 247 insertions(+) create mode 100644 www/scripts/blog.js create mode 100644 www/scripts/onload.js create mode 100644 www/scripts/scroll.js create mode 100644 www/scripts/video.js (limited to 'www/scripts') 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 = ` +
+ +
+
+ ${evaluatedTags} +
+

${title}

 +

${date}

+
+
+ ` + + blogContainer.innerHTML += template; +} + +function createTags(tag) { + evaluatedTags += `${tag}` +} + +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("-+-+-+", ` +
+
+
+`) + data = data.replaceAll("+-+-+-", ` +
+
+
+`) + + console.log(data); + + + var result = md.render(data); + result = result.replaceAll(" 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; +} -- cgit v1.2.3