From 7ea3e27ab7fcf9adfb5b74758d18ce8507102e22 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 25 Jul 2019 10:51:32 +0200
Subject: [PATCH] Switch search engine to algolia

---
 docs/_layouts/default.html |  11 +-
 docs/css/style.css         | 333 ++++++++++++++++++-------------------
 2 files changed, 173 insertions(+), 171 deletions(-)
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 56a5b78a58b..d01fd5e2dac 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -16,6 +16,7 @@
     <link rel="stylesheet" href="css/syntax.css">
     <link rel="stylesheet" href="css/prism.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" /> 
 </head>
 
 <body>
@@ -23,7 +24,7 @@
         <div id="book-summary" class="book-summary">
             <nav role="navigation">
                 <div class="search">
-                        <form action="#" onsubmit="search();return false;">
+                        <form action="#" onsubmit="return false;">
                             <div style="display:flex;align-items:center;">
                                 <i class="octicon octicon-search"></i>
                                 <input type="text" name="q" id="query" size="31" maxlength="255" value="" placeholder="Search...">
@@ -878,6 +879,14 @@
         </script>
         <script src="js/prism.js"></script>
         <script src="js/menu.js"></script>
+        <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: '32f254b1de6a25a96665d1229b6eb8f7', 
+            indexName: 'marmelab-react-admin', 
+            inputSelector: '#query', 
+            debug: false // Set debug to true if you want to inspect the dropdown 
+        }); 
+        </script> 
 </body>
 
 </html>
diff --git a/docs/css/style.css b/docs/css/style.css
index ea42d33bf68..781b565509d 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1,43 +1,85 @@
+/* Layout */
+
+.book {
+    display: flex;
+}
 .book-summary {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    position: absolute;
-    top: 0;
-    left: -300px;
-    bottom: 0;
-    z-index: 1;
-    overflow-y: auto;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     width: 300px;
     color: #364149;
     background: #fafafa;
-    border-right: 1px solid rgba(0, 0, 0, .07);
+    border-right: 1px solid rgba(0, 0, 0, 0.07);
     -webkit-transition: left 250ms ease;
     -moz-transition: left 250ms ease;
     -o-transition: left 250ms ease;
-    transition: left 250ms ease
+    transition: left 250ms ease;
+}
+
+@media (max-width: 600px) {
+    .book-summary {
+        position: absolute;
+        width: calc(100% - 30px);
+        left: calc((100% - 30px) * -1);
+        top: 0;
+        bottom: 0;
+        height: 100%;
+        z-index: 1;
+        overflow-x: hidden;
+        transition: all 250ms ease-out;
+        padding-top: 40px;
+    }
+    .book-summary.open {
+        left: 0;
+    }
+    .algolia-autocomplete .ds-dropdown-menu {
+        min-width: 0 !important;
+    }
+}
+.book.without-animation .book-summary {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
 }
