Add search and high-contrast mode to DRC site

_config.yml

@@ -18,5 +18,8 @@ github_username: hofstra
 markdown: kramdown
 excerpt_separator: "<!--more-->"
 permalink: none
+include:
+- _pages
 exclude:
 - drc-website.sublime-project
+- preflight

_data/nav.csv

@@ -11,3 +11,5 @@ News,/news/,true
 Interviews,/interviews/,true
 People,/people/,false
 Contact,/contact/,false
+Search,/search.html,false
+Toggle Contrast,javascript:toggleContrast();,false

_data/search_quicknav.json.EXAMPLE

@@ -0,0 +1,7 @@
+{
+	"home": "/coyote/",
+	"browse posts": "/coyote/browse/",
+	"about the project": "/coyote/about-project/",
+	"about the team": "/coyote/about-team/",
+	"contact us": "/coyote/contact-us/"
+}

_includes/head.html

@@ -29,4 +29,23 @@
 
     <!-- Windows 8 / RT -->
     <meta name="msapplication-TileImage" content="{{ site.baseurl }}/images/drc.square.rcon144.png" />
+
+
+	<script>
+	  window.store = {
+		{% for post in site.posts %}
+		  "{{ post.url | slugify }}": {
+			"title": "{{ post.title | xml_escape }}",
+			"author": "{{ post.author | xml_escape }}",
+			"category": "{{ post.category | xml_escape }}",
+			"content": {{ post.content | strip_html | strip_newlines | jsonify }},
+			"url": "{{ post.url | xml_escape }}"
+		  }
+		  {% unless forloop.last %},{% endunless %}
+		{% endfor %}
+	  };
+	</script>
+	<script src="https://unpkg.com/lunr/lunr.js"></script>
+	<script src="/javascripts/search.js"></script>
+	<script src="/javascripts/toggleContrast.js"></script>	
  </head>

_includes/header.html

@@ -12,7 +12,7 @@
             <div class="navigation-wrapper">
                 <nav role="navigation">
                     <ul id="js-navigation-menu" class="navigation-menu show">
-                      <li class="hidden"><ul class="nav-nested hidden">
+                      <li class="hidden" style="display:none"><ul class="nav-nested hidden" style="display:none">
                         {% for page in site.data.nav %}
                             {% if page.nested == "false" %}
                               </ul>
@@ -21,7 +21,7 @@
                             {% if page.title %}
                             <li class="nav-link"><a class="page-link" href="{{ page.permalink | prepend: site.baseurl }}">{{ page.title | remove_first: "DRC " }}</a>
                               {% if page.nested == "false" %}
-                              <ul class="nav-nested hidden">
+                              <ul class="nav-nested hidden" style="display:none">
                               {% endif %}
                             {% endif %}
                         {% endfor %}

_includes/search_js_include_once

@@ -0,0 +1,24 @@
+<!--
+search_js_include_once
+
+Some black magic to include javascript only one time. Checks to see if the path is already loaded,
+if not it injects it via document write.
+
+Note: Chrome issues a warning because it may (optionally) block this kind of JS inclusion on slow networks
+
+-->
+<script>
+	var src="{{ include.src }}";
+	var isIncluded=false;
+	var scripts = document.getElementsByTagName("script");
+    for(var i = 0; i < scripts.length; i++){
+		if(scripts[i].getAttribute('src') == src){
+			isIncluded=true;
+			break;
+		}
+	}
+	if(!isIncluded){
+		// Weird syntax to insist we really mean this (otherwise browser blocks)
+		document.write('<script type="text/javascript" src="'+src+'"><\/scr'+'ipt>');
+	}
+</script>

_includes/search_support_head.html

