Added search

assets/static/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sources":["webpack:///app.js","webpack:///"],"mappings":"AAAA;;;;;;;;;;;;;ACgKA;;;;;;;;;;AAqiBA;AAqpHA;AAkgIA;AAg3EA","sourceRoot":""}
+{"version":3,"file":"app.js","sources":["webpack:///app.js","webpack:///"],"mappings":"AAAA;;;;;;;;;;;;;ACwLA;;;;;;;;;;AAqiBA;AAqpHA;AAkgIA;AAg3EA","sourceRoot":""}

content/docs/search/contents.lr

@@ -0,0 +1,21 @@
+title: Search
+---
+sort_key: 1200
+---
+allow_comments: no
+---
+body:
+
+Not sure where to find something?  Here you can search the Lektor
+documentation:
+
+<div class="google-custom-search">
+  <form method=get>
+    <div class="input-group">
+      <input type=text class="form-control" name=q size=40>
+      <span class="input-group-btn">
+        <input type=submit class="btn btn-default" value="Search">
+      </span>
+    </div>
+  </form>
+</div>

webpack/js/app.js

@@ -1,4 +1,5 @@
 require('bootstrap');
+var qs = require('query-string');
 
 function selectText(text) {
   if (document.body.createTextRange) {
@@ -88,7 +89,55 @@ function initInstallRow() {
   }
 }
 
+function initGoogleSearch() {
+  var container = $('.google-custom-search');
+  if (container.length == 0) {
+    return;
+  }
+  var cx = '012722186170730423054:utwznhnrrmi';
+  var gcse = document.createElement('script');
+  gcse.type = 'text/javascript';
+  gcse.async = true;
+  gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
+      '//cse.google.com/cse.js?cx=' + cx;
+  var s = document.getElementsByTagName('script')[0];
+  s.parentNode.insertBefore(gcse, s);
+
+  $(`
+    <gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>
+  `).appendTo(container);
+  $(`
+  <div style="display: none">
+    <div id="base_webResult">
+      <div class="gs-webResult gs-result"
+        data-vars="{
+          longUrl: function() {
+            var i = unescapedUrl.indexOf(visibleUrl);
+            return i < 1 ? visibleUrl : unescapedUrl.substring(i);
+          },
+          processSearchTitle: function(title) {
+            return title.split(' | ').slice(0, -2).join(' | ') || 'Documentation';
+          }
+        }">
+        <div class="gs-title">
+          <a class="gs-title" data-attr="{href:unescapedUrl, target:target}"
+            data-body="html(processSearchTitle(title))"></a>
+        </div>
+        <div class="gs-visibleUrl gs-visibleUrl-long" data-body="longUrl()"></div>
+        <div class="gs-snippet" data-body="html(content)"></div>
+      </div>
+    </div>
+  </div>
+  `).appendTo(container);
+
+  var params = qs.parse(location.search);
+  if (params.q) {
+    $('input[name="q"]', container).val(params.q);
+  }
+}
+
 $(function() {
   initDownloadButton();
   initInstallRow();
+  initGoogleSearch();
 });

webpack/package.json

@@ -19,6 +19,7 @@
     "node-sass": "^3.4.2",
     "sass-loader": "^3.1.1",
     "style-loader": "^0.8.3",
+    "query-string": "^3.0.0",
     "url-loader": "^0.5.6",
     "webpack": "^1.12.6",
     "font-awesome": "^4.5.0"

webpack/scss/main.scss

@@ -584,3 +584,107 @@ div.sourceviewer {
     overflow: auto;
   }
 }
+
+/* search */
+div.doc-styling div.gsc-control-cse {
+  font-family: $font-family-base!important;
+  font-size: $font-size-base;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 15px 0;
+
+  table {
+    border: none;
+    tr {
+      background: transparent!important;
+    }
+    td, th {
+      padding: default;
+    }
+  }
+
+  .gsc-result {
+    background: transparent;
+    border: none;
+  }
+
+  .gsc-table-result, .gsc-thumbnail-inside, .gsc-url-top {
+    margin: 0;
+    padding: 0;
+    font-family: $font-family-base!important;
+    font-size: $font-size-base!important;
+    td {
+      padding: 0;
+    }
+  }
+
+  .gs-title {
+    height: auto;
+    line-height: 1;
+  }
+
+  .gsc-url-top {
+    line-height: 1;
+    padding: 4px 0;
+  }
+
+  .gs-spelling a,
+  .gs-title a.gs-title,
+  .gs-title a.gs-title * {
+    color: $brand-primary!important;
+  }
+
+  .gs-spelling {
+    padding: 0;
+  }
+
+  .gs-webResult div.gs-visibleUrl, .gs-imageResult div.gs-visibleUrl {
+    color: #888;
+  }
+
+  .gs-no-results-result .gs-snippet {
+    background: transparent;
+    border: none;
+    font-weight: bold;
+    color: $brand-primary;
+    text-align: center;
+    padding: 0;
+  }
+
+  .gsc-thumbnail {
+    display: none;
+  }
+
+  .gsc-result-info-container {
+    padding: 0;
+  }
+
+  .gs-snippet {
+    font-size: 0.9em;
+    line-height: 1.3;
+    padding-left: 30px;
+    color: $gray;
+  }
+
+  .gsc-result-info, .gsc-above-wrapper-area {
+    padding: 0;
+    font-size: $font-size-base;
+    border: none;
+  }
+
+  .gsc-orderby-container {
+    display: none;
+  }
+
+  .gcsc-branding, .gsc-resultsHeader {
+    display: none;
+  }
+
+  .gsc-results .gsc-cursor-box {
+    text-align: center;
+    * {
+      color: $brand-primary!important;
+    }
+  }
+}