Monorepo for Tangled
tangled.org
appview/pages: add search page
Signed-off-by: oppiliappan <me@oppi.li>
+176
+176
appview/pages/templates/search/search.html
+176
appview/pages/templates/search/search.html
···
1
+
{{ define "title" }}Search{{ end }}
2
+
3
+
{{ define "content" }}
4
+
<h1 class="text-2xl font-bold mb-4 px-2">Search</h1>
5
+
6
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 px-2">
7
+
<div class="col-span-1 md:col-span-3 space-y-4">
8
+
{{ template "searchBar" . }}
9
+
{{ template "searchResults" . }}
10
+
</div>
11
+
12
+
<div class="col-span-1 md:sticky md:top-2 md:self-start hidden md:block">
13
+
{{ template "searchOptionsPanel" . }}
14
+
</div>
15
+
</div>
16
+
{{ end }}
17
+
18
+
{{ define "searchBar" }}
19
+
<form id="search-form" method="GET" class="flex items-center gap-2">
20
+
<div class="flex relative w-full">
21
+
<div class="flex-1 flex relative">
22
+
<input
23
+
id="search-q"
24
+
class="flex-1 py-1 pl-2 pr-10 mr-[-1px] rounded-r-none peer"
25
+
type="text"
26
+
name="q"
27
+
value="{{ .FilterQuery }}"
28
+
placeholder="search repos..."
29
+
>
30
+
<a
31
+
href="/search"
32
+
class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 {{ if not .FilterQuery }}hidden{{ end }} peer-[:not(:placeholder-shown)]:block"
33
+
>
34
+
{{ i "x" "w-4 h-4" }}
35
+
</a>
36
+
</div>
37
+
<button
38
+
type="submit"
39
+
class="p-2 text-gray-400 border rounded-r border-gray-300 dark:border-gray-600"
40
+
>
41
+
{{ i "search" "w-4 h-4" }}
42
+
</button>
43
+
</div>
44
+
<div class="md:hidden">
45
+
{{ template "sortOptionsList" . }}
46
+
</div>
47
+
</form>
48
+
49
+
<div class="md:hidden mt-3">
50
+
<div class="flex gap-2 overflow-x-auto scrollbar-hide pb-2">
51
+
{{ template "languageFilters" . }}
52
+
</div>
53
+
</div>
54
+
{{ end }}
55
+
56
+
{{ define "searchResults" }}
57
+
<div id="repos" class="grid grid-cols-1 gap-4 mb-6">
58
+
{{ range .Repos }}
59
+
<div class="border border-gray-200 dark:border-gray-700 rounded-sm">
60
+
{{ template "user/fragments/repoCard" (list $ . true) }}
61
+
</div>
62
+
{{ else }}
63
+
<div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
64
+
<span>No repos found.</span>
65
+
</div>
66
+
{{ end }}
67
+
</div>
68
+
69
+
<div class="md:hidden mb-4">
70
+
{{ template "searchStatistics" . }}
71
+
</div>
72
+
73
+
{{if gt .ResultCount .Page.Limit }}
74
+
{{ template "fragments/pagination" (dict
75
+
"Page" .Page
76
+
"TotalCount" .ResultCount
77
+
"BasePath" "search"
78
+
"QueryParams" (queryParams "q" .FilterQuery "sort" .SortParam)
79
+
) }}
80
+
{{ end }}
81
+
{{ end }}
82
+
83
+
{{ define "searchOptionsPanel" }}
84
+
<div class="flex flex-col gap-6 px-2 md:px-0">
85
+
<div>
86
+
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
87
+
Sort by
88
+
</h3>
89
+
{{ template "sortOptionsList" . }}
90
+
</div>
91
+
92
+
<div>
93
+
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
94
+
Languages
95
+
</h3>
96
+
{{ template "languageFilters" . }}
97
+
</div>
98
+
99
+
{{ template "searchStatistics" . }}
100
+
</div>
101
+
{{ end }}
102
+
103
+
{{ define "sortOptionsList" }}
104
+
{{ $currentQuery := .FilterQuery }}
105
+
<select
106
+
name="sort"
107
+
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 dark:text-white text-sm"
108
+
onchange="window.location.href='/search?q={{ .FilterQuery }}&sort=' + this.value"
109
+
>
110
+
{{ $currentSort := .SortParam }}
111
+
{{ if eq $currentSort "" }}
112
+
{{ $currentSort = "relevance" }}
113
+
{{ end }}
114
+
115
+
{{ $options := list
116
+
(dict "value" "relevance" "name" "Relevance")
117
+
(dict "value" "created-desc" "name" "Newest")
118
+
(dict "value" "created-asc" "name" "Oldest")
119
+
(dict "value" "stars-desc" "name" "Most Stars")
120
+
(dict "value" "stars-asc" "name" "Fewest Stars")
121
+
(dict "value" "issues-desc" "name" "Most Issues")
122
+
(dict "value" "issues-asc" "name" "Fewest Issues")
123
+
(dict "value" "pulls-desc" "name" "Most Pulls")
124
+
(dict "value" "pulls-asc" "name" "Fewest Pulls")
125
+
}}
126
+
127
+
{{ range $options }}
128
+
<option value="{{ .value }}" {{ if eq $currentSort .value }}selected{{ end }}>
129
+
{{ .name }}
130
+
</option>
131
+
{{ end }}
132
+
</select>
133
+
{{ end }}
134
+
135
+
{{ define "languageFilters" }}
136
+
{{ $commonLanguages := list "Go" "JavaScript" "TypeScript" "Python" "Rust" "OCaml" "Haskell" "C" "C++" "Ruby" "Swift" }}
137
+
138
+
<div class="flex gap-2 md:flex-wrap">
139
+
{{ range $commonLanguages }}
140
+
{{ $lang := . }}
141
+
{{ template "languageFilterChip" (dict "Language" $lang "CurrentQuery" $.FilterQuery) }}
142
+
{{ end }}
143
+
</div>
144
+
145
+
<p class="hidden md:block text-gray-500 dark:text-gray-400 text-xs mt-3">
146
+
Click a language to filter results. You can also filter by language by
147
+
adding <code class="px-1 py-0.5 bg-gray-100 dark:bg-gray-700 rounded
148
+
text-xs">language:name</code> to the search bar.
149
+
</p>
150
+
{{ end }}
151
+
152
+
{{ define "languageFilterChip" }}
153
+
{{ $lang := .Language }}
154
+
{{ $currentQuery := .CurrentQuery }}
155
+
{{ $langColor := langColor $lang }}
156
+
{{ $newQuery := queryParams "q" (printf "language:%s %s" $lang $currentQuery) }}
157
+
158
+
<a
159
+
href="/search?{{ safeUrl $newQuery.Encode }}"
160
+
class="w-fit flex items-center flex-shrink-0 gap-2 font-normal
161
+
normal-case rounded py-1 px-2 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm
162
+
hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors no-underline hover:no-underline">
163
+
{{ template "repo/fragments/colorBall" (dict "color" $langColor) }}
164
+
<span>{{ $lang }}</span>
165
+
</a>
166
+
{{ end }}
167
+
168
+
{{ define "searchStatistics" }}
169
+
{{ if gt .ResultCount 0 }}
170
+
<div class="text-xs text-gray-600 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 py-2">
171
+
Returned {{ .ResultCount }} of {{ .DocCount }} repos in {{ .TimeTaken }}
172
+
</div>
173
+
{{ end }}
174
+
{{ end }}
175
+
176
+