kot.pink
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="see what's tangling" />
8{{ end }}
9
10{{ define "topbar" }}
11 {{ with .LoggedInUser }}
12 {{ template "layouts/topbar" $ }}
13 {{ else }}
14 {{ end }}
15{{ end }}
16
17{{ define "content" }}
18 {{ with .LoggedInUser }}
19 {{ block "timeline" $ }}{{ end }}
20 {{ else }}
21 {{ block "hero" $ }}{{ end }}
22 {{ block "timeline" $ }}{{ end }}
23 {{ end }}
24{{ end }}
25
26{{ define "hero" }}
27 <div
28 class="flex flex-col items-center justify-center text-center rounded drop-shadow bg-white dark:bg-gray-800 text-black dark:text-white py-4 px-10"
29 >
30 <div class="font-bold italic text-4xl mb-4">tangled</div>
31 <div class="italic text-lg">
32 tightly-knit social coding,
33 <a href="/login" class="underline inline-flex gap-1 items-center"
34 >join now {{ i "arrow-right" "w-4 h-4" }}</a
35 >
36 <p class="pt-5 px-10 text-sm text-gray-500 dark:text-gray-400">
37 Join our <a href="https://chat.tangled.sh">Discord</a> or IRC
38 channel:
39 <a href="https://web.libera.chat/#tangled"
40 ><code>#tangled</code> on Libera Chat</a
41 >. Read an introduction to Tangled
42 <a href="https://blog.tangled.sh/intro">here</a>.
43 </p>
44 </div>
45 </div>
46{{ end }}
47
48{{ define "timeline" }}
49 <div>
50 <div class="p-6">
51 <p class="text-xl font-bold dark:text-white">Timeline</p>
52 </div>
53
54 <div class="flex flex-col gap-3 relative">
55 <div
56 class="absolute left-8 top-0 bottom-0 w-px bg-gray-300 dark:bg-gray-600"
57 ></div>
58 {{ range .Timeline }}
59 <div
60 class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit"
61 >
62 {{ if .Repo }}
63 {{ $userHandle := index $.DidHandleMap .Repo.Did }}
64 <div class="flex items-center">
65 <p class="text-gray-600 dark:text-gray-300">
66 <a
67 href="/{{ $userHandle }}"
68 class="no-underline hover:underline"
69 >{{ $userHandle | truncateAt30 }}</a
70 >
71 {{ if .Source }}
72 forked
73 <a
74 href="/{{ index $.DidHandleMap .Source.Did }}/{{ .Source.Name }}"
75 class="no-underline hover:underline"
76 >
77 {{ index $.DidHandleMap .Source.Did }}/{{ .Source.Name }}
78 </a>
79 to
80 <a
81 href="/{{ $userHandle }}/{{ .Repo.Name }}"
82 class="no-underline hover:underline"
83 >{{ .Repo.Name }}</a
84 >
85 {{ else }}
86 created
87 <a
88 href="/{{ $userHandle }}/{{ .Repo.Name }}"
89 class="no-underline hover:underline"
90 >{{ .Repo.Name }}</a
91 >
92 {{ end }}
93 <time
94 class="text-gray-700 dark:text-gray-400 text-xs"
95 >{{ .Repo.Created | timeFmt }}</time
96 >
97 </p>
98 </div>
99 {{ else if .Follow }}
100 {{ $userHandle := index $.DidHandleMap .Follow.UserDid }}
101 {{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}
102 <div class="flex items-center">
103 <p class="text-gray-600 dark:text-gray-300">
104 <a
105 href="/{{ $userHandle }}"
106 class="no-underline hover:underline"
107 >{{ $userHandle | truncateAt30 }}</a
108 >
109 followed
110 <a
111 href="/{{ $subjectHandle }}"
112 class="no-underline hover:underline"
113 >{{ $subjectHandle | truncateAt30 }}</a
114 >
115 <time
116 class="text-gray-700 dark:text-gray-400 text-xs"
117 >{{ .Follow.FollowedAt | timeFmt }}</time
118 >
119 </p>
120 </div>
121 {{ else if .Star }}
122 {{ $starrerHandle := index $.DidHandleMap .Star.StarredByDid }}
123 {{ $repoOwnerHandle := index $.DidHandleMap .Star.Repo.Did }}
124 <div class="flex items-center">
125 <p class="text-gray-600 dark:text-gray-300">
126 <a
127 href="/{{ $starrerHandle }}"
128 class="no-underline hover:underline"
129 >{{ $starrerHandle | truncateAt30 }}</a
130 >
131 starred
132 <a
133 href="/{{ $repoOwnerHandle }}/{{ .Star.Repo.Name }}"
134 class="no-underline hover:underline"
135 >{{ $repoOwnerHandle | truncateAt30 }}/{{ .Star.Repo.Name }}</a
136 >
137 <time
138 class="text-gray-700 dark:text-gray-400 text-xs"
139 >{{ .Star.Created | timeFmt }}</time
140 >
141 </p>
142 </div>
143 {{ end }}
144 </div>
145 {{ end }}
146 </div>
147 </div>
148{{ end }}