search plugin (#779)

JohnSnowLabs · Nov 20, 2023 · 0fa7a2f · 0fa7a2f
1 parent 777452e
commit 0fa7a2f
Show file tree

Hide file tree

Showing 11 changed files with 307 additions and 198 deletions.
diff --git a/docs/_includes/article-header.html b/docs/_includes/article-header.html
@@ -1,4 +1,7 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script>
+  {% include scripts/search/simple-jekyll-search.min.js %}
+</script>
 {%- include snippets/get-article-title.html article=include.article-%}
 {%- assign _article_title = __return -%}
 
@@ -43,12 +46,32 @@
       {%- if _show_nav -%}
         <div class="header-nav">{%- include article-nav.html article=page -%}</div>
       {%- endif -%}
+
+      {%- if page.layout == "docs" -%}
+        <div class="main-docs">
+          <div class="search-wrapper">
+            <!-- HTML elements for search -->
+            <input type="text" id="search-input" placeholder="Search...">
+            <ul id="results-container" class="shadow results-container"></ul>
+          </div>
+        </div> 
+      {%- endif -%}     
+
       {%- if _show_title -%}
         <header class="main-docs {{ _subtitle_class }}">
           <h1>{{ _article_title }}</h1>
           {%- if _show_subtitle -%}
           <div class="top-subtitle mont">{{ _article_subtitle }}</div>
           {%- endif -%}
+          {%- if page.layout == "topdemos" or page.layout == "demopagenew" -%}
+            <div class="main-docs">
+              <div class="search-wrapper">
+                <!-- HTML elements for search -->
+                <input type="text" id="search-input" placeholder="Search...">
+                <ul id="results-container" class="shadow results-container"></ul>
+              </div>
+            </div> 
+          {%- endif -%}  
         </header>
       {%- endif -%}
       {%- if _show_edit_on_github -%}
@@ -79,4 +102,4 @@ <h1>{{ _article_title }}</h1>
 
 {%- if include.semantic != false -%}
   <meta itemprop="headline" content="{{ _article_title }}">
-{%- endif -%}
+{%- endif -%}
diff --git a/docs/_includes/scripts/custom.js b/docs/_includes/scripts/custom.js
@@ -203,4 +203,15 @@ const demomenu = document.querySelector('.demomenu'),
 
 if(demomenu === null) {
   asideButton.classList.add('hide_aside');
-}
+}
+
+
+var sjs = SimpleJekyllSearch({
+  searchInput: document.getElementById('search-input'),
+  resultsContainer: document.getElementById('results-container'),
+  noResultsText: "<em>No results found.</em>",
+  json: '/search.json',
+  limit: 100,
+  searchResultTemplate: '<li><a href="{{ site.url }}{url}">{demopage}{title}<span>{seotitle}</span></a></li>'
+})
+
diff --git a/docs/_includes/scripts/search/simple-jekyll-search.min.js b/docs/_includes/scripts/search/simple-jekyll-search.min.js
diff --git a/docs/_layouts/article.html b/docs/_layouts/article.html
@@ -23,6 +23,11 @@
   </div>
 
 </div>
+<div class="dn">
+  <!-- HTML elements for search -->
+  <input type="text" id="search-input" placeholder="Search...">
+  <ul id="results-container" class="shadow results-container"></ul>
+</div> 
 
 <script>
   {%- include scripts/article.js -%}

diff --git a/docs/_layouts/demopagenew.html b/docs/_layouts/demopagenew.html
@@ -16,8 +16,8 @@
     {%- for _section in page.data.sections -%}
       {%- if _section.secheader -%}
         {%- for child in _section.secheader -%}
-        <h1 class="subtitle">{{ child.subtitle }}</h1>           
-        {%- endfor-%}        
+        <h2 class="subtitle">{{ child.subtitle }}</h2>           
+        {%- endfor-%}               
       {%- endif -%}
     {%- endfor -%}        
 
@@ -26,5 +26,3 @@ <h1 class="subtitle">{{ child.subtitle }}</h1>
       </section>
   </div>
 </div>
-
-
diff --git a/docs/_layouts/models.html b/docs/_layouts/models.html
@@ -1,7 +1,9 @@
 ---
 layout: base
 ---
-
+<script>
+  {% include scripts/search/simple-jekyll-search.min.js %}
+</script>
 <div class="layout--page js-page-root">
   <div class="page__main js-page-main page__viewport full-width cell cell--auto">
     <div class="page__main-inner">
@@ -54,6 +56,11 @@ <h1>Spark NLP Models Hub</h1>
             </div>
           </div>
         </div>
+        <div class="dn">
+          <!-- HTML elements for search -->
+          <input type="text" id="search-input" placeholder="Search...">
+          <ul id="results-container" class="shadow results-container"></ul>
+        </div> 
         <div class="grid grid--reverse">
           <div class="col-aside d-print-none js-col-aside"></div>
           <div class="col-main cell cell--auto">

diff --git a/docs/_layouts/nlp_products.html b/docs/_layouts/nlp_products.html
@@ -3,6 +3,9 @@
 ---
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script>
+  {% include scripts/search/simple-jekyll-search.min.js %}
+</script>
 <div class="layout--page js-page-root">
   <div class="page__main js-page-main page__viewport full-width cell cell--auto">
     <div class="page__main-inner">
@@ -53,6 +56,11 @@
 
             </div>
         </div>
