Skip to content

Commit 281ae63

Browse files
adriendupuisadriendupuis
committed
instantsearch.html: Use extrahead block; Format
1 parent d00aba8 commit 281ae63

File tree

1 file changed

+184
-163
lines changed

1 file changed

+184
-163
lines changed

‎theme/instantsearch.html‎

Lines changed: 184 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,198 @@
11
{% extends "main.html" %}
22

3-
{% block content %}
4-
{% raw %}
5-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"/>
6-
<style>
7-
.md-search {
8-
visibility: hidden;
9-
}
10-
.left-panel {
11-
float: left;
12-
width: 150px;
13-
}
14-
.right-panel {
15-
margin-left: 160px;
16-
}
17-
.ais-InstantSearch {
18-
overflow: hidden;
19-
margin: 0 auto;
20-
}
21-
.md-typeset ul.ais-RefinementList-list {
22-
list-style: none;
23-
margin: 0;
24-
}
25-
.md-typeset ul.ais-RefinementList-list li {
26-
margin: 0;
27-
}
28-
.md-typeset ol.ais-Hits-list:not([hidden]), .md-typeset ul.ais-Pagination-list:not([hidden]) {
29-
display: flex;
30-
list-style: none;
31-
margin: 0;
32-
}
33-
.md-typeset ol.ais-Hits-list li {
34-
margin: 0.5rem;
35-
}
36-
.md-typeset ol.ais-Hits-list li a.external:after {
37-
content: '';
38-
}
39-
.ais-Hits-item div:not(:first-child):before {
40-
content: ' > ';
41-
}
42-
.ais-Hits-item div:not(:first-child):empty:before {
43-
content: '';
44-
}
45-
.ais-Hits-item div:nth-child(1) {
46-
font-size: 1.2em;
47-
}
48-
.ais-Hits-item div:nth-child(2) {
49-
font-size: 1.1em;
50-
}
51-
.ais-Hits-item div:nth-child(3) {
52-
font-size: 1.0em;
53-
}
54-
.ais-Hits-item div:nth-child(4) {
55-
font-size: 0.9em;
56-
}
57-
.ais-Hits-item div:nth-child(5) {
58-
font-size: 0.8em;
59-
}
60-
.ais-Hits-item div:nth-child(6) {
61-
font-size: 0.7em;
62-
}
63-
.ais-Hits-item div .ais-Highlight-highlighted {
64-
font-size: 1.0em;
65-
}
66-
.md-typeset ul.ais-Pagination-list li {
67-
margin: 0;
68-
}
69-
</style>
3+
{% block extrahead %}
4+
{{ super() }}
5+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"/>
6+
<style>
7+
.md-search {
8+
visibility: hidden;
9+
}
10+
11+
.left-panel {
12+
float: left;
13+
width: 150px;
14+
}
15+
16+
.right-panel {
17+
margin-left: 160px;
18+
}
19+
20+
.ais-InstantSearch {
21+
overflow: hidden;
22+
margin: 0 auto;
23+
}
24+
25+
.md-typeset ul.ais-RefinementList-list {
26+
list-style: none;
27+
margin: 0;
28+
}
7029

71-
<div class="ais-InstantSearch">
72-
<h1>Ibexa Documentation Search</h1>
30+
.md-typeset ul.ais-RefinementList-list li {
31+
margin: 0;
32+
}
7333

