adding search experience to the documentation #932

docs/_templates/layout.html

@@ -11,7 +11,17 @@
       min-width: initial;
       max-width: initial;
     }
+    .algolia-autocomplete{
+      width: 100%;
+      height: 1.5em
+    }
+    #q{
+      width: 100%;
+      height: 100%;
+    }
   </style>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
+
 
   {% if pagename == 'index' %}
   <link rel="canonical" href="https://docs.python-guide.org/"/>
@@ -111,3 +121,12 @@
   {% if show_copyright %}<p>&copy;{{ copyright }}</p>{% endif %}
 </div>
 {% endblock %}
+<!-- at the end of the BODY -->
+<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: '512b0d6c0c8578bed7662f5279c2249c',
+    indexName: 'python-guide',
+    inputSelector: '#q',
+    debug: false // Set debug to true if you want to inspect the dropdown
+  });
+</script>

docs/_templates/sidebarintro.html

@@ -5,6 +5,7 @@
 </p>
 
 <p style="margin-left:auto; margin-right: auto;"><iframe src="https://ghbtns.com/github-btn.html?user=realpython&repo=python-guide&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="200px" height="35px"></iframe></p>
+<input placeholder="Search the doc" autofocus id="q" />
 
 <p>
   This opinionated guide exists to provide both novice and expert Python developers a best practice handbook to the installation, configuration, and usage of Python on a daily basis.