From a26de243da1a42ea9abc4953c1906cf558493883 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Thu, 4 Apr 2024 16:41:10 +0700 Subject: initial commit for personal git repo server --- scripts/blog.js | 113 +++++++++++++++++++++++++++++++++++++++ scripts/onload.js | 35 ++++++------ scripts/scroll.js | 156 ++++++++++++++++++++++++++++-------------------------- scripts/video.js | 32 +++++------ 4 files changed, 229 insertions(+), 107 deletions(-) create mode 100644 scripts/blog.js (limited to 'scripts') 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 = ` +
+ +
+
+ ${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 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("-+-+-+", ` +
+
+
+`) + data = data.replaceAll("+-+-+-", ` +
+
+
+`) + + 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; +} -- cgit v1.2.3