auto-format other templates for consistency

web/template/finalize.tmpl

@@ -32,18 +32,13 @@
             <div class="labelinput">
                 <label for="username">
                     Username (lowercase a-z, numbers, and underscores; max 64 characters).<br />
-                    <small>Your username will be part of your fediverse handle, and cannot be changed later, so choose thoughtfully!</small>
+                    <small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
+                        thoughtfully!</small>
                 </label>
-                <input 
+                <input id="username" type="text" name="username" required
-                    id="username"
+                    placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$"
-                    type="text"
-                    name="username"
-                    required
-                    placeholder="Please enter your desired username"
-                    pattern="^[a-z0-9_]{1,64}$"
                     title="lowercase a-z, numbers, and underscores; max 64 characters"
-                    value="{{- .preferredUsername -}}"
+                    value="{{- .preferredUsername -}}">
-                >
             </div>
             <input type="hidden" name="name" value="{{- .name -}}">
             <button type="submit" class="btn btn-success">Submit</button>

web/template/page_footer.tmpl

@@ -21,20 +21,13 @@
 <nav>
     <ul class="nodot">
         <li id="about">
-            <a
+            <a href="/about" class="nounderline">
-                href="/about"
-                class="nounderline"
-            >
                 About {{ .instance.Title }}
             </a>
         </li>
         <li id="version">
-            <a
+            <a href="https://github.com/superseriousbusiness/gotosocial" class="nounderline"
-                href="https://github.com/superseriousbusiness/gotosocial"
+                rel="nofollow noreferrer noopener" target="_blank">
-                class="nounderline"
-                rel="nofollow noreferrer noopener"
-                target="_blank"
-            >
                 <span aria-hidden="true">🦥</span>
                 Source - GoToSocial {{ .instance.Version }}
                 <span aria-hidden="true">🦥</span>
@@ -42,22 +35,15 @@
         </li>
         {{- if .instance.ContactAccount }}
         <li id="contact">
-            <a
+            <a href="/@{{- .instance.ContactAccount.Username -}}" class="nounderline">
-                href="/@{{- .instance.ContactAccount.Username -}}"
-                class="nounderline"
-            >
                 Contact account - {{ .instance.ContactAccount.Username }}
             </a>
         </li>
         {{- end }}
         {{- if .instance.Email }}
         <li id="email">
-            <a
+            <a href="mailto:{{- .instance.Email -}}" class="nounderline" rel="nofollow noreferrer noopener"
-                href="mailto:{{- .instance.Email -}}"
+                target="_blank">
-                class="nounderline"
-                rel="nofollow noreferrer noopener"
-                target="_blank"
-            >
                 Email - {{ .instance.Email }}
             </a>
         </li>

web/template/page_header.tmpl

@@ -59,21 +59,16 @@ Instance Logo
 <a aria-label="{{- .instance.Title -}}. Go to instance homepage" href="/" class="nounderline">
     <picture>
         {{- if .instance.ThumbnailStatic }}
-        <source
+        <source srcset="{{- .instance.ThumbnailStatic -}}" type="{{- .instance.ThumbnailStaticType -}}"
-            srcset="{{- .instance.ThumbnailStatic -}}"
+            media="(prefers-reduced-motion: reduce)" />
-            type="{{- .instance.ThumbnailStaticType -}}"
-            media="(prefers-reduced-motion: reduce)"
-        />
         {{- end }}
-        <img
+        <img src="{{- .instance.Thumbnail -}}" alt="{{- template "thumbnailDescription" . -}}"
-            src="{{- .instance.Thumbnail -}}"
+            title="{{- template "thumbnailDescription" . -}}" />
-            alt="{{- template "thumbnailDescription" . -}}"
-            title="{{- template "thumbnailDescription" . -}}"
-        />
     </picture>
     <h1>{{- .instance.Title -}}</h1>
 </a>
 {{- if .showStrap }}