+@media (min-width: 600px) {
+    .book.with-summary .book-body {
+        left: 300px;
+    }
+}
+@media (max-width: 600px) {
+}
+.book.without-animation .book-body {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+/* Typography */
+
 .book-summary ul.summary {
     list-style: none;
     margin: 0;
     padding: 0;
-    -webkit-transition: top .5s ease;
-    -moz-transition: top .5s ease;
-    -o-transition: top .5s ease;
-    transition: top .5s ease
+    -webkit-transition: top 0.5s ease;
+    -moz-transition: top 0.5s ease;
+    -o-transition: top 0.5s ease;
+    transition: top 0.5s ease;
 }
 .book-summary ul.summary li {
-    list-style: none
+    list-style: none;
 }
 .book-summary ul.summary li.header {
     padding: 10px 15px;
     padding-top: 20px;
     text-transform: uppercase;
-    color: #939da3
+    color: #939da3;
 }
 .book-summary ul.summary li.divider {
     height: 1px;
     margin: 7px 0;
     overflow: hidden;
-    background: rgba(0, 0, 0, .07)
+    background: rgba(0, 0, 0, 0.07);
 }
 .book-summary ul.summary li i.fa-check {
     display: none;
@@ -45,14 +87,14 @@
     right: 9px;
     top: 16px;
     font-size: 9px;
-    color: #3c3
+    color: #3c3;
 }
-.book-summary ul.summary li.done>a {
+.book-summary ul.summary li.done > a {
     color: #364149;
-    font-weight: 400
+    font-weight: 400;
 }
-.book-summary ul.summary li.done>a i {
-    display: inline
+.book-summary ul.summary li.done > a i {
+    display: inline;
 }
 .book-summary ul.summary li a,
 .book-summary ul.summary li span {
@@ -64,66 +106,18 @@
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
-    position: relative
+    position: relative;
 }
 .book-summary ul.summary li a:hover {
-    text-decoration: underline
+    text-decoration: underline;
 }
-.book-summary ul.summary li.active>a {
+.book-summary ul.summary li.active > a {
     color: #008cff;
     background: 0 0;
-    text-decoration: none
+    text-decoration: none;
 }
 .book-summary ul.summary li ul {
-    padding-left: 20px
-}
-@media (max-width: 600px) {
-    .book-summary {
-        width: calc(100% - 60px);
-        bottom: 0;
-        left: -100%
-    }
-}
-.book.with-summary .book-summary {
-    left: 0
-}
-.book.without-animation .book-summary {
-    -webkit-transition: none!important;
-    -moz-transition: none!important;
-    -o-transition: none!important;
-    transition: none!important
-}
-.book {
-    position: relative;
-    width: 100%;
-    height: 100%
-}
-@media (min-width: 600px) {
-    .book.with-summary .book-body {
-        left: 300px
-    }
-}
-@media (max-width: 600px) {
-    .book.with-summary {
-        overflow: hidden
-    }
-    .book.with-summary .book-summary {
-        width: 0;
-        overflow-x: hidden;
-        transition: all 250ms ease-out
-    }
-    .book.with-summary .book-summary.open {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        padding-top: 30px
-    }
-}
-.book.without-animation .book-body {
-    -webkit-transition: none!important;
-    -moz-transition: none!important;
-    -o-transition: none!important;
-    transition: none!important
+    padding-left: 20px;
 }
 
 .page-menu {
@@ -138,7 +132,7 @@
         display: flex;
         position: fixed;
         z-index: 1;
-        width: 100%
+        width: 100%;
     }
 }
 .page-menu button {
@@ -146,7 +140,7 @@
     cursor: pointer;
     border: none;
     background: none;
-    text-transform: uppercase
+    text-transform: uppercase;
 }
 
 .page-menu button img {
@@ -154,7 +148,6 @@
     height: 16px;
 }
 
-
 .book-body {
     position: absolute;
     top: 0;
@@ -167,7 +160,7 @@
     -webkit-transition: left 250ms ease;
     -moz-transition: left 250ms ease;
     -o-transition: left 250ms ease;
-    transition: left 250ms ease
+    transition: left 250ms ease;
 }
 .book-body .body-inner {
     position: absolute;
@@ -175,7 +168,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    overflow-y: auto
+    overflow-y: auto;
 }
 @media (max-width: 1240px) {
     .book-body {
@@ -183,42 +176,42 @@
         -moz-transition: -moz-transform 250ms ease;
         -o-transition: -o-transform 250ms ease;
         transition: transform 250ms ease;
-        padding-bottom: 20px
+        padding-bottom: 20px;
     }
     .book-body .body-inner {
         position: static;
-        min-height: calc(100% - 50px)
+        min-height: calc(100% - 50px);
     }
 }
 .page-wrapper {
     position: relative;
-    outline: 0
+    outline: 0;
 }
 .page-inner {
     position: relative;
     max-width: 800px;
     margin: 0 auto;
-    padding: 20px 15px 40px 15px
+    padding: 20px 15px 40px 15px;
 }
 @media (max-width: 600px) {
     .page-inner {
-        padding: 40px 15px 40px 15px
+        padding: 40px 15px 40px 15px;
     }
 }
 
 .page-inner .btn-group .btn {
     border-radius: 0;
     background: #eee;
-    border: 0
+    border: 0;
 }
 .buttons:after,
 .buttons:before {
-    content: " ";
+    content: ' ';
     display: table;
-    line-height: 0
+    line-height: 0;
 }
 .buttons:after {
-    clear: both
+    clear: both;
 }
 .button {
     border: 0;
@@ -229,16 +222,16 @@
     text-align: center;
     float: left;
     line-height: 1.42857143;
-    padding: 8px 4px
+    padding: 8px 4px;
 }
 .button:hover {
-    color: #444
+    color: #444;
 }
 .button.size-2 {
-    width: 50%
+    width: 50%;
 }
 .button.size-3 {
-    width: 33%
+    width: 33%;
 }
 .markdown-section {
     display: block;
@@ -249,18 +242,18 @@
     text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
-    -moz-text-size-adjust: 100%
+    -moz-text-size-adjust: 100%;
 }
 .markdown-section * {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    font-size: inherit
+    font-size: inherit;
 }
-.markdown-section>:first-child {
-    margin-top: 0!important
+.markdown-section > :first-child {
+    margin-top: 0 !important;
 }
-.markdown-section>:last-child {
-    margin-bottom: 0!important
+.markdown-section > :last-child {
+    margin-bottom: 0 !important;
 }
 .markdown-section blockquote,
 .markdown-section code,
@@ -269,7 +262,7 @@
 .markdown-section pre,
 .markdown-section table,
 .markdown-section tr {
-    page-break-inside: avoid
+    page-break-inside: avoid;
 }
 .markdown-section h2,
 .markdown-section h3,
@@ -277,21 +270,21 @@
 .markdown-section h5,
 .markdown-section p {
     orphans: 3;
-    widows: 3
+    widows: 3;
 }
 .markdown-section h1,
 .markdown-section h2,
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section h5 {
-    page-break-after: avoid
+    page-break-after: avoid;
 }
 .markdown-section b,
 .markdown-section strong {
-    font-weight: 700
+    font-weight: 700;
 }
 .markdown-section em {
-    font-style: italic
+    font-style: italic;
 }
 .markdown-section blockquote,
 .markdown-section dl,
@@ -300,21 +293,21 @@
 .markdown-section table,
 .markdown-section ul {
     margin-top: 0;
-    margin-bottom: .85em
+    margin-bottom: 0.85em;
 }
 .markdown-section a {
     color: #4183c4;
     text-decoration: none;
-    background: 0 0
+    background: 0 0;
 }
 .markdown-section a:active,
 .markdown-section a:focus,
 .markdown-section a:hover {
-    text-decoration: underline
+    text-decoration: underline;
 }
 .markdown-section img {
     max-width: 90%;
-    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
     border-radius: 2px;
     margin: 2rem;
 }
@@ -324,147 +317,147 @@
     margin: 1.7em 0;
     overflow: hidden;
     background-color: #e7e7e7;
-    border: none
+    border: none;
 }
 .markdown-section hr:after,
 .markdown-section hr:before {
     display: table;
-    content: " "
+    content: ' ';
 }
 .markdown-section hr:after {
-    clear: both
+    clear: both;
 }
 .markdown-section h1,
 .markdown-section h2,
 .markdown-section h3 {
     margin-top: 1.275em;
-    margin-bottom: .85em;
-    font-weight: 700
+    margin-bottom: 0.85em;
+    font-weight: 700;
 }
 .markdown-section h1 {
-    font-size: 2em
+    font-size: 2em;
 }
 .markdown-section h2 {
-    font-size: 1.75em
+    font-size: 1.75em;
 }
 .markdown-section h3 {
-    margin-top: .85em;
-    font-size: 1em
+    margin-top: 0.85em;
+    font-size: 1em;
 }
 .markdown-section code,
 .markdown-section pre {
-    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     direction: ltr;
     margin: 0;
     padding: 0;
     border: none;
-    color: inherit
+    color: inherit;
 }
 .markdown-section pre {
     overflow: auto;
     word-wrap: normal;
     margin: 0;
-    padding: .85em 1em;
+    padding: 0.85em 1em;
     margin-bottom: 1.275em;
-    background: #f7f7f7
+    background: #f7f7f7;
 }
-.markdown-section pre>code {
+.markdown-section pre > code {
     display: inline;
     max-width: initial;
     padding: 0;
     margin: 0;
     overflow: initial;
     line-height: inherit;
-    font-size: .85em;
+    font-size: 0.85em;
     white-space: pre;
-    background: 0 0
+    background: 0 0;
 }
-.markdown-section pre>code:after,
-.markdown-section pre>code:before {
-    content: normal
+.markdown-section pre > code:after,
+.markdown-section pre > code:before {
+    content: normal;
 }
 .markdown-section code {
-    padding: .2em;
+    padding: 0.2em;
     margin: 0;
-    font-size: .85em;
-    background-color: #f7f7f7
+    font-size: 0.85em;
+    background-color: #f7f7f7;
 }
 .markdown-section code:after,
 .markdown-section code:before {
-    letter-spacing: -.2em;
-    content: "\00a0"
+    letter-spacing: -0.2em;
+    content: '\00a0';
 }
 .markdown-section table {
     display: table;
     width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
-    overflow: auto
+    overflow: auto;
 }
 .markdown-section table td,
 .markdown-section table th {
     padding: 6px 13px;
-    border: 1px solid #ddd
+    border: 1px solid #ddd;
 }
 .markdown-section table tr {
     background-color: #fff;
-    border-top: 1px solid #ccc
+    border-top: 1px solid #ccc;
 }
 .markdown-section table tr:nth-child(2n) {
-    background-color: #f8f8f8
+    background-color: #f8f8f8;
 }
 .markdown-section table th {
-    font-weight: 700
+    font-weight: 700;
 }
 .markdown-section ol,
 .markdown-section ul {
     padding: 0;
     margin: 0;
-    margin-bottom: .85em;
-    padding-left: 2em
+    margin-bottom: 0.85em;
+    padding-left: 2em;
 }
 .markdown-section ol ol,
 .markdown-section ol ul,
 .markdown-section ul ol,
 .markdown-section ul ul {
     margin-top: 0;
-    margin-bottom: 0
+    margin-bottom: 0;
 }
 .markdown-section ol ol {
-    list-style-type: lower-roman
+    list-style-type: lower-roman;
 }
 .markdown-section blockquote {
     margin: 0;
-    margin-bottom: .85em;
+    margin-bottom: 0.85em;
     padding: 0 15px;
     color: #858585;
-    border-left: 4px solid #e5e5e5
+    border-left: 4px solid #e5e5e5;
 }
 .markdown-section blockquote:first-child {
-    margin-top: 0
+    margin-top: 0;
 }
 .markdown-section blockquote:last-child {
-    margin-bottom: 0
+    margin-bottom: 0;
 }
 .markdown-section dl {
-    padding: 0
+    padding: 0;
 }
 .markdown-section dl dt {
     padding: 0;
-    margin-top: .85em;
+    margin-top: 0.85em;
     font-style: italic;
-    font-weight: 700
+    font-weight: 700;
 }
 .markdown-section dl dd {
-    padding: 0 .85em;
-    margin-bottom: .85em
+    padding: 0 0.85em;
+    margin-bottom: 0.85em;
 }
 .markdown-section dd {
-    margin-left: 0
+    margin-left: 0;
 }
 .markdown-section .glossary-term {
     cursor: help;
-    text-decoration: underline
+    text-decoration: underline;
 }
 .navigation {
     position: absolute;
@@ -483,17 +476,17 @@
     -webkit-transition: all 350ms ease;
     -moz-transition: all 350ms ease;
     -o-transition: all 350ms ease;
-    transition: all 350ms ease
+    transition: all 350ms ease;
 }
 .navigation:hover {
     text-decoration: none;
-    color: #444
+    color: #444;
 }
 .navigation.navigation-next {
-    right: 0
+    right: 0;
 }
 .navigation.navigation-prev {
-    left: 0
+    left: 0;
 }
 @media (max-width: 1240px) {
     .navigation {
@@ -502,11 +495,11 @@
         max-width: 50%;
         width: 50%;
         display: inline-block;
-        float: left
+        float: left;
     }
     .navigation.navigation-unique {
         max-width: 100%;
-        width: 100%
+        width: 100%;
     }
 }
 .search input[type='text'] {
@@ -532,18 +525,18 @@
     font-size: 16px;
 }
 .book .book-header .font-settings .font-enlarge {
-  line-height: 30px;
-  font-size: 1.4em;
+    line-height: 30px;
+    font-size: 1.4em;
 }
 .book .book-header .font-settings .font-reduce {
-  line-height: 30px;
-  font-size: 1em;
+    line-height: 30px;
+    font-size: 1em;
 }
 .book.font-size-2 .book-body .page-inner section {
-  font-size: 1.6rem;
+    font-size: 1.6rem;
 }
 .book.font-family-1 {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 * {
     -webkit-box-sizing: border-box;
@@ -553,25 +546,25 @@
     -webkit-tap-highlight-color: transparent;
     -webkit-text-size-adjust: none;
     -webkit-touch-callout: none;
-    -webkit-font-smoothing: antialiased
+    -webkit-font-smoothing: antialiased;
 }
 a {
-    text-decoration: none
+    text-decoration: none;
 }
 body,
 html {
-    height: 100%
+    height: 100%;
 }
 html {
-    font-size: 62.5%
+    font-size: 62.5%;
 }
 body {
     text-rendering: optimizeLegibility;
     font-smoothing: antialiased;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 14px;
-    letter-spacing: .2px;
+    letter-spacing: 0.2px;
     text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%
+    -webkit-text-size-adjust: 100%;
 }
