Skip to content

Commit 556a7e6

Browse files
mythzmythz
committed
Fix Typesense
1 parent da454d0 commit 556a7e6

File tree

2 files changed

+98
-92
lines changed

2 files changed

+98
-92
lines changed

‎MyApp/tailwind.input.css

+89-89
Original file line numberDiff line numberDiff line change
@@ -34,95 +34,6 @@
3434
}
3535

3636
@layer base {
37-
/* typesense */
38-
@media (min-width: 720px) {
39-
.search-dialog {
40-
transform: translateX(0);
41-
}
42-
}
43-
@media (min-width: 960px) {
44-
.search-dialog {
45-
width: 20rem;
46-
}
47-
}
48-
.search-dialog input[type=search]::-webkit-search-cancel-button {
49-
-webkit-appearance: none;
50-
appearance: none;
51-
height: 12px;
52-
width: 12px;
53-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' class='w-5 h-5' viewBox='0 0 123.05 123.05' style='enable-background:new 0 0 123.05 123.05'%3E%3Cg%3E%3Cpath d='M121.325,10.925l-8.5-8.399c-2.3-2.3-6.1-2.3-8.5,0l-42.4,42.399L18.726,1.726c-2.301-2.301-6.101-2.301-8.5,0l-8.5,8.5 c-2.301,2.3-2.301,6.1,0,8.5l43.1,43.1l-42.3,42.5c-2.3,2.3-2.3,6.1,0,8.5l8.5,8.5c2.3,2.3,6.1,2.3,8.5,0l42.399-42.4l42.4,42.4 c2.3,2.3,6.1,2.3,8.5,0l8.5-8.5c2.3-2.3,2.3-6.1,0-8.5l-42.5-42.4l42.4-42.399C123.625,17.125,123.625,13.325,121.325,10.925z' fill='%23888' /%3E%3C/g%3E%3C/svg%3E%0A");
54-
background-size: 12px 12px;
55-
}
56-
.search-dialog {
57-
height: 100vh;
58-
left: 0;
59-
position: fixed;
60-
top: 0;
61-
width: 100vw;
62-
z-index: 200;
63-
flex-direction: column;
64-
padding: 12vh;
65-
transition: width 0.1s ease-out 0s, opacity 0.5s ease 0.2s;
66-
}
67-
.search-dialog .dialog {
68-
margin: 0 auto;
69-
max-width: 47.375rem;
70-
min-height: 0;
71-
border-radius: 1rem;
72-
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
73-
}
74-
.search-dialog.open {
75-
display: flex;
76-
}
77-
.search-input {
78-
-webkit-appearance: none;
79-
appearance: none;
80-
background: transparent;
81-
height: 4.5rem;
82-
font-weight: 400;
83-
color: #000;
84-
margin-left: 1rem;
85-
margin-right: 1rem;
86-
flex: auto;
87-
min-width: 0;
88-
font-size: 1.5rem;
89-
border: 0 solid;
90-
}
91-
.search-input::placeholder {
92-
color: rgb(156, 163, 175);
93-
}
94-
.search-input:focus {
95-
outline: 2px dotted transparent;
96-
box-shadow: none;
97-
}
98-
.search-cancel {
99-
flex: none;
100-
font-size: 0;
101-
border-radius: .375rem;
102-
border: 1px solid #d1d5db;
103-
padding: .125rem .375rem;
104-
}
105-
.search-cancel:before {
106-
content: "esc";
107-
color: #9ca3af;
108-
font-size: .875rem;
109-
line-height: 1.25rem;
110-
cursor: pointer;
111-
}
112-
.search-dialog ::-webkit-scrollbar { width:4px; }
113-
.search-dialog ::-webkit-scrollbar-thumb { background-color:rgb(249, 250, 251); }
114-
.group-item[aria-selected=true], .group-item[aria-selected=true] a, .group-item[aria-selected=true] mark {
115-
background-color: #42b983;
116-
box-shadow: inset 0 0 0 2px #42b983;
117-
cursor: pointer;
118-
color: white;
119-
}
120-
.group-item a {
121-
text-decoration: none;
122-
}
123-
.dark mark {
124-
background-color: rgb(30 58 138);
125-
}
12637
@media (min-width: 720px) {
12738
.nav {
12839
display: none;
@@ -246,3 +157,92 @@
246157
}
247158
}
248159

160+
/* typesense */
161+
@media (min-width: 720px) {
162+
.search-dialog {
163+
transform: translateX(0);
164+
}
165+
}
166+
@media (min-width: 960px) {
167+
.search-dialog {
168+
width: 20rem;
169+
}
170+
}
171+
.search-dialog input[type=search]::-webkit-search-cancel-button {
172+
-webkit-appearance: none;
173+
appearance: none;
174+
height: 12px;
175+
width: 12px;
176+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' class='w-5 h-5' viewBox='0 0 123.05 123.05' style='enable-background:new 0 0 123.05 123.05'%3E%3Cg%3E%3Cpath d='M121.325,10.925l-8.5-8.399c-2.3-2.3-6.1-2.3-8.5,0l-42.4,42.399L18.726,1.726c-2.301-2.301-6.101-2.301-8.5,0l-8.5,8.5 c-2.301,2.3-2.301,6.1,0,8.5l43.1,43.1l-42.3,42.5c-2.3,2.3-2.3,6.1,0,8.5l8.5,8.5c2.3,2.3,6.1,2.3,8.5,0l42.399-42.4l42.4,42.4 c2.3,2.3,6.1,2.3,8.5,0l8.5-8.5c2.3-2.3,2.3-6.1,0-8.5l-42.5-42.4l42.4-42.399C123.625,17.125,123.625,13.325,121.325,10.925z' fill='%23888' /%3E%3C/g%3E%3C/svg%3E%0A");
177+
background-size: 12px 12px;
178+
}
179+
.search-dialog {
180+
height: 100vh;
181+
left: 0;
182+
position: fixed;
183+
top: 0;
184+
width: 100vw;
185+
z-index: 200;
186+
flex-direction: column;
187+
padding: 12vh;
188+
transition: width 0.1s ease-out 0s, opacity 0.5s ease 0.2s;
189+
}
190+
.search-dialog .dialog {
191+
margin: 0 auto;
192+
max-width: 47.375rem;
193+
min-height: 0;
194+
border-radius: 1rem;
195+
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
196+
}
197+
.search-dialog.open {
198+
display: flex;
199+
}
200+
.search-input {
201+
-webkit-appearance: none;
202+
appearance: none;
203+
background: transparent;
204+
height: 4.5rem;
205+
font-weight: 400;
206+
color: #000;
207+
margin-left: 1rem;
208+
margin-right: 1rem;
209+
flex: auto;
210+
min-width: 0;
211+
font-size: 1.5rem;
212+
border: 0 solid;
213+
}
214+
.search-input::placeholder {
215+
color: rgb(156, 163, 175);
216+
}
217+
.search-input:focus {
218+
outline: 2px dotted transparent;
219+
box-shadow: none;
220+
}
221+
.search-cancel {
222+
flex: none;
223+
font-size: 0;
224+
border-radius: .375rem;
225+
border: 1px solid #d1d5db;
226+
padding: .125rem .375rem;
227+
}
228+
.search-cancel:before {
229+
content: "esc";
230+
color: #9ca3af;
231+
font-size: .875rem;
232+
line-height: 1.25rem;
233+
cursor: pointer;
234+
}
235+
.search-dialog ::-webkit-scrollbar { width:4px; }
236+
.search-dialog ::-webkit-scrollbar-thumb { background-color:rgb(249, 250, 251); }
237+
.group-item[aria-selected=true], .group-item[aria-selected=true] a, .group-item[aria-selected=true] mark {
238+
background-color: #42b983;
239+
box-shadow: inset 0 0 0 2px #42b983;
240+
cursor: pointer;
241+
color: white;
242+
}
243+
.group-item a {
244+
text-decoration: none;
245+
}
246+
.dark mark {
247+
background-color: rgb(30 58 138);
248+
}

‎MyApp/wwwroot/mjs/components/Typesense.mjs

+9-3
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const TypesenseDialog = {
6868
let idx = 0
6969
const groups = {}
7070
const meta = { groups:[], allItems:[] }
71-
//console.log(data)
71+
// console.log(data)
7272

7373
data.grouped_hits.forEach((gh) => {
7474
let groupName = gh.group_key[0]
@@ -79,8 +79,8 @@ const TypesenseDialog = {
7979
let highlight = hit.highlights.length > 0 ? hit.highlights[0] : null
8080
let item = {
8181
id: ++idx,
82-
titleHtml: doc.hierarchy.lvl3 ?? doc.hierarchy.lvl2 ?? doc.hierarchy.lvl1 ?? doc.hierarchy.lvl0,
83-
snippetHtml: highlight?.snippet,
82+
titleHtml: clean(doc.hierarchy.lvl3 ?? doc.hierarchy.lvl2 ?? doc.hierarchy.lvl1 ?? doc.hierarchy.lvl0),
83+
snippetHtml: clean(highlight?.snippet),
8484
// search result type for icon
8585
type: highlight?.field === 'content' ? 'content' : 'heading',
8686
// search results have wrong domain, use relative
@@ -189,6 +189,11 @@ const TypesenseDialog = {
189189
return s && s.replace(/<[^>]*>?/gm, '')
190190
}
191191

192+
/** @param {string} s */
193+
function clean(s) {
194+
return s?.replace(/&ZeroWidthSpace/g,'')
195+
}
196+
192197
return { results, query, selectedIndex, search, onHover, go, onKeyDown }
193198
}
194199
}
@@ -214,6 +219,7 @@ export default {
214219
setup() {
215220
const openSearch = ref(false)
216221
function showSearch() {
222+
console.log('showSearch', openSearch.value, document.querySelector('#docsearch-input'))
217223
openSearch.value = true
218224
nextTick(() => {
219225
/** @@type {HTMLInputElement} */

0 commit comments

Comments
 (0)