-<aside>home to {{ template "strapUsers" . }} who wrote {{ template "strapPosts" . }}, federating with {{ template "strapInstances" . }}</aside>
+<aside>home to {{ template "strapUsers" . }} who wrote {{ template "strapPosts" . }}, federating with
+    {{ template "strapInstances" . }}</aside>
 {{- end }}
 {{- end }}

web/template/sign-up.tmpl

@@ -27,41 +27,22 @@
         <form action="/signup" method="POST">
             <div class="labelinput">
                 <label for="email">Email</label>
-                <input
+                <input id="email" type="email" name="email" required placeholder="Email address">
-                    id="email"
-                    type="email"
-                    name="email"
-                    required
-                    placeholder="Email address"
-                >
             </div>
             <div class="labelinput">
                 <label for="password">Password</label>
-                <input
+                <input id="password" type="password" name="password" required
-                    id="password"
+                    placeholder="Please enter your desired password" autocomplete="new-password">
-                    type="password"
-                    name="password"
-                    required
-                    placeholder="Please enter your desired password"
-                    autocomplete="new-password"
-                >
             </div>
             <div class="labelinput">
                 <label for="username">
                     Username (lowercase a-z, numbers, and underscores; max 64 characters).<br />
-                    <small>Your username will be part of your fediverse handle, and cannot be changed later, so choose thoughtfully!</small>
+                    <small>Your username will be part of your fediverse handle, and cannot be changed later, so choose
+                        thoughtfully!</small>
                 </label>
-                <input
+                <input id="username" type="text" name="username" required
-                    id="username"
+                    placeholder="Please enter your desired username" pattern="^[a-z0-9_]{1,64}$" autocapitalize="off"
-                    type="text"
+                    spellcheck="false" title="lowercase a-z, numbers, and underscores; max 64 characters">
-                    name="username"
-                    required
-                    placeholder="Please enter your desired username"
-                    pattern="^[a-z0-9_]{1,64}$"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    title="lowercase a-z, numbers, and underscores; max 64 characters"
-                >
             </div>
             {{- if .reasonRequired }}
             <div class="labelinput">
@@ -69,28 +50,17 @@
                     Reason you want to join {{ .instance.Title }} (40-500 characters).<br />
                     <small>The admin(s) will use this text to decide whether or not to approve your sign-up.</small>
                 </label>
-                <textarea
+                <textarea id="reason" name="reason" required
-                    id="reason"
-                    name="reason"
-                    required
                     placeholder="Enter a few sentences about why you want to join this instance. If you know someone on the instance already, you may want to mention them here. You might want to link to any other accounts you have elsewhere too."
-                    rows="8"
+                    rows="8" minlength="40" maxlength="500" autocapitalize="sentences"
-                    minlength="40"
+                    title="40-500 characters"></textarea>
-                    maxlength="500"
-                    autocapitalize="sentences"
-                    title="40-500 characters"
-                ></textarea>
             </div>
             {{- end }}
             <div class="checkbox">
-                <label for="agreement">I have read and accept the <a href="/about#terms">terms and conditions</a> of {{ .instance.Title }}, and I agree to abide by the <a href="/about#rules">instance rules</a>.</label>
+                <label for="agreement">I have read and accept the <a href="/about#terms">terms and conditions</a> of
-                <input
+                    {{ .instance.Title }}, and I agree to abide by the <a href="/about#rules">instance
-                    id="agreement"
+                        rules</a>.</label>
-                    type="checkbox"
+                <input id="agreement" type="checkbox" name="agreement" required value="true">
-                    name="agreement"
-                    required
-                    value="true"
-                >
             </div>
             <input type="hidden" name="locale" value="en">
             <button type="submit" class="btn btn-success">Submit</button>

web/template/signed-up.tmpl

@@ -22,7 +22,7 @@
     <section aria-labelledby="signed-up">
         <h2 id="signed-up">Thanks for signing up to {{ .instance.Title -}}!</h2>
         <p>Hi <b>{{- .username -}}</b>!</p>
