Skip to content

Commit 851cc12

Browse files
Erik2609Erik2609
authored
Merge pull request #303 from NGO-Algorithm-Audit/feature/algoliasearch
Feature/algoliasearch
2 parents e07b43b + 4ba2609 commit 851cc12

File tree

7 files changed

+558
-4
lines changed

7 files changed

+558
-4
lines changed

‎i18n/en.toml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,7 @@ other = "High risk"
8989
other = "Medium risk"
9090

9191
[score-card--low-risk]
92-
other = "Low risk"
92+
other = "Low risk"
93+
94+
[search-type-to-start]
95+
other = "Type to start searching"

‎i18n/nl.toml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,7 @@ other = "Hoog risico"
8989
other = "Medium risico"
9090

9191
[score-card--low-risk]
92-
other = "Laag risico"
92+
other = "Laag risico"
93+
94+
[search-type-to-start]
95+
other = "Typ om te beginnen met zoeken"

‎layouts/index.html‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,224 @@
1010

1111
{{ partial "overview_block.html" .}}
1212

13+
<style>
14+
15+
.search-overlay {
16+
cursor: pointer;
17+
position: fixed;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 200vh;
22+
background-color: rgba(0, 0, 0, 0.35);
23+
z-index: 1000;
24+
}
25+
26+
.algolia-search {
27+
z-index: 5000;
28+
position: relative;
29+
.search-panel {
30+
display: block;
31+
}
32+
33+
.search-panel__results {
34+
flex: 3;
35+
}
36+
37+
.ais-Highlight-highlighted {
38+
color: inherit;
39+
font-size: inherit;
40+
}
41+
42+
#searchbox {
43+
margin-bottom: 2rem;
44+
}
45+
46+
#pagination {
47+
margin: 2rem auto;
48+
text-align: center;
49+
}
50+
51+
.search-result-row {
52+
@media (min-width: 992px) {
53+
height: 220px;
54+
}
55+
}
56+
57+
.ais-Hits-item {
58+
padding: 0;
59+
margin-top: 10px;
60+
margin-bottom: 10px;
61+
}
62+
63+
.search-result-image {
64+
height: auto;
65+
max-height: 175px;
66+
max-width: 100%;
67+
margin: auto;
68+
}
69+
70+
.search-result-title {
71+
margin-top: 40px;
72+
}
73+
74+
ol.ais-Hits-list {
75+
list-style: none;
76+
}
77+
78+
.ais-Highlight-highlighted,
79+
.ais-Snippet-highlighted {
80+
background-color: #FFFF92;
81+
}
82+
}
83+
</style>
84+
<!-- Search -->
85+
<div class="search-overlay d-none"></div>
86+
<section class="section color-blue">
87+
<div class="container algolia-search rounded-lg">
88+
<div class="row">
89+
<div class="col">
90+
<h2 class="pt-5 color-blue">Search</h2>
91+
</div>
92+
</div>
93+
<div class="row">
94+
<div class="col">
95+
<div class="search-panel">
96+
<div class="search-panel__results d-block">
97+
<div id="searchbox"></div>
98+
<div id="hits"></div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</section>
105+
106+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js"></script>
107+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
108+
<script>
109+
docReady(function () {
110+
const { algoliasearch, instantsearch } = window;
111+
112+
const searchClient = algoliasearch(
113+
'R5LXP5NUID',
114+
'4b504b6988d05a7631d6a330fb7afa58'
115+
);
116+
117+
const search = instantsearch({
118+
indexName: 'website_pages',
119+
searchClient,
120+
future: { preserveSharedStateOnUnmount: true },
121+
searchFunction: function(helper) {
122+
if (helper.state.query === '') {
123+
return;
124+
}
125+
126+
helper.search();
127+
}
128+
});
129+
130+
let lastRenderArgs;
131+
132+
const infiniteHits = instantsearch.connectors.connectInfiniteHits(
133+
(renderArgs, isFirstRender) => {
134+
const { items, showMore, widgetParams } = renderArgs;
135+
const { container } = widgetParams;
136+
137+
lastRenderArgs = renderArgs;
138+
139+
if (isFirstRender) {
140+
const sentinel = document.createElement('div');
141+
const containerDiv = document.createElement('div');
142+
containerDiv.className = 'ais-Hits';
143+
const containerOl = document.createElement('ol');
144+
containerOl.className = 'ais-Hits-list';
145+
containerDiv.appendChild(containerOl);
146+
container.appendChild(containerDiv);
147+
container.appendChild(sentinel);
148+
const observer = new IntersectionObserver(entries => {
149+
entries.forEach(entry => {
150+
if (entry.isIntersecting
151+
&& !lastRenderArgs.isLastPage) {
152+
showMore();
153+
}
154+
});
155+
});
156+
157+
observer.observe(sentinel);
158+
159+
return;
160+
}
161+
162+
const searchInput = $(".ais-SearchBox-input");
163+
if(!searchInput.is(":focus")) {
164+
container.querySelector('ol').innerHTML = "";
165+
return;
166+
}
167+
168+
container.querySelector('ol').innerHTML = items
169+
.map(
170+
item => {
171+
return `
172+
<li class="ais-Hits-item">
173+
<a href=${item.url} class="container">
174+
<div class="row search-result-row">
175+
<div class="col-12 col-lg-2">
176+
<div class="my-3">
177+
<img class="image-fluid search-result-image d-flex" src=${item.image} alt=${item.title} />
178+
</div>
179+
</div>
180+
<div class="col-12 col-lg-10">
181+
<h3 class="color-blue search-result-title">${item.title}</h3>
182+
<p class="color-gray search-result-subtitle">${item.subtitle}</p>
183+
</div>
184+
</div>
185+
</a>
186+
</li>
187+
`;
188+
})
189+
.join('');
190+
}
191+
);
192+
search.addWidgets([
193+
instantsearch.widgets.searchBox({
194+
container: '#searchbox',
195+
placeholder: '{{ i18n "search-type-to-start" }}',
196+
}),
197+
instantsearch.widgets.configure({
198+
hitsPerPage: 3,
199+
filters: "language:{{$.Site.Language.Lang}}"
200+
}),
201+
infiniteHits({
202+
container: document.querySelector('#hits'),
203+
}),
204+
]);
205+
206+
207+
search.start();
208+
});
209+
</script>
210+
<script>
211+
docReady(function () {
212+
$("input.ais-SearchBox-input").on("focus", function () {
213+
$(".algolia-search").addClass("bg-lightblue");
214+
$("#hits").addClass("d-block");
215+
$("#hits").removeClass("d-none");
216+
$(".search-overlay").removeClass("d-none");
217+
$(".search-overlay").addClass("d-block");
218+
});
219+
220+
$(".search-overlay").on("click", function () {
221+
$(".algolia-search").removeClass("bg-lightblue");
222+
$("#hits").removeClass("d-block");
223+
$("#hits").addClass("d-none");
224+
$(".search-overlay").addClass("d-none");
225+
$(".search-overlay").removeClass("d-block");
226+
});
227+
});
228+
</script>
229+
<!-- /Search -->
230+
13231
{{ partial "landingpage/activityfeed.html" . }}
14232

15233
<!-- Areas of expertise -->

‎layouts/partials/head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@
4343
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
4444
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
4545

46+
47+
<!-- search -->
48+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/satellite-min.css">
49+
4650
<!-- 100% privacy-first analytics -->
4751
<script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
4852

0 commit comments

Comments
 (0)