Monorepo for Tangled
appview/pages: add mobile version for minitimeline component
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
tangled.org
(Mar 2, 2026, 8:46 AM UTC)
bfc1319e
1e28cac1
+87
-50
+45
-14
appview/pages/templates/timeline/fragments/preview.html
+45
-14
appview/pages/templates/timeline/fragments/preview.html
···
1
1
{{ define "timeline/fragments/preview" }}
2
2
<div class="flex flex-col gap-4 overflow-hidden">
3
-
<div class="relative h-96 w-full">
3
+
<div class="relative h-fit md:h-96 w-full">
4
4
<!-- left fade overlay (fixed on left edge) -->
5
5
<div class="absolute left-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-r from-white to-transparent dark:from-gray-900"></div>
6
6
···
8
8
<div class="absolute right-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-l from-white to-transparent dark:from-gray-900"></div>
9
9
10
10
{{ template "marquee" $ }}
11
+
{{ template "marquee-mobile" $ }}
11
12
</div>
12
13
</div>
13
14
{{ end }}
···
17
18
{{ $prev := -1 }}
18
19
{{ $w := mul (len .Timeline) 150 }}
19
20
20
-
<div class="absolute h-full flex animate-marquee">
21
+
<div class="absolute h-full hidden md:flex animate-marquee">
21
22
<div class="relative h-full flex-shrink-0 bottom-4 border-b border-gray-200 dark:border-gray-700" style="width: {{ $w }}px;">
22
23
{{ range $i, $e := .Timeline }}
23
24
{{ $curr := randInt 4 }}
···
38
39
</div>
39
40
{{ end }}
40
41
41
-
{{ define "timelineEvent" }}
42
-
{{ $i := index . 0 }}
42
+
{{ define "marquee-mobile" }}
43
+
<div class="flex md:hidden flex-col gap-4 my-auto">
44
+
{{ range $rowIndex := list 0 1 2 3 }}
45
+
{{ $offset := mul (add $rowIndex 2) 10 }}
46
+
{{ if eq (mod $rowIndex 2) 0 }}
47
+
{{ $offset = mul $offset -1 }}
48
+
{{ end }}
49
+
<div class="flex gap-4 overflow-hidden" style="padding-left: {{ $offset }}px; ">
50
+
<div class="flex gap-4 animate-marquee">
51
+
{{ range $i, $e := $.Timeline }}
52
+
{{ if eq (mod $i 4) $rowIndex }}
53
+
<div class="flex-shrink-0">
54
+
{{ template "eventCard" (list $ $e) }}
55
+
</div>
56
+
{{ end }}
57
+
{{ end }}
58
+
</div>
59
+
</div>
60
+
{{ end }}
61
+
</div>
62
+
{{ end }}
63
+
64
+
{{ define "eventCard" }}
65
+
{{ $root := index . 0 }}
43
66
{{ $e := index . 1 }}
44
-
{{ $variance := randInt 10 }}
45
-
{{ $offset := add (index . 2) $variance }}
46
-
{{ $left := mul $i 175 }}
47
67
{{ with $e }}
48
-
<div
49
-
class="absolute left-0 flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm"
50
-
style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;"
51
-
>
68
+
<div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm">
52
69
{{ if .Repo }}
53
-
{{ template "repoEvent" (list $ .) }}
70
+
{{ template "repoEvent" (list $root .) }}
54
71
{{ else if .RepoStar }}
55
-
{{ template "starEvent" (list $ .) }}
72
+
{{ template "starEvent" (list $root .) }}
56
73
{{ else if .Follow }}
57
-
{{ template "followEvent" (list $ .) }}
74
+
{{ template "followEvent" (list $root .) }}
58
75
{{ end }}
59
76
</div>
60
77
{{ end }}
78
+
{{ end }}
79
+
80
+
{{ define "timelineEvent" }}
81
+
{{ $i := index . 0 }}
82
+
{{ $e := index . 1 }}
83
+
{{ $variance := randInt 10 }}
84
+
{{ $offset := add (index . 2) $variance }}
85
+
{{ $left := mul $i 175 }}
86
+
<div
87
+
class="absolute left-0"
88
+
style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;"
89
+
>
90
+
{{ template "eventCard" (list $ $e) }}
91
+
</div>
61
92
62
93
<!-- vertical connector -->
63
94
<div
+42
-31
appview/pages/templates/timeline/home.html
+42
-31
appview/pages/templates/timeline/home.html
···
81
81
{{ $labelStyle := "normal-case cursor-pointer w-auto md:w-full p-4 md:px-6 rounded bg-white dark:bg-gray-800 font-medium text-base md:text-lg opacity-50 border border-gray-200 dark:border-gray-700 relative overflow-hidden" }}
82
82
{{ $spanStyle := "z-10 items-center justify-between gap-2 w-full" }}
83
83
{{ $connectorStyle := "w-0.5 h-6 bg-gray-300 dark:bg-gray-600 opacity-0 mx-auto" }}
84
-
{{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm p-6 md:p-8 border border-gray-200 dark:border-gray-700 grid-cols-1 animate-fadein" }}
84
+
{{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 grid-cols-1 animate-fadein" }}
85
85
{{ $progressOverlayStyle := "absolute inset-0 bg-gray-600/10 dark:bg-gray-100/10 w-0 transition-none" }}
86
86
87
87
<style>
···
139
139
<div class="{{ $connectorStyle }} peer-checked/spindles:opacity-100"></div>
140
140
141
141
{{ $titleStyle := "text-2xl md:text-6xl my-2 md:mb-4 text-black dark:text-white font-medium" }}
142
-
{{ $textContentStyle := "pb-6 md:text-xl" }}
143
-
{{ $imgContentStyle := "w-full min-h-96 min-h-[400px] md:min-h-[500px] rounded overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700" }}
142
+
{{ $textContentStyle := "p-4 md:p-6 md:text-xl" }}
143
+
{{ $imgContentStyle := "w-full overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border-t border-gray-200 dark:border-gray-700" }}
144
144
{{ $linkDesktopStyle := "hover:no-underline items-center gap-2 p-3 text-base btn" }}
145
145
146
146
<div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid relative">
···
158
158
</a>
159
159
</section>
160
160
<div class="w-fit hidden md:flex items-center">
161
-
<div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" >
162
-
{{ i "wand-sparkles" "size-16 text-green-500 dark:text-green-500" }}
161
+
<div class="size-32 rounded-full flex items-center justify-center bg-yellow-100 dark:bg-yellow-900 -mr-4" >
162
+
{{ i "wand-sparkles" "size-16 text-yellow-500 dark:text-yellow-500" }}
163
163
</div>
164
-
<div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10">
165
-
{{ i "git-pull-request" "size-24 text-indigo-500 dark:text-indigo-500 rotate-12" }}
164
+
<div class="size-40 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 z-10">
165
+
{{ i "git-pull-request-arrow" "size-24 text-green-500 dark:text-green-500 rotate-12" }}
166
166
</div>
167
167
</div>
168
168
</div>
169
-
<div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden">
170
-
<div class="w-full h-full relative overflow-hidden">
171
-
<img src="https://assets.tangled.network/home-page-prs.png" class="h-full w-[200%] md:w-full object-cover object-left" />
169
+
<div class="{{ $imgContentStyle }} relative overflow-hidden flex items-center">
170
+
<div class="w-full md:w-full flex justify-center">
171
+
<img src="https://assets.tangled.network/home-page-prs.svg" class="w-[120%] md:w-full" />
172
172
</div>
173
173
</div>
174
174
<a href="https://blog.tangled.org/stacking" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn">
···
177
177
</a>
178
178
</div>
179
179
180
-
<div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid">
180
+
<div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid relative">
181
181
<div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8">
182
182
<section class="space-y-4">
183
183
<h1 class="{{ $titleStyle }}">Run it at home</h1>
184
184
<p class="text-gray-600 dark:text-gray-400">
185
185
Host your repositories on your own infrastructure with <a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="no-underline">knots</a>.
186
-
Run CI on your own machines with <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="no-underline">spindles</a>.
186
+
Run CI on your own machines with <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="no-underline">spindles</a>.
187
187
<br>
188
188
Don't want to self-host? All are welcome on our hosted instances.
189
189
</p>
190
+
<a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium">
191
+
Learn more
192
+
{{ i "arrow-right" "size-4" }}
193
+
</a>
190
194
</section>
191
195
<div class="w-fit hidden md:flex items-center">
192
-
<div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" >
193
-
{{ i "workflow" "size-16 text-green-500 dark:text-green-500" }}
196
+
<div class="size-32 rounded-full flex items-center justify-center bg-blue-100 dark:bg-blue-900 -mr-4" >
197
+
{{ i "workflow" "size-16 text-blue-500 dark:text-blue-500" }}
194
198
</div>
195
-
<div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10">
196
-
{{ i "server" "size-24 text-indigo-500 dark:text-indigo-500" }}
199
+
<div class="size-40 rounded-full flex items-center justify-center bg-yellow-100 dark:bg-yellow-900 z-10">
200
+
{{ i "server" "size-24 text-yellow-500 dark:text-yellow-500" }}
197
201
</div>
198
202
</div>
199
203
</div>
200
-
<div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden">
201
-
<div class="w-full h-full relative overflow-hidden">
202
-
<img src="https://assets.tangled.network/home-page-self-host.png" class="h-full w-[200%] md:w-full object-cover object-center" />
204
+
<div class="{{ $imgContentStyle }} relative overflow-hidden flex items-center">
205
+
<div class="w-full md:w-full flex justify-center">
206
+
<img src="https://assets.tangled.network/home-page-self-host.svg" class="w-[120%] md:w-full" />
203
207
</div>
204
208
</div>
209
+
<a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn">
210
+
Learn more
211
+
{{ i "arrow-right" "size-4" }}
212
+
</a>
205
213
</div>
206
214
207
-
<div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid">
215
+
<div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid relative">
208
216
<div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8">
209
217
<section class="space-y-4">
210
218
<h1 class="{{ $titleStyle }}">Nix-powered CI</h1>
···
216
224
<br>
217
225
Support for Docker and MicroVM based runners coming soon!
218
226
</p>
227
+
<a href="https://docs.tangled.org/spindles.html#pipelines" class="hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium">
228
+
Learn more
229
+
{{ i "arrow-right" "size-4" }}
230
+
</a>
219
231
</section>
220
232
<div class="w-fit hidden md:flex items-center">
221
233
<div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" >
···
227
239
</div>
228
240
</div>
229
241
<div class="{{ $imgContentStyle }} flex items-end pb-0 overflow-hidden">
230
-
<div class="w-full h-full relative overflow-hidden">
231
-
<img src="https://assets.tangled.network/home-page-ci.png" class="h-full w-[200%] md:w-full object-cover object-left md:object-center" />
242
+
<div class="w-full md:w-full flex justify-center">
243
+
<img src="https://assets.tangled.network/home-page-ci.svg" class="w-[120%] md:w-full" />
232
244
</div>
233
245
</div>
246
+
<a href="https://docs.tangled.org/spindles.html#pipelines" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn">
247
+
Learn more
248
+
{{ i "arrow-right" "size-4" }}
249
+
</a>
234
250
</div>
235
251
</div>
236
252
···
328
344
<div class="{{ $cardInnerStyle }}">
329
345
{{ $moreLink := "https://tangled.org/core" }}
330
346
<div class="{{ $contentStyle }}">
331
-
<h3 class="{{ $titleStyle }}">Free and Open-source</h3>
347
+
<h3 class="{{ $titleStyle }}">Free and open source</h3>
332
348
<p class="{{ $descriptionStyle }}">
333
-
All of Tangled is open-source and built in the open!
334
-
Check out the <a class="underline" href="https://tangled.org/core">monorepo</a> and join in on the fun.
349
+
All of Tangled is open source and built with the community!
350
+
Check out the <a href="https://tangled.org/core">monorepo</a> and join in on the fun.
335
351
<br>
336
352
<br>
337
353
We welcome contributions however big or small. You can start contributing by picking up a
338
-
<a class="underline" href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>.
354
+
<a href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>.
339
355
</p>
340
356
<a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}">
341
357
View source
···
364
380
<h3 class="{{ $titleStyle }}">Social coding is back</h3>
365
381
<p class="{{ $descriptionStyle }}">
366
382
Discover trending projects, follow your friends and star your favourite repositories. Coding is better together!
367
-
<br>
368
-
<br>
369
-
You can use one account for all of the atmosphere. If you have
370
-
friends on Bluesky, you will find them on Tangled with the same
371
-
handle.
372
383
</p>
373
384
<a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}">
374
385
Explore timeline
-5
appview/pages/templates/timeline/timeline.html
-5
appview/pages/templates/timeline/timeline.html
···
8
8
{{ end }}
9
9
10
10
{{ define "content" }}
11
-
{{ if .LoggedInUser }}
12
-
{{ else }}
13
-
{{ template "timeline/fragments/hero" . }}
14
-
{{ end }}
15
-
16
11
{{ template "timeline/fragments/goodfirstissues" . }}
17
12
{{ template "timeline/fragments/trending" . }}
18
13
{{ template "timeline/fragments/timeline" . }}