New archive page

_sass/klise/_base.scss

@@ -134,12 +134,13 @@ ul {
     text-align: -webkit-match-parent;
   }
   li::before {
-    content: "\03BB";
+    content: "\FE63";
     display: inline-block;
-    width: 1em;
+    top: -1px;
+    width: 1.2em;
     position: relative;
-    margin-left: -1em;
+    margin-left: -1.3em;
-    font-weight: $bold-weight;
+    font-weight: 700;
   }
 }
 

_sass/klise/_dark.scss

@@ -213,7 +213,7 @@ body[data-theme="dark"] {
     a.footer_item:not(:last-child) {
       color: $dark-white;
     }
-    .footer_theme-copyright {
+    .footer_copyright {
       color: $dark-gray;
       opacity: 1;
     }
@@ -235,4 +235,11 @@ body[data-theme="dark"] {
       color: $dark-text-link-blue-active;
     }
   }
+
+  .search-article {
+    input[type="search"] {
+      color: $dark-text-base-color;
+    }
+  }
+
 }

_sass/klise/_layout.scss

@@ -217,6 +217,7 @@
 
 // Content
 .posts-item-note {
+  font-size: $base-font-size;
   font-weight: 700;
   margin-bottom: 5px;
   color: $black;
@@ -246,11 +247,15 @@
 
   .post-item-title {
     margin: 0;
-    color: $text-base-color;
+    border: 0;
+    padding: 0;
+    font-size: $base-font-size;
     font-weight: normal;
     letter-spacing: 0.1px;
 
     a {
+      color: $text-base-color;
+
       &:hover,
       &focus {
         color: $black;
@@ -287,7 +292,7 @@
     }
   }
 
-  .footer_theme-copyright {
+  .footer_copyright {
     font-size: $small-font-size - 1;
     margin-top: 3px;
     display: block;
@@ -320,3 +325,47 @@
     color: $text-link-blue-active;
   }
 }
+
+
+.search-article {
+  position: relative;
+  margin-bottom: 50px;
+
+  label[for="search-input"] {
+    position: relative;
+    top: 10px;
+    left: 11px;
+  }
+
+  input[type="search"] {
+    border: 0;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    border-radius: 5px;
+    padding: 10px 10px 10px 35px;
+    font-size: $base-font-size;
+    color: $text-base-color;
+    background-color: rgba(128, 128, 128, 0.1);
+    border: 1px solid rgba(128, 128, 128, 0.1);
+    outline: none;
+  }
+}
+
+#search-results {
+  text-align: center;
+  li {
+    text-align: left;
+  }
+}
+
+.archive-tags {
+  height: auto;
+  .tag-item {
+    padding: 1px 3px;
+    border-radius: 2px;
+    border: 1px solid rgba(128, 128, 128, 0.1);
+    background-color: rgba(128, 128, 128, 0.1);
+  }
+}

_sass/klise/_syntax.scss

@@ -16,16 +16,19 @@ code {
     top: -1px;
     background-color: #f6f6f6;
     border-radius: 2px;
+    border: 1px solid rgba(128,128,128,0.1);
   }
 }
 
 // Codeblock Theme
