jekyll-theme-satellite 1.0.0 → 1.1.0

data/assets/js/post.js

@@ -0,0 +1,197 @@
+document.addEventListener('DOMContentLoaded', function(){
+    var content = document.querySelector('main');
+    let currentTheme = localStorage.getItem('theme');
+
+    // Lazy image loading
+    var images = content.querySelectorAll('img');
+
+    images.forEach((img) => {
+        img.setAttribute('loading', 'lazy');
+    });
+
+    // tocbot
+    var headings = content.querySelectorAll('h1, h2');
+    var headingMap = {};
+
+    Array.prototype.forEach.call(headings, function (heading) {
+        var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
+                .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '');
+
+        headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
+
+        if (headingMap[id]) {
+            heading.id = id + '-' + headingMap[id];
+        } else {
+            heading.id = id;
+        }
+    })
+
+    tocbot.init({
+        tocSelector: '.toc-board',
+        contentSelector: '.inner-content',
+        headingSelector:'h1, h2',
+        hasInnerContainers: false
+    });
+
+    // link (for hover effect)
+    var links = content.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);
+    }
+
+    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);
+            });
+        }
+    });
+
+    // 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");
+
+    console.log(giscus_repo);
+
+    if (giscus_repo !== undefined) {
+        if (currentTheme === 'dark'){
+            giscusTheme = "noborder_gray";
+        }
+
+        console.log("what?");
+
+        let giscusAttributes = {
+            "src": "https://giscus.app/client.js",
+            "data-repo": giscus_repo,
+            "data-repo-id": giscus_repoId,
+            "data-category": giscus_category,
+            "data-category-id": giscus_categoryId,
+            "data-mapping": "pathname",
+            "data-reactions-enabled": "1",
+            "data-emit-metadata": "1",
+            "data-theme": giscusTheme,
+            "data-lang": "en",
+            "crossorigin": "anonymous",
+            "async": "",
+        };
+
+        let giscusScript = document.createElement("script");
+        Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+        document.body.appendChild(giscusScript);
+
+        console.log("what??");
+    }
+
+    // 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;
+
+        if (giscusData && giscusData.hasOwnProperty('discussion')) {
+            $('#num-comments').text(giscusData.discussion.totalCommentCount);
+        }
+        else {
+            $('#num-comments').text('0');
+        }
+    }
+        
+    window.addEventListener('message', handleMessage);
+
+    // Tag EventListener
+    const searchPage = document.querySelector("#search");
+
+    document.querySelectorAll('.tag-box').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/search.js

@@ -0,0 +1,168 @@
+function searchPost(pages){
+    $('#search-input').on('keyup', function () {
+        var keyword = this.value.toLowerCase();
+        var searchResult = [];
+    
+        if (keyword.length > 0) {
+            $('#search-result').show();
+            $('#btn-clear').show();
+        } else {
+            $('#search-result').hide();
+            $('#btn-clear').hide();
+        }
+        
+        $('.result-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){
+                searchResult.push(post);
+            }
+        }
+    
+        if (searchResult.length === 0) {
+            $('#search-result').append(
+                '<li class="result-item"><span class="description">There is no search result.</span></li>'
+            );
+    
+            return;
+        } 
+    
+        searchResult.sort(function (a, b) {
+            if (a.type == 'category') return 1;
+    
+            return -1;
+        });
+    
+        for (var i = 0; i < searchResult.length; i++) {
+            var highlighted_path = highlightKeyword(searchResult[i].path, keyword);
+    
+            if (highlighted_path === '')
+                highlighted_path = "Home";
+    
+            if (searchResult[i].type === 'post'){
+                var highlighted_title = highlightKeyword(searchResult[i].title, keyword);
+                var highlighted_tags = highlightKeyword(searchResult[i].tags, keyword);
+    
+                if (highlighted_tags === '')
+                    highlighted_tags = "none";
+    
+                $('#search-result').append(
+                    '<li class="result-item"><a href="' +
+                        searchResult[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>' + searchResult[i].date +
+                        '</td></tr></tbody></table></a></li>'
+                );
+            }
+            else {
+                $('#search-result').append(
+                    '<li class="result-item"><a href="' +
+                        searchResult[i].url +
+                        '"><table><thead><tr><th><svg class="ico-folder"></svg></th><th>' + highlighted_path + 
+                        '</th></tr></thead></table></a></li>'
+                );
+            }
+        }
+    });
+
+    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');
+
+    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){
+        $('#related-box').hide();
+        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";
+        }
+
+        $('#related-posts').append(
+            '<li class="related-item"><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></li>'
+        );
+    }
+}

data/assets/js/subject.js