74-
<div class="left-panel">
34+
.md-typeset ol.ais-Hits-list:not([hidden]), .md-typeset ul.ais-Pagination-list:not([hidden]) {
35+
display: flex;
36+
list-style: none;
37+
margin: 0;
38+
}
39+
40+
.md-typeset ol.ais-Hits-list li {
41+
margin: 0.5rem;
42+
}
43+
44+
.md-typeset ol.ais-Hits-list li a.external:after {
45+
content: '';
46+
}
47+
48+
.ais-Hits-item div:not(:first-child):before {
49+
content: ' > ';
50+
}
51+
52+
.ais-Hits-item div:not(:first-child):empty:before {
53+
content: '';
54+
}
55+
56+
.ais-Hits-item div:nth-child(1) {
57+
font-size: 1.2em;
58+
}
59+
60+
.ais-Hits-item div:nth-child(2) {
61+
font-size: 1.1em;
62+
}
63+
64+
.ais-Hits-item div:nth-child(3) {
65+
font-size: 1.0em;
66+
}
67+
68+
.ais-Hits-item div:nth-child(4) {
69+
font-size: 0.9em;
70+
}
71+
72+
.ais-Hits-item div:nth-child(5) {
73+
font-size: 0.8em;
74+
}
75+
76+
.ais-Hits-item div:nth-child(6) {
77+
font-size: 0.7em;
78+
}
79+
80+
.ais-Hits-item div .ais-Highlight-highlighted {
81+
font-size: 1.0em;
82+
}
83+
84+
.md-typeset ul.ais-Pagination-list li {
85+
margin: 0;
86+
}
87+
</style>
88+
{% endblock %}
89+
90+
{% block content %}
91+
{% raw %}
92+
<div class="ais-InstantSearch">
93+
<h1>Ibexa Documentation Search</h1>
94+
95+
<div class="left-panel">
7596
<h2>Versions</h2>
7697
<div id="version"></div>
77-
</div>
98+
</div>
7899