-        <p>Your sign-up has been registered, and a confirmation email has been sent to <b>{{- .email -}}</b>.<p>
+        <p>Your sign-up has been registered, and a confirmation email has been sent to <b>{{- .email -}}</b>.</p>
         <p>Please check your email inbox and click the link to confirm your email.</p>
         <p>Once an admin has approved your sign-up, you will be able to log in and use your account.</p>
     </section>

web/template/status.tmpl

@@ -38,7 +38,8 @@
     {{- if .SpoilerText }}
     <details class="text-spoiler">
         <summary>
-            <span class="spoiler-text" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
+            <span class="spoiler-text"
+                lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
             <span class="button" role="button" tabindex="0">Toggle visibility</span>
         </summary>
         <div class="text">
@@ -68,22 +69,12 @@
     {{- include "status_info.tmpl" . | indent 1 }}
 </aside>
 {{- if .Local }}
-<a
+<a href="{{- .URL -}}" class="status-link" data-nosnippet title="Open thread at this post">
-    href="{{- .URL -}}"
-    class="status-link"
-    data-nosnippet
-    title="Open thread at this post"
->
     Open thread at this post
 </a>
 {{- else }}
-<a
+<a href="{{- .URL -}}" class="status-link" data-nosnippet rel="nofollow noreferrer noopener" target="_blank"
-    href="{{- .URL -}}"
+    title="Open remote post (opens in a new window)">
-    class="status-link"
-    data-nosnippet
-    rel="nofollow noreferrer noopener" target="_blank"
-    title="Open remote post (opens in a new window)"
->
     Open remote post (opens in a new window)
 </a>
 {{- end }}

web/template/status_attachments.tmpl

@@ -23,54 +23,23 @@
 */ -}}
 
 {{- define "imagePreview" }}
-<img
+<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
-    src="{{- .PreviewURL -}}"
+    title="{{- .Description -}}" {{- end }} width="{{- .Meta.Original.Width -}}"
-    loading="lazy"
+    height="{{- .Meta.Original.Height -}}" />
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="{{- .Meta.Original.Width -}}"
-    height="{{- .Meta.Original.Height -}}"
-/>
 {{- end }}
 
 {{- define "videoPreview" }}
-<img
+<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
-    src="{{- .PreviewURL -}}"
+    title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
-    loading="lazy"
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="{{- .Meta.Small.Width -}}"
-    height="{{- .Meta.Small.Height -}}"
-/>
 {{- end }}
 
 {{- define "audioPreview" }}
 {{- if and .PreviewURL .Meta.Small.Width }}
-<img
+<img src="{{- .PreviewURL -}}" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
-    src="{{- .PreviewURL -}}"
+    title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" />
-    loading="lazy"
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="{{- .Meta.Small.Width -}}"
-    height="{{- .Meta.Small.Height -}}"
-/>
 {{- else }}
-<img
+<img src="/assets/logo.webp" loading="lazy" {{- if .Description }} alt="{{- .Description -}}"
-    src="/assets/logo.webp"
+    title="{{- .Description -}}" {{- end }} width="518" height="460" />
-    loading="lazy"
-    {{- if .Description }}
-    alt="{{- .Description -}}"
-    title="{{- .Description -}}"
-    {{- end }}
-    width="518"
-    height="460"
-/>
 {{- end }}
 {{- end }}
 
@@ -85,11 +54,7 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
 {{- end -}}
 
 {{- with .MediaAttachments }}
-<div
+<div class="{{- template "galleryClass" . -}}" role="group" aria-label="{{- template "attachmentsLength" . -}}">
-    class="{{- template "galleryClass" . -}}"
-    role="group"
-    aria-label="{{- template "attachmentsLength" . -}}"
->
     {{- range $index, $media := . }}
     <div class="media-wrapper">
         <details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{- end -}}>
