this repo has no description
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">
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">{{ template "user/fragments/bluesky" "w-4 h-4 text-black dark:text-white" }}</span>
64 <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ $userIdent }}</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 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 mt-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 </div>
112 <div id="update-profile" class="text-red-400 dark:text-red-500"></div>
113 </div>
114 </div>
115{{ end }}
116
117{{ define "followerFollowing" }}
118 {{ $root := index . 0 }}
119 {{ $userIdent := index . 1 }}
120 {{ with $root }}
121 <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
122 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
123 <span id="followers"><a href="/{{ $userIdent }}?tab=followers">{{ .Stats.FollowersCount }} followers</a></span>
124 <span class="select-none after:content-['·']"></span>
125 <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .Stats.FollowingCount }} following</a></span>
126 </div>
127 {{ end }}
128{{ end }}