Use search for 404 page (#16514)

_config.yml

@@ -81,6 +81,10 @@ collections:
 #   3rd Party Settings    #
 # ----------------------- #
 
+#Search
+algolia:
+  api_key: "ae96d94b201c5444c8a443093edf3efb"
+
 # Twitter
 twitter_user: balloob
 twitter_tweet_button: true

sass/custom/_paulus.scss

@@ -634,3 +634,39 @@ code {
   border-radius: 0.4em;
   padding: 0.1em 0.4em;
 }
+
+
+@media only screen and (max-width: $menu-collapse) {
+  #not_found {
+    .page {
+      text-align: center;
+    
+      .search404-container {
+        margin-bottom: 32px;
+
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $menu-collapse) {
+  #not_found {
+    .page {
+      text-align: center;
+      margin-bottom: 300px;
+    
+      .search404-container {
+        margin-bottom: 32px;
+    
+        #search404 {
+          width: 420px;
+        }
+      }
+    }
+    footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+}

source/404.html

@@ -0,0 +1,16 @@
+---
+layout: page
+permalink: /404.html
+sidebar: false
+feedback: false
+body_id: not_found
+---
+<h2>Oh no! This page does not exist 😞</h2>
+
+<div class='search404-container'>
+    <div class='search404'>
+        <i class="icon-search"></i>
+            <input id='search404' placeholder='Search the documentation …'>
+        <a href='#' class='search404-close'><i class="icon-remove-sign"></i></a>
+    </div>
+</div>

source/404.markdown

@@ -1,10 +0,0 @@
----
-# example 404.md
-
-layout: page
-permalink: /404.html
----
-
-# Are you lost?
-
-Hello automator it appears the page you have requested doesn't exist. If you believe this is a mistake then open an issue by clicking [here](https://github.com/home-assistant/home-assistant.io/issues). 

source/_includes/javascripts/scripts.html

@@ -11,11 +11,22 @@ s.parentNode.insertBefore(g,s)}(document,'script'));
 <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
 <script type="text/javascript">
 docsearch({
-  apiKey: 'ae96d94b201c5444c8a443093edf3efb',
+  apiKey: "{{ site.algolia.api_key }}",
   indexName: 'home-assistant',
   inputSelector: '#search',
   debug: false // Set debug to true if you want to inspect the dropdown
 });
+docsearch({
+  apiKey: '{{ site.algolia.api_key }}',
+  indexName: 'home-assistant',
+  inputSelector: '#search404',
+  debug: false // Set debug to true if you want to inspect the dropdown
+});
+
+document.querySelector('.search404-close').addEventListener('click', function(ev) {
+  ev.preventDefault();
+  document.querySelector('#search404').value = "";
+});
 document.querySelector('.search .close').addEventListener('click', function(ev) {
   ev.preventDefault();
   document.querySelector('.search-container').style.display = 'none';