Monorepo for Tangled
tangled.org
1{{ define "timeline/fragments/preview" }}
2 <div class="flex flex-col gap-4 overflow-hidden">
3 <div class="relative h-fit md: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 {{ template "marquee-mobile" $ }}
12 </div>
13 </div>
14{{ end }}
15
16{{ define "marquee" }}
17 {{ $rowOffsets := list 10 80 150 220 }}
18 {{ $prev := -1 }}
19 {{ $w := mul (len .Timeline) 150 }}
20
21 <div class="absolute h-full hidden md:flex animate-marquee">
22 <div class="relative h-full flex-shrink-0 bottom-4 border-b border-gray-200 dark:border-gray-700" style="width: {{ $w }}px;">
23 {{ range $i, $e := .Timeline }}
24 {{ $curr := randInt 4 }}
25 {{ if eq $curr $prev }}
26 {{ $curr = mod (add $curr 1) 4 }}
27 {{ end }}
28 {{ $offset := index $rowOffsets $curr }}
29 {{ template "timelineEvent" (list $i $e $offset) }}
30 {{ $prev = $curr }}
31 {{ end }}
32 </div>
33
34 <div
35 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"
36 style="width: {{ $w }}px;">
37 </div>
38
39 </div>
40{{ end }}
41
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 }}
66 {{ $g := index . 1 }}
67 {{ $e := $g.Primary }}
68 {{ with $e }}
69 <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">
70 {{ if .Repo }}
71 {{ template "repoEvent" (list $root $g) }}
72 {{ else if .RepoStar }}
73 {{ template "starEvent" (list $root $g) }}
74 {{ else if .Follow }}
75 {{ template "followEvent" (list $root $g) }}
76 {{ end }}
77 </div>
78 {{ end }}
79{{ end }}
80
81{{ define "timelineEvent" }}
82 {{ $i := index . 0 }}
83 {{ $g := index . 1 }}
84 {{ $e := $g.Primary }}
85 {{ $variance := randInt 10 }}
86 {{ $offset := add (index . 2) $variance }}
87 {{ $left := mul $i 175 }}
88 <div
89 class="absolute left-0"
90 style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;"
91 >
92 {{ template "eventCard" (list $ $g) }}
93 </div>
94
95 <!-- vertical connector -->
96 <div
97 class="absolute w-px bg-gray-300 dark:bg-gray-700"
98 style="left: {{ $left }}px; bottom: 0px; height: {{ $offset }}px; z-index: 0;"
99 ></div>
100
101 <!-- dot at the bottom -->
102 <div
103 class="absolute size-2 bg-gray-300 dark:bg-gray-600 rounded-full"
104 style="left: {{ sub $left 3 }}px; bottom: -3px; z-index: 0;">
105 </div>
106{{ end }}
107
108{{ define "repoEvent" }}
109 {{ $root := index . 0 }}
110 {{ $group := index . 1 }}
111 {{ $event := $group.Primary }}
112 {{ $repo := $event.Repo }}
113 {{ $source := $event.Source }}
114 {{ $userHandle := resolve $repo.Did }}
115 <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">
116 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
117 {{ i "folder-plus" "size-4" }}
118 </div>
119 <div class="px-4 flex items-center gap-2">
120 {{ template "user/fragments/picHandleLink" $repo.Did }}
121 {{ with $source }}
122 {{ $sourceDid := resolve .Did }}
123 forked
124 <a href="/{{ $sourceDid }}/{{ .Slug }}"class="no-underline hover:underline">
125 {{ $sourceDid }}/{{ .Name }}
126 </a>
127 to
128 <a href="/{{ $userHandle }}/{{ $repo.Slug }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
129 {{ else }}
130 created
131 <a href="/{{ $userHandle }}/{{ $repo.Slug }}" class="no-underline hover:underline">
132 {{ $repo.Name }}
133 </a>
134 {{ end }}
135 </div>
136 </div>
137{{ end }}
138
139{{ define "starEvent" }}
140 {{ $root := index . 0 }}
141 {{ $group := index . 1 }}
142 {{ $event := $group.Primary }}
143 {{ $star := $event.RepoStar }}
144 {{ with $star }}
145 {{ $starrerHandle := resolve .Did }}
146 {{ $repoOwnerHandle := resolve .Repo.Did }}
147 <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">
148 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
149 {{ i "star" "size-4" }}
150 </div>
151 <div class="px-4 flex items-center gap-2">
152 {{ template "user/fragments/picHandleLink" $starrerHandle }}
153 {{ if $group.IsCollapsed }}
154 <span class="inline-flex items-center gap-1.5">
155 {{ template "timeline/fragments/othersBadge" $group }}
156 starred
157 </span>
158 {{ else }}
159 starred
160 {{ end }}
161 {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }}
162 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Slug }}" class="no-underline hover:underline">
163 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }}
164 </a>
165 </div>
166 </div>
167 {{ end }}
168{{ end }}
169
170{{ define "followEvent" }}
171 {{ $root := index . 0 }}
172 {{ $group := index . 1 }}
173 {{ $event := $group.Primary }}
174 {{ $follow := $event.Follow }}
175 {{ $profile := $event.Profile }}
176 {{ $followStats := $event.FollowStats }}
177 {{ $followStatus := $event.FollowStatus }}
178
179 {{ $userHandle := resolve $follow.UserDid }}
180 {{ $subjectHandle := resolve $follow.SubjectDid }}
181 <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">
182 <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full">
183 {{ i "user-plus" "size-4" }}
184 </div>
185 <div class="px-4 flex items-center gap-2">
186 {{ template "user/fragments/picHandleLink" $userHandle }}
187 {{ if $group.IsCollapsed }}
188 <span class="inline-flex items-center gap-1.5">
189 {{ template "timeline/fragments/othersBadge" $group }}
190 followed
191 </span>
192 {{ else }}
193 followed
194 {{ end }}
195 {{ template "user/fragments/picHandleLink" $subjectHandle }}
196 </div>
197 </div>
198{{ end }}