Skip to content

Commit b0934c5

Browse files
committed
instant search q&d
1 parent 7717863 commit b0934c5

File tree

3 files changed

+150
-67
lines changed

3 files changed

+150
-67
lines changed

js/algolia/index.js

Lines changed: 1 addition & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -83,70 +83,4 @@ function initAutocomplete(item){
8383

8484
}
8585

86-
locations.forEach(initAutocomplete);
87-
88-
89-
// const search_mobile = autocomplete({
90-
// container: '#autocomplete-mobile',
91-
// placeholder: 'Search the Segment documentation',
92-
// debug: false,
93-
// openOnFocus: false,
94-
// keyboardShortcuts: ['s', 191],
95-
// plugins: [algoliaInsightsPlugin,],
96-
// detachedMediaQuery:'none',
97-
// getSources( {query} ) {
98-
// return [
99-
// {
100-
// sourceId: 'articles',
101-
// getItemUrl({ item }){
102-
// if (item.anchor != null) {
103-
// var itemUrl = item.url+"#" + item.anchor;
104-
// } else {
105-
// var itemUrl = item.url;
106-
// }
107-
// return itemUrl;
108-
// },
109-
// getItems() {
110-
// return getAlgoliaHits({
111-
// searchClient,
112-
// queries: [
113-
// {
114-
// indexName: 'segment-docs',
115-
// query,
116-
// params: {
117-
// hitsPerPage: 7,
118-
// facetFilters: ['hidden:-true'],
119-
// clickAnalytics: true,
120-
// },
121-
// },
122-
// ],
123-
// });
124-
// },
125-
// templates: {
126-
// item({ item }){
127-
// if (item.anchor != null) {
128-
// var anchorLink = "#" + item.anchor;
129-
// } else {
130-
// var anchorLink = "";
131-
// }
132-
// return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
133-
// <p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
134-
// <p class="aa-heading">${item.headings.join(' >')}</p>
135-
// <p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
136-
// `;
137-
// },
138-
// noResults() {
139-
// return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
140-
// }
141-
// },
142-
143-
// },
144-
// ];
145-
// },
146-
// navigator: {
147-
// navigate({ itemUrl }) {
148-
// window.location.assign('/docs'+itemUrl);
149-
// },
150-
// }
151-
// });
152-
86+
locations.forEach(initAutocomplete);

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)