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-96 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="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm">
82 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
83 {{ i "folder-plus" "size-4" }}
84 </div>
85 <div class="px-4 flex items-center gap-2">
86 {{ template "user/fragments/picHandleLink" $repo.Did }}
87 {{ with $source }}
88 {{ $sourceDid := resolve .Did }}
89 forked
90 <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline">
91 {{ $sourceDid }}/{{ .Name }}
92 </a>
93 to
94 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
95 {{ else }}
96 created
97 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">
98 {{ $repo.Name }}
99 </a>
100 {{ end }}
101 </div>
102 </div>
103{{ end }}
104
105{{ define "starEvent" }}
106 {{ $root := index . 0 }}
107 {{ $event := index . 1 }}
108 {{ $star := $event.RepoStar }}
109 {{ with $star }}
110 {{ $starrerHandle := resolve .Did }}
111 {{ $repoOwnerHandle := resolve .Repo.Did }}
112 <div class="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm">
113 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
114 {{ i "star" "size-4" }}
115 </div>
116 <div class="px-4 flex items-center gap-2">
117 {{ template "user/fragments/picHandleLink" $starrerHandle }}
118 starred
119 {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }}
120 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">
121 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }}
122 </a>
123 </div>
124 </div>
125 {{ end }}
126{{ end }}
127
128{{ define "followEvent" }}
129 {{ $root := index . 0 }}
130 {{ $event := index . 1 }}
131 {{ $follow := $event.Follow }}
132 {{ $profile := $event.Profile }}
133 {{ $followStats := $event.FollowStats }}
134 {{ $followStatus := $event.FollowStatus }}
135
136 {{ $userHandle := resolve $follow.UserDid }}
137 {{ $subjectHandle := resolve $follow.SubjectDid }}
138 <div class="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm">
139 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
140 {{ i "user-plus" "size-4" }}
141 </div>
142 <div class="px-4 flex items-center gap-2">
143 {{ template "user/fragments/picHandleLink" $userHandle }}
144 followed
145 {{ template "user/fragments/picHandleLink" $subjectHandle }}
146 </div>
147 </div>
148{{ end }}