Skip to content

Commit 89ed66a

Browse files
mollierobbertmollierobbert
committed
Add search
1 parent d6331cb commit 89ed66a

File tree

8 files changed

+455
-13535
lines changed

8 files changed

+455
-13535
lines changed

‎package-lock.json

Lines changed: 158 additions & 13534 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
"sass": "^1.32.8"
4242
},
4343
"dependencies": {
44+
"@algolia/autocomplete-js": "^1.7.2",
45+
"algoliasearch": "^4.14.2",
4446
"dropkickjs": "^2.2.4",
4547
"lodash": "^4.17.21"
4648
},

‎source/theme/js/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { bindHandlers, executeEnhancers, makeEnhancers, makeHandlers } from './utils';
22

3+
import search from './search';
34
import navLoggedIn from './navLoggedIn';
45
import subNavigation from './subNavigation';
56
import mobileNavigationButton from './mobileNavigationButton';
@@ -13,6 +14,7 @@ import sidebar from './sidebar';
1314
const handlers = makeHandlers([toggleClass, collapsedParameter, childParameters]);
1415

1516
const enhancers = makeEnhancers([
17+
search,
1618
navLoggedIn,
1719
subNavigation,
1820
mobileNavigationButton,

‎source/theme/js/search.js

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { enhance } from './utils';
2+
import algoliasearch from 'algoliasearch/lite';
3+
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
4+
5+
const searchClient = algoliasearch('YRKIIH6LPA', '468c23035b867bacfdc2f454d7a912a9');
6+
7+
export default enhance('algolia-search', (element) => {
8+
autocomplete({
9+
container: element,
10+
getSources() {
11+
return [
12+
{
13+
sourceId: 'docs',
14+
openOnFocus: false,
15+
getItemInputValue: ({ item }) => item.query,
16+
getItems({ query }) {
17+
return getAlgoliaResults({
18+
searchClient,
19+
queries: [
20+
{
21+
indexName: 'docs',
22+
query,
23+
params: {
24+
hitsPerPage: 10,
25+
},
26+
},
27+
],
28+
});
29+
},
30+
templates: {
31+
item({ item, html, components }) {
32+
let title;
33+
let content = components.Snippet({ hit: item, attribute: 'content' });
34+
35+
if (item.type === 'parameter') {
36+
let parameter = components.Highlight({ hit: item, attribute: 'parameter' });
37+
38+
title = html`<code>${parameter}</code>`;
39+
} else {
40+
title = components.Highlight({ hit: item, attribute: 'title' });
41+
}
42+
43+
return html`
44+
<a href="${item.permalink}">
45+
<div class="aa-Item__Title">${title}</div>
46+
<div class="aa-Item__Content">${content}</div>
47+
<div class="aa-Item__Breadcrumbs">${item.breadcrumbs}</div>
48+
</a>
49+
`;
50+
},
51+
},
52+
},
53+
];
54+
},
55+
});
56+
});

‎source/theme/navigation.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@
2626
<li class="title-bar__item title-bar__space">
2727
<a href="https://help.mollie.com/" target="_blank">Support</a>
2828
</li>
29+
<li class="title-bar__item title-bar__search">
30+
<div data-enhancer="algolia-search"></div>
31+
</li>
2932
<li class="title-bar__item title-bar__login js-login-nav-link">
3033
<a href="https://www.mollie.com/dashboard/login" target="_blank">Log in</a>
3134
</li>

‎source/theme/styles/components/_main-navigation.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,15 @@
9999
bottom: -20px;
100100
}
101101

102-
.title-bar__login {
102+
.title-bar__search {
103103
margin-left: auto;
104104
margin-right: 30px;
105105
}
106106

107+
.title-bar__login {
108+
margin-right: 30px;
109+
}
110+
107111
.title-bar__signup {
108112
margin-right: 0;
109113
}

‎source/theme/styles/components/_search.scss

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
$search-bar-radius: 4px;
2+
3+
/**
4+
* Fake search button
5+
*/
6+
.aa-DetachedSearchButton {
7+
display: none; /* Temp */
8+
margin: 0;
9+
padding: 8px 10px 8px 30px;
10+
background: #fff;
11+
border: 1px solid #ddd;
12+
border-radius: $search-bar-radius;
13+
position: relative;
14+
width: 160px;
15+
height: 36px;
16+
17+
&:hover {
18+
border-color: #bbb;
19+
}
20+
}
21+
22+
.aa-DetachedSearchButtonIcon {
23+
width: 20px;
24+
height: 20px;
25+
position: absolute;
26+
top: 8px;
27+
left: 5px;
28+
opacity: .5;
29+
}
30+
31+
.aa-DetachedSearchButtonIcon svg {
32+
display: block;
33+
}
34+
35+
.aa-DetachedSearchButtonPlaceholder {
36+
font-size: 15px;
37+
line-height: 20px;
38+
text-align: left;
39+
}
40+
41+
@media (max-width: breakpoint('<medium-large')) {
42+
.aa-DetachedSearchButton {
43+
width: 120px;
44+
}
45+
46+
.aa-DetachedSearchButtonPlaceholder {
47+
font-size: 13px;
48+
}
49+
}
50+
51+
@media only screen and (max-width: $mobile-navigation-breakpoint - 1px) {
52+
.aa-DetachedSearchButton {
53+
border: 0;
54+
width: 20px;
55+
height: 40px;
56+
padding: 0;
57+
}
58+
59+
.aa-DetachedSearchButtonIcon {
60+
left: 0;
61+
}
62+
63+
.aa-DetachedSearchButton:hover .aa-DetachedSearchButtonIcon {
64+
opacity: .7;
65+
}
66+
67+
.aa-DetachedSearchButtonPlaceholder {
68+
display: none;
69+
}
70+
}
71+
72+
@media only screen and (max-width: 760px) {
73+
.aa-DetachedSearchButton {
74+
display: none;
75+
}
76+
}
77+
78+
/**
79+
* Overlay
80+
*/
81+
.aa-DetachedOverlay {
82+
position: fixed;
83+
top: 0;
84+
right: 0;
85+
bottom: 0;
86+
left: 0;
87+
background: rgba(0, 0, 0, .5);
88+
z-index: 999999;
89+
}
90+
91+
.aa-DetachedContainer {
92+
position: fixed;
93+
top: 50px;
94+
left: 50vw;
95+
max-height: calc(100vh - 100px);
96+
transform: translateX(-50%);
97+
background: #fff;
98+
border-radius: $search-bar-radius;
99+
padding: 20px;
100+
width: 480px;
101+
border: 1px solid #ddd;
102+
box-shadow: 0 3px 5px 3px rgba(0, 0, 0, 0.1);
103+
}
104+
105+
.aa-DetachedCancelButton {
106+
display: none;
107+
}
108+
109+
/**
110+
* Search bar
111+
*/
112+
.aa-Panel--scrollable {
113+
overflow-y: auto;
114+
max-height: calc(100vh - 198px);
115+
}
116+
117+
.aa-Form {
118+
position: relative;
119+
}
120+
121+
.aa-SubmitButton,
122+
.aa-ClearButton {
123+
-webkit-appearance: none;
124+
padding: 0;
125+
margin: 0;
126+
border: 0;
127+
background: inherit;
128+
width: 20px;
129+
height: 20px;
130+
position: absolute;
131+
top: 8px;
132+
opacity: .5;
133+
}
134+
135+
.aa-SubmitButton {
136+
left: 5px;
137+
}
138+
139+
.aa-ClearButton {
140+
right: 5px;
141+
}
142+
143+
.aa-SubmitButton svg,
144+
.aa-ClearButton svg {
145+
display: block;
146+
}
147+
148+
.aa-InputWrapper input {
149+
outline: none;
150+
box-sizing: border-box;
151+
border: 1px solid #ddd;
152+
border-radius: $search-bar-radius;
153+
padding: 10px 30px;
154+
height: 40px;
155+
line-height: 20px;
156+
font-size: 15px;
157+
color: #000;
158+
width: 100%;
159+
}
160+
161+
.aa-InputWrapper input:focus {
162+
border-color: #999;
163+
}
164+
165+
/**
166+
* Search results panel
167+
*/
168+
.aa-Panel {
169+
margin-top: 20px;
170+
}
171+
172+
.aa-List {
173+
list-style: none;
174+
padding: 0;
175+
margin: 0;
176+
}
177+
178+
/**
179+
* Single search result
180+
*/
181+
.aa-Item a {
182+
display: block;
183+
color: inherit;
184+
text-decoration: none;
185+
padding: 15px 20px;
186+
border-radius: $search-bar-radius;
187+
188+
&:hover {
189+
text-decoration: none;
190+
}
191+
}
192+
193+
.aa-Item[aria-selected='true'] a {
194+
background-color: #f3f3f3;
195+
}
196+
197+
.aa-Item__Title {
198+
font-weight: bold;
199+
white-space: nowrap;
200+
text-overflow: ellipsis;
201+
overflow: hidden;
202+
}
203+
204+
.aa-Item__Title code {
205+
background: #fafafa;
206+
border: 1px solid #e3e3e3;
207+
border-radius: 3px;
208+
padding: 5px 8px;
209+
font-size: 14px;
210+
}
211+
212+
.aa-Item__Content {
213+
font-size: 14px;
214+
line-height: 20px;
215+
margin-top: 5px;
216+
}
217+
218+
.aa-Item__Breadcrumbs {
219+
color: #999;
220+
font-size: 13px;
221+
line-height: 20px;
222+
margin-top: 5px;
223+
}
224+
225+
.aa-Item mark {
226+
background-color: #e3eaff;
227+
color: #3a33c5;
228+
}

‎source/theme/styles/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ a.headerlink::before {
184184
@import 'components/parameters';
185185
@import 'components/payment-method-expiry-times';
186186
@import 'components/payment-method-switcher';
187+
@import 'components/search';
187188
@import 'components/sidebar';
188189
@import 'components/sub-navigation';
189190
@import 'components/sub-navigation-item';

0 commit comments

Comments
 (0)