@@ -108,72 +73,35 @@ media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{
                 {{- end }}
             </summary>
             {{- if eq .Type "video" }}
-            <video
+            <video preload="none" class="plyr-video photoswipe-slide" controls data-pswp-index="{{- $index -}}"
-                preload="none"
+                poster="{{- .PreviewURL -}}" data-pswp-width="{{- $media.Meta.Small.Width -}}px"
-                class="plyr-video photoswipe-slide"
+                data-pswp-height="{{- $media.Meta.Small.Height -}}px" {{- if .Description }}
-                controls
+                alt="{{- $media.Description -}}" title="{{- $media.Description -}}" {{- end }}>
-                data-pswp-index="{{- $index -}}"
-                poster="{{- .PreviewURL -}}"
-                data-pswp-width="{{- $media.Meta.Small.Width -}}px"
-                data-pswp-height="{{- $media.Meta.Small.Height -}}px"
-                {{- if .Description }}
-                alt="{{- $media.Description -}}"
-                title="{{- $media.Description -}}"
-                {{- end }}
-            >
                 <source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}" />
             </video>
             {{- else if eq .Type "audio" }}
-            <video
+            <video preload="none" class="plyr-video photoswipe-slide" controls data-pswp-index="{{- $index -}}"
-                preload="none"
+                {{- if and $media.PreviewURL $media.Meta.Small.Width }} poster="{{- .PreviewURL -}}"
-                class="plyr-video photoswipe-slide"
-                controls
-                data-pswp-index="{{- $index -}}"
-                {{- if and $media.PreviewURL $media.Meta.Small.Width }}
-                poster="{{- .PreviewURL -}}"
                 data-pswp-width="{{- $media.Meta.Small.Width -}}px"
-                data-pswp-height="{{- $media.Meta.Small.Height -}}px"
+                data-pswp-height="{{- $media.Meta.Small.Height -}}px" {{- else }} poster="/assets/logo.webp"
-                {{- else }}
+                width="518px" height="460px" {{- end }} {{- if .Description }} alt="{{- $media.Description -}}"
-                poster="/assets/logo.webp"
+                title="{{- $media.Description -}}" {{- end }}>
-                width="518px"
-                height="460px"
-                {{- end }}
-                {{- if .Description }}
-                alt="{{- $media.Description -}}"
-                title="{{- $media.Description -}}"
-                {{- end }}
-            >
                 <source type="{{- $media.MIMEType -}}" src="{{- $media.URL -}}" />
             </video>
             {{- else if eq .Type "image" }}
-            <a
+            <a class="photoswipe-slide" href="{{- $media.URL -}}" target="_blank"
-                class="photoswipe-slide"
-                href="{{- $media.URL -}}"
-                target="_blank"
                 data-pswp-width="{{- $media.Meta.Original.Width -}}px"
-                data-pswp-height="{{- $media.Meta.Original.Height -}}px"
+                data-pswp-height="{{- $media.Meta.Original.Height -}}px" data-cropped="true" {{- if .Description }}
-                data-cropped="true"
+                alt="{{- $media.Description -}}" title="{{- $media.Description -}}" {{- end }}>
-                {{- if .Description }}
-                alt="{{- $media.Description -}}"
-                title="{{- $media.Description -}}"
-                {{- end }}
-            >
                 {{- with $media }}
                 {{- include "imagePreview" . | indent 4 }}
                 {{- end }}
             </a>
             {{- else }}
-            <a
+            <a class="unknown-attachment" href="{{- $media.RemoteURL -}}" rel="nofollow noreferrer noopener"
-                class="unknown-attachment"
+                target="_blank" {{- if .Description }}
-                href="{{- $media.RemoteURL -}}"
+                title="Open external media: {{ $media.Description -}}&#10;&#13;{{- $media.RemoteURL -}}" {{- else }}
-                rel="nofollow noreferrer noopener"
+                title="Open external media.&#10;&#13;{{- $media.RemoteURL -}}" {{- end }}>
-                target="_blank"
-                {{- if .Description }}
-                title="Open external media: {{ $media.Description -}}&#10;&#13;{{- $media.RemoteURL -}}"
-                {{- else }}
-                title="Open external media.&#10;&#13;{{- $media.RemoteURL -}}"
-                {{- end }}
-            >
                 <div class="placeholder" aria-hidden="true">
                     <i class="placeholder-external-link fa fa-external-link"></i>
                     <i class="placeholder-icon fa fa-file-text"></i>