-pre.highlight {
+pre.highlight, pre {
   margin: 0 -27px;
   @include media-query($on-mobile) {
     margin: 0 calc(51% - 51vw);
     padding-left: 20px;
   }
+  border: 1px solid rgba(128,128,128,0.1);
+  background-color: #1a1b21;
   border-radius: 2px;
   padding: 10px;
   display: block;
@@ -53,12 +56,12 @@ pre.highlight {
 .highlight,
 .highlight .w {
   color: #fbf1c7;
-  background-color: #1a1b21;
+  // background-color: #1a1b21;
 }
 
 .highlight .err {
   color: #fb4934;
-  background-color: #1a1b21;
+  // background-color: #1a1b21;
   font-weight: bold;
 }
 

archive.html

@@ -0,0 +1,29 @@
+---
+title: Archive
+permalink: /archive/
+layout: page
+excerpt: All post.
+comments: false
+---
+
+<div class="search-article">
+  <label for="search-input" aria-hidden="true">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(128,128,128,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+  </label>
+  <input type="search" id="search-input" placeholder="Find some articles here" aria-label="Search">
+</div>
+
+<ul id="search-results"></ul>
+
+{%- for post in site.posts -%}
+  {%- capture current_year -%}{{ post.date | date: "%Y" }}{%- endcapture -%}
+  {%- unless current_year == previous_year -%}
+    <h2>{{ current_year }}</h2>
+    {%- assign previous_year = current_year -%}
+  {%- endunless -%}
+  <article class="post-item">
+    <h3 class="post-item-title">
+      <a href="{{ post.url }}">{{ post.title | escape }}</a>
+    </h3> 
+  </article>
+{%- endfor -%}

assets/js/search.min.js

@@ -0,0 +1,6 @@
+/*!
+  * Simple-Jekyll-Search
+  * Copyright 2015-2020, Christian Fei
+  * Licensed under the MIT License.
+  */
+ !function(){"use strict";var i={compile:function(r){return o.template.replace(o.pattern,function(t,e){var n=o.middleware(e,r[e],o.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){o.pattern=t.pattern||o.pattern,o.template=t.template||o.template,"function"==typeof t.middleware&&(o.middleware=t.middleware)}},o={};o.pattern=/\{(.*?)\}/g,o.template="",o.middleware=function(){};var n=function(t,e){var n=e.length,r=t.length;if(n<r)return!1;if(r===n)return t===e;t:for(var i=0,o=0;i<r;i++){for(var u=t.charCodeAt(i);o<n;)if(e.charCodeAt(o++)===u)continue t;return!1}return!0},e=new function(){this.matches=function(t,e){return n(e.toLowerCase(),t.toLowerCase())}};var r=new function(){this.matches=function(e,t){return!!e&&(e=e.trim().toLowerCase(),(t=t.trim().toLowerCase()).split(" ").filter(function(t){return 0<=e.indexOf(t)}).length===t.split(" ").length)}};var u={put:function(t){if(f(t))return p(t);if(function(t){return Boolean(t)&&"[object Array]"===Object.prototype.toString.call(t)}(t))return function(t){var e=[];l();for(var n=0,r=t.length;n<r;n++)f(t[n])&&e.push(p(t[n]));return e}(t);return undefined},clear:l,search:function(t){return t?function(t,e,n,r){for(var i=[],o=0;o<t.length&&i.length<r.limit;o++){var u=function(t,e,n,r){for(var i in t)if(!function(t,e){for(var n=!1,r=0,i=(e=e||[]).length;r<i;r++){var o=e[r];!n&&new RegExp(t).test(o)&&(n=!0)}return n}(t[i],r.exclude)&&n.matches(t[i],e))return t}(t[o],e,n,r);u&&i.push(u)}return i}(s,t,c.searchStrategy,c).sort(c.sort):[]},setOptions:function(t){(c=t||{}).fuzzy=t.fuzzy||!1,c.limit=t.limit||10,c.searchStrategy=t.fuzzy?e:r,c.sort=t.sort||a}};function a(){return 0}var s=[],c={};function l(){return s.length=0,s}function f(t){return Boolean(t)&&"[object Object]"===Object.prototype.toString.call(t)}function p(t){return s.push(t),s}c.fuzzy=!1,c.limit=10,c.searchStrategy=c.fuzzy?e:r,c.sort=a;var d={load:function(t,e){var n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",t,!0),n.onreadystatechange=function(e,n){return function(){if(4===e.readyState&&200===e.status)try{n(null,JSON.parse(e.responseText))}catch(t){n(t,null)}}}(n,e),n.send()}};var h={merge:function(t,e){var n={};for(var r in t)n[r]=t[r],"undefined"!=typeof e[r]&&(n[r]=e[r]);return n},isJSON:function(t){try{return t instanceof Object&&JSON.parse(JSON.stringify(t))?!0:!1}catch(e){return!1}}};var t,m,v,w;function y(t){u.put(t),m.searchInput.addEventListener("input",function(t){-1===[13,16,20,37,38,39,40,91].indexOf(t.which)&&(g(),z(t.target.value))})}function g(){m.resultsContainer.innerHTML=""}function O(t){m.resultsContainer.innerHTML+=t}function z(t){var e;(e=t)&&0<e.length&&(g(),function(t,e){var n=t.length;if(0===n)return O(m.noResultsText);for(var r=0;r<n;r++)t[r].query=e,O(i.compile(t[r]))}(u.search(t),t))}function S(t){throw new Error("SimpleJekyllSearch --- "+t)}t=window,m={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},w=function j(t){if(!((e=t)&&"undefined"!=typeof e.required&&e.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var e;if(!(this instanceof j))return new j(t);var r=t.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}}({required:v=["searchInput","resultsContainer","json"]}),t.SimpleJekyllSearch=function(t){var n;0<w.validate(t).length&&S("You must specify the following required options: "+v),m=h.merge(m,t),i.setOptions({template:m.searchResultTemplate,middleware:m.templateMiddleware}),u.setOptions({fuzzy:m.fuzzy,limit:m.limit,sort:m.sortMiddleware}),h.isJSON(m.json)?y(m.json):(n=m.json,d.load(n,function(t,e){t&&S("failed to get JSON ("+n+")"),y(e)}));var e={search:z};return"function"==typeof m.success&&m.success.call(e),e}}();

assets/search.json

@@ -0,0 +1,14 @@
+---
+layout: none
+---
+
+[
+  {% for post in site.posts %}
+    {
+      "title"    : "{{ post.title | escape }}",
+      "tags"     : "{{ post.tags | join: ', ' }}",
+      "url"      : "{{ site.baseurl }}{{ post.url }}",
+      "date"     : "{{ post.date }}"
+    } {% unless forloop.last %},{% endunless %}
+  {% endfor %}
+]