Skip to content

Commit 1f132f6

Browse files
markzegarellimarkzegarelli
committed
styling + analytics
1 parent c140bdf commit 1f132f6

File tree

7 files changed

+132
-24
lines changed

7 files changed

+132
-24
lines changed

‎js/algolia/index.js

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,39 @@
11
import { html } from 'htm/preact';
22
import algoliasearch from 'algoliasearch/lite';
3-
import { autocomplete, getAlgoliaHits } from '@algolia/autocomplete-js';
3+
import { autocomplete, getAlgoliaHits, highlightHit } from '@algolia/autocomplete-js';
4+
import {createAlgoliaInsightsPlugin} from '@algolia/autocomplete-plugin-algolia-insights';
5+
import insightsClient from 'search-insights';
46

5-
// import '@algolia/autocomplete-theme-classic';
67

7-
const searchClient = algoliasearch(
8-
'UINQ2M4D9S',
9-
'636b6d9e2dfb207e89ea7344859848f9'
10-
);
8+
const appId = 'UINQ2M4D9S';
9+
const apiKey = '636b6d9e2dfb207e89ea7344859848f9';
10+
const searchClient = algoliasearch(appId, apiKey);
1111

12-
autocomplete({
12+
//insights
13+
insightsClient('init', { appId, apiKey });
14+
const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
15+
16+
17+
const search = autocomplete({
1318
container: '#autocomplete',
14-
placeholder: 'Search for the Segment documentation (press / to focus)',
19+
placeholder: 'Search the Segment documentation',
1520
debug: true,
16-
detachedMediaQuery:'',
21+
openOnFocus: false,
22+
keyboardShortcuts: ['s', 191],
23+
plugins: [algoliaInsightsPlugin,],
24+
detachedMediaQuery:'none',
1725
getSources( {query} ) {
1826
return [
1927
{
2028
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+
},
2137
getItems() {
2238
return getAlgoliaHits({
2339
searchClient,
@@ -26,7 +42,9 @@ autocomplete({
2642
indexName: 'segment-docs',
2743
query,
2844
params: {
29-
hitsPerPage: 5
45+
hitsPerPage: 7,
46+
facetFilters: ['hidden:-true'],
47+
clickAnalytics: true,
3048
},
3149
},
3250
],
@@ -40,16 +58,23 @@ autocomplete({
4058
var anchorLink = "";
4159
}
4260
return html `<a class="aa-link" href="/docs${item.url}${anchorLink}">
43-
<p class="aa-title" >${item.title}</h3>
61+
<p class="aa-title" >${highlightHit({hit: item, attribute: 'title'})}</h3>
4462
<p class="aa-heading">${item.headings.join(' >')}</p>
45-
<p class="aa-content">${item.content}</p></a>
63+
<p class="aa-content">${highlightHit({hit: item, attribute: 'content'})}</p></a>
4664
`;
4765
},
4866
noResults() {
49-
return 'no results';
67+
return html `<p class="aa-content">No results for <strong>${query}</strong></p>`;
5068
}
51-
}
52-
}
69+
},
70+
71+
},
5372
];
5473
},
74+
navigator: {
75+
navigate({ itemUrl }) {
76+
window.location.assign('/docs'+itemUrl);
77+
},
78+
}
5579
});
80+

‎js/index.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,4 @@ relativeLinks()
4040
sideMenu()
4141
tracking()
4242
searchBar()
43-
glightbox()
44-
autocomplete()
43+
glightbox()

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@
3939
},
4040
"dependencies": {
4141
"@algolia/autocomplete-js": "^1.0.0-alpha.44",
42+
"@algolia/autocomplete-plugin-algolia-insights": "^1.0.0-alpha.44",
43+
"@algolia/autocomplete-plugin-query-suggestions": "^1.0.0-alpha.35",
44+
"@algolia/autocomplete-plugin-recent-searches": "^1.0.0-alpha.34",
4245
"@algolia/autocomplete-theme-classic": "^1.0.0-alpha.44",
4346
"@babel/runtime": "7.7.2",
4447
"ajv": "6.10.2",
@@ -49,6 +52,7 @@
4952
"htm": "^3.0.4",
5053
"hyperlink": "^4.5.2",
5154
"preact": "^10.5.12",
55+
"search-insights": "^1.7.1",
5256
"tap-spot": "^1.1.1",
5357
"tippy.js": "^5.2.0",
5458
"typewriter": "7.0.1"

‎src/_layouts/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@
5959
<meta charset="utf-8">
6060
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6161
<meta name="viewport" content="width=device-width, initial-scale=1">
62-
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
6362
<link
6463
rel="stylesheet"
6564
href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@alpha"
6665
/>
66+
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
6767
<link rel="stylesheet" href="{{ '/assets/algolia.css' | relative_url }}">
6868
</head>
6969
<body>

‎src/_sass/components/_search.scss

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,19 @@
3232
background-color: white;
3333
border: 1px solid #ddd;
3434
border-radius: 5px;
35-
box-shadow: 10px 8px 15px -7px rgba(0, 0, 0, 0.29);
3635
margin-top: 10px;
3736
}
3837

