gotosocial/web/template/profile.tmpl

{{- /*
// GoToSocial
// Copyright (C) GoToSocial Authors admin@gotosocial.org
// SPDX-License-Identifier: AGPL-3.0-or-later
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/ -}}

{{- define "profileMovedTo" -}}
{{- with .account.Moved }}
<div class="moved-to">
	<b>
		ℹ️ This account has permanently moved to
		<a
			href="{{ .URL }}"
			class="nounderline"
			rel="nofollow noreferrer noopener"
			target="_blank">
			@{{ .Username }}
		</a>
	</b>
</div>
{{- end }}
{{- end -}}

{{- define "defaultAvatarDimension" -}}
{{- /* 136 is the default width/height for 8.5rem avatars, double it to get a good look when expanded. */ -}}
272
{{- end -}}

{{- define "avatarWidth" -}}
{{- with .account }}
{{- if isNil .AvatarAttachment -}}
{{- template "defaultAvatarDimension" . -}}
{{- else -}}
{{- /* Use the avatar's proper dimensions. */ -}}
{{- .AvatarAttachment.Meta.Original.Width -}}
{{- end -}}
{{- end }}
{{- end -}}

{{- define "avatarHeight" -}}
{{- with .account }}
{{- if isNil .AvatarAttachment -}}
{{- template "defaultAvatarDimension" . -}}
{{- else -}}
{{- /* Use the avatar's proper dimensions. */ -}}
{{- .AvatarAttachment.Meta.Original.Height -}}
{{- end -}}
{{- end }}
{{- end -}}

{{- define "avatarAlt" -}}
Avatar for {{ .account.Username -}}
{{- if .account.AvatarDescription }}
{{- /* Add the avatar's image description. */ -}}
: {{ .account.AvatarDescription -}}
{{- end -}}
{{- end -}}

{{- define "headerAlt" -}}
Header for {{ .account.Username -}}
{{- if .account.HeaderDescription }}
{{- /* Add the header's image description. */ -}}
: {{ .account.HeaderDescription -}}
{{- end -}}
{{- end -}}

{{- define "avatar" -}}
{{- with . }}
<div
	class="media photoswipe-gallery odd single avatar-image-wrapper"
	role="group">
	<a
		class="photoswipe-slide"
		href="{{- .account.Avatar -}}"
		target="_blank"
		data-pswp-width="{{- template "avatarWidth" . -}}px"
		data-pswp-height="{{- template "avatarHeight" . -}}px"
		data-cropped="true"
		alt="{{- template "avatarAlt" . -}}"
		title="{{- template "avatarAlt" . -}}">
		<picture
			aria-hidden="true">
			{{- if .account.AvatarAttachment }}
			<source
				class="avatar"
				srcset="{{- .account.AvatarStatic -}}"
				type="{{- .account.AvatarAttachment.PreviewMIMEType -}}"
				media="(prefers-reduced-motion: reduce)" />
			{{- end }}
			<img
				class="avatar"
				src="{{- .account.Avatar -}}"
				alt="{{- template "avatarAlt" . -}}"
				title="{{- template "avatarAlt" . -}}"
				width="{{- template "avatarWidth" . -}}"
				height="{{- template "avatarHeight" . -}}" />
		</picture>
	</a>
</div>
{{- end }}
{{- end -}}

