Add a search option

Will be useful later for the (static) blog and wiki

based on https://chodounsky.com/2015/05/14/full-text-search-on-static-website/

README.md

@@ -83,6 +83,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

@@ -19,9 +19,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,53 @@ $darkgrey: #202020;
 		}
 	}
 
+	/* Search box and results */
+	form#search-form {
+		margin: 1em 0;
+
+		input {
+			border: 2px solid $normalgreen;
+			margin: 4px 2px;
+			padding: 10px 12px;
+			border-radius: 5px;
+		}
+		input[type=text] {
+			border-collapse: collapse;
+			width: 300px;
+		}
+		input[type=submit] {
+			background-color: $lightgrey;
+			color: black;
+			cursor: pointer;
+		}
+	}
+	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/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">
 

content/player/media.md

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

content/player/progress.md

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

content/rtp-replacement/downloads.md

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

content/rtp-replacement/index.md

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

content/rtp-replacement/media.md

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

content/rtp-replacement/progress.md

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

content/search/index.html

@@ -0,0 +1,13 @@
+---
+title: Search on this site
+menu_name: 🔍 Site search
+menu_weight: -1
+---
+<form action="/search/" id="search-form" class="search" method="get" >
+  <input name="q" type="text" id="search-input" placeholder="enter search term..." autofocus required>
+  <input type="submit" value="Search">
+</form>
+<h2 id="search-heading"></h2>
+<ul id="search-results"></ul>
+<script src="/js/vendor/lunr.min.js"></script>
+<script src="/js/search-index.js"></script>

content/tools/downloads.md

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

content/tools/index.md

@@ -1,7 +1,7 @@
 ---
-title: EasyRPG Tools
+title: "EasyRPG Tools: Overview"
 priority: 0.7
-menu_weight: 2
+menu_weight: 3
 ---
 <div class="info" markdown="1">
 

content/tools/media.md

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