hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-15 09:22:43 +03:00
Code Issues Projects Releases Wiki Activity

migrate docs search to algolia doc search (close #1146) (#1199)

Browse Source
This commit is contained in:
Rikin Kachhia 2018-12-13 16:38:45 +05:30 committed by GitHub
parent ec8b2c80b5
commit c478f45e19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
docs/_static/hasura-custom.css vendored
View File

@ -80,60 +80,6 @@ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visit
/* End of Loader */
/* Search links */
.algolia_search_attribution {
font-size: 18px;
margin-top: 10px;
text-align: left;
}
.algolia_search_attribution .algolia_image {
vertical-align: middle;
width: 70px;
}
.no_of_results {
display: inline;
color: #CF9C0E;
font-weight: 600;
}
.no_results {
text-align: left;
}
.search_query {
color: #CF9C0E;
font-weight: 600
}
.search_results_anchor {
text-decoration-color: #CF9C0E;
}
.search_results_description {
width: 60%;
}
.search_wrapper {
min-height: 76vh;
}
.search_bullets::before {
color: #788095;
}
.search_bullets {
list-style-type: disc;
text-align: left;
}
.search_heading {
color: #788095;
}
/* End of Search */
.hide {
display: none !important;
@ -613,13 +559,39 @@ p {
width: 64%;
}
.search_icon {
.input_search_box .search_icon {
position: absolute;
top: 13px;
left: 10px;
font-size: 18px;
color: #FEC53D;
cursor: pointer;
z-index: 1;
}
.input_search_box .algolia-autocomplete {
width: 100%;
}
.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
left: -25px !important;
max-width: calc(156% + 50px);
min-width: calc(156% + 50px); /* 1 / width(input_search_box) + 50px */
}
.input_search_box .algolia-autocomplete a {
text-decoration: none;
}
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: #FF993A;
}
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,
.input_search_box .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
box-shadow: inset 0 -2px 0 0 #FF993A;
}
.input_search_box input {
@ -1369,6 +1341,13 @@ ol, ul {
margin-left: 10px;
}
.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
left: -34px !important;
max-width: calc(166% + 10px);
min-width: calc(166% + 10px); /* 1 / width(input_search_box) + 10px */
}
.mobile-only {
display: initial;
}
@ -1425,6 +1404,13 @@ ol, ul {
margin-left: 10px;
}
.input_search_box .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu,
.input_search_box .algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu {
left: -34px !important;
max-width: calc(111% + 10px);
min-width: calc(111% + 10px); /* 1 / width(input_search_box) + 10px */
}
#sidebar {
top: 170px;
height: calc(100% - 170px);

191
docs/_theme/djangodocs/layout.html vendored
View File

