Skip to content

Commit e45e96f

Browse files
aspeddroaspeddro
committed
update ui
1 parent fa9ff78 commit e45e96f

File tree

3 files changed

+61
-60
lines changed

3 files changed

+61
-60
lines changed

‎src/bindings/DocSearch.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ type contentType = [
1212

1313
type hierarchy = {
1414
lvl0: string,
15-
lvl1: string,
15+
lvl1: Js.Nullable.t<string>,
1616
lvl2: Js.Nullable.t<string>,
1717
lvl3: Js.Nullable.t<string>,
1818
lvl4: Js.Nullable.t<string>,

‎src/components/Search.res

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,61 @@ external keyboardEventPreventDefault: keyboardEventLike => unit = "preventDefaul
2525

2626
type state = Active | Inactive
2727

28+
let hit = ({hit, children}: DocSearch.hitComponent) => {
29+
let toTitle = str =>
30+
str->Js.String2.charAt(0)->Js.String2.toUpperCase ++ Js.String2.sliceToEnd(str, ~from=1)
31+
32+
let description = switch hit.url
33+
->Js.String2.split("/")
34+
->Js.Array2.sliceFrom(1)
35+
->Belt.List.fromArray {
36+
| list{"blog", ..._} => "Blog"
37+
| list{"docs", doc, version, ...rest} =>
38+
let path = rest->Belt.List.toArray
39+
40+
let info =
41+
path
42+
->Js.Array2.slice(~start=0, ~end_=Js.Array2.length(path) - 1)
43+
->Js.Array2.map(path =>
44+
switch path {
45+
| "api" => "API"
46+
| other => toTitle(other)
47+
}
48+
)
49+
50+
[doc->toTitle, version->toTitle]->Js.Array2.concat(info)->Js.Array2.joinWith(" / ")
51+
| _ => ""
52+
}
53+
54+
<Next.Link href={hit.url} className="flex flex-col w-full">
55+
<span className="text-gray-60 captions px-4 pt-3 pb-1 block">
56+
{description->React.string}
57+
</span>
58+
children
59+
</Next.Link>
60+
}
61+
62+
let transformItems = (items: DocSearch.transformItems) => {
63+
items->Belt.Array.keepMap(item => {
64+
// Transform absolute URL into relative
65+
let url = try Util.Url.make(item.url)->Some catch {
66+
| Js.Exn.Error(obj) =>
67+
Js.Console.error2(`Failed to parse URL ${item.url}`, obj)
68+
None
69+
}
70+
switch url {
71+
| Some({pathname, hash}) =>
72+
let (lvl1, type_) = switch item.hierarchy.lvl1->Js.Nullable.toOption {
73+
| Some(_) => (item.hierarchy.lvl1, item.type_)
74+
| None => (item.hierarchy.lvl0->Js.Nullable.return, #lvl1)
75+
}
76+
let hierarchy = {...item.hierarchy, lvl1}
77+
{...item, url: pathname ++ hash, hierarchy, type_}->Some
78+
| None => None
79+
}
80+
})
81+
}
82+
2883
@react.component
2984
let make = () => {
3085
let (state, setState) = React.useState(_ => Inactive)
@@ -78,62 +133,8 @@ let make = () => {
78133
indexName
79134
onClose
80135
initialScrollY={window->scrollY}
81-
transformItems={items => {
82-
// Js.log(items)
83-
// Transform absolute URL intro relative url
84-
items->Js.Array2.map(item => {
85-
let url = try Util.Url.make(item.url).pathname catch {
86-
| Js.Exn.Error(obj) =>
87-
switch Js.Exn.message(obj) {
88-
| Some(m) =>
89-
Js.Console.error("Failed to constructor URL " ++ m)
90-
item.url
91-
| None => item.url
92-
}
93-
}
94-
95-
let (content, type_) = switch item.content->Js.Nullable.toOption {
96-
| Some(c) => (c->Js.Nullable.return, item.type_)
97-
| None =>
98-
let fallback = item.hierarchy.lvl0
99-
(fallback->Js.Nullable.return, #content)
100-
}
101-
102-
{...item, url, content, type_}
103-
})
104-
}}
105-
hitComponent={({hit, children}) => {
106-
let description = switch hit.url
107-
->Js.String2.split("/")
108-
->Js.Array2.sliceFrom(1)
109-
->Belt.List.fromArray {
110-
| list{"blog", ..._} => "BLOG"
111-
| list{"docs", "manual", version, ...rest} =>
112-
let path = rest->Belt.List.toArray
113-
114-
let info =
115-
path
116-
->Js.Array2.slice(~start=0, ~end_=Js.Array2.length(path) - 1)
117-
->Js.Array2.map(Js.String2.toUpperCase)
118-
119-
let version = if version == "latest" {
120-
"Latest"
121-
} else {
122-
version
123-
}
124-
125-
[version]->Js.Array2.concat(info)->Js.Array2.joinWith(" / ")
126-
| _ => ""
127-
}
128-
// <div className="flex flex-col w-full">
129-
<a href={hit.url} className="flex flex-col w-full">
130-
<span className="text-gray-60 captions px-4 py-2 block">
131-
{description->React.string}
132-
</span>
133-
children
134-
</a>
135-
// </div>
136-
}}
136+
transformItems={transformItems}
137+
hitComponent=hit
137138
/>,
138139
element,
139140
)

‎styles/_docsearch.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120

121121
.DocSearch-Cancel {
122122
font-size: 0;
123-
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.506 6h3.931V4.986H1.736v-1.39h2.488V2.583H1.736V1.196h2.69V.182H.506V6zM8.56 1.855h1.18C9.721.818 8.87.102 7.574.102c-1.276 0-2.21.705-2.205 1.762-.003.858.602 1.35 1.585 1.585l.634.159c.633.153.986.335.988.727-.002.426-.406.716-1.03.716-.64 0-1.1-.295-1.14-.878h-1.19c.03 1.259.931 1.91 2.343 1.91 1.42 0 2.256-.68 2.259-1.745-.003-.969-.733-1.483-1.744-1.71l-.523-.125c-.506-.117-.93-.304-.92-.722 0-.375.332-.65.934-.65.588 0 .949.267.994.724zm7.22.364C15.618.875 14.6.102 13.254.102c-1.537 0-2.71 1.086-2.71 2.989 0 1.898 1.153 2.989 2.71 2.989 1.492 0 2.392-.992 2.526-2.063l-1.244-.006c-.117.623-.606.98-1.262.98-.883 0-1.483-.656-1.483-1.9 0-1.21.591-1.9 1.492-1.9.673 0 1.159.389 1.253 1.028h1.244z' fill='%23334155'/%3E%3C/svg%3E");
123+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.506 6h3.931V4.986H1.736v-1.39h2.488V2.583H1.736V1.196h2.69V.182H.506V6ZM8.56 1.855h1.18C9.721.818 8.87.102 7.574.102c-1.276 0-2.21.705-2.205 1.762-.003.858.602 1.35 1.585 1.585l.634.159c.633.153.986.335.988.727-.002.426-.406.716-1.03.716-.64 0-1.1-.295-1.14-.878h-1.19c.03 1.259.931 1.91 2.343 1.91 1.42 0 2.256-.68 2.259-1.745-.003-.969-.733-1.483-1.744-1.71l-.523-.125c-.506-.117-.93-.304-.92-.722 0-.375.332-.65.934-.65.588 0 .949.267.994.724ZM15.78 2.219C15.618.875 14.6.102 13.254.102c-1.537 0-2.71 1.086-2.71 2.989 0 1.898 1.153 2.989 2.71 2.989 1.492 0 2.392-.992 2.526-2.063l-1.244-.006c-.117.623-.606.98-1.262.98-.883 0-1.483-.656-1.483-1.9 0-1.21.591-1.9 1.492-1.9.673 0 1.159.389 1.253 1.028h1.244Z' fill='%2394a3b8'/%3E%3C/svg%3E") !important;
124124
background-size: 57.1428571429% auto;
125125
@apply w-9 h-7 bg-no-repeat bg-center appearance-none border border-gray-20 rounded;
126126
}
@@ -176,7 +176,7 @@
176176
}
177177

178178
.DocSearch-Hit-source {
179-
@apply top-0 z-100 pt-3 pb-3 text-16 font-semibold bg-white text-gray-80;
179+
@apply top-0 sticky z-100 pt-3 pb-3 text-16 font-semibold bg-white text-gray-80;
180180
}
181181

182182
.DocSearch-Hit--deleting {
@@ -243,7 +243,7 @@ svg.DocSearch-Hit-Select-Icon {
243243
}
244244

245245
.DocSearch-Hit-title {
246-
@apply text-14;
246+
@apply text-14 text-gray-60;
247247
}
248248

249249
.DocSearch-Hit-path {

0 commit comments

Comments
 (0)