dzming.li
A vibe coded tangled fork which supports pijul.
1{{ define "timeline/fragments/preview" }}
2 <div class="flex flex-col gap-4 overflow-hidden">
3 <div class="relative h-80 w-full">
4 <!-- left fade overlay (fixed on left edge) -->
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
7 <!-- right fade overlay (fixed on right edge) -->
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
10 {{ template "marquee" $ }}
11 </div>
12 </div>
13{{ end }}
14
15{{ define "marquee" }}
16 {{ $rowOffsets := list 10 80 150 220 }}
17 {{ $prev := -1 }}
18 {{ $w := mul (len .Timeline) 150 }}
19
20 <div class="absolute h-full flex animate-marquee">
21 <div class="relative h-full flex-shrink-0 bottom-4 border-b border-gray-200 dark:border-gray-700" style="width: {{ $w }}px;">
22 {{ range $i, $e := .Timeline }}
23 {{ $curr := randInt 4 }}
24 {{ if eq $curr $prev }}
25 {{ $curr = mod (add $curr 1) 4 }}
26 {{ end }}
27 {{ $offset := index $rowOffsets $curr }}
28 {{ template "timelineEvent" (list $i $e $offset) }}
29 {{ $prev = $curr }}
30 {{ end }}
31 </div>
32
33 <div
34 class="absolute left-0 bottom-0 h-3 flex-shrink-0 bg-[linear-gradient(to_right,currentColor_1px,transparent_1px)] bg-[length:6px_100%] bg-repeat-x text-gray-400 dark:text-gray-500"
35 style="width: {{ $w }}px;">
36 </div>
37
38 </div>
39{{ end }}
40
41{{ define "timelineEvent" }}
42 {{ $i := index . 0 }}
43 {{ $e := index . 1 }}
44 {{ $variance := randInt 10 }}
45 {{ $offset := add (index . 2) $variance }}
46 {{ $left := mul $i 175 }}
47 {{ 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 >
52 {{ if .Repo }}
53 {{ template "repoEvent" (list $ .) }}
54 {{ else if .RepoStar }}
55 {{ template "starEvent" (list $ .) }}
56 {{ else if .Follow }}
57 {{ template "followEvent" (list $ .) }}
58 {{ end }}
59 </div>
60 {{ end }}
61
62 <!-- vertical connector -->
63 <div
64 class="absolute w-px bg-gray-300 dark:bg-gray-700"
65 style="left: {{ $left }}px; bottom: 0px; height: {{ $offset }}px; z-index: 0;"
66 ></div>
67
68 <!-- dot at the bottom -->
69 <div
70 class="absolute size-2 bg-gray-300 dark:bg-gray-600 rounded-full"
71 style="left: {{ sub $left 3 }}px; bottom: -3px; z-index: 0;">
72 </div>
73{{ end }}
74
75{{ define "repoEvent" }}
76 {{ $root := index . 0 }}
77 {{ $event := index . 1 }}
78 {{ $repo := $event.Repo }}
79 {{ $source := $event.Source }}
80 {{ $userHandle := resolve $repo.Did }}
81 <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm">
82 {{ template "user/fragments/picHandleLink" $repo.Did }}
83 {{ with $source }}
84 {{ $sourceDid := resolve .Did }}
85 forked
86 <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline">
87 {{ $sourceDid }}/{{ .Name }}
88 </a>
89 to
90 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
91 {{ else }}
92 created
93 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">
94 {{ $repo.Name }}
95 </a>
96 {{ end }}
97 </div>
98{{ end }}
99
100{{ define "starEvent" }}
101 {{ $root := index . 0 }}
102 {{ $event := index . 1 }}
103 {{ $star := $event.RepoStar }}
104 {{ with $star }}
105 {{ $starrerHandle := resolve .Did }}
106 {{ $repoOwnerHandle := resolve .Repo.Did }}
107 <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm">
108 {{ template "user/fragments/picHandleLink" $starrerHandle }}
109 starred
110 {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }}
111 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">
112 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }}
113 </a>
114 </div>
115 {{ end }}
116{{ end }}
117
118{{ define "followEvent" }}
119 {{ $root := index . 0 }}
120 {{ $event := index . 1 }}
121 {{ $follow := $event.Follow }}
122 {{ $profile := $event.Profile }}
123 {{ $followStats := $event.FollowStats }}
124 {{ $followStatus := $event.FollowStatus }}
125
126 {{ $userHandle := resolve $follow.UserDid }}
127 {{ $subjectHandle := resolve $follow.SubjectDid }}
128 <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm">
129 {{ template "user/fragments/picHandleLink" $userHandle }}
130 followed
131 {{ template "user/fragments/picHandleLink" $subjectHandle }}
132 </div>
133{{ end }}