jekyll-theme-satellite 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04ee424c66214fc5325ace025a1205d3bba00ef334240e2cd3b046414f8824a4
-  data.tar.gz: 1d044b48a78e81a1aec1bac6f27ed8751b26636f04ae44aeaa449715754a5407
+  metadata.gz: f61521ac4ceb6e2957520d1c92d27f2c1c34d42d585a34e202f422496416d5b9
+  data.tar.gz: c1456cb304615bcf4aae2c4d67628faddb16a126923c816cf3b66f13773aba13
 SHA512:
-  metadata.gz: 37cb13d4ea2f2870250ed1532c08e815c48eabb98ffffa540203b44359fcf3f8d50f1a845fd61368c855ac8b6acb783e1788283b0130db912c8e15fc23bc2aaf
-  data.tar.gz: cd038d7ac09e27f1279345c23b8acc884b12de0469ad35a275f92fc2565ff36176a05547644bf4778bfca7efa79b14a5ca0f10c79ab40953777cfb428dab5075
+  metadata.gz: 6798782d1a8b76ffd229e6cb33cd8bebf688004d042c46149e9ac32ba4e1c26c0cf143639a4b55d700a870e00134e8feaf0afa346bddf96bde1bac8a62681152
+  data.tar.gz: 635fd4e98d98b4f7ec34aab3f0d22f1dc21ee9f5f3a98209ced7d09c18177e03b5b73c5891833280d368695f45a140d97d0474b58469c06cb7f0ae46db35fa63

data/README.md

