rik/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add client-side search, modified from atom from https://github.com/chinchang/super-search

Browse Source
This commit is contained in:
Rik Veenboer
2016-01-22 22:31:43 +00:00
parent 9ee8c4f38d
commit 9c9a498a32
4 changed files with 246 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
_includes/header.html
View File

@@ -8,6 +8,7 @@
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="{{ site.static_prefix }}/style/default-common.css" rel="stylesheet" type="text/css" />
<link href="{{ site.static_prefix }}/style/default-print.css" media="print" rel="stylesheet" type="text/css" />
<link href="{{ site.static_prefix }}/super-search.css" rel="stylesheet" type="text/css" />
<link href="/{{ site.baseurl }}/blog/atom.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }}" />
{% if page.description %}
@@ -28,6 +29,7 @@
<meta property="og:description" content="{{ page.description }}" />
{% endif %}
<script src="{{ site.static_prefix }}/super-search.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{{ site.analytics }}']);
@@ -36,10 +38,19 @@
var headers = {{ site.headers | implode }};
var header = headers[Math.floor(Math.random() * headers.length)];
document.getElementById('masthead').style.backgroundImage = "url('/asset/header/" + header + ".jpg')";
superSearch({
searchFile: '/blog/atom.xml'
});
}
</script>
</head>
<body class="layout-{{ page.layout }}{% if page.body_class %} {{ page.body_class }}{% endif %}">
<div class="super-search" id="js-super-search">
<a href="javascript:void(0)" onclick="superSearch.toggle()" class="super-search__close-btn">X</a>
<input type="text" placeholder="Type here to search" class="super-search__input" id="js-super-search__input">
<ul class="super-search__results" id="js-super-search__results"></ul>
</div>
<header id="masthead" role="banner">
<a href="/{{ site.baseurl }}" title="{{ site.title }}" rel="home"></a>
</header>
@@ -49,6 +60,13 @@
<li><a href="/{{ site.baseurl }}/blog/">blog</a></li>
<li><a href="/{{ site.baseurl }}/gallery/">gallery</a></li>
<li><a href="/{{ site.baseurl }}/about.html">about</a></li>
<li>
<a href="javascript:void(0)" title="or press '/' to search" onclick="toggleSearch()" class="search-btn">
<svg style="width:20px;height:20px" viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</a>
</li>
</ul>
{% if page.print_blurb %}
<ul class="print-only">
@@ -63,6 +81,6 @@
&middot;
<a href="mailto:{{ site.email }}">email</a>
</div>
</div>
</div>
</header>
<article>