@@ -0,0 +1,132 @@
+document.addEventListener('DOMContentLoaded', function(){
+    // Loading page
+    window.addEventListener("load", () => {
+        var load_div = document.querySelector('#loading');
+
+        if(load_div != null){
+            setTimeout(function(){
+                load_div.style.transition = '.75s';
+                load_div.style.opacity = '0';
+                load_div.style.visibility = 'hidden';
+            }, 800);
+        }
+    });
+
+    // pagination
+    const paginationNumbers = document.querySelector("#pagination-numbers");
+    const paginatedList = document.querySelector(".paginated-list");
+
+    if (paginatedList) {
+        const listItems = paginatedList.querySelectorAll("li");
+        const nextButton = document.querySelector("#next-button");
+        const prevButton = document.querySelector("#prev-button");
+        const pageKey = "pageKey=" + document.URL;
+
+        const paginationLimit = 5;
+        const pageCount = Math.ceil(listItems.length / paginationLimit);
+        let currentPage = 1;
+
+        const disableButton = (button) => {
+            button.classList.add("disabled");
+            button.setAttribute("disabled", true);
+        };
+        
+        const enableButton = (button) => {
+            button.classList.remove("disabled");
+            button.removeAttribute("disabled");
+        };
+
+        const handlePageButtonsStatus = () => {
+            if (currentPage === 1) {
+                disableButton(prevButton);
+            } else {
+                enableButton(prevButton);
+            }
+        
+            if (pageCount === currentPage) {
+                disableButton(nextButton);
+            } else {
+                enableButton(nextButton);
+            }
+        };
+
+        const handleActivePageNumber = () => {
+            document.querySelectorAll(".pagination-number").forEach((button) => {
+                button.classList.remove("active");
+                
+                const pageIndex = Number(button.getAttribute("page-index"));
+
+                if (pageIndex == currentPage) {
+                    button.classList.add("active");
+                }
+            });
+        };
+
+        const appendPageNumber = (index) => {
+            const pageNumber = document.createElement("button");
+
+            pageNumber.className = "pagination-number";
+            pageNumber.innerHTML = index;
+            pageNumber.setAttribute("page-index", index);
+            pageNumber.setAttribute("aria-label", "Page " + index);
+
+            paginationNumbers.appendChild(pageNumber);
+        };
+
+        const getPaginationNumbers = () => {
+            for (let i = 1; i <= pageCount; i++) {
+                appendPageNumber(i);
+            }
+        };
+
+        const setCurrentPage = (pageNum) => {
+            currentPage = pageNum;
+            
+            handleActivePageNumber();
+            handlePageButtonsStatus();
+
+            const prevRange = (pageNum - 1) * paginationLimit;
+            const currRange = pageNum * paginationLimit;
+
+            listItems.forEach((item, index) => {
+                item.classList.add("hidden");
+
+                if (index >= prevRange && index < currRange) {
+                    item.classList.remove("hidden");
+                }
+            });
+
+            $('html, body').scrollTop(0);
+            localStorage.setItem(pageKey, currentPage);
+        };
+
+        window.addEventListener("load", (event) => {
+            // Load last visited page number
+            if (event.persisted 
+            || (window.performance && window.performance.navigation.type == 2)) {
+                currentPage = localStorage.getItem(pageKey);
+            }
+
+            getPaginationNumbers();
+            setCurrentPage(currentPage);
+
+            prevButton.addEventListener("click", () => {
+                setCurrentPage(currentPage - 1);
+            });
+            
+            nextButton.addEventListener("click", () => {
+                setCurrentPage(currentPage + 1);
+            });
+
+            document.querySelectorAll(".pagination-number").forEach((button) => {
+                const pageIndex = Number(button.getAttribute("page-index"));
+
+                if (pageIndex) {
+                    button.addEventListener("click", () => {
+                        setCurrentPage(pageIndex);
+                    });
+                }
+            });
+        });
+    }
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-satellite
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Yankos
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-01-29 00:00:00.000000000 Z
+date: 2024-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -24,6 +24,48 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '4.3'
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.12'
+- !ruby/object:Gem::Dependency
+  name: jekyll-sitemap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.6'
 description:
 email:
 - byanko55@gmail.com
@@ -32,14 +74,19 @@ extensions: []
 extra_rdoc_files: []
 files:
 - LICENSE
-- _config.yml
+- README.md
+- _includes/category.html
+- _includes/footer.html
+- _includes/head.html
 - _includes/loading.html
 - _includes/navigation.html
 - _includes/pagination.html
 - _includes/post.html
 - _includes/search.html
+- _includes/search_event.html
 - _includes/sidebar.html
 - _layouts/default.html
+- _layouts/page.html
 - _sass/darkmode.scss
 - _sass/layout.scss
 - _sass/navigation.scss
@@ -49,6 +96,8 @@ files:
 - _sass/sidebar.scss
 - _sass/toc.scss
 - _sass/vars.scss
+- assets/css/404.scss
+- assets/css/fonts.scss
 - assets/css/highlight-dark.min.css
 - assets/css/highlight-default.min.css
 - assets/css/style.scss
@@ -73,9 +122,13 @@ files:
 - assets/img/thumbnail/sample.png
 - assets/img/tile.png
 - assets/js/404.js
+- assets/js/background.js
+- assets/js/common.js
+- assets/js/fontfaceobserver.js
 - assets/js/highlight.min.js
-- assets/js/main.js
-- assets/js/stars.js
+- assets/js/post.js
+- assets/js/search.js
+- assets/js/subject.js
 - assets/js/sweet-scroll.min.js
 - assets/js/tocbot.min.js
 homepage: https://github.com/byanko55/jekyll-theme-satellite

data/_config.yml

@@ -1,82 +0,0 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-#
-# If you need help with YAML syntax, here are some quick references for you:
-# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
-# https://learnxinyminutes.com/docs/yaml/
-#
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-
-title: Example.com
-username: username
-email: example@gmail.com
-github_username: github
-twitter_username: twitter
-instagram_username: instagram
-linkedin_username: linkedin
-facebook_username: facebook
-description: "Satellite - jekyll blog theme"
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "localhost:4000" # the base hostname & protocol for your site, e.g. http://example.com
-repo_url: "https://github.com/byanko55/jekyll-theme-satellite"
-goatcounter_code:
-google_analytics:
-
-# Build settings
-plugins:
-  - jekyll-feed
-  - jekyll-sitemap
-  - jekyll-seo-tag
-
-exclude:
-  - guide/
-
-collections:
-  pages:
-    output: true
-    permalink: /:path.html
-
-defaults:
-  -
-    scope:
-      path: ""
-      type: "pages"
-    values:
-      layout: "default"
-      date: "1900-01-01"
-
-# Markdown newline activator 
-kramdown:
-  input: GFM
-  hard_wrap: true
-
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/