Skip to content

Commit 1477a60

Browse files
author
markzegarelli
authored
Merge pull request #1467 from segmentio/algolia-fast-follow
algolia fast follow
2 parents d115e5f + 8a4f679 commit 1477a60

File tree

10 files changed

+221
-66
lines changed

10 files changed

+221
-66
lines changed

‎js/algolia/index.js

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -13,68 +13,74 @@ const searchClient = algoliasearch(appId, apiKey);
1313
insightsClient('init', { appId, apiKey });
1414
const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
1515

16+
// define locations to separate invocation for mobile and desktop
17+
const locations = ['#autocomplete','#autocomplete-mobile'];
1618

17-
const search = autocomplete({
18-
container: '#autocomplete',
19-
placeholder: 'Search the Segment documentation',
20-
debug: false,
21-
openOnFocus: false,
22-
keyboardShortcuts: ['s', 191],
23-
plugins: [algoliaInsightsPlugin,],
24-
detachedMediaQuery:'none',
25-
getSources( {query} ) {
26-
return [
27-
{
28-
sourceId: 'articles',
29-
getItemUrl({ item }){
30-
if (item.anchor != null) {
31-
var itemUrl = item.url+"#" + item.anchor;
32-
} else {
33-
var itemUrl = item.url;
34-
}
35-
return itemUrl;
36-
},
37-
getItems() {
38-
return getAlgoliaHits({
39-
searchClient,
40-
queries: [
41-
{
42-
indexName: 'segment-docs',
43-
query,
44-
params: {
45-
hitsPerPage: 7,
46-
facetFilters: ['hidden:-true'],
47-
clickAnalytics: true,
48-
},
49-
},
50-
],
51-
});
52-
},
53-
templates: {
54-
item({ item }){
19+
function initAutocomplete(item){
20+
const search = autocomplete({
21+
container: item,
22+
placeholder: 'Search the Segment documentation',
23+
debug: false,
24+
openOnFocus: false,
25+
keyboardShortcuts: ['s', 191],
26+
plugins: [algoliaInsightsPlugin,],
27+
detachedMediaQuery:'none',
28+
getSources( {query} ) {
29+
return [
30+
{
31+
sourceId: 'articles',
32+
getItemUrl({ item }){
5533
if (item.anchor != null) {
56-
var anchorLink = "#" + item.anchor;
34+
var itemUrl = item.url+"#" + item.anchor;
5735
} else {
58-
var anchorLink = "";
36+
var itemUrl = item.url;
5937
}
60-
return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
61-
<p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
62-
<p class="aa-heading">${item.headings.join(' >')}</p>
63-
<p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
64-
`;
38+
return itemUrl;
39+
},
40+
getItems() {
41+
return getAlgoliaHits({
42+
searchClient,
43+
queries: [
44+
{
45+
indexName: 'segment-docs',
46+
query,
47+
params: {
48+
hitsPerPage: 7,
49+
facetFilters: ['hidden:-true'],
50+
clickAnalytics: true,
51+
},
52+
},
53+
],
54+
});
6555
},
66-
noResults() {
67-
return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
68-
}
56+
templates: {
57+
item({ item }){
58+
if (item.anchor != null) {
59+
var anchorLink = "#" + item.anchor;
60+
} else {
61+
var anchorLink = "";
62+
}
63+
return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
64+
<p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
65+
<p class="aa-heading">${item.headings.join(' >')}</p>
66+
<p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
67+
`;
68+
},
69+
noResults() {
70+
return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
71+
}
72+
},
73+
6974
},
70-
71-
},
72-
];
73-
},
74-
navigator: {
75-
navigate({ itemUrl }) {
76-
window.location.assign('/docs'+itemUrl);
75+
];
7776
},
78-
}
79-
});
77+
navigator: {
78+
navigate({ itemUrl }) {
79+
window.location.assign('/docs'+itemUrl);
80+
},
81+
}
82+
});
83+
84+
}
8085

86+
locations.forEach(initAutocomplete);

‎src/404.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="flex flex--justify gutter gutter--large@medium">
1010
<div class="flex__column flex__column--6@xlarge">
1111
<div class="search">
12-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
12+
{% include_cached navbar/search.html container="autocomplete" %}
1313
</div>
1414
</div>
1515

@@ -31,7 +31,7 @@ <h1 class="page-404__heading">The page you were looking for doesn't exist.</h1>
3131
<p>You may have mistyped the address or the page may have moved. Double-check the URL and try again or search the term.</p>
3232

3333
<div class="search search--mobile" data-search>
34-
{% include_cached navbar/search.html placeholder="Enter a search term" mobile="true" %}
34+
{% include_cached navbar/search.html container="autocomplete" %}
3535
</div>
3636
</div>
3737
</div>

‎src/_includes/navbar/navbar-mobile.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
</div>
2727

2828
<div class="navbar-mobile__search">
29-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
29+
{% include_cached navbar/search.html container="autocomplete-mobile" %}
3030
</div>
3131

3232
<div class="navbar-mobile__panel">

‎src/_includes/navbar/search.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="field field--expand field--icon">
2-
<div id="autocomplete"></div>
2+
<div id="{{include.container}}"></div>
33
{% unless include.mobile %}
44
<div class="field__icon field__icon--right flex flex--middle flex--center">
55
<button class="field__button" data-ref="search-navbar[trigger]">

‎src/_layouts/catalog.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="flex flex--justify gutter gutter--large@medium">
88
<div class="flex__column flex__column--6@xlarge">
99
<div class="search">
10-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
10+
{% include_cached navbar/search.html container="autocomplete" %}
1111
</div>
1212
</div>
1313

‎src/_layouts/home.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="flex flex--justify gutter gutter--large@medium">
88
<div class="flex__column flex__column--6@xlarge">
99
<div class="search">
10-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
10+
{% include_cached navbar/search.html container="autocomplete" %}
1111
</div>
1212
</div>
1313

@@ -19,7 +19,7 @@
1919

2020
{% include_cached navbar/navbar-mobile.html %}
2121

22-
<article class="home page" data-tracking-scroll data-swiftype-name="body" data-swiftype-type="text">
22+
<article class="home page" data-tracking-scroll>
2323
<div class="home__body page__body">
2424
<div>
2525
{%- if page.title -%}

‎src/_layouts/integration.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<div class="flex flex--justify gutter gutter--large@medium">
2222
<div class="flex__column flex__column--6@xlarge">
2323
<div class="search">
24-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
24+
{% include_cached navbar/search.html container="autocomplete" %}
2525
</div>
2626
</div>
2727

‎src/_layouts/page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="flex flex--justify gutter gutter--large@medium">
88
<div class="flex__column flex__column--6@xlarge">
99
<div class="search">
10-
{% include_cached navbar/search.html placeholder="Search the Segment documentation..." %}
10+
{% include_cached navbar/search.html container="autocomplete" %}
1111
</div>
1212
</div>
1313

‎src/_layouts/search.html

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
layout: main
3+
---
4+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">
5+
6+
<main class="docs__body stage__body">
7+
<div class="docs__navbar">
8+
<div class="flex flex--justify gutter gutter--large@medium">
9+
<div class="flex__column flex__column--6@xlarge">
10+
<div class="search">
11+
<div class="field field--expand field--icon">
12+
<div id="autocomplete"></div>
13+
{% unless include.mobile %}
14+
<div class="field__icon field__icon--right flex flex--middle flex--center">
15+
<button class="field__button" data-ref="search-navbar[trigger]">
16+
{% include icons/symbols/cross.svg %}
17+
</button>
18+
</div>
19+
{% endunless %}
20+
</div>
21+
</div>
22+
</div>
23+
24+
<div class="flex__column flex__column--shrink">
25+
{% include_cached navbar/nav.html %}
26+
</div>
27+
</div>
28+
</div>
29+
30+
{% include_cached navbar/navbar-mobile.html %}
31+
32+
<article class="page" data-tracking-scroll data-swiftype-name="body" data-swiftype-type="text">
33+
<div class="page__body">
34+
{% include components/breadcrumbs.html %}
35+
36+
{%- if page.title -%}
37+
<h1 id="{{ page.title | slugify }}">
38+
{{ page.title }}
39+
</h1>
40+
{%- endif -%}
41+
42+
{%- if page.beta -%}
43+
{% include content/beta.md %}
44+
{%- endif -%}
45+
46+
{%- unless page.hide_toc -%}
47+
{% include sidebar/mobile-menu-side.html %}
48+
{%- endunless -%}
49+
50+
<div class="markdown" data-headings-anchors>
51+
{{ content }}
52+
</div>
53+
54+
<p class="last-modified">This page was last modified: {{ page.last_modified_at | date: '%d %b %Y' }}</p>
55+
56+
{% if page.contributors %}
57+
{% include components/recent-contributor.html contributors=page.contributors %}
58+
{% endif %}
59+
60+
{% if page.related %}
61+
<hr>
62+
{% include components/related.html items=page.related %}
63+
{% endif %}
64+
65+
{% unless page.hide-feedback %}
66+
<hr>
67+
{% include components/feedback.html %}
68+
{% endunless %}
69+
70+
<hr>
71+
72+
{% include components/callout.html %}
73+
</div>
74+
75+
{%- unless page.hide-sidebar -%}
76+
<div class="docs__sidebar page__sidebar">
77+
<div class="sidebar sidebar--sticky sidebar--scroll">
78+
{%- unless page.hide_toc -%}
79+
<div data-anchors-indicator data-sections="h2" data-active-class="menu-side__link--active">
80+
{% include_cached sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
81+
</div>
82+
{% endunless %}
83+
84+
{% if page.related %}
85+
{% include sidebar/related-content.html items=page.related %}
86+
{% endif %}
87+
88+
{% unless page.hide-feedback %}
89+
{% include_cached sidebar/feedback.html %}
90+
{% endunless %}
91+
</div>
92+
</div>
93+
{% endunless %}
94+
</article>
95+
</main>
96+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
97+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
98+
99+
<script>
100+
const appId = 'UINQ2M4D9S';
101+
const apiKey = '636b6d9e2dfb207e89ea7344859848f9';
102+
const searchClient = algoliasearch(appId, apiKey);
103+
104+
const instantSearch = instantsearch({
105+
indexName: 'segment-docs',
106+
searchClient,
107+
routing: true,
108+
facetFilters: ['hidden:-true'],
109+
110+
});
111+
112+
instantSearch.addWidgets([
113+
instantsearch.widgets.searchBox({
114+
container: '#searchbox',
115+
}),
116+
117+
instantsearch.widgets.configure({
118+
hitsPerPage: 7,
119+
facetFilters: ['hidden:-true'],
120+
}),
121+
122+
instantsearch.widgets.hits({
123+
container: '#hits',
124+
templates: {
125+
item(item){
126+
if (item.anchor != null) {
127+
var anchorLink = "#" + item.anchor;
128+
} else {
129+
var anchorLink = "";
130+
}
131+
return `<a class="aa-link" href="/docs${item.url}${anchorLink}">
132+
<p class="aa-title" >${item.title}</h3>
133+
<p class="aa-heading">${item.headings.join(' >')}</p>
134+
<p class="aa-content">${item.content}</p></a>
135+
`;
136+
}
137+
}
138+
})
139+
]);
140+
141+
instantSearch.start();
142+
143+
</script>

‎src/utils/search.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: search
3+
layout: search
4+
---
5+
<div id="searchbox"></div>
6+
<div id="hits"></div>

0 commit comments

Comments
 (0)