Merge pull request #1116 from vvo/docs/add-documentation-search

docs(website): add search to the website

docs/_includes/docs_nav.md

@@ -1,3 +1,4 @@
+
 <div class="docs-nav">
   <p class="docs-nav-item">
   {% if page.prev_link %}

docs/_includes/footer.html

@@ -0,0 +1,21 @@
+<!-- Directly extracted from https://github.com/rohanchandra/type-theme/blob/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/_includes/footer.html
+for customization (DocSearch feature) -->
+
+{% if site.theme_settings.katex and page.id %}
+<script src="{{ "/assets/js/katex_init.js" | relative_url }}"></script>
+{% endif %}
+
+{% if site.theme_settings.footer_text %}
+<footer class="site-footer">
+	<p class="text">{{ site.theme_settings.footer_text }}</p>
+</footer>
+{% endif %}
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+  apiKey: '4b20e432aa42a515b1a465b1494df8bf',
+  indexName: 'lostisland_faraday',
+  inputSelector: '#search-box',
+  debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>

docs/_includes/header.html

@@ -0,0 +1,59 @@
+<!-- This is extracted directly from https://github.com/rohanchandra/type-theme/blob/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/_includes/header.html
+for customization (DocSearch feature) -->
+<header class="site-header">
+	<div class="branding">
+		{% if site.theme_settings.gravatar %}
+		<a href="{{ site.baseurl }}/">
+			<img class="avatar" src="https://secure.gravatar.com/avatar/{{ site.theme_settings.gravatar }}?s=100" alt=""/>
+		</a>
+		{% elsif site.theme_settings.avatar %}
+		<a href="{{ site.baseurl }}/">
+			<img class="avatar" src="{{ site.baseurl }}/{{ site.theme_settings.avatar }}" alt=""/>
+		</a>
+		{% endif %}
+		<h1 class="site-title">
+			<a href="{{ site.baseurl }}/">{{ site.theme_settings.title }}</a>
+		</h1>
+	</div>
+	<nav class="site-nav">
+		<ul>
+			{% if site.theme_settings.site_navigation_sort %}
+				{% assign site_pages = site.pages | sort: site.theme_settings.site_navigation_sort %}
+			{% else %}
+				{% assign site_pages = site.pages %}
+			{% endif %}
+			{% for page in site_pages %}
+			{% if page.title and page.hide != true %}
+			<li>
+				<a class="page-link" href="{{ page.url | relative_url }}">
+					{{ page.title }}
+				</a>
+			</li>
+			{% endif %}
+			{% endfor %}
+			<!-- Social icons from Font Awesome, if enabled  -->
+			{% include icons.html %}
+
+            <!-- Search bar -->
+            {% if site.theme_settings.search %}
+            <li>
+            <form action="{{ site.baseurl }}/search.html" method="get">
+                <input type="text" id="search-box" name="query" placeholder="Search" class="">
+                <button type="submit" class="">
+                    <i class="fa fa-fw fa-search"></i>
+                </button>
+            </form>
+            </li>
+            {% endif %}
+      <li>
+        <form id="search-form">
+          <input type="text" id="search-box" placeholder="Search">
+          <button type="submit">
+              <i class="fa fa-fw fa-search"></i>
+          </button>
+        </form>
+      </li>
+		</ul>
+	</nav>
+
+</header>

docs/_sass/_variables.scss

@@ -5,4 +5,5 @@
 $link-color: #EE4266;
 $text-color: #3C3C3C;
 $font-family-main: 'KohinoorTelugu-Regular', Helvetica, Arial, sans-serif;
-$font-family-headings: 'Raleway', Helvetica, Arial, sans-serif;
+$font-family-headings: 'Raleway', Helvetica, Arial, sans-serif;
+$search-color: #EE4266;

docs/_sass/faraday.sass

@@ -120,3 +120,11 @@ footer
 
   100%
     transform: rotate(360deg)
+
+#search-form
+  display: inline-block
+  // You need a minimal window size for the search to display well, should be ok, people are on desktop
+  // when needing search usually
+  @media screen and (max-width: 800px)
+    display: none
+

docs/assets/css/main.scss

@@ -3,4 +3,5 @@
 
 @import "variables";
 @import "type-theme";
-@import "faraday";
+@import "faraday";
+@import "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"