79-
<div class="right-panel">
100+
<div class="right-panel">
80101
<div id="searchbox" class="ais-SearchBox"></div>
81102
<div id="hits"></div>
82103
<div id="pagination"></div>
104+
</div>
83105
</div>
84-
</div>
85-
86-
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
87-
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
88-
89-
<script>
90-
let search_query = '', search_page = 1;
91-
for (let hashPart of document.location.hash.replace('#', '').split('&')) {
92-
let paramParts = hashPart.split('=');
93-
switch(paramParts[0]) {
94-
case 'q':
95-
search_query = decodeURI(paramParts[1].replace('+', ' '));
96-
break;
97-
case 'p':
98-
search_page = parseInt(paramParts[1]);
99-
if (isNaN(search_page)) {
100-
search_page = 1;
101-
}
102-
break;
103-
}
104-
}
105-
106-
const search = instantsearch({
107-
indexName: 'ezplatform',
108-
searchClient: algoliasearch('2DNYOU6YJZ', '21ce3e522455e18e7ee16cf7d66edb4b'),
109-
initialUiState: {
110-
ezplatform: {
111-
query: search_query,
112-
refinementList: { version: [document.location.href.split('/')[4]] },
113-
page: search_page
114-
},
115-
},
116-
});
117-
118-
document.getElementById('searchbox').addEventListener('keyup', function(event) {
119-
window.location.hash = '#q=' + encodeURI(event.target.value) + '&p=1';
120-
})
121-
122-
document.getElementById('pagination').addEventListener('click', function(event) {
123-
let page = document.getElementsByClassName('ais-Pagination-item--selected').length ? parseInt(document.getElementsByClassName('ais-Pagination-item--selected')[0].innerText) : 1
124-
window.location.hash = window.location.hash.includes('p=') ? window.location.hash.replace(/p=\d*/, 'p='+page) : window.location.hash + '&p='+page;
125-
})
126-
127-
search.addWidgets([
128-
instantsearch.widgets.searchBox({
129-
container: '#searchbox',
130-
}),
131-
132-
instantsearch.widgets.hits({
133-
container: '#hits',
134-
transformItems(items) {
135-
let removedPattern = '¶';
136-
for (let index=0; index<items.length; index++) {
137-
let item = items[index];
138-
for (let lvl=2; lvl<=6; lvl++) {
139-
if (null !== item.hierarchy['lvl'+lvl]) {
140-
items[index].hierarchy['lvl' + lvl] = item.hierarchy['lvl' + lvl].replace(removedPattern, '');
141-
}
142-
if ('undefined' !== typeof item._highlightResult.hierarchy['lvl'+lvl]) {
143-
items[index]._highlightResult.hierarchy['lvl'+lvl].value = item._highlightResult.hierarchy['lvl'+lvl].value.replace(removedPattern, '');
106+
107+
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
108+
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
109+
110+
<script>
111+
let search_query = '', search_page = 1;
112+
for (let hashPart of document.location.hash.replace('#', '').split('&')) {
113+
let paramParts = hashPart.split('=');
114+
switch (paramParts[0]) {
115+
case 'q':
116+
search_query = decodeURI(paramParts[1].replace('+', ' '));
117+
break;
118+
case 'p':
119+
search_page = parseInt(paramParts[1]);
120+
if (isNaN(search_page)) {
121+
search_page = 1;
144122
}
145-
}
123+
break;
146124
}
147-
return items;
148-
},
149-
templates: {
150-
item: `
151-
<a href="{{url}}">
152-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl1", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
153-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl2", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
154-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl3", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
155-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl4", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
156-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl5", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
157-
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl6", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
158-
</a>
159-
` ,
160-
},
161-
}),
162-
163-
instantsearch.widgets.refinementList({
164-
container: document.querySelector('#version'),
165-
attribute: 'version',
166-
sortBy: ['name:desc'],
167-
}),
168-
169-
instantsearch.widgets.pagination({
170-
container: '#pagination',
171-
}),
172-
]);
173-
174-
search.start();
175-
</script>
176-
{% endraw %}
125+
}
126+
127+
const search = instantsearch({
128+
indexName: 'ezplatform',
129+
searchClient: algoliasearch('2DNYOU6YJZ', '21ce3e522455e18e7ee16cf7d66edb4b'),
130+
initialUiState: {
131+
ezplatform: {
132+
query: search_query,
133+
refinementList: {version: [document.location.href.split('/')[4]]},
134+
page: search_page
135+
},
136+
},
137+
});
138+
139+
document.getElementById('searchbox').addEventListener('keyup', function (event) {
140+
window.location.hash = '#q=' + encodeURI(event.target.value) + '&p=1';
141+
})
142+
143+
document.getElementById('pagination').addEventListener('click', function (event) {
144+
let page = document.getElementsByClassName('ais-Pagination-item--selected').length ? parseInt(document.getElementsByClassName('ais-Pagination-item--selected')[0].innerText) : 1
145+
window.location.hash = window.location.hash.includes('p=') ? window.location.hash.replace(/p=\d*/, 'p=' + page) : window.location.hash + '&p=' + page;
146+
})
147+
148+
search.addWidgets([
149+
instantsearch.widgets.searchBox({
150+
container: '#searchbox',
151+
}),
152+
153+
instantsearch.widgets.hits({
154+
container: '#hits',
155+
transformItems(items) {
156+
let removedPattern = '¶';
157+
for (let index = 0; index < items.length; index++) {
158+
let item = items[index];
159+
for (let lvl = 2; lvl <= 6; lvl++) {
160+
if (null !== item.hierarchy['lvl' + lvl]) {
161+
items[index].hierarchy['lvl' + lvl] = item.hierarchy['lvl' + lvl].replace(removedPattern, '');
162+
}
163+
if ('undefined' !== typeof item._highlightResult.hierarchy['lvl' + lvl]) {
164+
items[index]._highlightResult.hierarchy['lvl' + lvl].value = item._highlightResult.hierarchy['lvl' + lvl].value.replace(removedPattern, '');
165+
}
166+
}
167+
}
168+
return items;
169+
},
170+
templates: {
171+
item: `
172+
<a href="{{url}}">
173+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl1", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
174+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl2", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
175+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl3", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
176+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl4", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
177+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl5", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
178+
<div>{{#helpers.highlight}}{ "attribute": "hierarchy.lvl6", "highlightedTagName": "strong" }{{/helpers.highlight}}</div>
179+
</a>
180+
`,
181+
},
182+
}),
183+
184+
instantsearch.widgets.refinementList({
185+
container: document.querySelector('#version'),
186+
attribute: 'version',
187+
sortBy: ['name:desc'],
188+
}),
189+
190+
instantsearch.widgets.pagination({
191+
container: '#pagination',
192+
}),
193+
]);
194+
195+
search.start();
196+
</script>
197+
{% endraw %}
177198
{% endblock %}

0 commit comments

Comments
 (0)