jekyll-theme-satellite 1.1.2 → 1.2.4

data/assets/js/common.js

@@ -10,18 +10,6 @@ document.addEventListener('DOMContentLoaded', function(){
         themeIcons.forEach((ico) => {
             ico.classList.add('active');
         });
-        /*
-        const moonIcons = document.querySelectorAll(".ico-dark");
-        const sunIcons = document.querySelectorAll(".ico-light");
-
-        moonIcons.forEach((ico) => {
-            ico.classList.add('active');
-        });
-
-        sunIcons.forEach((ico) => {
-            ico.classList.add('active');
-        });
-        */
     }
     else {
         isDarkMode = false;
@@ -95,6 +83,7 @@ document.addEventListener('DOMContentLoaded', function(){
 
     // Change Datk/Light Theme
     const themeButton = document.querySelectorAll("#btn-brightness");
+    const innerContent = document.querySelector('main');
 
     themeButton.forEach((btn) => {
         btn.addEventListener('click', function() {
@@ -114,16 +103,18 @@ document.addEventListener('DOMContentLoaded', function(){
             if (isDarkMode){
                 localStorage.setItem('theme', 'default');
                 // Disable highlighter dark color theme
-                document.getElementById("highlight-default").disabled=false;
-                document.getElementById("highlight-dark").disabled=true;
+                Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
+                    codeblock.classList.remove('pre-dark');
+                });
                 changeGiscusTheme('light');
                 isDarkMode = false;
             }
             else {
                 localStorage.setItem('theme', 'dark');
                 // Disable highlighter default color theme
-                document.getElementById("highlight-default").disabled=true;
-                document.getElementById("highlight-dark").disabled=false;
+                Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
+                    codeblock.classList.add('pre-dark');
+                });
                 changeGiscusTheme('noborder_gray');
                 isDarkMode = true;
             }
@@ -152,7 +143,7 @@ document.addEventListener('DOMContentLoaded', function(){
         searchButton.forEach((btn) => {
             btn.addEventListener('click', function() {
                 searchPage.classList.add('active');
-                $('#search-input').focus();
+                document.getElementById("search-input").focus();
             });
         });
     }
@@ -171,9 +162,191 @@ document.addEventListener('DOMContentLoaded', function(){
 
     if (cancelButton) {
         cancelButton.addEventListener('click', function() {
-            $('.result-item').remove();
-            $('#search-input').val("");
-            $('#btn-clear').hide();
+            document.getElementById('btn-clear').style.display = 'none';
+            document.getElementById('search-input').value = "";
+
+            Array.from(document.querySelectorAll('.result-item')).forEach(function (item) {
+                item.remove();
+            });
+        });
+    }
+});
+
+function searchPost(pages){
+    document.getElementById('search-input').addEventListener('keyup', function() {
+        var keyword = this.value.toLowerCase();
+        var matchedPosts = [];
+        const searchResults = document.getElementById('search-result');
+        const prevResults = document.querySelector(".result-item");
+    
+        if (keyword.length > 0) {
+            searchResults.style.display = 'block';
+            document.getElementById('btn-clear').style.display = 'block';
+        } else {
+            searchResults.style.display = 'none';
+            document.getElementById('btn-clear').style.display = 'none';
+        }
+        
+        Array.from(document.querySelectorAll('.result-item')).forEach(function (item) {
+            item.remove();
+        });
+    
+        for (var i = 0; i < pages.length; i++) {
+            var post = pages[i];
+    
+            if (post.title === 'Home' && post.type == 'category') continue;
+    
+            if (post.title.toLowerCase().indexOf(keyword) >= 0
+            || post.path.toLowerCase().indexOf(keyword) >= 0
+            || post.tags.toLowerCase().indexOf(keyword) >= 0){
+                matchedPosts.push(post);
+            }
+        }
+    
+        if (matchedPosts.length === 0) {
+            insertItem('<span class="description">There is no search result.</span>');
+
+            return;
+        } 
+    
+        matchedPosts.sort(function (a, b) {
+            if (a.type == 'category') return 1;
+    
+            return -1;
+        });
+    
+        for (var i = 0; i < matchedPosts.length; i++) {
+            var highlighted_path = highlightKeyword(matchedPosts[i].path, keyword);
+    
+            if (highlighted_path === '')
+                highlighted_path = "Home";
+    
+            if (matchedPosts[i].type === 'post'){
+                var highlighted_title = highlightKeyword(matchedPosts[i].title, keyword);
+                var highlighted_tags = highlightKeyword(matchedPosts[i].tags, keyword);
+    
+                if (highlighted_tags === '')
+                    highlighted_tags = "none";
+
+                insertItem('<a href="' +
+                    matchedPosts[i].url +
+                    '"><table><thead><tr><th><svg class="ico-book"></svg></th><th>' + highlighted_title +  
+                    '</th></tr></thead><tbody><tr><td><svg class="ico-folder"></svg></td><td>' + highlighted_path +
+                    '</td></tr><tr><td><svg class="ico-tags"></svg></td><td>' + highlighted_tags +
+                    '</td></tr><tr><td><svg class="ico-calendar"></svg></td><td>' + matchedPosts[i].date +
+                    '</td></tr></tbody></table></a>'
+                );
+            }
+            else {
+                insertItem('<a href="' +
+                    matchedPosts[i].url +
+                    '"><table><thead><tr><th><svg class="ico-folder"></svg></th><th>' + highlighted_path + 
+                    '</th></tr></thead></table></a>'
+                );
+            }
+        }
+
+        function insertItem(inner_html){
+            let contents = document.createElement("li");
+            contents.classList.add("result-item");
+            contents.innerHTML = inner_html;
+            searchResults.append(contents);
+        }
+    });
+
+    function highlightKeyword(txt, keyword) {
+        var index = txt.toLowerCase().lastIndexOf(keyword);
+    
+        if (index >= 0) { 
+            out = txt.substring(0, index) + 
+                "<span class='highlight'>" + 
+                txt.substring(index, index+keyword.length) + 
+                "</span>" + 
+                txt.substring(index + keyword.length);
+            return out;
+        }
+    
+        return txt;
+    }
+}
+
+function searchRelated(pages){
+    const refBox = document.getElementById('related-box');
+    const refResults = document.getElementById('related-posts');
+
+    if (!refBox) return;
+
+    var relatedPosts = [];
+    var currPost = pages.find(obj => {return obj.url === location.pathname});
+
+    let currTags = currPost.tags.split(', ');
+    let currCategory = currPost.path.split(' > ').pop();
+
+    for (var i = 0; i < pages.length; i++) {
+        let page = pages[i];
+
+        if (page.type === 'category') continue;
+
+        if (page.title === currPost.title) continue;
+
+        let tags = page.tags.split(', ');
+        let category = page.path.split(' > ').pop();
+        let correlationScore = 0;
+
+        for (var j = 0; j < currTags.length; j++){
+            if (tags.indexOf(currTags[j]) != -1) correlationScore += 1;
+        }
+
+        if (category === currCategory) correlationScore += 1;
+
+        if (correlationScore == 0) continue;
+
+        relatedPosts.push({
+            'title': page.title,
+            'date': page.date,
+            'category': category,
+            'url': page.url,
+            'thumbnail': page.image,
+            'score': correlationScore
         });
     }
-});
+
+    relatedPosts.sort(function (a, b) {
+        if(a.hasOwnProperty('score')){
+            return b.score - a.score;
+        }
+    });
+
+    if (relatedPosts.length == 0){
+        refBox.style.display = 'none';
+        return;
+    }
+
+    for (var i = 0; i < Math.min(relatedPosts.length, 6); i++){
+        let post = relatedPosts[i];
+        let date = '-';
+        let category = 'No category';
+
+        if (post.date !== '1900-01-01'){
+            date = new Date(post.date);
+            date = date.toLocaleString('en-US', {day: 'numeric', month:'long', year:'numeric'});
+        }
+
+        if (post.category !== '') category = post.category;
+
+        if (post.thumbnail === ''){
+            post.thumbnail = "/assets/img/thumbnail/empty.jpg";
+        }
+
+        let contents = document.createElement("li");
+        contents.classList.add("related-item");
+        contents.innerHTML = '<a href="' + post.url +
+            '"><img src="' + post.thumbnail + 
+            '"/><p class="category">' + category +  
+            '</p><p class="title">' + post.title + 
+            '</p><p class="date">' + date +
+            '</p></a>';
+
+        refResults.append(contents);
+    }
+}

data/assets/js/post.js

@@ -1,82 +1,175 @@
 document.addEventListener('DOMContentLoaded', function(){
-    var content = document.querySelector('main');
+    var innerContent = document.querySelector('main');
     let currentTheme = localStorage.getItem('theme');
 
-    // Lazy image loading
-    var images = content.querySelectorAll('img');
+    // tocbot
+    var headings = innerContent.querySelectorAll('h1, h2');
+    var prevHead;
 
-    images.forEach((img) => {
-        img.setAttribute('loading', 'lazy');
-    });
+    const tocBorad = document.querySelector(".toc-board");
+    
+    Array.from(headings).forEach(function(heading){
+        let tocItem = document.createElement("li");
+        tocItem.classList.add("toc-list-item");
 
-    // tocbot
-    var headings = content.querySelectorAll('h1, h2');
-    var headingMap = {};
+        let itemLink = document.createElement("a");
+        itemLink.classList.add("toc-link");
+        itemLink.id = "toc-id-" + heading.textContent;
+        itemLink.textContent = heading.textContent;
+
+        tocItem.append(itemLink);
 
-    Array.prototype.forEach.call(headings, function (heading) {
-        var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
-                .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '');
+        itemLink.addEventListener('click', function(){
+            heading.scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
 
-        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+        console.log(heading.textContent, heading.getBoundingClientRect().top);
 
-        if (headingMap[id]) {
-            heading.id = id + '-' + headingMap[id];
-        } else {
-            heading.id = id;
+        if (heading.tagName == 'H1'){
+            itemLink.classList.add("node-name--H1");
+            prevHead = tocItem;
+            tocBorad.append(tocItem);
         }
-    })
+        else {
+            itemLink.classList.add("node-name--H2");
+
+            if (prevHead == undefined) {
+                tocBorad.append(tocItem);
+                return;
+            }
+
+            let subList = prevHead.querySelector('ol');
+
+            if (!subList){
+                subList = document.createElement("ol");
+                subList.classList.add("toc-list");
+                prevHead.append(subList);
+            }
 
-    tocbot.init({
-        tocSelector: '.toc-board',
-        contentSelector: '.inner-content',
-        headingSelector:'h1, h2',
-        hasInnerContainers: false
+            subList.append(tocItem);
+        }
     });
 
+    setInterval(function(){
+        var scrollPos = document.documentElement.scrollTop;
+
+        Array.from(tocBorad.querySelectorAll('.toc-link')).forEach(function(link){
+            link.classList.remove('is-active-link');
+        });
+
+        var currHead;
+
+        Array.from(headings).forEach(function(heading){
+            let headPos = heading.getBoundingClientRect().top + window.scrollY - 512;
+
+            if (scrollPos > headPos) currHead = heading;
+        });
+
+        if (currHead != undefined){
+            let tocLink = document.getElementById("toc-id-" + currHead.textContent);
+            tocLink.classList.add('is-active-link');
+        }
+    }, 200);
+
     // link (for hover effect)
-    var links = content.querySelectorAll('a:not(.related-item a)');
+    var links = innerContent.querySelectorAll('a:not(.related-item a)');
 
     links.forEach((link) => {
         link.setAttribute('data-content', link.innerText);
     });
 
-    // code clipboard copy button
-    async function copyCode(block) {
-        let code = block.querySelector("code");
-        let text = code.innerText;
-      
-        await navigator.clipboard.writeText(text);
+    // Tag EventListener
+    const searchPage = document.querySelector("#search");
+
+    document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){
+        tagButton.addEventListener('click', function() {
+            const contentID = tagButton.getAttribute('contentID');
+            const inpuxBox = document.getElementById('search-input');
+            searchPage.classList.add('active');
+
+            inpuxBox.value = contentID;
+            inpuxBox.dispatchEvent(new KeyboardEvent('keyup'));
+        });
+    });
+
+    // Move to Top
+    if (document.querySelector('.thumbnail')){
+        const arrowButton = document.querySelector('.top-arrow');
+
+        setInterval(function(){
+            var scrollPos = document.documentElement.scrollTop;
+    
+            if (scrollPos < 512){
+                arrowButton.classList.remove('arrow-open');
+            }
+            else {
+                arrowButton.classList.add('arrow-open');
+            }
+        }, 1000);
+
+        arrowButton.addEventListener('click', function(){
+            window.scroll({top:0, behavior:'smooth'});
+        });
     }
 
-    let blocks = document.querySelectorAll("pre");
+    // Move to Comment
+    document.getElementById('comments-counter').addEventListener('click', function(){
+        document.getElementById("giscus").scrollIntoView({
+            behavior: 'smooth'
+        });
+    });
 
-    blocks.forEach((block) => {
-        // only add button if browser supports Clipboard API
-        if (navigator.clipboard) {
-            let clip_btn = document.createElement("button");
-            let clip_img = document.createElement("svg");
+    // Code highlighter
+    if (currentTheme === 'dark'){
+        // Disable highlighter default color theme
+        Array.from(innerContent.querySelectorAll('pre')).forEach(function (codeblock){
+            codeblock.classList.add('pre-dark');
+        });
+    }
+});
 
-            clip_btn.setAttribute('title', "Copy Code");
-            clip_img.ariaHidden = true;
+window.addEventListener('load', function(){
+    // Page Hits
+    const pageHits = document.getElementById('page-hits');
 
-            block.appendChild(clip_btn);
-            clip_btn.appendChild(clip_img);
+    if (pageHits) {
+        const goatcounterCode = pageHits.getAttribute('usercode');
+        const requestURL = 'https://' 
+            + goatcounterCode 
+            + '.goatcounter.com/counter/' 
+            + encodeURIComponent(location.pathname) 
+            + '.json';
 
-            clip_btn.addEventListener("click", async () => {
-                await copyCode(block, clip_btn);
-            });
-        }
+        var resp = new XMLHttpRequest();
+        resp.open('GET', requestURL);
+        resp.onerror = function() { pageHits.innerText = "0"; };
+        resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; };
+        resp.send();
+    }
+
+    // Highlighter
+    hljs.highlightAll();
+
+    // Disable code highlights to the plaintext codeblocks
+    document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){
+        codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){
+            $.outerHTML = $.innerHTML;
+        });
     });
 
     // Initialize/Change Giscus theme
     var giscusTheme = "light";
 
-    const giscus_repo = $('meta[name="giscus_repo"]').attr("content");
-    const giscus_repoId = $('meta[name="giscus_repoId"]').attr("content");
-    const giscus_category = $('meta[name="giscus_category"]').attr("content");
-    const giscus_categoryId = $('meta[name="giscus_categoryId"]').attr("content");
+    const giscus_repo = document.querySelector('meta[name="giscus_repo"]').content;
+    const giscus_repoId = document.querySelector('meta[name="giscus_repoId"]').content;
+    const giscus_category = document.querySelector('meta[name="giscus_category"]').content;
+    const giscus_categoryId = document.querySelector('meta[name="giscus_categoryId"]').content;
 
     if (giscus_repo !== undefined) {
+        let currentTheme = localStorage.getItem('theme');
+
         if (currentTheme === 'dark'){
             giscusTheme = "noborder_gray";
         }
@@ -101,91 +194,49 @@ document.addEventListener('DOMContentLoaded', function(){
         document.body.appendChild(giscusScript);
     }
 
+    // code clipboard copy button
+    async function copyCode(block) {
+        let code = block.querySelector("code");
+        let text = code.innerText;
+      
+        await navigator.clipboard.writeText(text);
+    }
+
+    let blocks = document.querySelectorAll("pre");
+
+    blocks.forEach((block) => {
+        // only add button if browser supports Clipboard API
+        if (navigator.clipboard) {
+            let clip_btn = document.createElement("button");
+            let clip_img = document.createElement("svg");
+
+            clip_btn.setAttribute('title', "Copy Code");
+            clip_img.ariaHidden = true;
+
+            block.appendChild(clip_btn);
+            clip_btn.appendChild(clip_img);
+
+            clip_btn.addEventListener("click", async () => {
+                await copyCode(block, clip_btn);
+            });
+        }
+    });
+
     // Giscus IMetadataMessage event handler
     function handleMessage(event) {
         if (event.origin !== 'https://giscus.app') return;
         if (!(typeof event.data === 'object' && event.data.giscus)) return;
         
         const giscusData = event.data.giscus;
+        const commentCount = document.getElementById('num-comments');
 
         if (giscusData && giscusData.hasOwnProperty('discussion')) {
-            $('#num-comments').text(giscusData.discussion.totalCommentCount);
+            commentCount.innerText = giscusData.discussion.totalCommentCount;
         }
         else {
-            $('#num-comments').text('0');
+            commentCount.innerText = '0';
         }
     }
         
     window.addEventListener('message', handleMessage);
-
-    // Tag EventListener
-    const searchPage = document.querySelector("#search");
-
-    document.querySelectorAll('.tag-box .tag').forEach(function(tagButton){
-        tagButton.addEventListener('click', function() {
-            const contentID = tagButton.getAttribute('contentID');
-            searchPage.classList.add('active');
-
-            $('#search-input').val(contentID);
-            $('#search-input').trigger('keyup');
-        });
-    });
-
-    // Page Hits
-    const pageHits = document.getElementById('page-hits');
-
-    if (pageHits) {
-        const goatcounterCode = pageHits.getAttribute('usercode');
-        const requestURL = 'https://' 
-            + goatcounterCode 
-            + '.goatcounter.com/counter/' 
-            + encodeURIComponent(location.pathname) 
-            + '.json';
-
-        var resp = new XMLHttpRequest();
-        resp.open('GET', requestURL);
-        resp.onerror = function() { pageHits.innerText = "0"; };
-        resp.onload = function() { pageHits.innerText = JSON.parse(this.responseText).count; };
-        resp.send();
-    }
-
-    // Sweat Scroll
-    const scroller = new SweetScroll({
-        /* some options */
-    });
-
-    // Move to Top
-    if (document.querySelector('.thumbnail')){
-        const arrowButton = document.querySelector('.top-arrow');
-
-        setInterval(function(){
-            var scrollPos = document.documentElement.scrollTop;
-    
-            if (scrollPos < 512){
-                arrowButton.classList.remove('arrow-open');
-            }
-            else {
-                arrowButton.classList.add('arrow-open');
-            }
-        }, 1000);
-    }
-
-    // Code highlighter
-    if (currentTheme === 'dark'){
-        // Disable highlighter default color theme
-        document.getElementById("highlight-default").disabled=true;
-    }
-    else {
-        // Disable highlighter dark color theme
-        document.getElementById("highlight-dark").disabled=true;
-    }
-
-    hljs.highlightAll();
-
-    // Disable code highlights to the plaintext codeblocks
-    document.querySelectorAll('.language-text, .language-plaintext').forEach(function(codeblock){
-        codeblock.querySelectorAll('.hljs-keyword, .hljs-meta, .hljs-selector-tag').forEach(function($){
-            $.outerHTML = $.innerHTML;
-        });
-    });
 });

data/assets/js/subject.js

@@ -96,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function(){
                 }
             });
 
-            $('html, body').scrollTop(0);
+            window.scrollTo({top:0});
             localStorage.setItem(pageKey, currentPage);
         };