Skip to content

Commit

Permalink
Add meilisearch UI and functinality
Browse files Browse the repository at this point in the history 
Signed-off-by: Md Mohin Uddin <mohin@appscode.com>
  • Loading branch information
@mohin7 @tamalsaha
mohin7 authored and tamalsaha committed Dec 29, 2022
1 parent 20a0bff commit f421654
Show file tree
Hide file tree
Showing 12 changed files with 437 additions and 147 deletions.
4 changes: 0 additions & 4 deletions Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,7 @@ assets: hugo-tools
.PHONY: gen
gen:
rm -rf public
@yqq w -i config.dev.yaml params.search_api_key --tag '!!str' $(GOOGLE_CUSTOM_SEARCH_API_KEY)
hugo --config=config.dev.yaml
@yqq w -i config.dev.yaml params.search_api_key --tag '!!str' '_replace_'

.PHONY: qa
qa: gen
Expand All @@ -35,9 +33,7 @@ qa: gen
.PHONY: gen-prod
gen-prod:
rm -rf public
@yqq w -i config.yaml params.search_api_key --tag '!!str' $(GOOGLE_CUSTOM_SEARCH_API_KEY)
hugo --minify --config=config.yaml
@yqq w -i config.yaml params.search_api_key --tag '!!str' '_replace_'

.PHONY: release
release: gen-prod
Expand Down
3 changes: 1 addition & 2 deletions config.dev.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ params:
domain_kubeshield: https://kubeshield-v1-hugo.web.app
domain_bytebuilders: https://byte.builders
domain_marketplace: https://marketplace.byte.builders
search_engine_ID: 015199383701854252104:jccvu4eiulw
search_api_key: AIzaSyBrcwLTnL09geNrFMUx1kpL--dT1379aag
search_api_key: 8fd610038d901dd16a111e6f1568343bb969b084a1952dafdcb1545fd8c35e96
blog_url: https://blog.byte.builders
slack_url: https://slack.appscode.com
github_url: https://github.com/appscode
Expand Down
3 changes: 1 addition & 2 deletions config.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ params:
domain_kubeshield: https://kubeshield.com
domain_bytebuilders: https://byte.builders
domain_marketplace: https://marketplace.byte.builders
search_engine_ID: 015199383701854252104:jccvu4eiulw
search_api_key: _replace_
search_api_key: 8fd610038d901dd16a111e6f1568343bb969b084a1952dafdcb1545fd8c35e96
blog_url: https://blog.byte.builders
slack_url: https://slack.appscode.com
github_url: https://github.com/appscode
Expand Down
4 changes: 4 additions & 0 deletions layouts/_default/baseof.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1112,6 +1112,10 @@ <h4>Legal</h4>
</script>
<!--End of Tawk.to Script-->

<!-- Meilisearch -->
{{ block "footer-script" . }}
{{ end }}