{{- with . }}
<main class="profile">
	<h2 class="sr-only">Profile for {{ .account.Username -}}</h2>
	<section class="profile-header" role="region" aria-label="Basic info">
		{{- if .account.Moved }}
		{{- include "profileMovedTo" . | indent 2 }}
		{{- end }}
		<div class="header-image-wrapper">
			<picture>
				{{- if .account.HeaderAttachment }}
				<source
					srcset="{{- .account.HeaderStatic -}}"
					type="{{- .account.HeaderAttachment.PreviewMIMEType -}}"
					media="(prefers-reduced-motion: reduce)" />
				{{- end }}
				<img
					src="{{- .account.Header -}}"
					alt="{{- template "headerAlt" . -}}"
					title="{{- template "headerAlt" . -}}" />
			</picture>
		</div>
		<div class="basic-info">
			{{- with . }}
			{{- include "avatar" . | indent 3 }}
			{{- end }}
			<dl class="namerole">
				<dt class="sr-only">Display name</dt>
				<dd class="displayname text-cutoff">
					{{- if .account.DisplayName -}}
					{{- emojify .account.Emojis (escape .account.DisplayName) -}}
					{{- else -}}
					{{- .account.Username -}}
					{{- end -}}
				</dd>
				<div class="bot-username-wrapper">
					{{- if .account.Bot }}
					<dt class="sr-only">Bot account</dt>
					<dd>
						<span class="sr-only">true</span>
						<div
							class="bot-legend-wrapper"
							aria-hidden="true"
							title="This is a bot account.">
							<i class="bot-icon fa fa-microchip"></i>
							<span class="bot-legend">bot</span>
						</div>
					</dd>
					{{- end }}
					<dt class="sr-only">Username</dt>
					<dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
				</div>
				{{- if .account.Roles }}
				<dt class="sr-only">Role</dt>
				{{- range .account.Roles }}
				<dd class="role {{ .Name -}}">{{- .Name -}}</dd>
				{{- end }}
				{{- end }}
			</dl>
		</div>
	</section>
	<div class="column-split">
		<section class="about-user" role="region" aria-labelledby="about-header">
			<div class="col-header">
				<h3 id="about-header">About<span class="sr-only">&nbsp;{{- .account.Username -}}</span></h3>
			</div>
			{{- if .account.Fields }}
			{{- include "profile_fields.tmpl" . | indent 3 }}
			{{- end }}
			<h4 class="sr-only">Bio</h4>
			<div class="bio">
				{{- if .account.Note }}
				{{ emojify .account.Emojis (noescape .account.Note) }}
				{{- else }}
				<p>This GoToSocial user hasn't written a bio yet!</p>
				{{- end }}
			</div>
			<h4 class="sr-only">Stats</h4>
			<dl class="accountstats">
				<dt>Joined</dt>
				<dd><time datetime="{{- .account.CreatedAt -}}">{{- .account.CreatedAt | timestampVague -}}</time></dd>
				<dt>Posts</dt>
				<dd>{{- .account.StatusesCount -}}</dd>
				<dt>Followed by</dt>
				<dd>{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowersCount -}}{{- end -}}</dd>
				<dt>Following</dt>
				<dd>{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowingCount -}}{{- end -}}</dd>
			</dl>
		</section>
		<div class="statuses-wrapper" role="region" aria-label="Posts by {{ .account.Username -}}">
			{{- if .pinned_statuses }}
			<section class="pinned statuses" aria-labelledby="pinned">
				<div class="col-header">
					<h3 id="pinned">Pinned posts</h3>
					<a href="#recent">jump to recent</a>
				</div>
				<div class="thread">
					{{- range .pinned_statuses }}
					<article
						class="status expanded"
						{{- includeAttr "status_attributes.tmpl" . | indentAttr 6  }}>
						{{- include "status.tmpl" . | indent 6 }}
					</article>
					{{- end }}
				</div>
			</section>
			{{- end }}
			<section class="recent statuses" aria-labelledby="recent">
				<div class="col-header">
					<h3 id="recent" tabindex="-1">Recent posts</h3>
					{{- if .rssFeed }}
					<a href="{{- .rssFeed -}}" class="rss-icon" aria-label="RSS feed">
						<i class="fa fa-rss-square" aria-hidden="true"></i>
					</a>
					{{- end }}
				</div>
				<div class="thread">
					{{- if not .statuses }}
					<div data-nosnippet class="nothinghere">Nothing here!</div>
					{{- else }}
					{{- range .statuses }}
					<article
						class="status expanded"
						{{- includeAttr "status_attributes.tmpl" . | indentAttr 6  }}>
						{{- include "status.tmpl" . | indent 6 }}
					</article>
					{{- end }}
					{{- end }}
				</div>
				<nav class="backnextlinks">
					{{- if .show_back_to_top }}
					<a href="/@{{- .account.Username -}}">Back to top</a>
					{{- end }}
					{{- if .statuses_next }}
					<a href="{{- .statuses_next -}}" class="next">Show older</a>
					{{- end }}
				</nav>
			</section>
		</div>
	</div>
</main>
{{- end }}