+        <div class="dn">
+          <!-- HTML elements for search -->
+          <input type="text" id="search-input" placeholder="Search...">
+          <ul id="results-container" class="shadow results-container"></ul>
+        </div> 
       <div class="page__footer d-print-none">{%- include footer.html -%}</div>
     </div>
   </div>

diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
@@ -174,6 +174,11 @@
                         {%- endfor -%}
                       </ul>
                     {%- endif -%}
+                    <div class="search-wrapper">
+                      <!-- HTML elements for search -->
+                      <input type="text" id="search-input" placeholder="Search...">
+                      <ul id="results-container" class="shadow results-container"></ul>
+                    </div>
                   {%- if _full_width == false -%}
                     </div>
                   {%- endif -%}

diff --git a/docs/_sass/custom.scss b/docs/_sass/custom.scss
@@ -44,6 +44,10 @@ h1,h2,h3,h4 {
 	padding-top: 0 !important;
 }
 
+.dn {
+	display: none !important;
+}
+
 /*@media all and (min-width:0px)*/
 .grid > .cell--auto {
     flex: 1 1 auto;
@@ -143,15 +147,20 @@ header.header {
 	padding: 15px;
 }
 
-.hero__content .article__header {
-	h1 {
-		font-weight: 800;
-		font-size: 60px;
-		line-height: 55px;
-		span {
-			font-size: 35px;
-			display: block;
-			padding-top: 9px;
+.hero__content {
+	.search-wrapper {
+		margin: 30px auto 0;
+	}
+	.article__header {
+		h1 {
+			font-weight: 800;
+			font-size: 60px;
+			line-height: 55px;
+			span {
+				font-size: 35px;
+				display: block;
+				padding-top: 9px;
+			}
 		}
 	}
 }
@@ -966,7 +975,10 @@ ol.list1 {
 		line-height: 29px;
 		text-align: center;
 		color: #fff;
-		padding-top: 17px;
+		padding: 17px 0 25px;
+	}
+	.search-wrapper {
+		margin: 0 auto 20px;
 	}
 }
 
@@ -1589,6 +1601,95 @@ code.language-plaintext {
 	}
 }
 
+.search-wrapper {
+	position: relative;
+	width: 415px;
+	margin: 0 auto 50px;
+	z-index: 9;
+	button {
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+	input {
+		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iIzUzNkI3NiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTUuOTM3IDE0LjQ1MUE4LjkyNyA4LjkyNyAwIDAgMCAyLjYxNCAyLjYxNGE4LjkyNiA4LjkyNiAwIDAgMCAxMS44MzcgMTMuMzIzbDMuNzU2IDMuNzU1YTEuMDUgMS4wNSAwIDEgMCAxLjQ4NS0xLjQ4NWwtMy43NTUtMy43NTZaTTEzLjc1MiA0LjFBNi44MjYgNi44MjYgMCAxIDEgNC4xIDEzLjc1MiA2LjgyNiA2LjgyNiAwIDAgMSAxMy43NTIgNC4xWiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");
+		background-repeat: no-repeat;
+		background-position: 10px center;
+		height: 50px;
+		border-radius: 5px;
+		transition: all 300ms ease;
+		border: 1px solid #1E77B7;
+		padding: 5px 5px 5px 41px;
+		font-weight: 400;
+		width: 100%;
+		color: #536B76;
+		font-family: 'Roboto';
+		font-size: 14px;
+		&:focus {
+			background-color: #ECF9FF;
+		}
+	}	
+}
+
+.results-container {
+	list-style-type: none;
+	max-height: 500px;
+	overflow: hidden;
+	overflow-y: auto;
+	position: absolute;
+	left: 0;
+	top: 51px;
+	width: 100%;
+	em {
+		display: block;
+		font-style: normal;
+		border: 1px solid #1E77B7;
+		font-weight: bold;
+		padding: 10px;
+	}
+	li {
+		list-style-type: none;
+		padding: 5px 10px;
+		border-top: 1px solid #f4f5f6;
+		&:first-child {
+			padding-top: 15px;
+		}
+		&:last-child {
+			padding-bottom: 15px;
+		}
+		span {
+			display: block;
+			font-size: 12px;
+			color: #536B76 !important;
+			font-weight: 200;
+			line-height: 18px;
+		}
+		i {
+			font-style: normal;
+			text-align: right;
+			font-size: 12px;
+			line-height: 12px;
+			color: #ff882f;
+			display: block;
+			margin-bottom: 4px;
+		}
+		a {
+			color: #1E77B7 !important;
+			display: block;
+			padding: 10px;
+			position: relative;
+			text-align: left;
+			transition: all 300ms ease;
+			border-radius: 3px;
+			&:hover {
+				text-decoration: none !important;
+				color: #1E77B7 !important;
+				background: #ecf9ff;
+			}
+		}
+	}
+}
+
 .article-inner {
 	display: block;
 	position: relative;
@@ -1656,6 +1757,9 @@ code.language-plaintext {
 .demopage {
 	min-height: 1010px;
 	position: relative;
+	.search-wrapper {
+		margin: 0 0 40px;
+	}
 	h1.subtitle {
 		font-size: 24px;
 		line-height: 29px;
@@ -4115,6 +4219,9 @@ code {
 }
 
 @media (max-width: 767px) {
+	.search-wrapper {
+		width: 100%;
+	}
 	.header__title {
 		width: 100%;
 		margin: 0;