<script>
window.addEventListener('load', function() {
jQuery('a:contains("KubeDB")').click(function() {
Expand Down
165 changes: 32 additions & 133 deletions layouts/products/single.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,26 @@ <h6>{{ .Name }}</h6>
{{ end }}
</ul>

<!-- =============searchbar area start ===========================-->
<div class="ac-searchbar">
<label for="acSearch">
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" target="#acSearch" trigger="hover"
style="width:22px;height:22px">
</lord-icon>
</label>
<input id="acSearch" type="search" placeholder="Search in {{ $p.name }} Documentation!">

<input id="acSearch" type="search" placeholder="Search in {{ $p.name }} documentation!" autocomplete="off">

<!-- search result start -->
<div id="meilisearch-hideid" class="search-result-box is-hidden">
<!-- add ".is-hidden" for hide item -->
<div class="search-content" id="meilisearch-hits">
<!-- Search List component will be generate here from dom -->
</div>
</div>
<!-- search result end -->
</div>
<!-- =============searchbar area end ===========================-->

</div>
<!-- searchbar component end -->
Expand Down Expand Up @@ -279,39 +291,33 @@ <h4>What's on this Page</h4>
<div class="overlay-bg"></div>
<!-- overlay end -->

<!-- responsive sidebar search area start -->
<div class="sidebar-search-area">
<button class="button ac-button inline-button back-button"><span
class="material-icons-outlined">arrow_back</span>Back</button>
<div class="search-area-top">
<h5>Search</h5>

<div class="searchbar-area">
<input type="search" name="search" id="searchbox" placeholder="Search..." />
<button onclick="queryPage(1)">
<input type="search" name="search" id="searchbox" placeholder="Search in {{ $p.name }} documentation!" />
<button>
<lord-icon src="https://cdn.lordicon.com/msoeawqm.json" colors="primary:#ffffff" target=".searchbar-area button"
trigger="hover" style="width:22px;height:22px">
</lord-icon>
</button>
</div>

<span id="searchbar-script-container" style="display:none"></span>

<div class="search-meta-information level">
<div class="level-left">
</div>
</div>
</div>

<div class="search-result-wrapper">
</div>

<!-- pagination area start -->
<div class="pagination-area">
<div class="pagination-list">
<!-- search content start -->
<div id="meilisearch-hideid-mobile">
<div class="search-content" id="meilisearch-mobile-hits">
<!-- Generated search list for mobile device will be generate here -->
</div>
</div>
<!-- pagination area end -->
<!-- search content end -->

</div>
<!-- responsive sidebar search area end -->

<!-- improve page section start -->
<div class="improve-section-area">
Expand All @@ -330,122 +336,6 @@ <h5>Search</h5>
</div>
</div>
<!-- improve page section end -->

<script type="text/javascript">
var pageSize = 5;
var acSearch = document.querySelector("#acSearch");
var bodyOverlay = document.querySelector(".overlay-bg");
var sidebarSearch = document.querySelector(".sidebar-search-area");

acSearch.addEventListener("click", function () {
bodyOverlay.style.display = "block";
sidebarSearch.style.right = "0";
document.getElementById("searchbox").focus();
bodyOverlay.addEventListener("click", function () {
bodyOverlay.style.display = "none";
sidebarSearch.style.right = "-100%";
});
});

function encodeQueryData(data) {
var ret = [];
for (var d in data)
ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
return ret.join('&');
}

document.querySelector(".searchbar-area input[type=search]").addEventListener("keyup", function (event) {
event.preventDefault();
if (event.keyCode === 13) {
queryPage(1);
}
});

function queryPage(idx) {
var q = document.getElementById("searchbox").value;
var cx = "{{.Site.Params.search_engine_ID}}";
var key = "{{.Site.Params.search_api_key}}";
var imgSize = "small";
var callback = "renderResult";

var src = "https://www.googleapis.com/customsearch/v1?" + encodeQueryData({
q: q,
cx: cx,
key: key,
imgSize: imgSize,
callback: callback,
start: (idx - 1) * pageSize + 1,
num: pageSize,
});

var newScript = document.createElement("script");
newScript.src = src;
e = document.getElementById("searchbar-script-container");
var child = e.lastElementChild;
if (child) {
e.removeChild(child);
}
e.appendChild(newScript);
}

function renderSearchResultEntry(e) {
var out = '<div class="single-search-result">' +
'<h3><a href="' + e.link + '">' + e.title + '</a></h3>' +
'<a href="' + e.link + '">' + e.htmlFormattedUrl + '</a>' +
'<div class="result-description-wrapper">';
if (e.pagemap && e.pagemap.cse_thumbnail) {
out += '<div class="result-thumb">' +
'<img src="' + e.pagemap.cse_thumbnail[0].src + '" alt="" />' +
'</div>';
}
out += '<div class="result-description">' +
'<p>' +
e.snippet +
'</p>' +
'</div>' +
'</div>' +
'</div>';
return out;
}

function renderResult(response) {
document.querySelector(".search-meta-information .level-left").innerHTML = '<div class="level-left">' +
'<p>' +
'About <span class="search-count">' + response.searchInformation.formattedTotalResults +
'</span> results (<span class="time-count">' + response.searchInformation.formattedSearchTime +
' </span>seconds)' +
'</p>' +
'</div>';

if (!response.items) {
return;
}

var searchResultWrapper = document.querySelector(".search-result-wrapper");
searchResultWrapper.innerHTML = "";

for (var i = 0; i < response.items.length; i++) {
searchResultWrapper.innerHTML += renderSearchResultEntry(response.items[i]);
}

var pager = '<ul>';
if (response.queries.previousPage) {
var pageIndex = Math.floor(response.queries.previousPage[0].startIndex / pageSize) + 1;
pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')">Previous</a></li>';
}
if (response.queries.request) {
var pageIndex = Math.floor(response.queries.request[0].startIndex / pageSize) + 1;
pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')" class="is-active">' + pageIndex + '</a></li>';
}
if (response.queries.nextPage) {
var pageIndex = Math.floor(response.queries.nextPage[0].startIndex / pageSize) + 1;
pager += '<li><a href="#" onclick="queryPage(' + pageIndex + ')">Next</a></li>';
}
pager += '</ul>';
document.querySelector(".pagination-area .pagination-list").innerHTML = pager;
}
</script>

<!-- sidebar search area end -->

{{ end }}
Expand All @@ -462,3 +352,12 @@ <h5>Search</h5>
{{ define "cta-install" }}
<section></section>
{{ end }}

{{ define "footer-script" }}
{{ $js := resources.Get "/assets/js/meilisearch.js" | minify }}
<script src="{{ $js.RelPermalink }}"></script>
<script type="text/javascript">
activate_search({{ (index .Site.Data.products (string .Params.product_name)).key }}, {{ .Site.Params.search_api_key }}, "acSearch","meilisearch-hits", "meilisearch-hideid");
activate_search({{ (index .Site.Data.products (string .Params.product_name)).key }}, {{ .Site.Params.search_api_key }}, "searchbox","meilisearch-mobile-hits", "meilisearch-hideid-mobile");
</script>
{{ end }}
Loading

0 comments on commit f421654

Please sign in to comment.