Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166{{ define "user/fragments/profileCard" }}{{ $userIdent := resolve .UserDid }}<div class="grid grid-cols-3 md:grid-cols-1 gap-1 items-center"> <div id="avatar" class="col-span-1 flex justify-center items-center"> <div class="w-3/4 aspect-square relative"> <img class="absolute inset-0 w-full h-full object-cover rounded-full p-2" src="{{ profileAvatarUrl .Profile "" }}" /> {{ if eq .FollowStatus.String "IsSelf" }} <button 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" popovertarget="avatar-upload-modal" popovertargetaction="toggle" title="Upload avatar"> {{ i "camera" "w-4 h-4" }} </button> {{ end }} </div> </div> <div id="avatar-upload-modal" popover 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"> {{ template "user/fragments/editAvatar" . }} </div> <div class="col-span-2"> <div class="flex items-center flex-row flex-nowrap gap-2"> <p title="{{ $userIdent }}" class="text-lg font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap"> {{ $userIdent }} </p> {{ with .Profile }} {{ if .Pronouns }} <p class="text-gray-500 dark:text-gray-400">{{ .Pronouns }}</p> {{ end }} {{ end }} </div>
<div class="md:hidden"> {{ block "followerFollowing" (list . $userIdent) }} {{ end }} </div> </div> <div class="col-span-3 md:col-span-full"> <div id="profile-bio" class="text-sm space-y-2"> {{ $profile := .Profile }} {{ with .Profile }}
{{ if .Description }} <p class="text-base pb-4 md:pb-2">{{ .Description }}</p> {{ end }}
<div class="hidden md:block"> {{ block "followerFollowing" (list $ $userIdent) }} {{ end }} </div>
<div class="flex flex-col gap-2 mb-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full"> {{ if .Location }} <div class="flex items-center gap-2"> <span class="flex-shrink-0">{{ i "map-pin" "size-4" }}</span> <span>{{ .Location }}</span> </div> {{ end }} {{ if .IncludeBluesky }} <div class="flex items-center gap-2"> <span class="flex-shrink-0">{{ i "bluesky" "w-4 h-4 text-black dark:text-white" }}</span> <a id="bluesky-link" href="https://bsky.app/profile/{{ $.UserDid }}">{{ primaryHandle $.UserDid }}</a> </div> {{ end }} {{ range $link := .Links }} {{ if $link }} <div class="flex items-center gap-2"> <span class="flex-shrink-0">{{ i "link" "size-4" }}</span> <a rel="nofollow me" href="{{ $link }}">{{ $link }}</a> </div> {{ end }} {{ end }} {{ if not $profile.IsStatsEmpty }} <div class="flex items-center justify-evenly gap-2 py-2"> {{ range $stat := .Stats }} {{ if $stat.Kind }} <div class="flex flex-col items-center gap-2"> <span class="text-xl font-bold">{{ $stat.Value }}</span> <span>{{ $stat.Kind.String }}</span> </div> {{ end }} {{ end }} </div> {{ end }} </div> {{ end }}
<div class="flex my-2 items-center gap-2"> {{ if ne .FollowStatus.String "IsSelf" }} {{ template "user/fragments/follow" . }} {{ else }} <button id="editBtn" class="btn w-full flex items-center gap-2 group" hx-target="#profile-bio" hx-get="/profile/edit-bio" hx-swap="innerHTML"> {{ i "pencil" "w-4 h-4" }} Edit {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} </button> {{ end }}
<a class="btn text-sm no-underline hover:no-underline flex items-center gap-2 group" href="/{{ $userIdent }}/feed.atom"> {{ i "rss" "size-4" }} </a> </div>
{{ if ne .FollowStatus.String "IsSelf" }} {{ template "user/fragments/vouch" (dict "VouchRelationship" .VouchRelationship) }}
{{ if .VouchRelationship }} {{ if .VouchRelationship.IndirectVouches }} <div class="flex flex-col gap-2"> {{ template "user/fragments/networkVouches" .VouchRelationship }} </div> {{ end }} {{ end }} {{ end }}
</div> <div id="update-profile" class="text-red-400 dark:text-red-500"></div> </div></div>{{ end }}
{{ define "followerFollowing" }} {{ $root := index . 0 }} {{ $userIdent := index . 1 }} {{ with $root }} <div class="flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm"> <span class="flex-shrink-0">{{ i "users" "size-4" }}</span> <span id="followers" data-followers-did="{{ .UserDid }}"><a href="/{{ $userIdent }}?tab=followers">{{ scaleFmt .Stats.FollowersCount }} followers</a></span> <span class="select-none after:content-['·']"></span> <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ scaleFmt .Stats.FollowingCount }} following</a></span> </div> {{ end }}{{ end }}
{{ define "networkVouchItem" }} <div class="flex items-center gap-2 p-2 group/item"> <div class="flex-shrink-0 h-fit relative"> {{ template "user/fragments/picLink" (list .Did "size-8") }} </div> <div class="flex-1 min-w-0 flex items-center gap-2"> <div class="text-sm font-medium flex-shrink-0 text-green-900 dark:text-green-100"> {{ resolve .Did }} </div> <div class="flex-1 min-w-0 text-sm text-green-700 dark:text-green-300 truncate"> {{ .Reason | description }} </div> </div> <div class="flex-shrink-0 relative min-w-12 text-center"> <div class="text-xs text-green-600 dark:text-green-400 group-hover/item:opacity-0 transition-opacity"> {{ template "repo/fragments/shortTime" .CreatedAt }} </div> <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"> View {{ i "arrow-right" "size-3" }} </div> </div> </div>{{ end }}