Search feature (#74)

* Updated configured production URL to drop unneeded ending slash.
* Updated ATOM feed to remove extra slash from self link.
* Updated reference to ~atom_path` and `rss_path`.
* Updated sitemap to sort pages and posts alphabetically.
* Added a JSON search feed file.
* Added search page with JavaScript search.
* Updated site template to add link for search page to header section.

Author: samlikins

_config.yml

@@ -51,14 +51,13 @@ exclude: [
 ]
 
 # The production_url is only used when full-domain names are needed
-# such as sitemap.txt
+# such as sitemap.txt, atom.xml, rss.xml, search.json
 # Most places will/should use BASE_PATH to make the urls
 #
 # If you have set a CNAME (pages.github.com) set your custom domain here.
 # Else if you are pushing to username.github.io, replace with your username.
 # Finally if you are pushing to a GitHub project page, include the project name at the end.
-#
-production_url : https://bpkg.sh/
+production_url : https://bpkg.sh
 
 # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
 # Jekyll-Bootstrap specific configurations

_includes/themes/the-program/default.html

@@ -27,9 +27,12 @@
               <ul>
                 <li class="logo"><a href="/">{{ site.title }}</a></li>
 
-                <li class="archive"><a href="/packages/name">packages by name</a></li>
-                <li class="archive"><a href="/packages/tag">packages by tag</a></li>
-                <li class="archive"><a href="/packages/category">packages by category</a></li>
+                <li class="archive"><a href="/packages/name">Packages by Name</a></li>
+                <li class="archive"><a href="/packages/tag">Packages by Tag</a></li>
+                <li class="archive"><a href="/packages/category">Packages by Category</a></li>
+
+                <li class="archive">&nbsp;</li>
+                <li class="archive"><a href="/search">Search Packages</a></li>
 
                 <!-- github buttons -->
                 <li class="forkme">

assets/js/search.js

@@ -0,0 +1,61 @@
+class PackageData {
+  title;
+  date;
+  author;
+  description;
+  category;
+  tags;
+  url;
+
+  constructor(data) {
+    this.title       = data.title;
+    this.date        = data.date;
+    this.author      = data.author;
+    this.description = data.description;
+    this.category    = data.category;
+    this.tags        = data.tags;
+    this.url         = data.url;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function (event) {
+  const search = document.getElementById('search');
+  const results = document.getElementById('results');
+  let generated = '';
+  let data = [];
+  let search_term = '';
+
+  fetch('/feed/search.json')
+    .then((response) => response.json())
+    .then((data_server) => {
+      generated = data_server.generated;
+      data = data_server.posts.map(post => new PackageData(post));
+    });
+
+  search.addEventListener('input', (event) => {
+    search_term = event.target.value.toLowerCase();
+    showList();
+  });
+
+  const showList = () => {
+    results.innerHTML = '';
+
+    if (search_term.length == 0) return;
+
+    const match = new RegExp(`${search_term}`, 'gi');
+    let result = data.filter((name) => match.test(name.title));
+
+    if (result.length == 0) {
+      const li = document.createElement('li');
+      li.innerHTML = `Zero results found`;
+      results.appendChild(li);
+    }
+
+    result.forEach((package) => {
+      const li = document.createElement('li');
+      li.innerHTML = `<a href="${package.url}">${package.title}</a>`;
+      results.appendChild(li);
+    });
+  };
+
+});

feed/atom.xml

@@ -5,23 +5,21 @@ title : Atom Feed
 <?xml version="1.0" encoding="utf-8"?>
 <feed xmlns="http://www.w3.org/2005/Atom">
   <title>{{ site.title }}</title>
-  <link href="{{ site.production_url }}/{{ site.atom_path }}" rel="self"/>
+  <link href="{{ site.production_url }}{{ site.JB.atom_path }}" rel="self"/>
   <link href="{{ site.production_url }}"/>
-  <updated>{{ site.time | date_to_xmlschema }}</updated>
   <id>{{ site.production_url }}</id>
+  <updated>{{ site.time | date_to_xmlschema }}</updated>
   <author>
     <name>{{ site.author.name }}</name>
     <email>{{ site.author.email }}</email>
   </author>
-
   {% for post in site.posts %}
   <entry>
     <title>{{ post.title }}</title>
     <link href="{{ site.production_url }}{{ post.url }}"/>
-    <updated>{{ post.date | date_to_xmlschema }}</updated>
     <id>{{ site.production_url }}{{ post.id }}</id>
+    <updated>{{ post.date | date_to_xmlschema }}</updated>
     <content type="html">{{ post.content | xml_escape }}</content>
   </entry>
   {% endfor %}
-
 </feed>

feed/rss.xml

@@ -4,24 +4,22 @@ title : RSS Feed
 
 <?xml version="1.0" encoding="UTF-8" ?>
 <rss version="2.0">
-<channel>
-  <title>{{ site.title }}</title>
-  <description>{{ site.title }} - {{ site.author.name }}</description>
-  <link>{{ site.production_url }}{{ site.rss_path }}</link>
-  <link>{{ site.production_url }}</link>
-  <lastBuildDate>{{ site.time | date_to_xmlschema }}</lastBuildDate>
-  <pubDate>{{ site.time | date_to_xmlschema }}</pubDate>
-  <ttl>1800</ttl>
-
-{% for post in site.posts %}
-  <item>
-    <title>{{ post.title }}</title>
-    <description>{{ post.content | xml_escape }}</description>
-    <link>{{ site.production_url }}{{ post.url }}</link>
-    <guid>{{ site.production_url }}{{ post.id }}</guid>
-    <pubDate>{{ post.date | date_to_xmlschema }}</pubDate>
-  </item>
-{% endfor %}
-
-</channel>
+  <channel>
+    <title>{{ site.title }}</title>
+    <description>{{ site.title }} - {{ site.author.name }}</description>
+    <link>{{ site.production_url }}{{ site.JB.rss_path }}</link>
+    <link>{{ site.production_url }}</link>
+    <pubDate>{{ site.time | date_to_xmlschema }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_xmlschema }}</lastBuildDate>
+    <ttl>1800</ttl>
+    {% for post in site.posts %}
+    <item>
+      <title>{{ post.title }}</title>
+      <link>{{ site.production_url }}{{ post.url }}</link>
+      <guid>{{ site.production_url }}{{ post.id }}</guid>
+      <pubDate>{{ post.date | date_to_xmlschema }}</pubDate>
+      <description>{{ post.content | xml_escape }}</description>
+    </item>
+    {% endfor %}
+  </channel>
 </rss>

feed/search.json

@@ -0,0 +1,21 @@
+---
+title : JavaScript Search
+permalink : '/feed/search.json'
+---
+
+{
+  "generated":"{{ site.time | date_to_xmlschema }}",
+  "posts":[
+    {% for post in site.posts %}{
+      "title":"{{ post.title }}",
+      "date":"{{ post.date | date: '%Y-%m-%d' }}",
+      "author":"{{ post.author }}",
+      "description":"{{ post.description }}",
+      "category":"{{ post.category }}",
+      "tags":{{ post.tags | jsonify }},
+      "repository":"{{ post.repository }}",
+      "url":"{{ site.production_url }}{{ post.url }}"
+    }{% if forloop.last == false %},{% endif %}
+    {% endfor %}
+  ]
+}

search/index.html

@@ -0,0 +1,16 @@
+---
+layout: page
+title: Search
+header: Search Packages
+group: navigation
+permalink: /search/
+---
+
+{% include JB/setup %}
+
+<div>
+  <input id="search" type="search" autofocus autocomplete="off" placeholder="Search for packages" />
+  <ul id="results">
+  </ul>
+</div>
+<script type="text/javascript" src="{{ BASE_PATH }}/assets/js/search.js" defer></script>

sitemap.txt

@@ -3,7 +3,7 @@
 title : Sitemap
 ---
 
-{% for page in site.pages %}
-{{site.production_url}}{{ page.url }}{% endfor %}
-{% for post in site.posts %}
-{{site.production_url}}{{ post.url }}{% endfor %}
+{% assign pages = site.pages | sort:"url" %}{% for page in pages %}{{site.production_url}}{{ page.url }}
+{% endfor %}
+{% assign posts = site.posts | sort:"url" %}{% for post in posts %}{{site.production_url}}{{ post.url }}
+{% endfor %}