Monorepo for Tangled
tangled.org
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="{{ profileAvatarUrl .Profile "" }}" />
7 {{ if eq .FollowStatus.String "IsSelf" }}
8 <button
9 class="absolute bottom-2 right-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
10 popovertarget="avatar-upload-modal"
11 popovertargetaction="toggle"
12 title="Upload avatar">
13 {{ i "camera" "w-4 h-4" }}
14 </button>
15 {{ end }}
16 </div>
17 </div>
18 <div
19 id="avatar-upload-modal"
20 popover
21 class="bg-white w-full md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
22 {{ template "user/fragments/editAvatar" . }}
23 </div>
24 <div class="col-span-2">
25 <div class="flex items-center flex-row flex-nowrap gap-2">
26 <p title="{{ $userIdent }}"
27 class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap">
28 {{ $userIdent }}
29 </p>
30 {{ with .Profile }}
31 {{ if .Pronouns }}
32 <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p>
33 {{ end }}
34 {{ end }}
35 </div>
36
37 <div class="md:hidden">
38 {{ block "followerFollowing" (list . $userIdent) }} {{ end }}
39 </div>
40 </div>
41 <div class="col-span-3 md:col-span-full">
42 <div id="profile-bio" class="text-sm space-y-2">
43 {{ $profile := .Profile }}
44 {{ with .Profile }}
45
46 {{ if .Description }}
47 <p class="text-base pb-4 md:pb-2">{{ .Description }}</p>
48 {{ end }}
49
50 <div class="hidden md:block">
51 {{ block "followerFollowing" (list $ $userIdent) }} {{ end }}
52 </div>
53
54 <div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
55 {{ if .Location }}
56 <div class="flex items-center gap-2">
57 <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span>
58 <span>{{ .Location }}</span>
59 </div>
60 {{ end }}
61 {{ if .IncludeBluesky }}
62 <div class="flex items-center gap-2">
63 <span class="flex-shrink-0">{{ i "bluesky" "w-4 h-4 text-black dark:text-white" }}</span>
64 <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ primaryHandle $.UserDid }}</a>
65 </div>
66 {{ end }}
67 {{ range $link := .Links }}
68 {{ if $link }}
69 <div class="flex items-center gap-2">
70 <span class="flex-shrink-0">{{ i "link" "size-4" }}</span>
71 <a rel="nofollow me" href="{{ $link }}">{{ $link }}</a>
72 </div>
73 {{ end }}
74 {{ end }}
75 {{ if not $profile.IsStatsEmpty }}
76 <div class="flex items-center justify-evenly gap-2 py-2">
77 {{ range $stat := .Stats }}
78 {{ if $stat.Kind }}
79 <div class="flex flex-col items-center gap-2">
80 <span class="text-xl font-bold">{{ $stat.Value }}</span>
81 <span>{{ $stat.Kind.String }}</span>
82 </div>
83 {{ end }}
84 {{ end }}
85 </div>
86 {{ end }}
87 </div>
88 {{ end }}
89
90 <div class="flex my-2 items-center gap-2">
91 {{ if ne .FollowStatus.String "IsSelf" }}
92 {{ template "user/fragments/follow" . }}
93 {{ else }}
94 <button id="editBtn"
95 class="btn w-full flex items-center gap-2 group"
96 hx-target="#profile-bio"
97 hx-get="/profile/edit-bio"
98 hx-swap="innerHTML">
99 {{ i "pencil" "w-4 h-4" }}
100 Edit
101 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
102 </button>
103 {{ end }}
104
105 <a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group"
106 href="/{{ $userIdent }}/feed.atom">
107 {{ i "rss" "size-4" }}
108 </a>
109 </div>
110
111 {{ if ne .FollowStatus.String "IsSelf" }}
112 {{ template "user/fragments/vouch" (dict "VouchRelationship" .VouchRelationship) }}
113
114 {{ if .VouchRelationship }}
115 {{ if .VouchRelationship.IndirectVouches }}
116 <div class="flex flex-col gap-2">
117 {{ template "user/fragments/networkVouches" .VouchRelationship }}
118 </div>
119 {{ end }}
120 {{ end }}
121 {{ end }}
122
123 </div>
124 <div id="update-profile" class="text-red-400 dark:text-red-500"></div>
125 </div>
126</div>
127{{ end }}
128
129{{ define "followerFollowing" }}
130 {{ $root := index . 0 }}
131 {{ $userIdent := index . 1 }}
132 {{ with $root }}
133 <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
134 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
135 <span id="followers" data-followers-did="{{ .UserDid }}"><a href="/{{ $userIdent }}?tab=followers">{{ scaleFmt .Stats.FollowersCount }} followers</a></span>
136 <span class="select-none after:content-['·']"></span>
137 <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ scaleFmt .Stats.FollowingCount }} following</a></span>
138 </div>
139 {{ end }}
140{{ end }}
141
142
143{{ define "networkVouchItem" }}
144 <div class="flex items-center gap-2 p-2 group/item">
145 <div class="flex-shrink-0 h-fit relative">
146 {{ template "user/fragments/picLink" (list .Did "size-8") }}
147 </div>
148 <div class="flex-1 min-w-0 flex items-center gap-2">
149 <div class="text-sm font-medium flex-shrink-0 text-green-900 dark:text-green-100">
150 {{ resolve .Did }}
151 </div>
152 <div class="flex-1 min-w-0 text-sm text-green-700 dark:text-green-300 truncate">
153 {{ .Reason | description }}
154 </div>
155 </div>
156 <div class="flex-shrink-0 relative min-w-12 text-center">
157 <div class="text-xs text-green-600 dark:text-green-400 group-hover/item:opacity-0 transition-opacity">
158 {{ template "repo/fragments/shortTime" .CreatedAt }}
159 </div>
160 <div class="absolute inset-0 flex items-center gap-1 justify-center opacity-0 group-hover/item:opacity-100 transition-opacity text-xs font-medium text-green-900 dark:text-green-100">
161 View {{ i "arrow-right" "size-3" }}
162 </div>
163 </div>
164 </div>
165{{ end }}