RFC: Add a search option

README.md

@@ -88,6 +88,9 @@ Included are the following 3rd party software:
 * Magnific Popup - http://dimsemenov.com/plugins/magnific-popup/ -
   Copyright (c) 2014-2016 Dmitry Semenov, provided under the MIT license
 
+* lunr - https://lunrjs.com - Copyright (c) 2013 by Oliver Nightingale,
+  provided under the MIT license
+
 * Favicons have been processed by https://realfavicongenerator.net
 
 * IRC contact page is provided by https://kiwiirc.com

Rules

@@ -17,9 +17,9 @@ compile '/**/*.scss' do
   write item.identifier.without_ext + '.css'
 end
 
-compile '/sitemap.xml' do
+compile '/{sitemap.xml,js/search-index.js}' do
   filter :erb
-  write '/sitemap.xml'
+  write item.identifier
 end
 
 compile '/htaccess.txt' do

content/about/index.md

@@ -1,7 +1,7 @@
 ---
 title: About EasyRPG
 priority: 0.8
-menu_weight: 5
+menu_weight: 10
 ---
 <div class="info" markdown="1">
 

content/about/website.md

@@ -30,7 +30,8 @@ title: About the EasyRPG Homepage
 
 - Nanoc static site generator - <https://nanoc.app>
 - kramdown markdown superset converter - <https://kramdown.gettalong.org/>
-- Sass <https://sass-lang.com>
+- Sass - <https://sass-lang.com>
+- lunr client search engine - <https://lunrjs.com>
 
 ### 3rd party software
 
@@ -40,6 +41,8 @@ Included are the following 3rd party software:
   contributors, provided under the MIT license
 - Magnific Popup - <https://dimsemenov.com/plugins/magnific-popup/>
   \- Copyright © 2014-2016 Dmitry Semenov, provided under the MIT license
+- lunr - Copyright © 2013 by Oliver Nightingale, provided under the
+  MIT license
 - Favicons have been processed by <https://realfavicongenerator.net>
 - IRC contact page is provided by <https://kiwiirc.com>
 

content/contribute/artists.md

@@ -1,5 +1,5 @@
 ---
-title: How to Contribute
+title: "How to Contribute: Artists"
 menu_weight: 3
 ---
 <div class="info" markdown="1">

content/contribute/index.md

@@ -1,7 +1,7 @@
 ---
-title: How to Contribute
+title: "How to Contribute: Introduction"
 priority: 0.8
-menu_weight: 0
+menu_weight: 1
 ---
 <div class="info" markdown="1">
 

content/contribute/programmers.md

@@ -1,5 +1,5 @@
 ---
-title: How to Contribute
+title: "How to Contribute: Programmers"
 menu_weight: 4
 ---
 <div class="info" markdown="1">

content/contribute/testers.md

@@ -1,5 +1,5 @@
 ---
-title: How to Contribute
+title: "How to Contribute: Testers"
 menu_weight: 2
 ---
 <div class="info" markdown="1">

content/contribute/translators.md

@@ -1,5 +1,5 @@
 ---
-title: How to Contribute
+title: "How to Contribute: Translators"
 menu_weight: 1
 ---
 <div class="info" markdown="1">

content/css/easyrpg.scss

@@ -245,6 +245,122 @@ $darkgrey: #202020;
 		}
 	}
 
+	/* Search box and results */
+
+	form.search, #search-overlay {
+		input, button {
+			border: 2px solid $normalgreen;
+			margin: 4px 0 2px;
+			padding: 10px 12px;
+			border-radius: 5px;
+		}
+
+		input[type=text] {
+			border-collapse: collapse;
+			width: 400px;
+		}
+
+		button {
+			background-color: $lightgrey;
+			color: black;
+			cursor: pointer;
+		}
+	}
+
+	form.search {
+		margin: 1em 0;
+	}
+
+	#show-search {
+		display: inline-block;
+		background-color: $darkgrey;
+		color: $lightgrey;
+		border: none;
+		height: 40px;
+		padding: 0 1em;
+		font-size: 1em;
+		cursor: pointer;
+		opacity: 0.8;
+		&:hover {
+			opacity: 1;
+		}
+	}
+
+	#search-overlay {
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		z-index: 2;
+		top: 0;
+		left: 0;
+		background-color: rgba(40, 40, 40, 0.8);
+		transition: opacity 0.5s ease-in-out;
+
+		&.visible {
+			visibility: visible;
+			opacity: 1;
+		}
+
+		&.hidden {
+			position: absolute;
+			visibility: hidden;
+			opacity: 0;
+		}
+
+		&.transitioning {
+			visibility: visible;
+		}
+
+		#search-bar {
+			position: relative;
+			top: 46%;
+			width: 80%;
+			text-align: center;
+			margin: auto;
+		}
+
+		#hide-search {
+			position: absolute;
+			top: 20px;
+			right: 20px;
+			opacity: 0.8;
+			&:hover {
+				opacity: 1;
+			}
+		}
+
+		input, button {
+			font-size: 2em;
+		}
+	}
+
+	ul#search-results {
+		// entry height
+		$eheight: 32px;
+
+		margin-top: -1px;
+		margin-bottom: 0;
+		padding: 0 0.5em;
+
+		li {
+			display: inline-block;
+			line-height: $eheight;
+			vertical-align: middle;
+			white-space: nowrap;
+
+			a {
+				display: inline-block;
+				height: $eheight;
+				padding: 0 1em;
+				text-decoration: none;
+
+				&:hover {
+					color: $normalgreen;
+				}
+			}
+		}
+	}
+
 	/* Footer */
 	#footer {
 		font-size: 11px;