@@ -0,0 +1,113 @@
+[![CI](https://img.shields.io/badge/Github%20Pages-passing-gold.svg?logo=github)](ci)
+[![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)
+[![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%204.3.2-green.svg)](https://jekyllrb.com/)
+[![Jekyll](https://img.shields.io/badge/gem%20version-3.2.33-blue.svg)](gem)
+
+# Satellite🛰️ - Jekyll blog theme
+An emotional and adorable blog theme powered by ***Jekyll***. Live demo is available here: [https://byanko55.github.io](https://byanko55.github.io)
+
+![Demo Page](https://i.ibb.co/h1QF06V/demo.webp)
+
+### Light Mode
+![Demo Page-light](https://i.ibb.co/PtTbM1V/image-4.webp)
+
+### Dark Mode
+![Demo Page-dark](https://i.ibb.co/cY6hwG4/image-5.webp)
+
+### Fresh and Attractive Design
+<p>
+<img src="https://i.ibb.co/4NwrTyj/image-2.webp" height="400px" align="center"/>
+<img src="https://i.ibb.co/WvyBzkL/Animation.gif" height="400px" align="center"/>
+</p>
+
+## Features
+
+* Comment System using *giscus*
+* Copy contents of Code Block
+* Dark/Light Theme
+* Google Analytics
+* Hierarchical Categorization
+* Mobile friendly design
+* Related Posts
+* RSS/Sitemap support
+* Search Post by Title or Tags
+* Syntax Highlighter (*highlight.js*)
+* Table of Contents
+* Visitor Counter (*goatcounter*)
+
+## Installation
+
+There are two way to setup this theme:
+
+### Method 1: Build from source (Recommended)
+Fork this repository or download the [source](https://github.com/byanko55/jekyll-theme-satellite/releases) as a zip. 
+
+If you use as destination a repository named USERNAME.github.io then your url will be https://USERNAME.github.io/.
+
+
+### Method 2: Utilize Gem package
+Create a clean site directory (Follow the **Instruction 1~4** described in [here](https://jekyllrb.com/docs/)).
+
+The following materials are redundant, so remove them.
+* index.markdown
+* about.markdown
+* 404.html
+
+Then, add this line to your Jekyll site's `Gemfile`:
+
+```
+gem "jekyll-theme-satellite"
+```
+
+You need to replace the initial `_config.yml` file with the [prepared one](https://github.com/byanko55/jekyll-theme-satellite/docs/_config.yml).
+
+### Modify your site setting
+
+Now fill in the **site variable** such as blog name, profile image, and social accounts in `_config.yml`.
+
+```
+title: Example.com
+description: "Satellite - jekyll blog theme"
+logo_img: "/assets/img/favicon.webp"
+profile_img: "/assets/img/profile.jpg"
+
+# Social Links
+email: example@gmail.com
+github_username: github
+twitter_username: twitter
+instagram_username: instagram
+linkedin_username: linkedin
+facebook_username: facebook
+```
+
+### Run site locally
+
+From the site root directory, install the dependencies:
+
+```
+bundle install
+```
+
+Start a Jekyll service.
+
+```
+bundle exec jekyll serve
+```
+
+Now open [http://localhost:4000](http://localhost:4000) in your browser.
+
+## Customizing
+
+You can find useful manuals for customizing your site from the below table:
+
+|||
+|---|---|
+|Posting guidelines|[link](https://github.com/byanko55/jekyll-theme-satellite/docs/Posting%20guide.md)|
+|Enabling ***comment system***|[link](https://github.com/byanko55/jekyll-theme-satellite/docs/Comment%20system.md)|
+|Enabling ***Visitor counter***|[link](https://github.com/byanko55/jekyll-theme-satellite/docs/Visitor%20counter.md)|
+
+## Contribution
+If you would like to report a bug, or request a new feature, please open [an issue](https://github.com/byanko55/jekyll-theme-satellite/docs/Contribution%20Guidelines.md) We are open to any kind of feedback or collaboration.
+
+## License
+© 2024 *Yankos*. This theme is available as open source under the terms of the [MIT License](https://opensource.org/license/mit/).

data/_includes/category.html

@@ -0,0 +1,23 @@
+<div class="category-tree">
+    {%- assign page_link = "/" -%}
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
+    <p>
+        {%- assign search_tree = page.path | remove: "/index.md" | split: "/" -%}
+        {%- for sub_tree in search_tree -%}
+            {% if forloop.first %}
+                <a href="/">Home</a>
+                >
+            {% elsif forloop.last %}
+                {% if page_type == "category" %}
+                    {{ sub_tree }}
+                {% else %}
+                    {{ page.title }}
+                {% endif %}
+            {% else %}
+                {%- assign page_link = page_link | append: sub_tree | append: "/" -%}
+                <a href="{{ page_link }}">{{ sub_tree }}</a>
+                >
+            {% endif %}
+        {%- endfor -%}
+    </p>
+</div>

data/_includes/footer.html

@@ -0,0 +1,10 @@
+<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+<script src="{{ '/assets/js/background.js' }}"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){ dataLayer.push(arguments); }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics }}');
+</script>

data/_includes/head.html

@@ -0,0 +1,33 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+{% seo %}
+
+<link rel="shortcut icon" type="image/png" href="{{ site.logo_img }}">
+<link rel="preload" href="{{ '/assets/css/fonts.css' }}" as="style" onload="this.onload=null; this.rel='stylesheet'">
+<link rel="stylesheet" href="{{ '/assets/css/fonts.css' }}">
+
+<script src="{{ '/assets/js/fontfaceobserver.js' }}" type="text/javascript"></script>
+<script type="text/javascript">
+    const nunitoObserver = new FontFaceObserver('Nunito Sans');
+    const righteousObserver = new FontFaceObserver('Righteous');
+    const latoObserver = new FontFaceObserver('Lato');
+  
+    Promise.all([
+        nunitoObserver.load(),
+        righteousObserver.load(),
+        latoObserver.load(),
+    ]).then(function(){
+        document.documentElement.className += " fonts-loaded";
+    });
+</script>
+
+<title>
+    {% if page.title %}{{ page.title }}
+    {% else %}{{ site.title }}
+    {% endif %}
+</title>
+
+<meta
+name="description"
+content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

data/_includes/pagination.html

@@ -1,13 +1,13 @@
 {%- assign list_pages = site.pages | sort:"date" | reverse -%}
 {%- assign post_counts = 0 -%}
 
-<p class="category-header">
+<h1 class="category-header">
     {% if page_level == 1 %}
         All Posts
     {% else %}
         {{ page.title }}
     {% endif %}
-</p>
+</h1>
 <div id="category-list">
     <ul class="paginated-list" data-current-page="1" aria-live="polite">
     {%- for sub_page in list_pages -%}
@@ -26,7 +26,7 @@
                     </div>
 
                     <div class="box_contents">
-                        <a href="{{ sub_page.url }}" class="title_post">{{ sub_page.title }}</a>
+                        <a href="{{ sub_page.url }}"><h1 class="title_post">{{ sub_page.title }}</h1></a>
                         <a href="{{ sub_page.url }}" class="txt_post">
                             {{ sub_page.content | markdownify | strip_html }}
                         </a>

data/_includes/search.html

@@ -4,7 +4,7 @@
     <div class="wave"></div>
 
     <div class="search-box">
-        <h1>Touch background to close</h1>
+        <mark>Touch background to close</mark>
         <div class="input-box">
             <input id="search-input"
                 type="search" 

data/_includes/search_event.html

@@ -0,0 +1,217 @@
+{%- assign page_list = site.pages 
+    | where_exp: "item", "item.title != nil"
+-%}
+<script src="{{ '/assets/js/search.js' }}" type="text/javascript"></script>
+<script>
+    var posts = [];
+
+    {% for page in page_list %}
+        {%- assign psearch_tree = page.path | split: "/" -%}
+
+        {% if psearch_tree.last == "index.md" %}
+            {%- assign p_type = "category" -%}
+        {% else %}
+            {%- assign p_type = "post" -%}
+        {% endif %}
+
+        {%- assign tree_len = psearch_tree.size | minus: 2 -%}
+        {%- assign psearch_tree = psearch_tree | slice:1, tree_len -%}
+        {%- assign p_link = "" -%}
+        {%- for sub_tree in psearch_tree -%}
+            {% if forloop.last %}
+                {%- assign p_link = p_link | append: sub_tree -%}
+            {% else %}
+                {%- assign p_link = p_link | append: sub_tree | append: " > " -%}
+            {% endif %}
+        {%- endfor -%}
+
+        posts.push({
+            'title'    : "{{ page.title | escape }}",
+            'path'     : "{{ p_link }}",
+            'type'     : "{{ p_type }}",
+            'tags'     : "{{ page.tags | join: ', ' }}",
+            'url'      : "{{ site.baseurl }}{{ page.url }}",
+            'image'    : "{{ page.thumbnail }}",
+            'date'     : "{{ page.date | date: '%Y-%m-%d' }}"
+        });
+    {% endfor %}
+
+    searchPost(posts);
+
+    {% if page_type == "post" %}
+        searchRelated(posts);
+    {% endif %}
+
+    /*
+    $('#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 < posts.length; i++) {
+            var post = posts[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;
+    }
+
+    {% if page_type == "post" %}
+        displayRelatedPosts(posts);
+    {% endif %}
+
+    function displayRelatedPosts(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>'
+            );
+        }
+    }
+    */
+</script>

data/_includes/sidebar.html

@@ -1,7 +1,14 @@
+{%- assign page_tree = page.path | remove_first: "_pages/" | split: "/" -%}
+{%- assign page_level = page_tree.size -%}
+{% if page_tree.last == "index.md" %}
+    {%- assign page_type = "category" -%}
+{% else %}
+    {%- assign page_type = "post" -%}
+{% endif %}
 <div class="sidebar sidebar-left">
     <div class="side-banner">
         <h1 class="site-name">
-            <a href="/"><span class="highlight">example.com</span></a>
+            <a href="/"><mark class="highlight">example.com</mark></a>
             <button id="btn-brightness" aria-label="brightness-button">
                 <svg class='ico-dark' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
                 <svg class='ico-light' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>

data/_layouts/default.html

@@ -1,113 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        {% seo %}
-        <link rel="shortcut icon" type="image/png" href="{{ '/assets/img/favicon.webp' }}">
-        <link rel="preload" href="{{ '/assets/img/favicon.webp' }}" as="image">
-        {% if site.goatcounter_code %}
-            <script data-goatcounter="https://{{ site.goatcounter_code }}.goatcounter.com/count"
-            async src="//gc.zgo.at/count.js"></script>
-        {% endif %}
-
-        <title>
-            {% if page.title %}{{ page.title }}
-            {% else %}{{ site.title }}
-            {% endif %}
-        </title>
-
-        <meta
-        name="description"
-        content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
-
-        <link rel="stylesheet" href="{{ '/assets/css/style.css' }}">
-        {% if page.thumbnail %}
-            <style>
-                .thumbnail {
-                    background-image: url("{{ page.thumbnail }}");
-                }
-            </style>
-        {% else %}
-            <style>
-                .thumbnail {
-                    aspect-ratio: auto !important;
-                }
-                .transbox {
-                    transform: none;
-                    position: relative;
-                    margin: auto;
-                    left: 0;
-                    top: 0;
-                }
-            </style>
-        {% endif %}
-        <script src="{{ '/assets/js/tocbot.min.js' }}"></script>
-        <script src="{{ '/assets/js/sweet-scroll.min.js' }}"></script>
+        {% include head.html %}
+        <link rel="stylesheet" href="{{ '/assets/css/404.css' }}">
     </head>
     <body>
-        <canvas id="stars" width="100%" height="100%"></canvas>
-        {%- assign page_tree = page.path | remove_first: "_pages/" | split: "/" -%}
-        {%- assign page_level = page_tree.size -%}
-        {% if page_tree.last == "index.md" %}
-            {%- assign page_type = "category" -%}
-        {% else %}
-            {%- assign page_type = "post" -%}
-        {% endif %}
-        {% include sidebar.html %}
-        <div id="post">
-            <div class="inner-header">
-                <span class="dot" style="background-color: #F86158;"></span>
-                <span class="dot" style="background-color: #FBBF2D;"></span>
-                <span class="dot" style="background-color: #2ACB45;"></span>
-            </div>
-            <div class="inner-content">
-                <div class="category-tree">
-                    {%- assign page_link = "/" -%}
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
-                    <p>
-                        {%- assign search_tree = page.path | remove: "/index.md" | split: "/" -%}
-                        {%- for sub_tree in search_tree -%}
-                            {% if forloop.first %}
-                                <a href="/">Home</a>
-                                >
-                            {% elsif forloop.last %}
-                                {% if page_type == "category" %}
-                                    {{ sub_tree }}
-                                {% else %}
-                                    {{ page.title }}
-                                {% endif %}
-                            {% else %}
-                                {%- assign page_link = page_link | append: sub_tree | append: "/" -%}
-                                <a href="{{ page_link }}">{{ sub_tree }}</a>
-                                >
-                            {% endif %}
-                        {%- endfor -%}
-                    </p>
-                </div>
-                {% if page_type == "category" %}
-                    {% include loading.html %}
-                    {% include pagination.html %}
-                {% else %}
-                    {% include post.html %}
-                {% endif %}
-            </div>
+        <div class="blank-page">
+        <a href="/" class="go-home">↩️ GO HOME</a>
+        <div class="not-found-msg">
+            <h1 class="sour-face">`Φ ⌒ `Φ ?</h1>
+            <p style="font-size:1.75rem; color:#fa4251;">404: Page not found</p>
+            <p style="font-size:1.25rem;">D-Data breach...? &nbsp&nbsp No such thing allowed!</p>
+        </div>
         </div>
-        {% include search.html %}
     </body>
-    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-    <script src="{{ '/assets/js/highlight.min.js' }}"></script>
-    <link id="highlight-default" rel="stylesheet" href="{{ '/assets/css/highlight-default.min.css' }}">
-    <link id="highlight-dark" rel="stylesheet" href="{{ '/assets/css/highlight-dark.min.css' }}">
-    <script src="{{ '/assets/js/stars.js' }}"></script>
-    <script src="{{ '/assets/js/main.js' }}"></script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){ dataLayer.push(arguments); }
-        
-        gtag('js', new Date());
-        gtag('config', '{{ site.google_analytics }}');
-    </script>
+    <script src="{{ '/assets/js/404.js' }}"></script>
 </html>