Skip to content

Commit f5739bf

Browse files
GBKSGBKS
authored
Search improvement (#1034)
* Search improvement This is a bigger update to the search functionality on the site. I updated the LunrJS library, which powers our search. The latest version has some extra features like fuzzy search and term presence. This is now enabled and highlighted to users on the search page via an expandable "Search tips" section. For simple single-term searches, the site uses a slightly fuzzy search. So if you type "bech31", it will also find "bech32". Or if you type "wxllet", it will also find "wallet". Helps with those small typos or easy-to-misspell technical terms. I also removed our SEO placeholder pages from the search index. These are currently causing search results that read "..." on the site. Not pretty. The search page is also removed from search results. Search results now also have a small dot next to them to indicate the quality/confidence of the result. Green is a good match, grey is just an OK match. Colors can range in between those two based on the scores. The search tips are a little hidden, just being visible on the search page. Would be nice to include them somehow in the search modal as well, without cluttering things up. Probably good to test this thoroughly before finalizing. * Adding tool tip to search result match quality indicator Still a bit hidden, but at least there's a way now to see what the gray or green circle means. * Removing two console logs * Fixing small bug per feedback
1 parent d7a79ce commit f5739bf

File tree

8 files changed

+362
-115
lines changed

8 files changed

+362
-115
lines changed

‎_includes/header.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,10 @@
3939
</div>
4040

4141
<div class="search-input-wrap" id="toggled-search" aria-hidden="true">
42-
<form action="/search.html" method="get">
43-
<input type="text" id="search-input" name="query" class="search-input" tabindex="0" placeholder="Search" aria-label="Search {{ site.title }}" autocomplete="off">
42+
<form action="/search" method="get">
43+
<input type="text" id="search-input" name="query" class="search-input" tabindex="0" placeholder="Search..." aria-label="Search {{ site.title }}" autocomplete="off">
4444
</form>
4545
<ul id="search-results"></ul>
4646
</div>
47-
4847
</div>
4948
</header>

‎_sass/minima/_search-page.scss

+112-43
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,24 @@
1313

1414
form {
1515
input {
16-
display: block;
17-
width: 100%;
18-
height: 60px;
19-
border: 1px solid rgba(var(--front), 0.2);
20-
font-size: 27px;
21-
padding-left: 20px;
22-
padding-right: 20px;
23-
box-sizing: border-box;
24-
25-
&:active,
26-
&:focus {
27-
border-color: var(--primary-color);
28-
outline: none;
29-
}
16+
display: block;
17+
width: 100%;
18+
height: 60px;
19+
border: 1px solid rgba(var(--front), 0.2);
20+
font-size: 27px;
21+
padding-left: 20px;
22+
padding-right: 20px;
23+
box-sizing: border-box;
24+
25+
&:active,
26+
&:focus {
27+
border-color: var(--primary-color);
28+
outline: none;
29+
}
30+
31+
&::placeholder {
32+
color: #cccccc;
33+
}
3034
}
3135
}
3236

@@ -36,45 +40,110 @@
3640
margin: 20px 0 0 0;
3741

3842
li {
39-
h3 {
40-
margin-top: 0;
41-
margin-bottom: 0;
42-
font-size: 18px;
43-
line-height: 1.2;
44-
color: var(--frontHex);
45-
transition: color 100ms $ease;
43+
border-bottom: 1px solid #ededed;
44+
45+
h3 {
46+
margin-top: 0;
47+
margin-bottom: 0;
48+
font-size: 18px;
49+
line-height: 1.2;
50+
color: var(--frontHex);
51+
transition: color 100ms $ease;
52+
53+
span {
54+
margin-left: 5px;
55+
vertical-align: middle;
56+
display: inline-block;
57+
width: 8px;
58+
height: 8px;
59+
border-radius: 4px;
60+
transform: translateY(-1px);
4661
}
62+
}
4763

48-
a {
49-
display: block;
50-
padding: 15px 0;
51-
transition: background-color 100ms $ease;
52-
53-
p {
54-
margin-top: 5px;
55-
margin-bottom: 0;
56-
font-size: 16px;
57-
line-height: 1.4;
58-
color: rgba(var(--front), 0.7);
59-
}
64+
a {
65+
display: block;
66+
padding: 15px 0;
67+
transition: background-color 100ms $ease;
68+
69+
p {
70+
margin-top: 5px;
71+
margin-bottom: 0;
72+
font-size: 16px;
73+
line-height: 1.4;
74+
color: rgba(var(--front), 0.7);
75+
}
6076

61-
&:hover {
62-
text-decoration: none;
63-
background-color: rgba(var(--primary-color-rgb), 0.05);
77+
&:hover {
78+
text-decoration: none;
79+
background-color: rgba(var(--primary-color-rgb), 0.05);
6480

65-
h3 {
66-
color: var(--primary-color);
67-
}
81+
h3 {
82+
color: var(--primary-color);
6883
}
6984
}
85+
}
86+
87+
&.no-results {
88+
padding: 15px 0;
89+
}
90+
}
91+
}
92+
93+
#search-tips {
94+
padding: 15px 0;
95+
96+
button {
97+
appearance: none;
98+
background-color: transparent;
99+
border-width: 0;
100+
padding: 0;
101+
display: flex;
102+
gap: 3px;
103+
font-size: 15px;
104+
align-items: center;
105+
transition: all 150ms $ease;
70106

71-
> h3 {
72-
padding: 15px 0;
107+
svg {
108+
width: 14px;
109+
height: 14px;
110+
transition: all 150ms $ease;
111+
}
112+
113+
&:hover {
114+
color: var(--primary-color);
115+
cursor: pointer;
116+
}
117+
118+
&[aria-expanded="true"] {
119+
svg {
120+
transform: rotate(90deg);
73121
}
122+
}
123+
}
124+
}
125+
126+
#search-tips-content {
127+
p {
128+
font-size: 15px;
129+
}
74130

75-
& + li {
76-
border-top: 1px solid #ededed;
131+
ul {
132+
margin-top: 5px;
133+
134+
li {
135+
font-size: 15px;
136+
137+
em {
138+
font-style: normal;
139+
font-weight: 500;
140+
color: var(--front);
77141
}
142+
}
143+
144+
& + p {
145+
margin-top: 5px;
146+
}
78147
}
79148
}
80149
}

‎_sass/minima/_site-header.scss

+10
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,16 @@
188188
line-height: 1.2;
189189
color: var(--frontHex);
190190
transition: color 100ms $ease;
191+
192+
span {
193+
margin-left: 5px;
194+
vertical-align: middle;
195+
display: inline-block;
196+
width: 8px;
197+
height: 8px;
198+
border-radius: 4px;
199+
transform: translateY(-1px);
200+
}
191201
}
192202

193203
a {

0 commit comments

Comments
 (0)