Update feature search posts

2025-12-17 05:04:21 +01:00 · 2016-04-20 17:05:19 +07:00
parent 323cbb54d0
commit ce4a2c4ef6
7 changed files with 224 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 My Stack Problems

-> This project forked and has been modified from [A simple grey theme for Jekyll](https://github.com/liamsymonds/simplygrey-jekyll)
+> This project forked and has been modified from [A simple grey theme for Jekyll](https://github.com/liamsymonds/simplygrey-jekyll), and the search posts using [Super Search](https://github.com/chinchang/super-search)

 ![Screenshot Post](https://raw.githubusercontent.com/agusmakmun/agusmakmun.github.io/master/img/screenshot-post.png  "Screenshot Post")
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,6 @@
-name: Agus Makmun
+title: Stack Problems
+description: My Personal Stack Problems
+author: Agus Makmun
 github: https://github.com/agusmakmun
 about: I am freelance developer. Currently doing more in backend, actually in Python and Django.
 urls:
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -6,7 +6,11 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="shortcut icon" href="/img/favicon.ico" />
-        <title>{% if page.title %} {{ page.title }} {% else %} {{ site.name }} {% endif %}</title>
+        <title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.author }}{% endif %}</title>
+        <meta name="author" content="{{ site.author }}" />
+        <meta name="description" content="{% if page.title %}{{ page.title }}{% else %}{{ site.description }}{% endif %}" />
+        <meta name="keywords" content="{% if page.title %}{{ page.title }}, {{ site.title }}, {% for categ in page.categories %}{{ categ }}{% if forloop.last == false %}, {% endif %}{% endfor %}{% else %}{{ site.title }}, {% for category in site.categories %}{% capture categories_slug %}{{ category | first }}{% endcapture %}{% for categ in categories_slug %}{{ categ }}{% endfor %}{% if forloop.last == false %}, {% endif %}{% endfor %}{% endif %}" />
+        <link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">

        <!-- syntax highlighting CSS -->
        <link rel="stylesheet" href="/css/syntax.css">
@@ -18,6 +22,7 @@
        <link href="//fonts.googleapis.com/css?family=Roboto+Condensed:400,300italic,300,400italic,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">

        <!-- Custom CSS -->        
+        <link rel="stylesheet" href="/css/super-search.css">
        <link rel="stylesheet" href="/css/main.css">
    </head>

@@ -25,13 +30,20 @@
        <div class="container">
            <div class="col-sm-3">
                <a href="/"><img id="about" src="/img/avatar.jpg" height="75px" width="75px" /></a>
-                <h1 class="author-name">{{ site.name }}</h1>
+                <h1 class="author-name">{{ site.author }}</h1>
                {% if site.about %}
                <div id="about">
                    {{ site.about }}
                </div>
                {% endif %}
+
                <hr />
+                <div class="search" id="js-search">
+                  <input type="text" placeholder="(sitemap)~$ type to search" class="search__input form-control" id="js-search__input">
+                  <ul class="search__results" id="js-search__results"></ul>
+                </div>
+                <hr />
+
                <strong>Navigation</strong><br />
                    &raquo; <a href="/">Home</a> <br />
                {% for i in site.urls %}
@@ -43,7 +55,7 @@
                {{ content }}

                <footer>
-                    &copy; {{ site.name }}
+                    &copy; {{ site.author }}
                    {% if site.github %} 
                    - <a href="{{ site.github }}">{{ site.github }}</a> - Powered by Jekyll.
                    {% endif %}
@@ -56,5 +68,6 @@
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
+        <script src="/js/super-search.js"></script>
    </body>
 </html>
--- a/css/super-search.css
+++ b/css/super-search.css
@@ -0,0 +1,40 @@
+/*  Super Search
+    Author: Kushagra Gour (http://kushagragour.in)
+    MIT Licensed
+*/
+
+input#js-search__input {
+    font-size: 12px;
+    font-family: "Roboto Condensed", Arial, sans-serif;
+}
+.is-active .search__input {
+    transform: translateY(0);
+}
+.search__results {
+    list-style: none;
+    padding: 0;
+    overflow-x: hidden;
+    height: calc(100% - 110px);
+    transition: 0.2s ease;
+}
+.search__results.is-hidden {
+    opacity: 0;
+    transform: translateY(-1vh);
+    display: none;
+}
+.search__results > li {
+    border-top: 1px solid #f0f0f0;
+}
+.search__results > li > a {
+    display: block;
+    padding: 10px;
+}
+.search__result-date {
+    color: #BBB;
+    position: absolute;
+    right: 12px;
+}
+.search.is-active {
+    opacity: 1;
+    visibility: visible;
+}
--- a/js/super-search.js
+++ b/js/super-search.js
@@ -0,0 +1,132 @@
+/*  Super Search
+    Author: Kushagra Gour (http://kushagragour.in)
+    MIT Licensed
+*/
+
+(function () {
+    var isSearchOpen = false,
+        searchEl = document.querySelector('#js-search'),
+        searchInputEl = document.querySelector('#js-search__input'),
+        searchResultsEl = document.querySelector('#js-search__results'),
+        currentInputValue = '',
+        lastSearchResultHash,
+        posts = [];
+
+    // Changes XML to JSON
+    // Modified version from here: http://davidwalsh.name/convert-xml-json
+    function xmlToJson(xml) {
+
+        // Create the return object
+        var obj = {};
+
+        if (xml.nodeType == 1) { // element
+            // do attributes
+            if (xml.attributes.length > 0) {
+            obj["@attributes"] = {};
+                for (var j = 0; j < xml.attributes.length; j++) {
+                    var attribute = xml.attributes.item(j);
+                    obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
+                }
+            }
+        } else if (xml.nodeType == 3) { // text
+            obj = xml.nodeValue;
+        }
+
+        // do children
+        // If all text nodes inside, get concatenated text from them.
+        var textNodes = [].slice.call(xml.childNodes).filter(function (node) { return node.nodeType === 3; });
+        if (xml.hasChildNodes() && xml.childNodes.length === textNodes.length) {
+            obj = [].slice.call(xml.childNodes).reduce(function (text, node) { return text + node.nodeValue; }, '');
+        }
+        else if (xml.hasChildNodes()) {
+            for(var i = 0; i < xml.childNodes.length; i++) {
+                var item = xml.childNodes.item(i);
+                var nodeName = item.nodeName;
+                if (typeof(obj[nodeName]) == "undefined") {
+                    obj[nodeName] = xmlToJson(item);
+                } else {
+                    if (typeof(obj[nodeName].push) == "undefined") {
+                        var old = obj[nodeName];
+                        obj[nodeName] = [];
+                        obj[nodeName].push(old);
+                    }
+                    obj[nodeName].push(xmlToJson(item));
+                }
+            }
+        }
+        return obj;
+    }
+
+    function getPostsFromXml(xml) {
+        var json = xmlToJson(xml);
+        return json.channel.item;
+    }
+
+    var xmlhttp=new XMLHttpRequest();
+    xmlhttp.open("GET","/sitemap.xml");
+    xmlhttp.onreadystatechange = function () {
+        if (xmlhttp.readyState != 4) return;
+        if (xmlhttp.status != 200 && xmlhttp.status != 304) { return; }
+        var node = (new DOMParser).parseFromString(xmlhttp.responseText, 'text/xml');
+        node = node.children[0];
+        posts = getPostsFromXml(node);
+    }
+    xmlhttp.send();
+
+    window.toggleSearch = function toggleSearch() {
+        _gaq.push(['_trackEvent', 'supersearch', searchEl.classList.contains('is-active')]);
+        searchEl.classList.toggle('is-active');
+        if (searchEl.classList.contains('is-active')) {
+            // while opening
+            searchInputEl.value = '';
+        } else {
+            // while closing
+            searchResultsEl.classList.add('is-hidden');
+        }
+        setTimeout(function () {
+            searchInputEl.focus();
+        }, 210);
+    }
+
+    window.addEventListener('keyup', function onKeyPress(e) {
+        if (e.which === 27) {
+            toggleSearch();
+        }
+    });
+    window.addEventListener('keypress', function onKeyPress(e) {
+        if (e.which === 47 && !searchEl.classList.contains('is-active')) {
+            toggleSearch();
+        }
+    });
+
+    searchInputEl.addEventListener('input', function onInputChange() {
+        var currentResultHash, d;
+
+        currentInputValue = searchInputEl.value;
+        if (!currentInputValue || currentInputValue.length < 3) {
+            lastSearchResultHash = '';
+            searchResultsEl.classList.add('is-hidden');
+            return;
+        }
+        searchResultsEl.style.offsetWidth;
+
+        var matchingPosts = posts.filter(function (post) {
+            if (post.title.indexOf(currentInputValue) !== -1 || post.description.indexOf(currentInputValue) !== -1) {
+                return true;
+            }
+        });
+        if (!matchingPosts.length) {
+            searchResultsEl.classList.add('is-hidden');
+        }
+        currentResultHash = matchingPosts.reduce(function(hash, post) { return post.title + hash; }, '');
+        if (matchingPosts.length && currentResultHash !== lastSearchResultHash) {
+            searchResultsEl.classList.remove('is-hidden');
+            searchResultsEl.innerHTML = matchingPosts.map(function (post) {
+                d = new Date(post.pubDate);
+                return '<li><a href="' + post.link + '">' + post.title + '<span class="search__result-date">' + d.toUTCString().replace(/.*(\d{2})\s+(\w{3})\s+(\d{4}).*/,'$2 $1, $3') + '</span></a></li>';
+            }).join('');
+        }
+        lastSearchResultHash = currentResultHash;
+    });
+
+})();
--- a/sitemap.xml
+++ b/sitemap.xml
@@ -0,0 +1,30 @@
+---
+layout: null
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title | xml_escape }}</title>
+    <description>{{ site.description | xml_escape }}</description>
+    <link>{{ site.url }}{{ site.baseurl }}/</link>
+    <atom:link href="{{ "/sitemap.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+    <generator>Jekyll v{{ jekyll.version }}</generator>
+    {% for post in site.posts %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        <description>{{ post.content | xml_escape }}</description>
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+        {% for tag in post.tags %}
+        <category>{{ tag | xml_escape }}</category>
+        {% endfor %}
+        {% for cat in post.categories %}
+        <category>{{ cat | xml_escape }}</category>
+        {% endfor %}
+      </item>
+    {% endfor %}
+  </channel>
+</rss>