@ -16,6 +16,7 @@
<!--<meta name="viewport" content="user-scalable=no">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
{% endblock %}
{% block document %}
@ -146,75 +147,6 @@
{%- endif %}
</div>
</div>
<div class="search_wrapper_template hide">
<div class="search_box_head">
<h3 class="head_wrapper search_heading">
<div class="inline-block">
<%= totalResults %> result<%= totalResults > 1 ? 's' : '' %> for <span class="search_query">'<%= _.escape(searchString) %>'</span>
</div>
<div class="algolia_search_attribution">
<span>
powered by
</span>
<span>
<img class="algolia_image" src="{{ pathto('_images/layout/algolia-logo.svg', 1) }}" alt="Algolia Hasura Search" />
</span>
</div>
</h3>
</div>
<%
if ( objs.length > 0 ) {
%>
<ul>
<%
_.each(objs, function(obj, index ) {
%>
<li class="search_bullets">
<a class="search_results_anchor" href="{{ pathto('', 1) }}<%= obj.url %>">
<div class="no_of_results">
<%= obj.title %>
</div>
</a>
<div class="search_results_description">
<%= obj.description.length > 200 ? obj.description.slice(0, 200 ) + ' ...' : obj.description %>
</div>
</li>
</a>
<%
});
%>
</ul>
<%
} else {
%>
<div class="no_results"> Sorry! we cannot find what you are searching for! </div>
<%
}
%>
<div class = "pagination_container wd_100" id = "pagination_container"></div>
<div style="clear: both;"></div>
</div>
<div class="search_wrapper main_wrapper hide">
<div class="wd_80">
<div class="search_head_wrapper">
<div class="inline-block input_search_box">
<span class="fa fa-search search_icon"></span>
<input type="text" class="search_element" placeholder="Search docs..." />
</div>
<div class="header_links inline-block">
<div class="buttons">
<div class="inline-block">
<!-- a target="_blank" href="https://dashboard.{{ BASE_DOMAIN }}/login" -->
<button class="indiv_btns black supportBtn"> Support </button>
<!--/ a -->
</div>
</div>
</div>
</div>
<br/>
<div class="search_wrapper_content"></div>
</div>
</div>
</div>
{% endblock %}
@ -333,122 +265,13 @@
</script>
<!-- search -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var lastSearched = "";
const showContent = function() {
$('.content_wrapper').removeClass('hide');
$('.search_wrapper').addClass('hide');
};
const showSearchResults = function() {
$('.content_wrapper').addClass('hide');
$('.search_wrapper').removeClass('hide');
};
const searchFunc = function( query, callback, page, restrictAttributes, attributesToRetrieve ) {
var ALGOLIA_APPLICATION_ID = "{{ ALGOLIA_APPLICATION_ID }}";
var ALGOLIA_SEARCH_KEY = "{{ ALGOLIA_SEARCH_KEY }}";
var hitsPerPage = 100;
var page_no = parseInt(page) - 1;
var offset = (hitsPerPage * (page - 1));
var indexName = "{{ ALGOLIA_INDEX_NAME }}";
//var client = algoliasearch(APPLICATION_ID, SEARCH_ONLY_KEY);
var client = algoliasearch(ALGOLIA_APPLICATION_ID, ALGOLIA_SEARCH_KEY, {"protocol":"https:"}); // localhost
var index = client.initIndex(indexName);
var queries = {
query: query,
hitsPerPage: hitsPerPage,
page: page_no,
offset: offset,
restrictSearchableAttributes : restrictAttributes
};
if ( attributesToRetrieve ) {
queries["attributesToRetrieve"] = attributesToRetrieve;
}
index.search(queries, callback );
};
const search = function(searchTerm) {
function callback(err, content ) {
const searchHtmlTemplate = $('.search_wrapper_template').html();
const template = _.template(_.unescape(searchHtmlTemplate));
const templated_html = template({
"objs": content.hits,
"searchString": content.query,
"totalResults": content.nbHits
});
$(".search_wrapper_content").html(templated_html);
hideLoading();
showSearchResults();
trackga('docs', 'search', content.query, content.nbHits);
}
showLoading();
searchFunc(searchTerm, callback, 1, [], ['url', 'description', 'title', 'image', 'tags']);
};
const handleQueryParams = function() {
const re = /query=(.*)$/;
const match = re.exec(window.location.search);
var searchTerm = '';
if ( match ) {
searchTerm = decodeURIComponent(match[1]);
if (searchTerm) {
search(searchTerm);
} else {
showContent();
}
} else {
showContent();
}
$('.search_element').val(searchTerm);
lastSearched = searchTerm;
};
const doSearch = function(value) {
if (lastSearched !== value) {
window.history.pushState({"url": (window.location.pathname + '?query=' + value + '')}, 'Search Page', '?query=' + value + '');
handleQueryParams();
}
};
const inputSearchHandler = function(e) {
// Execute on enter only
if (e.keyCode === 13) {
doSearch(e.target.value)
}
};
$('.search_element').on('keyup', inputSearchHandler);
const iconSearchHandler = function(e) {
doSearch(e.target.nextSibling.nextSibling.value)
};
$('.fa-search').on('click', iconSearchHandler);
// handle state
window.onpopstate = function() {
handleQueryParams();
};
if (window.location.search.length > 0) {
handleQueryParams();
}
docsearch({
apiKey: 'c59018461c19e20fe11459136e57900c',
indexName: 'hasura',
inputSelector: '.search_element',
debug: false
});
</script>