@@ -0,0 +1,15 @@
+<!--
+search_support_head.html
+
+This file should be included in any page you want to support search and typeahead.
+It may be included harmlessly in more than one file
+-->
+{% include search_js_include_once src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js" %}
+
+{% assign path="//javascripts/search_typeahead.js" | prepend:site.baseurl %}
+{% include search_js_include_once src=path %}
+
+{% include search_js_include_once src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.1.4/lunr.min.js" %}
+
+{% assign path="//javascripts/search.js" | prepend:site.baseurl %}
+{% include search_js_include_once src=path %}

_includes/searchbox

@@ -0,0 +1,16 @@
+{% if include.id == nil or include.id == '' %}
+	{% assign myid = 'largeSearch' %}
+{% else %}
+	{% assign myid = include.id %}
+{% endif %}
+
+<form name="{{ myid }}" action="{{ site.baseurl }}/search.html" method="get" onsubmit="return window.formValidator();">
+<div class="searchbox">
+   <div class="search">
+      <input type="text" name="query" class="searchTerm typeahead" id="{{ myid }}" placeholder="{{ include.placeholder }}">
+      <button type="submit" value="search" class="searchButton">
+        <span class="fa fa-search" aria-hidden="true"></span>
+     </button>
+   </div>
+</div>
+</form>

_includes/searchbox_small

@@ -0,0 +1,3 @@
+<div class="smallSearch">
+	{% include searchbox placeholder=include.placeholder id="smallSearch" %}
+</div>

_layouts/home.html

@@ -5,7 +5,7 @@
 
 <body{% if page.id!='' %} class="page-{{ page.id }}"{% endif %}>
   {% include header.html %}
-
+{% include searchbox %}
   <div class="home-columns">
     <div class="lab-column">
       <a href="{{ site.baseurl }}/lab/"><div class="column-header">
@@ -82,7 +82,7 @@ <h2>{{ lab_feature.title }}</h2>
           <!--
 		  	AS: Temp disabled link until we have content
 		  	<a class="card" href="{{ post.url | prepend: site.baseurl }}">
-		  -->	
+		  -->
 		  <a class="card" href="{{ site.baseurl }}/tools/">
             {% assign image_url = post.image %}
             {% unless post.image %}

_layouts/search.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>{{ page.title }}</title>
+	{% include head.html %}
+	{% include search_support_head.html %}
+
+	<!-- Build a store for lunr -->
+	<script>
+	  window.store = {
+	    {% for post in site.posts %}
+	      "{{ post.url | slugify }}": {
+	        "title": "{{ post.title | xml_escape }}",
+	        "author": "{{ post.author | xml_escape }}",
+	        "category": "{{ post.category | xml_escape }}",
+	        "content": {{ post.content | strip_html | strip_newlines | jsonify }},
+	        "url": "{{ post.url | xml_escape }}"
+	      }
+	      {% unless forloop.last %},{% endunless %}
+	    {% endfor %}
+	  };
+	</script>
+</head>
+
+<body>
+	<div class="outer">
+		<div class="wrapper content-wrapper">
+
+			<br><br>
+
+			{% include searchbox placeholder=""%}
+
+			{{ content }}
+
+			<div id="search-results">
+				<div class="searchMsgWrapper">
+					<div class="searchMsg">Searching...</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+	{% include footer.html %}
+
+</body>
+</html>

_pages/search.html

@@ -0,0 +1,27 @@
+---
+title: Search
+permalink: search.html
+layout: page
+---
+<!-- Build a store for lunr -->
+<script>
+	window.store = {
+		{% for post in site.posts %}
+			"{{ post.url | slugify }}": {
+			"title": "{{ post.title | xml_escape }}",
+			"author": "{{ post.author | xml_escape }}",
+			"category": "{{ post.category | xml_escape }}",
+			"content": {{ post.content | strip_html | strip_newlines | jsonify }},
+			"url": "{{ post.url | xml_escape }}"
+		}
+		{% unless forloop.last %},{% endunless %}
+		{% endfor %}
+	};
+</script>
+
+{% include searchbox placeholder=""%}
+<div id="search-results">
+	<div class="searchMsgWrapper">
+		<div class="searchMsg">Searching...</div>
+	</div>
+</div>

_sass/_search.scss

@@ -0,0 +1,137 @@
+/* Search */
+$color-search: #5f5e6f;
+$color-searchBackground: #3d3c48;
+$color-searchFocus: #5f5e6f;
+$color-searchPlaceholder: #DDDDDD;
+$size-searchBox: 2rem;
+$color-searchResultsLinkHover: #c2b4a5;
+
+mark {
+	background-color: yellow;
+	color: black;
+}
+
+.search {
+	width: 100%;
+	position: relative;
+}
+
+.searchbox input {
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+.searchTerm {
+	font-size: $size-searchBox !important;
+	float: left;
+	width: 100%;
+	border: 0;
+	padding: 0.4rem 0.5rem 0.5rem 3.5rem !important;
+	border-radius: 1rem 0 0 1rem;
+	outline: none;
+	color: $color-searchPlaceholder;
+}
+
+input::placeholder {
+	color: $color-searchPlaceholder;
+}
+
+.searchTerm:focus {
+	color: $color-searchFocus;
+}
+
+.searchButton {
+	  font-size: 1.2rem;
+	position: absolute;
+	top: 0;
+	width: 3.2rem;
+	left: -.1rem;
+	margin: 0;
+	right: 0.1rem;
+	border: 1px solid $color-search;
+	background: $color-search;
+	text-align: center;
+	color: white;
+	border-radius: 0.3rem 0 0 0.3rem;
+	cursor: pointer;
+}
+
+.searchbox {
+	background-color: $color-searchBackground;
+	border-radius: 0.3rem;
+	padding: 1rem;
+	height: 5.5rem;
+}
+
+#search-results .searchMsgWrapper {
+	text-align: center;
+}
+
+#search-results .searchMsg {
+	background: rgba(255, 255, 255, 0.25);
+	padding: 5rem;
+	border-radius: 1rem;
+	width: 100%;
+	font-size: 1.2em;
+}
+/*
+	Small search overrides
+*/
+@media all and (max-width: 940px) {
+	.smallSearch {
+		display: none;
+	}
+}
+
+.smallSearch input::placeholder {
+	content: '';
+}
+
+.smallSearch .searchButton {
+	width: 2rem;
+	margin: 0;
+	font-size: 1.6rem;
+	top: 0;
+	border-radius: 0.3rem 0 0 0.3rem;
+	background-color: #625044;
+}
+
+.smallSearch .searchbox {
+	width: 10rem;
+	position: relative;
+	top: 0.8rem;
+	padding: 0;
+	margin: 0;
+	height: 0;
+}
+
+.smallSearch .searchTerm {
+	font-size: 1rem;
+	border-radius: 0.3rem;
+}
+/*
+	Search results listing
+*/
+#search-results {
+	padding: 1rem;
+}
+
+#search-results h3 {
+	line-height: 1.2rem;
+	font-size: 1rem;
+}
+
+#search-results p {
+	padding: 0 0.4rem;
+	line-height: 1.2rem;
+}
+
+#search-results h3 a:hover {
+	color: $color-searchResultsLinkHover;
+}
+
+#search-results h3 a {
+	text-decoration: none;
+	border-bottom: 1px solid rgba(98, 80, 68, 0.14);
+}