Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

Commit cdb57f0

Browse files
eunjae-leeeunjae-lee
authored
feat(voiceSearch): add voiceSearch (#100)
* feat(voiceSearch): add voiceSearch * chore(voiceSearch): update style for disabled svg * chore(voiceSearch): update styles for svg * chore: render `info` as html * chore(voiceSearch): update about license of icon * Update content/widgets/voice-search.md Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update content/widgets/voice-search.md Co-Authored-By: eunjae-lee <karis612@gmail.com> * Update content/widgets/voice-search.md Co-Authored-By: eunjae-lee <karis612@gmail.com> * chore(voiceSearch): update example html * fix(voiceSearch): remove wrong bg color on safari * Update content/widgets/voice-search.md Co-Authored-By: eunjae-lee <karis612@gmail.com> * fix(voiceSearch): fix disabled color on safari * fix(voiceSearch): define reset style
1 parent 48eca7d commit cdb57f0

File tree

4 files changed

+94
-2
lines changed

4 files changed

+94
-2
lines changed

‎content/widgets/voice-search.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: VoiceSearch
3+
type: widget
4+
info: |
5+
The icon is from <a href="https://feathericons.com/" target="_blank">Feather icons</a>. Its license is MIT and the attribution is not needed according to <a href="https://github.com/feathericons/feather/issues/95" target="_blank">this</a>.
6+
html: |
7+
<div class="ais-VoiceSearch">
8+
<button class="ais-VoiceSearch-button" type="button" title="Search by voice">
9+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic">
10+
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
11+
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
12+
<line x1="12" y1="19" x2="12" y2="23"></line>
13+
<line x1="8" y1="23" x2="16" y2="23"></line>
14+
</svg>
15+
</button>
16+
<div class="ais-VoiceSearch-status">
17+
<p>Amazon Fire tablet</p>
18+
</div>
19+
</div>
20+
alt1: Recognizing speech
21+
althtml1: |
22+
<div class="ais-VoiceSearch">
23+
<button class="ais-VoiceSearch-button" type="button" title="Search by voice">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic">
25+
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" fill="currentColor"></path>
26+
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
27+
<line x1="12" y1="19" x2="12" y2="23"></line>
28+
<line x1="8" y1="23" x2="16" y2="23"></line>
29+
</svg>
30+
</button>
31+
<div class="ais-VoiceSearch-status">
32+
<p>Amazon Fire tablet</p>
33+
</div>
34+
</div>
35+
alt2: Disabled on unsupported browser
36+
althtml2: |
37+
<div class="ais-VoiceSearch">
38+
<button class="ais-VoiceSearch-button" type="button" title="Search by voice" disabled>
39+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mic">
40+
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
41+
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
42+
<line x1="12" y1="19" x2="12" y2="23"></line>
43+
<line x1="8" y1="23" x2="16" y2="23"></line>
44+
</svg>
45+
</button>
46+
<div class="ais-VoiceSearch-status">
47+
<p></p>
48+
</div>
49+
</div>
50+
classes:
51+
- name: .ais-VoiceSearch
52+
description: the root div of the widget
53+
- name: .ais-VoiceSearch-button
54+
description: the button to trigger the voice search
55+
- name: .ais-VoiceSearch-status
56+
description: the status of the voice search
57+
options:
58+
- name: searchAsYouSpeak
59+
default: false
60+
description: If you enable this option, new searches will be triggered every time speech recognition generates interim transcript while speaking.
61+
---

‎layouts/widget/single.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<h2 id="{{ lower .Page.Title }}">{{ .Page.Title }}</h2>
1515

16-
{{ if .Params.info }}<p class="info">{{ .Params.info }}</p>{{ end }}
16+
{{ if .Params.info }}<p class="info">{{ .Params.info | safeHTML }}</p>{{ end }}
1717

1818
<h3 id="widget-example">Widget example</h3>
1919

‎src/scss/themes/algolia.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -633,3 +633,33 @@ a[class^='ais-'] {
633633
width: 16px;
634634
height: 16px;
635635
}
636+
637+
.ais-VoiceSearch-button {
638+
border: none;
639+
width: 24px;
640+
height: 24px;
641+
padding: 4px;
642+
border-radius: 50%;
643+
color: $port-gore;
644+
background-color: transparent;
645+
}
646+
647+
.ais-VoiceSearch-button svg {
648+
color: currentColor;
649+
}
650+
651+
.ais-VoiceSearch-button:hover {
652+
cursor: pointer;
653+
background-color: lighten($port-gore, 40%);
654+
color: #ffffff;
655+
}
656+
657+
.ais-VoiceSearch-button:disabled {
658+
color: lighten($port-gore, 40%);
659+
}
660+
661+
.ais-VoiceSearch-button:disabled:hover {
662+
color: lighten($port-gore, 40%);
663+
cursor: not-allowed;
664+
background: inherit;
665+
}

‎src/scss/themes/reset.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
.ais-RangeInput-submit,
3434
.ais-RefinementList-showMore,
3535
.ais-SearchBox-submit,
36-
.ais-SearchBox-reset {
36+
.ais-SearchBox-reset,
37+
.ais-VoiceSearch-button {
3738
padding: 0;
3839
overflow: visible;
3940
font: inherit;

0 commit comments

Comments
 (0)