this repo has no description
tangled.org
1{{ define "title" }}timeline{{ end }}
2
3{{ define "extrameta" }}
4 <meta property="og:title" content="timeline · tangled" />
5 <meta property="og:type" content="object" />
6 <meta property="og:url" content="https://tangled.sh" />
7 <meta property="og:description" content="tightly-knit social coding" />
8{{ end }}
9
10
11
12
13{{ define "content" }}
14 {{ with .LoggedInUser }}
15 {{ block "trending" . }}{{ end }}
16 {{ block "timeline" $ }}{{ end }}
17 {{ else }}
18 {{ block "hero" $ }}{{ end }}
19 {{ block "trending" . }}{{ end }}
20 {{ block "timeline" $ }}{{ end }}
21 {{ end }}
22{{ end }}
23
24{{ define "trending" }}
25
26 <div
27 hx-get="/timeline/trending"
28 hx-trigger="load"
29 hx-indicator="#starred-loading"
30 >
31 <!-- Loading spinner -->
32 <div id="starred-loading" class="htmx-indicator">
33 <div class="p-6">
34 <h3 class="font-bold text-xl text-gray-900 dark:text-white flex items-center gap-2 mb-3">
35 Trending
36 {{ i "trending-up" "size-4 flex-shrink-0" }}
37 </h3>
38 </div>
39 <div class="flex items-center justify-center py-8">
40 <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
41 <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Loading...</span>
42 </div>
43 </div>
44 </div>
45{{ end }}
46
47{{ define "hero" }}
48 <div class="flex flex-col text-black dark:text-white p-6 gap-6 max-w-xl">
49 <div class="font-bold text-4xl">tightly-knit<br>social coding.</div>
50
51 <p class="text-lg">
52 tangled is new social-enabled git collaboration platform built on <a class="underline" href="https://atproto.com/">atproto</a>.
53 </p>
54 <p class="text-lg">
55 we envision a place where developers have complete ownership of their
56 code, open source communities can freely self-govern and most
57 importantly, coding can be social and fun again.
58 </p>
59
60 <div class="flex gap-6 items-center">
61 <a href="/signup" class="no-underline hover:no-underline ">
62 <button class="btn-create flex gap-2 px-4 items-center">
63 join now {{ i "arrow-right" "size-4" }}
64 </button>
65 </a>
66 </div>
67 </div>
68{{ end }}
69
70{{ define "timeline" }}
71 <div>
72 <div class="p-6">
73 <p class="text-xl font-bold dark:text-white">Timeline</p>
74 </div>
75
76 <div class="flex flex-col gap-4">
77 {{ range $i, $e := .Timeline }}
78 <div class="relative">
79 {{ if ne $i 0 }}
80 <div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
81 {{ end }}
82 {{ with $e }}
83 <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm">
84 {{ if .Repo }}
85 {{ block "repoEvent" (list $ .Repo .Source) }} {{ end }}
86 {{ else if .Star }}
87 {{ block "starEvent" (list $ .Star) }} {{ end }}
88 {{ else if .Follow }}
89 {{ block "followEvent" (list $ .Follow .Profile .FollowStats) }} {{ end }}
90 {{ end }}
91 </div>
92 {{ end }}
93 </div>
94 {{ end }}
95 </div>
96 </div>
97{{ end }}
98
99{{ define "repoEvent" }}
100 {{ $root := index . 0 }}
101 {{ $repo := index . 1 }}
102 {{ $source := index . 2 }}
103 {{ $userHandle := resolve $repo.Did }}
104 <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
105 {{ template "user/fragments/picHandleLink" $repo.Did }}
106 {{ with $source }}
107 {{ $sourceDid := resolve .Did }}
108 forked
109 <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline">
110 {{ $sourceDid }}/{{ .Name }}
111 </a>
112 to
113 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
114 {{ else }}
115 created
116 <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">
117 {{ $repo.Name }}
118 </a>
119 {{ end }}
120 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $repo.Created }}</span>
121 </div>
122 {{ with $repo }}
123 {{ template "user/fragments/repoCard" (list $root . true) }}
124 {{ end }}
125{{ end }}
126
127{{ define "starEvent" }}
128 {{ $root := index . 0 }}
129 {{ $star := index . 1 }}
130 {{ with $star }}
131 {{ $starrerHandle := resolve .StarredByDid }}
132 {{ $repoOwnerHandle := resolve .Repo.Did }}
133 <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
134 {{ template "user/fragments/picHandleLink" $starrerHandle }}
135 starred
136 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">
137 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }}
138 </a>
139 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" .Created }}</span>
140 </div>
141 {{ with .Repo }}
142 {{ template "user/fragments/repoCard" (list $root . true) }}
143 {{ end }}
144 {{ end }}
145{{ end }}
146
147
148{{ define "followEvent" }}
149 {{ $root := index . 0 }}
150 {{ $follow := index . 1 }}
151 {{ $profile := index . 2 }}
152 {{ $stat := index . 3 }}
153
154 {{ $userHandle := resolve $follow.UserDid }}
155 {{ $subjectHandle := resolve $follow.SubjectDid }}
156 <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
157 {{ template "user/fragments/picHandleLink" $userHandle }}
158 followed
159 {{ template "user/fragments/picHandleLink" $subjectHandle }}
160 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span>
161 </div>
162 <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">
163 <div class="flex-shrink-0 max-h-full w-24 h-24">
164 <img class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
165 </div>
166
167 <div class="flex-1 min-h-0 justify-around flex flex-col">
168 <a href="/{{ $subjectHandle }}">
169 <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span>
170 </a>
171 {{ with $profile }}
172 {{ with .Description }}
173 <p class="text-sm pb-2 md:pb-2">{{.}}</p>
174 {{ end }}
175 {{ end }}
176 {{ with $stat }}
177 <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
178 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
179 <span id="followers">{{ .Followers }} followers</span>
180 <span class="select-none after:content-['·']"></span>
181 <span id="following">{{ .Following }} following</span>
182 </div>
183 {{ end }}
184 </div>
185 </div>
186{{ end }}