lewis.moe
Monorepo for Tangled
1{{ define "user/fragments/profileCard" }}
2{{ $userIdent := resolve .UserDid }}
3<div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center">
4 <div id="avatar" class="col-span-1 flex justify-center items-center">
5 <div class="w-3/4 aspect-square relative">
6 <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ fullAvatar .UserDid }}" />
7 </div>
8 </div>
9 <div class="col-span-2">
10 <div class="flex items-center flex-row flex-nowrap gap-2">
11 <p title="{{ $userIdent }}"
12 class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
13 {{ $userIdent }}
14 </p>
15 {{ with .Profile }}
16 {{ if .Pronouns }}
17 <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
18 {{ end }}
19 {{ end }}
20 </div>
21
22 <div class="md:hidden">
23 {{ block "followerFollowing" (list . $userIdent) }} {{ end }}
24 </div>
25 </div>
26 <div class="col-span-3 md:col-span-full">
27 <div id="profile-bio" class="text-sm">
28 {{ $profile := .Profile }}
29 {{ with .Profile }}
30
31 {{ if .Description }}
32 <p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
33 {{ end }}
34
35 <div class="hidden md:block">
36 {{ block "followerFollowing" (list $ $userIdent) }} {{ end }}
37 </div>
38
39 <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
40 {{ if .Location }}
41 <div class="flex items-center gap-2">
42 <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span>
43 <span>{{ .Location }}</span>
44 </div>
45 {{ end }}
46 {{ if .IncludeBluesky }}
47 <div class="flex items-center gap-2">
48 <span class="flex-shrink-0">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white"
49 }}</span>
50 <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</a>
51 </div>
52 {{ end }}
53 {{ range $link := .Links }}
54 {{ if $link }}
55 <div class="flex items-center gap-2">
56 <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
57 <a href="{{ $link }}">{{ $link }}</a>
58 </div>
59 {{ end }}
60 {{ end }}
61 {{ if not $profile.IsStatsEmpty }}
62 <div class="flex items-center justify-evenly gap-2 py-2">
63 {{ range $stat := .Stats }}
64 {{ if $stat.Kind }}
65 <div class="flex flex-col items-center gap-2">
66 <span class="text-xl font-bold">{{ $stat.Value }}</span>
67 <span>{{ $stat.Kind.String }}</span>
68 </div>
69 {{ end }}
70 {{ end }}
71 </div>
72 {{ end }}
73 </div>
74 {{ end }}
75
76 <div class="flex mt-2 items-center gap-2">
77 {{ if ne .FollowStatus.String "IsSelf" }}
78 {{ template "user/fragments/follow" . }}
79 {{ else }}
80 <button id="editBtn" class="btn w-full flex items-center gap-2 group" hx-target="#profile-bio"
81 hx-get="/profile/edit-bio" hx-swap="innerHTML">
82 {{ i "pencil" "w-4 h-4" }}
83 edit
84 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
85 </button>
86 {{ end }}
87
88 <a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
89 href="/{{ $userIdent }}/feed.atom">
90 {{ i "rss" "size-4" }}
91 </a>
92 </div>
93
94 </div>
95 <div id="update-profile" class="text-red-400 dark:text-red-500"></div>
96 </div>
97</div>
98{{ end }}
99
100{{ define "followerFollowing" }}
101{{ $root := index . 0 }}
102{{ $userIdent := index . 1 }}
103{{ with $root }}
104<div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
105 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
106 <span id="followers" data-followers-did="{{ .UserDid }}"><a href="/{{ $userIdent }}?tab=followers">{{
107 .Stats.FollowersCount }} followers</a></span>
108 <span class="select-none after:content-['·']"></span>
109 <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .Stats.FollowingCount }} following</a></span>
110</div>
111{{ end }}
112{{ end }}