content/editor/downloads.md

@@ -1,5 +1,5 @@
 ---
-title: EasyRPG Editor
+title: "EasyRPG Editor: Downloads"
 menu_weight: 2
 ---
 <div class="info" markdown="1">

content/editor/index.md

@@ -1,8 +1,8 @@
 ---
-title: EasyRPG Editor
+title: "EasyRPG Editor: Overview"
 priority: 0.7
 menu_name: EasyRPG Editor
-menu_weight: 1
+menu_weight: 6
 ---
 <div class="info" markdown="1">
 

content/editor/media.md

@@ -1,5 +1,5 @@
 ---
-title: EasyRPG Editor
+title: "EasyRPG Editor: Media"
 menu_weight: 1
 ---
 <div class="info" markdown="1">

content/editor/progress.md

@@ -1,5 +1,5 @@
 ---
-title: EasyRPG Editor
+title: "EasyRPG Editor: Progress"
 menu_weight: 3
 ---
 <div class="info" markdown="1">

content/index.html

@@ -1,5 +1,6 @@
 ---
 has_spotlight: true
+title: EasyRPG Homepage
 ---
 <div id="spotlight">
 	<div class="maxwidth">

content/js/search-index.js

@@ -0,0 +1,77 @@
+var pages = <%= make_search_index %>
+
+document.addEventListener("DOMContentLoaded", function(event) {
+  var input = document.getElementById("search-input")
+  var form = document.getElementById("search-form")
+  var resultsContainer = document.getElementById("search-results")
+  var resultsHeading = document.getElementById("search-heading")
+
+  var searchIndex = lunr(function () {
+    this.field('title', { boost: 4 })
+    this.field('tags', { boost: 2 })
+    this.field('body')
+    this.ref('id')
+    // add all pages to search
+    pages.forEach(function(page) { this.add(page) }, this)
+  })
+
+  var clearResults = function() {
+    resultsContainer.innerHTML = ""
+    resultsHeading.innerHTML = ""
+  }
+
+  var search = function(query) {
+    clearResults();
+
+    // find
+    results = searchIndex.search(query).map(function(id) {
+      for (var i = 0; i < pages.length; i++) {
+        if (pages[i].id === id.ref)
+          return pages[i]
+      }
+    })
+
+    // render
+    resultsHeading.innerHTML = results.length + " results found:"
+    results.forEach(function(result) {
+      var li = document.createElement("li")
+      var a = document.createElement("a")
+      a.href = result.id
+      a.innerHTML = result.title
+      li.appendChild(a)
+      resultsContainer.appendChild(li)
+    })
+  }
+
+  var searchQueryFromUrl = function() {
+    var q;
+    location.search.substr(1).split("&").forEach(function(item) {
+      if (item[0] === "q")
+        q = decodeURIComponent(item.substring(2))
+    })
+    return q;
+  }
+
+  form.addEventListener("submit", function(e) {
+    var v = input.value
+    history.pushState({ q: v }, "", "?q=" + encodeURIComponent(v))
+    search(v)
+    e.preventDefault()
+  })
+
+  window.onpopstate = function(event) {
+    if (event.state !== null) {
+      input.value = event.state.q
+      search(input.value)
+    } else {
+      // clear
+      input.value = ""
+      clearResults()
+    }
+  }
+
+  if (searchQueryFromUrl() !== undefined) {
+    input.value = searchQueryFromUrl()
+    search(input.value)
+  }
+})

content/js/search.js

@@ -0,0 +1,28 @@
+/*
+ * Adds a toggle-able search overlay
+ */
+document.addEventListener("DOMContentLoaded", function(event) {
+  // ignore on search page
+  if (window.location.href.indexOf("/search/") === -1) {
+    var overlay = document.getElementById('search-overlay')
+    var input = document.getElementById("search-input")
+
+    function searchBox(e) {
+      if (e.target.id === "show-search") {
+        overlay.className = "visible transitioning"
+        input.focus();
+      } else {
+        overlay.className = "hidden transitioning"
+      }
+    }
+
+    document.getElementById('show-search').addEventListener('click', searchBox)
+    document.getElementById('hide-search').addEventListener('click', searchBox)
+    input.addEventListener('keyup', function(e) {
+      if (e.keyCode == 27) searchBox(e)
+    })
+    overlay.addEventListener('transitionend', function() {
+      overlay.classList.remove("transitioning")
+    })
+  }
+})

content/player/downloads.html

@@ -1,5 +1,5 @@
 ---
-title: EasyRPG Player
+title: "EasyRPG Player: Downloads"
 menu_weight: 3
 ---
 <% # The following variables can be quite handy ;)

content/player/guide.md

@@ -1,5 +1,5 @@
 ---
-title: "EasyRPG Player"
+title: "EasyRPG Player: Guide"
 menu_weight: 1
 ---
 <div class="info" markdown="1">

content/player/guide/game_translation.md

@@ -1,5 +1,5 @@
 ---
-title: "EasyRPG Player"
+title: "EasyRPG Player: Guide game translation"
 ---
 
 <div class="info" markdown="1">

content/player/guide/webplayer.md

@@ -1,5 +1,5 @@
 ---
-title: "EasyRPG Player"
+title: "EasyRPG Player: Guide webplayer"
 ---
 
 <div class="info" markdown="1">

content/player/index.md

@@ -1,8 +1,8 @@
 ---
-title: EasyRPG Player
+title: "EasyRPG Player: Overview"
 priority: 0.7
 menu_name: EasyRPG Player
-menu_weight: 4
+menu_weight: 8
 ---
 <div class="info" markdown="1">