Add New Glossary Page And Developer Search Feature

This commit adds the code necessary to generate a new
en/developre-glossary page with entry pages in the en/glossary/
directory, e.g. en/glossary/51-percent-attack.

The glossary page and the individual term pages feature a JavaScript
search engine (no CGI) for just glossary terms.  This search box has
also been added to the following pages:

    * Developer Documentation (the index page)
    * Developer Guide
    * Developer Reference
    * Developer Examples

The search box requires the following MIT-licensed libraries:

    * JQuery
    * JQuery UI
    * JQuery UI CSS stylesheet

These allow our JS code to be almost trivially simple in js/devsearch.js

This commit adds only code.  Actual glossary entry data will be added in
a subsequent commit.

_includes/helpers/subhead-links.md

@@ -7,5 +7,5 @@ http://opensource.org/licenses/MIT.
 | <a href="https://github.com/bitcoin/bitcoin.org/issues/new?body=Source%20File%3A%20{{filename|uri_escape}}%0A%0A">Report Issue</a>
 | <a href="/en/development#devcommunities">Discuss</a></div>
 {% else %}
-{% die %}
+{% die "source filename not set" %}
 {% endif %}

_layouts/glossary_entry.html

@@ -0,0 +1,66 @@
+---
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+
+layout: base
+lang: en
+---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
+
+{% capture filename %}{{page.filename}}{% endcapture %}
+{% include helpers/subhead-links.md %}
+<br>
+
+{% capture markdown_content %}
+
+# {{page.required.title_max_40_characters_no_formatting}}
+
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
+<div markdown="block" class="notice">
+<span markdown="span">This is a technical glossary.  Regular users should use the [vocabulary
+page](/en/vocabulary).</span>
+</div>
+
+## Definition
+
+{% autocrossref %}
+
+{{page.required.summary_max_255_characters_no_formatting}}
+
+{% endautocrossref %}
+
+## Synonyms
+
+{% for synonym in page.required.synonyms_shown_in_glossary_capitalize_first_letter %}
+* {{synonym}}
+{% endfor %}
+
+{% if page.optional.not_to_be_confused_with_capitalize_first_letter %}
+## Not To Be Confused With
+
+{% autocrossref %}
+
+{% for term in page.optional.not_to_be_confused_with_capitalize_first_letter %}
+* {{term}}
+{% endfor %}
+
+{% endautocrossref %}
+
+{% endif %}
+
+{% if page.optional.links_html_or_markdown_style_capitalize_first_letter %}
+## Links
+{% for link in page.optional.links_html_or_markdown_style_capitalize_first_letter %}
+* {{link}}
+{% endfor %}
+{% endif %}
+
+{% include references.md %}
+{{site.glossary_links}}
+{% endcapture %}
+{{ markdown_content | markdownify }}{% comment %}Why is this hack necessary?  I don't get why this template can't be natively rendered as markdown like the releases template.{% endcomment %}
+
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

_less/screen.less