39-
.aa-suggestion {
38+
.aa-suggestion, .aa-Item {
4039
padding: 15px 30px;
4140
border-bottom: 1px solid #ddd;
4241
}
4342

44-
.ais-Highlight {
43+
mark, .ais-Highlight {
4544
background-color: #f6fcfe;
4645
font-weight: bold;
4746
font-style: normal;
47+
color: inherit;
4848
}
4949

5050
a.aa-link:hover {
@@ -76,4 +76,21 @@ a.aa-link:hover {
7676

7777
.aa-cursor {
7878
background-color: #fafbff;
79-
}
79+
}
80+
81+
.aa-Panel{
82+
z-index: 100;
83+
margin-top: 25px;
84+
// box-shadow: 10px 8px 15px -7px rgba(0, 0, 0, 0.29);
85+
background-color: white;
86+
border-radius: 5px;
87+
border: 1px solid #ddd;
88+
}
89+
90+
.aa-submitIcon {
91+
width: 12px !important;
92+
}
93+
94+
.aa-submitButton:focus {
95+
outline: none;
96+
}

‎src/assets/algolia.css

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
:root {
22
--aa-font-size: 12px;
3-
--aa-icon-size: 14px;
3+
--aa-spacing: 14px;
4+
--aa-icon-size: 12px;
5+
--aa-spacing-half: 0px;
6+
--aa-primary-color: #8f95b2;
7+
--aa-panel-shadow: 10px 8px 15px -7px rgba(0, 0, 0, 0.29);
8+
--aa-selected-color:#fafbff;
9+
--aa-panel-max-height: 90vh;
10+
--aa-icon-stroke-width: 2;
411
}

‎yarn.lock

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,29 @@
22
# yarn lockfile v1
33

44

5-
"@algolia/[email protected]":
5+
"@algolia/[email protected]":
6+
version "1.0.0-alpha.35"
7+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.35.tgz#a54949edf7b402da6fd6cf08943438bfb802aa50"
8+
integrity sha512-KnogrTLI75wCjX4YD+/mKZyoodpebMtyxYq0pxwH3MHFNJ43U+wwLcLTpDqho0ZsrHhx6/boZuZsdyWhxIyGDg==
9+
dependencies:
10+
"@algolia/autocomplete-shared" "1.0.0-alpha.35"
11+
12+
"@algolia/[email protected]", "@algolia/autocomplete-core@^1.0.0-alpha.31":
613
version "1.0.0-alpha.44"
714
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.0.0-alpha.44.tgz#e626dba45f5f3950d6beb0ab055395ef0f7e8bb2"
815
integrity sha512-2iMXthldMIDXtlbg9omRKLgg1bLo2ZzINAEqwhNjUeyj1ceEyL1ck6FY0VnJpf2LsjmNthHCz2BuFk+nYUeDNA==
916
dependencies:
1017
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
1118

19+
"@algolia/[email protected]":
20+
version "1.0.0-alpha.35"
21+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.35.tgz#003ce59a49e356db59453660081d6d90f382f330"
22+
integrity sha512-uwbQYb7zrMKGIeB51PVb2DmVkA+/QvI2nxNNWsUwpaZnFnaL/Yb7firLVRXLmDqGRG/u16m5qfVPQMsA/ZpJjA==
23+
dependencies:
24+
"@algolia/autocomplete-core" "1.0.0-alpha.35"
25+
"@algolia/autocomplete-preset-algolia" "1.0.0-alpha.35"
26+
"@algolia/autocomplete-shared" "1.0.0-alpha.35"
27+
1228
"@algolia/autocomplete-js@^1.0.0-alpha.44":
1329
version "1.0.0-alpha.44"
1430
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-js/-/autocomplete-js-1.0.0-alpha.44.tgz#a252bdbf7ab662dedcc05cfe53e318d6becd7bee"
@@ -19,13 +35,48 @@
1935
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
2036
preact "^10.0.0"
2137

38+
"@algolia/autocomplete-plugin-algolia-insights@^1.0.0-alpha.44":
39+
version "1.0.0-alpha.44"
40+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.0.0-alpha.44.tgz#e40f2bf711995d77d9cf04fde07dc47e3620fa08"
41+
integrity sha512-3hA+jvC1Sn85O9VxxRNaQ+hjRbPXUuN/qcRJ8S2EbzY5tsEMkmUpG5MV7jNz1YKOG0K5qnP5dJ7CwqFgdiuACw==
42+
dependencies:
43+
"@algolia/autocomplete-core" "1.0.0-alpha.44"
44+
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
45+
46+
"@algolia/autocomplete-plugin-query-suggestions@^1.0.0-alpha.35":
47+
version "1.0.0-alpha.35"
48+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-query-suggestions/-/autocomplete-plugin-query-suggestions-1.0.0-alpha.35.tgz#4274c5e5e6f2dbaf2ca806d1a6d88296a0a95794"
49+
integrity sha512-O5fVzasOyMbXO4veR0NwfCKmfJ/yoWPLUv7rEIwEqGpdkrM+R0AaJS2nJGumi66JzVWFU6RxUgzQ/GDO+bggJw==
50+
dependencies:
51+
"@algolia/autocomplete-core" "1.0.0-alpha.35"
52+
"@algolia/autocomplete-js" "1.0.0-alpha.35"
53+
54+
"@algolia/autocomplete-plugin-recent-searches@^1.0.0-alpha.34":
55+
version "1.0.0-alpha.34"
56+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-plugin-recent-searches/-/autocomplete-plugin-recent-searches-1.0.0-alpha.34.tgz#71dbd474cecee2d6785aaede76cb364bec69ee37"
57+
integrity sha512-d9XqQHNQIO39a7gWcNPkvdcZpxaiufZPEFlr+sBbKlqPBmykBtjQlb3TY29a5p62a7Rj19PVfqgfmY0A+BrK/w==
58+
dependencies:
59+
"@algolia/autocomplete-core" "^1.0.0-alpha.31"
60+
61+
"@algolia/[email protected]":
62+
version "1.0.0-alpha.35"
63+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.35.tgz#b1218a689caa66b607a532c2e363973309764158"
64+
integrity sha512-9MNEkVbPW/oJKJmWYcI1Q34E4v82LI1EWCxyYQdN5yGg8bdK8yRzjNqqoctVDz4SA1Mtis0IEPbPzzx41IUg5Q==
65+
dependencies:
66+
"@algolia/autocomplete-shared" "1.0.0-alpha.35"
67+
2268
"@algolia/[email protected]":
2369
version "1.0.0-alpha.44"
2470
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.44.tgz#0ea0b255d0be10fbe262e281472dd6e4619b62ba"
2571
integrity sha512-DCHwo5ovzg9k2ejUolGNTLFnIA7GpsrkbNJTy1sFbMnYfBmeK8egZPZnEl7lBTr27OaZu7IkWpTepLVSztZyng==
2672
dependencies:
2773
"@algolia/autocomplete-shared" "1.0.0-alpha.44"
2874

75+
"@algolia/[email protected]":
76+
version "1.0.0-alpha.35"
77+
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.35.tgz#d6819cb1420a389ac9894199bda2c7abd276fd3d"
78+
integrity sha512-KNZxFImmcuL15PbrFN5V/Xn+/oqAaF9BS3UILnf04yAjbGbA4oixjNndxGe+RUFKj531Sr+hwja4+4bxa0TmEQ==
79+
2980
"@algolia/[email protected]":
3081
version "1.0.0-alpha.44"
3182
resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.0.0-alpha.44.tgz#db13902ad1667e455711b77d08cae1a0feafaa48"
@@ -7577,6 +7628,11 @@ schemes@^1.0.1:
75777628
dependencies:
75787629
extend "^3.0.0"
75797630

7631+
search-insights@^1.7.1:
7632+
version "1.7.1"
7633+
resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-1.7.1.tgz#eddfa56910e28cbbb0df80aec2ab8acf0a86cb6b"
7634+
integrity sha512-CSuSKIJp+WcSwYrD9GgIt1e3xmI85uyAefC4/KYGgtvNEm6rt4kBGilhVRmTJXxRE2W1JknvP598Q7SMhm7qKA==
7635+
75807636
secure-keys@^1.0.0:
75817637
version "1.0.0"
75827638
resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca"

0 commit comments

Comments
 (0)