Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add meilisearch UI and functionality #114

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add meilisearch UI and functionality #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions Makefile
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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