From a47ab65b5488a58fdfb12b233063314192a8c062 Mon Sep 17 00:00:00 2001
From: curben <curben@users.noreply.gitlab.com>
Date: Sun, 11 Nov 2018 16:55:13 +1030
Subject: [PATCH] feat: implement search bar

a crude search bar by piggybacking on gitlab search.
future enhancement is implement Algolia.
---
 themes/typing/layout/_partial/header.ejs |  5 +++
 themes/typing/source/css/typing.css      | 48 ++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/themes/typing/layout/_partial/header.ejs b/themes/typing/layout/_partial/header.ejs
index 55e3c63..9d3cf1a 100644
--- a/themes/typing/layout/_partial/header.ejs
+++ b/themes/typing/layout/_partial/header.ejs
@@ -4,6 +4,11 @@
     <% for (let i in theme.menu) { %>
       <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
     <% } %>
+
+    <div class="searchContainer">
+      <input class="searchBox" type="text" id="search" placeholder="Search...">
+      <a class="searchBtn" href="#" onClick="window.open('https://gitlab.com/search?utf8=%E2%9C%93&amp;search=' + document.getElementById('search').value + '&amp;group_id=&amp;project_id=8306723&amp;search_code=true&amp;repository_ref=master')"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg><!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --></a>
+    </div>
   </nav>
   <%/* Nav menu for mobile */%>
   <nav class="mobile-nav">
diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css
index 3101e69..031802f 100644
--- a/themes/typing/source/css/typing.css
+++ b/themes/typing/source/css/typing.css
@@ -1410,6 +1410,54 @@ pre .keyword {
   line-height: 1.8;
 }
 
+/* search bar */
+.searchContainer{
+  width: 10em;
+  color:#d8d8d8;
+  background-color:#333;
+  outline: 0;
+  float: right;
+  height: 1.8em;
+  position: relative;
+}
+
+/* inline-block to position them in same line */
+.searchBox,
+.searchBtn{
+  display:inline-block;
+  color: inherit;
+  background-color: inherit;
+}
+
+/* hide the border and fill the height to parent's */
+.searchBox {
+  border: 0;
+  height:100%;
+  width: 85%;
+  padding-left: 0.2em;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+
+/* highlight the text box when focused */
+.searchBox:focus {
+  border: 1px solid #1abc9c;
+}
+
+/* align the button to center */
+.searchBtn {
+  width: 10%;
+  position: absolute;
+  top: 50%;
+  transform: translate(30%, -50%);
+}
+
+/* fill the svg with parent's font color */
+svg {
+  fill: currentColor;
+}
+
 @media (max-width: 768px) {
   body {
     font-size: 1.2em;