Add search bar

.ruby-version

@@ -1 +1 @@
-2.5.1
+2.5.3

Gemfile

@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "2.5.1"
+ruby "2.5.3"
 
 group :jekyll_plugins do
   gem "github-pages"

Gemfile.lock

@@ -253,7 +253,7 @@ DEPENDENCIES
   jekyll-paginate-v2
 
 RUBY VERSION
-   ruby 2.5.1p57
+   ruby 2.5.3p105
 
 BUNDLED WITH
-   1.16.3
+   1.17.1

_includes/footer_scripts.html

@@ -1,6 +1,7 @@
 <script src="{{ site.baseurl }}/assets/mobile-menu.js"></script>
 <script src="{{ site.baseurl }}/assets/scroll-to-anchor.js"></script>
 <script src="{{ site.baseurl }}/assets/external-links-new-tab.js"></script>
+<script src="{{ site.baseurl }}/assets/search-bar.js"></script>
 
 <script type="text/javascript">
   mobileMenu.bind();

_includes/head.html

@@ -16,8 +16,10 @@
   <script src="{{ site.baseurl }}/assets/vendor/popper.min.js"></script>
   <script src="{{ site.baseurl }}/assets/vendor/bootstrap.min.js"></script>
   <script src="{{ site.baseurl }}/assets/vendor/anchor.min.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
   {% if jekyll.environment == 'production' %}
     {% include analytics.html %}
     {% include pixel.html %}
   {% endif %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>

_includes/main_menu.html

@@ -1,35 +1,47 @@
 <div class="main-menu">
   <ul>
-    <li class="{% if current[1] == 'get-started' %}active{% endif %}">
+    <li class="main-menu-item {% if current[1] == 'get-started' %}active{% endif %}">
       <a href="{{ site.baseurl }}/get-started">Get Started</a>
     </li>
 
-    <li class="{% if current[1] == 'features' %}active{% endif %}">
+    <li class="main-menu-item {% if current[1] == 'features' %}active{% endif %}">
       <a href="{{ site.baseurl }}/features">Features</a>
     </li>
 
-    <li class="{% if current[1] == 'ecosystem' %}active{% endif %}">
+    <li class="main-menu-item {% if current[1] == 'ecosystem' %}active{% endif %}">
       <a href="{{ site.baseurl }}/ecosystem">Ecosystem</a>
     </li>
 
-    <li class="{% if current[1] == 'blog' %}active{% endif %}">
+    <li class="main-menu-item {% if current[1] == 'blog' %}active{% endif %}">
       <a href="{{ site.baseurl }}/blog">Blog</a>
     </li>
 
-    <li>
+    <li class="main-menu-item">
       <a href="{{ site.external_urls.tutorials }}">Tutorials</a>
     </li>
 
-    <li>
+    <li class="main-menu-item">
       <a href="{{ site.baseurl }}/docs">Docs</a>
     </li>
 
-    <li class="{% if current[1] == 'resources' %}active{% endif %}">
+    <li class="main-menu-item {% if current[1] == 'resources' %}active{% endif %}">
       <a href="{{ site.baseurl }}/resources">Resources</a>
     </li>
 
-    <li>
+    <li class="main-menu-item">
       <a href="{{ site.external_urls.github }}">GitHub</a>
     </li>
+
+    <li class="navSearchWrapper reactNavSearchWrapper" key="search">
+      <div class="search-border">
+        <div id="search-icon"></div>
+        <input
+          id="search-input"
+          type="text"
+          title="Search"
+        />
+        <div id="close-search">X</div>
+      </div>
+    </li>
   </ul>
 </div>

_includes/mobile_menu.html

@@ -9,6 +9,53 @@
   </div>
 
   <div class="mobile-main-menu-links-container">
-    {% include main_menu.html %}
+
+    <div class="main-menu">
+      <ul>
+        <li class="navSearchWrapper reactNavSearchWrapper tabletSearchWrapper" key="search">
+          <div class="mobile-search-border">
+            <input
+              id="mobile-search-input"
+              type="text"
+              title="Search"
+            />
+            <div id="mobile-search-icon"></div>
+          </div>
+        </li>
+
+        <li class="{% if current[1] == 'get-started' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/get-started">Get Started</a>
+        </li>
+
+        <li class="{% if current[1] == 'features' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/features">Features</a>
+        </li>
+
+        <li class="{% if current[1] == 'ecosystem' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/ecosystem">Ecosystem</a>
+        </li>
+
+        <li class="{% if current[1] == 'blog' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/blog">Blog</a>
+        </li>
+
+        <li>
+          <a href="{{ site.external_urls.tutorials }}">Tutorials</a>
+        </li>
+
+        <li>
+          <a href="{{ site.baseurl }}/docs">Docs</a>
+        </li>
+
+        <li class="{% if current[1] == 'resources' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/resources">Resources</a>
+        </li>
+
+        <li>
+          <a href="{{ site.external_urls.github }}">GitHub</a>
+        </li>
+      </ul>
+    </div>
+
   </div>
 </div>