@@ -666,7 +666,7 @@ table td,table th{
 	display:inline-block;
 	margin:0 0 40px 0;
 	font-size:125%;
-	width:210px;
+	width:150px;
 }
 .docreference img{
 	display:block;
@@ -807,8 +807,6 @@ table td,table th{
 }
 .toccontent .subhead-links{
 	visibility: hidden;
-	font-size: 85%;
-	height: 18px;
 	padding-top: 7px;
 }
 .toccontent:hover .subhead-links{
@@ -909,6 +907,37 @@ table td,table th{
 	border:2px solid #ee9209;
 	color:#fff;
 }
+#glossary_term {
+	display: block;
+	width: 20em;
+	margin-right: auto;
+	margin-left: auto;
+}
+.ui-autocomplete-category {
+	font-weight: bold;
+	padding: .2em .4em;
+	margin: .8em 0 .2em;
+	line-height: 1.5;
+}
+ul.wrapped_list li {
+	list-style: none;
+	float: left;
+	width: 15em;
+	margin: 1em;
+}
+br.clear {
+	clear: left;
+}
+.notice {
+    text-align: center;
+}
+.notice span {
+    font-style: italic;
+}
+.subhead-links {
+	font-size: 85%;
+	height: 18px;
+}
 
 .highlight  { background: #ffffff; }
 .highlight .c { color: #999988; font-style: italic } /* Comment */

_plugins/autocrossref.rb

@@ -35,12 +35,37 @@ require 'yaml'
 
       ## Workaround for inconsistent relative directory
       path = File.expand_path(File.dirname(__FILE__)) + "/.."
-      ## Load terms from file
+      ## Load terms from file only if we haven't loaded them before
       site = context.registers[:site].config
-      if !site.has_key?("crossref")
+      if !site.has_key?("crossref_loaded")
-        site['crossref'] = YAML.load_file(path + "/_autocrossref.yaml")
+
+        ## Load refs from file and then downcase them all so we can
+        ## easily detect when we define xrefs more than once
+        mixed_case_refs = YAML.load_file(path + "/_autocrossref.yaml")
+        unvalidated_refs = Hash.new
+        mixed_case_refs.each { |key, value|
+          unvalidated_refs[key.to_s.downcase] = value.to_s.downcase
+        }
+
+        if site.has_key?("crossref")
+          ## We already have refs loaded, so merge
+          site['crossref'].merge!(unvalidated_refs) {
+            |key, old_value, new_value|
+
+            if old_value != new_value
+              abort("Error: autocrossref key '#{key}' wants to point to both '#{old_value}' and '#{new_value}'")
+            end
+
+            new_value
+          }
+        else
+          ## We don't have refs loaded yet, so copy
+          site['crossref'] = unvalidated_refs
+        end
+        site['crossref_loaded'] = true
       end
 
+
       ## Sort terms by reverse length, so longest matches get linked
       ## first (e.g. "block chain" before "block"). Otherwise short
       ## terms would get linked first and there'd be nothing for long
@@ -76,7 +101,7 @@ require 'yaml'
             (?!\w)  ## Don't match inside words
             (?!`)   ## Don't match strings ending with a tic, unless the xref itself ends with a tic
           /xmi) {|s|
-              if term[1] == "DO NOT AUTOCROSSREF"
+              if term[1] == "do not autocrossref"
                   s.gsub(/( |$)/, "<!--noref-->\\&")
               else
                   "[#{s}][#{term[1]}]{:.auto-link}"

_plugins/glossary.rb

@@ -0,0 +1,131 @@
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+
+require 'yaml'
+
+module Jekyll
+
+  class GlossaryPage < Page
+
+    def initialize(site, base, lang, srcdir, src, output_directory)
+      @site = site
+      @base = base
+      @dir = '/' + output_directory
+
+      ## Output file is the source file base name plus .md for Markdown
+      ## (converted later to HTML)
+      output_file = src.split('.')[0] + ".md"
+
+      ## Read in the file's YAML header
+      self.read_yaml(File.join(base, srcdir), src)
+
+      ## Pass in the full path to enable edit-on-github links
+      self.data["filename"] = srcdir + '/' + src
+
+      ## Page Title: <title> - Bitcoin Glossary
+      self.data["title"] = self.data["required"]["title_max_40_characters_no_formatting"] + " - Bitcoin Glossary"
+
+      ## Output file is v<version>.md (converted later to HTML)
+      @name = output_file
+      self.process(output_file)
+
+      ## Output full path
+      output_full_path = dir + "/" + output_file.gsub('.md', '')
+
+      self.data['layout'] = 'glossary_entry'
+      self.data['category'] = 'glossary_entry'
+
+      ## Combine required (displayed) and optional (non-displayed)
+      ## synonyms into an array
+      if self.data["optional"]["synonyms_and_pluralizations_not_shown_in_glossary"].nil?
+        mixed_case_terms = self.data["required"]["synonyms_shown_in_glossary_capitalize_first_letter"]
+      else
+        mixed_case_terms = self.data["required"]["synonyms_shown_in_glossary_capitalize_first_letter"] +\
+        self.data["optional"]["synonyms_and_pluralizations_not_shown_in_glossary"]
+      end
+
+      ## Downcase all terms so we can easily detect when we create
+      ## duplicated autocrossreference links
+      terms = Array.new
+      mixed_case_terms.each { |term|
+        terms.push(term.downcase)
+      }
+
+      ## Add all synonyms to the autocrossref hash table for automatic linking
+      site.config["crossref"] = site.config["crossref"] ? site.config["crossref"] : {}
+      for term in terms do
+        site.config["crossref"].merge!({ term => output_full_path }) {
+            |key, old_value, new_value|
+
+            if old_value != new_value
+              abort("Error: autocrossref key '#{key}' wants to point to both '#{old_value}' and '#{new_value}'")
+            end
+
+            new_value
+        }
+      end
+
+      ## Create a newline-containing Markdown-formatted string that
+      ## includes links for all of our autocrossref-created synonyms.
+      ## TODO: this should probably be done as an `include`-able
+      ## template for proper division between the logic and
+      ## presentation layers
+      site.config["glossary_links"] = site.config["glossary_links"] ? site.config["glossary_links"] : ''
+      site.config["glossary_links"] \
+        += "[" \
+        + output_full_path \
+        + "]: " \
+        + output_full_path \
+        + ' "' \
+        + self.data["required"]["summary_max_255_characters_no_formatting"].chomp() \
+        + '"' \
+        + "\n"
+
+      ## Add only shown synonyms to the glossary hash-tables-inside-sorted-array
+      ## for use in the search box and on the master listing page
+      site.config["devsearches"]["Glossary"] = site.config["devsearches"]["Glossary"] ? site.config["devsearches"]["Glossary"] : []
+      for term in self.data["required"]["synonyms_shown_in_glossary_capitalize_first_letter"] do
+        site.config["devsearches"]["Glossary"].unshift({ term => output_full_path })
+      end
+
+      ## Sort the shown synonyms array alphabetically (case
+      ## insensitive). We have to do this here because the version of
+      ## Jekyll/Liquid we use does not provide the ability to sort
+      ## arrays when the template is compiled. Higher version of Jekyll
+      ## do support this feature, so if we upgrade to Jekyll 2.2 or
+      ## higher, look at doing this at template time to save CPU cycles
+      ## and increase flexibility
+      site.config["devsearches"]["Glossary"].sort_by!{|hash|
+          hash.to_s.downcase.gsub(/"=>.*/,'')
+      }
+
+    end
+  end
+
+  class GlossaryPageGenerator < Generator
+    def generate(site)
+
+      #Do nothing if plugin is disabled
+      if !ENV['ENABLED_PLUGINS'].nil? and ENV['ENABLED_PLUGINS'].index('glossary').nil?
+        print 'Glossary disabled' + "\n"
+        return
+      end
+
+      glossary_dir='_data/glossary/en'
+
+      #generate each release based on templates
+      Dir.foreach(glossary_dir) do |file|
+        next if file == '.' or file == '..'
+        lang = 'en'
+        src = file
+        srcdir = '_data/glossary/en'
+        output_directory = lang + '/glossary/'
+        site.pages << GlossaryPage.new(site, site.source, lang, glossary_dir, src, output_directory)
+      end
+      #TODO releases are only generated for English language,
+      #but they could also be translated at some point. They would however
+      #need to fallback to English when no translation is available.
+    end
+  end
+
+end

en/developer-documentation.md

@@ -7,15 +7,19 @@ lang: en
 id: developer-documentation
 title: "Developer Documentation - Bitcoin"
 ---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
 
 # Developer Documentation
 
 <p class="summary">Find useful resources, guides and reference material for developers.</p>
 
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
 <div class="docreference">
-<a href="/en/developer-guide"><img src="/img/icons/main_ico_compass.svg" alt="icon"><span>Developer Guide</span><span>(How Bitcoin works)</span></a>
+<a href="/en/developer-guide"><img src="/img/icons/main_ico_compass.svg" alt="icon"><span>Guide</span></a>
-<a href="/en/developer-reference"><img src="/img/icons/main_ico_guide.svg" alt="icon"><span>Developer Reference</span><span>(Technical details and APIs)</span></a>
+<a href="/en/developer-reference"><img src="/img/icons/main_ico_guide.svg" alt="icon"><span>Reference</span></a>
-<a href="/en/developer-examples"><img src="/img/icons/main_ico_hash.svg" alt="icon"><span>Developer Examples</span><span>(Examples you can use)</span></a>
+<a href="/en/developer-examples"><img src="/img/icons/main_ico_hash.svg" alt="icon"><span>Examples</span></a>
+<a href="/en/developer-glossary"><img src="/img/icons/main_ico_abc.svg" alt="icon"><span>Glossary</span></a>
 </div>
 
 <div class="resources">
@@ -89,3 +93,6 @@ title: "Developer Documentation - Bitcoin"
   <p><a href="https://bitcoinj.github.io/#documentation">Bitcoinj Developer Documentation</a> - bitcoinj.org</p>
   <p><a href="https://en.bitcoin.it/wiki/Category:Technical">Technical Pages</a> - Wiki</p>
 </div></div>
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

en/developer-examples.md

@@ -7,6 +7,7 @@ lang: en
 id: developer-examples
 title: "Developer Examples - Bitcoin"
 ---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
 
 # Bitcoin Developer Examples
 
@@ -26,6 +27,8 @@ title: "Developer Examples - Bitcoin"
 
 {% include fragment_reviews_needed.md %}
 
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
 {% include example_intro.md %}
 
 {% include example_testing.md %}
@@ -37,8 +40,12 @@ title: "Developer Examples - Bitcoin"
 {% include example_p2p_networking.md %}
 
 {% include references.md %}
+{{site.glossary_links}}
 
 </div>
 
 <script>updateToc();</script>
 <script>addAnchorLinks();</script>
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

en/developer-glossary.html

@@ -0,0 +1,94 @@
+---
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+
+title: Developer Glossary - Bitcoin
+layout: base
+lang: en
+---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
+
+{% capture markdown_content %}
+# Bitcoin Developer Glossary
+
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
+<div markdown="block" class="notice">
+<span markdown="span">This is a technical glossary.  Regular users should use the [vocabulary
+page](/en/vocabulary).</span>
+</div>
+
+{% comment %}
+## The following single-space-indented code (sorry, whitespace
+## sensitive) takes the alphabetized array of individual hash objects
+## and puts them in a list sorted by the first character of each term
+## characters (case insensitive). E.g.:
+##
+##     Alpha
+##     Apropos
+##
+##     Beta
+##
+##     Gamma
+##     Gnu
+##
+## The current style sheet gives each item a certain width and then
+## floats them so terms starting with the same character are grouped
+## together. Hopefully this strikes the right balance between
+## information density and too much whitespace.
+{% endcomment %}
+## Numbers
+<!-- no subhead-links here -->
+{% for item in site.devsearches.Glossary %}
+{% if forloop.first %}{% assign first_term = true %}{% else %}{% assign first_term = false %}{% endif %}
+{% for term in item %}
+ {% capture text_and_link %}<a href="{{term[1]}}">{{term[0]}}</a>{% endcapture %}
+ {% capture first_character %}{{term[0] | downcase | truncate: 1, '' }}{% endcapture %}
+ {% if first_character == 'a' %}
+  {% assign finished_with_numbers = true %}
+ {% endif %}
+ {% if first_character == last_first_character %}
+  <li markdown="span">{{text_and_link}}</li>
+ {% else %}
+  {% unless first_term %}
+   </ul><br class="clear">
+  {% endunless %}
+  {% if finished_with_numbers %}
+## {{ first_character | upcase }}
+<!-- no subhead-links here -->
+  {% endif %}
+
+  {% case first_character %}
+  {% when 'b' %}
+   See also: [Bitcoin Improvement Proposals (BIPs)](https://github.com/bitcoin/bips#readme)
+  {% when 'o' %}
+   See also: [Op codes](https://en.bitcoin.it/wiki/Script#Words)
+  {% when 'p' %}
+   See also: [P2P protocol messages](/en/developer-reference#data-messages)
+  {% when 'r' %}
+   See also: [Bitcoin Core RPCs](/en/developer-reference#rpc-quick-reference)
+  {% endcase %}
+
+  <ul class="wrapped_list">
+  <li markdown="span">{{text_and_link}}</li>
+ {% endif %}
+ {% capture last_first_character %}{{first_character}}{% endcapture %}
+{% endfor %}
+{% endfor %}
+{% comment %}Close off last list and end the float: {% endcomment %}
+</ul><br class="clear">
+
+<div markdown="block" class="notice">
+<span markdown="span">Can't find what you're looking for?  [Suggest a
+new term][] for the glossary!</span>
+</div>
+
+[suggest a new term]: https://github.com/bitcoin/bitcoin.org/issues/new?title=New%20glossary%20term%20suggestion:
+{% include references.md %}
+{{site.glossary_links}}
+{% endcapture %}
+{{ markdown_content | markdownify }}
+
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

en/developer-guide.md

@@ -7,6 +7,7 @@ lang: en
 id: developer-guide
 title: "Developer Guide - Bitcoin"
 ---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
 
 # Bitcoin Developer Guide
 
@@ -31,6 +32,8 @@ of the following file. -->
 
 {% include fragment_reviews_needed.md %}
 
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
 {% include guide_intro.md %}
 
 {% include guide_block_chain.md %}
@@ -50,8 +53,12 @@ of the following file. -->
 {% include guide_mining.md %}
 
 {% include references.md %}
+{{site.glossary_links}}
 
 </div>
 
 <script>updateToc();</script>
 <script>addAnchorLinks();</script>
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

en/developer-reference.md

@@ -7,6 +7,7 @@ lang: en
 id: developer-reference
 title: "Developer Reference - Bitcoin"
 ---
+<link rel="stylesheet" href="/css/jquery-ui.min.css">
 
 <!-- This should be empty, but comment it out just in case: {% include helpers/vars.md %} -->
 
@@ -28,6 +29,8 @@ title: "Developer Reference - Bitcoin"
 
 {% include fragment_reviews_needed.md %}
 
+<input id="glossary_term" placeholder="Search the glossary, RPCs, and more">
+
 {% include ref_intro.md %}
 
 {% include ref_block_chain.md %}
@@ -241,8 +244,12 @@ untrusted source.
 {% include ref/bitcoin-core/rest/requests/get_tx.md %}
 
 {% include references.md %}
+{{site.glossary_links}}
 
 </div>
 
 <script>updateToc();</script>
 <script>addAnchorLinks();</script>
+<script src="/js/jquery-1.11.2.min.js"></script>
+<script src="/js/jquery-ui.min.js"></script>
+<script src="/js/devsearch.js"></script>

img/icons/main_ico_abc.svg

@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   id="svg4885"
+   version="1.1"
+   inkscape:version="0.48.5 r10040"
+   sodipodi:docname="abc.svg"
+   inkscape:export-filename="/home/harding/abc.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4887" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="29.285714"
+     inkscape:cy="-0.27858482"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1278"
+     inkscape:window-height="762"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata4890">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1004.3622)">
+    <rect
+       style="fill:none;stroke:none"
+       id="rect5093"
+       width="48"
+       height="48"
+       x="279.56979"
+       y="499.64334" />
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
+       x="1.0714308"
+       y="1020.0408"
+       id="text5639"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5641"
+         x="1.0714308"
+         y="1020.0408">A</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
+       x="16.838728"
+       y="1035.5813"
+       id="text5643"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5645"
+         x="16.838728"
+         y="1035.5813">B</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:start;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans;-inkscape-font-specification:Sans"
+       x="33.035713"
+       y="1051.1122"
+       id="text5647"
+       sodipodi:linespacing="125%"><tspan
+         sodipodi:role="line"
+         id="tspan5649"
+         x="33.035713"
+         y="1051.1122">C</tspan></text>
+  </g>
+</svg>

js/devsearch.js

@@ -0,0 +1,71 @@
+---
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+---
+{% comment %}
+
+NOTICE: if you edit this template, you should also edit
+        /quality-assurance/devsearches.html which creates a page whose
+        links can be checked by HTML proofer
+
+Nested loops below:
+  1. site.devsearches: container for all searches defined in _config.yaml in
+     the arbitrary order they should appear
+  2. list: a list item in devsearches; only has two elements:
+     a. the name of the category
+     b. an array containing the sublist items (pre-sorted)
+  3. sublist: a list of the items we want to display as a one-entry hash table
+  4. term: the term as the key [0] and the uri as the value [1]
+
+{% endcomment %}
+
+var search_data = [
+{% for list in site.devsearches %}{% for item in list %}
+{% if forloop.first %}{% capture category_name %}{{item}}{% endcapture %}
+{% else %}{% for sublist in item %}{% for term in sublist %}
+{
+label: "{{term[0]}}",
+uri: "{{term[1]}}",
+category: "{{category_name}}"
+}
+{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}{% endif %}{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}
+];
+
+
+{% raw %}
+// code adapted from http://jqueryui.com/autocomplete/#categories
+// MIT license: https://jquery.org/license/
+
+$.widget( "custom.catcomplete", $.ui.autocomplete, {
+    _create: function() {
+        this._super();
+        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
+    },
+    _renderMenu: function( ul, items ) {
+        var that = this,
+        currentCategory = "";
+        $.each( items, function( index, item ) {
+            var li;
+            if ( item.category != currentCategory ) {
+              ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
+              currentCategory = item.category;
+            }
+            li = that._renderItemData( ul, item );
+            if ( item.category ) {
+              li.attr( "aria-label", item.category + " : " + item.label );
+            }
+        });
+    }
+});
+$(function() {
+    $( "#glossary_term" ).catcomplete({
+        source: search_data,
+        delay: 0,
+        minLength: 2,
+        autoFocus: true,
+        select: function( event, ui ) {
+            location.href = ui.item.uri;
+        }
+    });
+});
+{% endraw %}

quality-assurance/devsearch.html

@@ -0,0 +1,31 @@
+---
+# This file is licensed under the MIT License (MIT) available on
+# http://opensource.org/licenses/MIT.
+---
+<!DOCTYPE HTML>
+<head>
+<meta name="robots" content="noindex, nofollow">
+</head>
+<body>
+{% comment %}
+
+NOTICE: this template is based off of /js/devsearch.js
+
+Nested loops below:
+  1. site.devsearches: container for all searches defined in _config.yaml in
+     the arbitrary order they should appear
+  2. list: a list item in devsearches; only has two elements:
+     a. the name of the category
+     b. an array containing the sublist items (pre-sorted)
+  3. sublist: a list of the items we want to display as a one-entry hash table
+  4. term: the term as the key [0] and the uri as the value [1]
+
+{% endcomment %}
+
+{% for list in site.devsearches %}{% for item in list %}
+{% if forloop.first %}{% capture category_name %}{{item}}{% endcapture %}
+{% else %}{% for sublist in item %}{% for term in sublist %}
+<a href="{{term[1]}}">{{term[0]}}</a>
+{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}{% endif %}{% endfor %}{% unless forloop.last %},{% endunless %}{% endfor %}
+
+</body></html>