appview/pages: use consistent time component

Creates a new template fragment, repo/fragments/time, that is a component based on the <time> HTML element. The <time> element is already used for most datetimes, but inconsistently; some define `title` attributes and/or `datetime` attributes, most don't. The goal here is to standardize with a single component so every date has a consistent interaction. The datetime is ISO 8601 formatted as per the spec, the `title` (shown on hover) is a modified long format similar to GitHub's, and the content is a relative format %s ago (`timeFmt` - two `shortTimeFmt` variants also exist to preserve existing behavior).

appview/pages/funcmap.go

···
 		},
 		"timeFmt": humanize.Time,
 		"longTimeFmt": func(t time.Time) string {
-			return t.Format("2006-01-02 * 3:04 PM")
+			return t.Format("Jan 2, 2006, 3:04 PM MST")
+		},
+		"iso8601Fmt": func(t time.Time) string {
+			return t.Format("2006-01-02T15:04:05-07:00")
 		},
 		"commaFmt": humanize.Comma,
 		"shortTimeFmt": func(t time.Time) string {

appview/pages/templates/knot.html

···
     </dd>
     
     <dt class="font-bold">opened</dt>
-    <dd>{{ .Registration.Created | timeFmt }}</dd>
+    <dd>{{ template "repo/fragments/time" .Registration.Created }}</dd>
     
     {{ if .Registration.Registered }}
       <dt class="font-bold">registered</dt>
-      <dd>{{ .Registration.Registered | timeFmt }}</dd>
+      <dd>{{ template "repo/fragments/time" .Registration.Registered }}</dd>
     {{ else }}
       <dt class="font-bold">status</dt>
       <dd class="text-yellow-800 dark:text-yellow-200 bg-yellow-100 dark:bg-yellow-900 rounded px-2 py-1 inline-block">

appview/pages/templates/knots.html

···
                 </a>
               </div>
               <p class="text-sm text-gray-500 dark:text-gray-400">owned by {{ .ByDid }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">registered {{ .Registered | timeFmt }}</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">registered {{ template "repo/fragments/time" .Registered }}</p>
             </div>
           </div>
           {{ end }}
···
                 </div>
               </div>
               <p class="text-sm text-gray-500 dark:text-gray-400">opened by {{ .ByDid }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">created {{ .Created | timeFmt }}</p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">created {{ template "repo/fragments/time" .Created }}</p>
             </div>
             <div class="flex gap-2 items-center">
               <button

appview/pages/templates/repo/branches.html

···
         </td>
         <td class="py-3 whitespace-nowrap text-gray-500 dark:text-gray-400">
           {{ if .Commit }}
-            {{ .Commit.Committer.When | timeFmt }}
+            {{ template "repo/fragments/time" .Commit.Committer.When }}
           {{ end }}
         </td>
       </tr>
···
           </a>
         </span>
         <div class="inline-block px-1 select-none after:content-['·']"></div>
-        <span>{{ .Commit.Committer.When | timeFmt }}</span>
+        {{ template "repo/fragments/time" .Commit.Committer.When  }}
       </div>
       {{ end }}
     </div>

appview/pages/templates/repo/commit.html

···
             <a href="mailto:{{ $commit.Author.Email }}" class="no-underline hover:underline text-gray-500 dark:text-gray-300">{{ $commit.Author.Name }}</a>
           {{ end }}
           <span class="px-1 select-none before:content-['\00B7']"></span>
-          {{ timeFmt $commit.Author.When }}
+          {{ template "repo/fragments/time" $commit.Author.When }}
           <span class="px-1 select-none before:content-['\00B7']"></span>
       </p>
 

appview/pages/templates/repo/compare/new.html

···
             <a href="/{{ $.RepoInfo.FullName }}/compare?head={{ $br.Name | urlquery }}" class="no-underline hover:no-underline">
               <div class="flex items-center justify-between p-2">
                 {{ $br.Name }}
-                <time class="text-gray-500 dark:text-gray-400">{{ timeFmt $br.Commit.Committer.When }}</time>
+                <span class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $br.Commit.Committer.When }}</span>
               </div>
             </a>
             {{ end }}

appview/pages/templates/repo/empty.html

···
           <a href="/{{ $.RepoInfo.FullName }}/tree/{{$br.Name | urlquery }}" class="no-underline hover:no-underline">
             <div class="flex items-center justify-between p-2">
               {{ $br.Name }}
-              <time class="text-gray-500 dark:text-gray-400">{{ timeFmt $br.Commit.Committer.When }}</time>
+              <span class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $br.Commit.Committer.When }}</span>
             </div>
           </a>
           {{ end }}

appview/pages/templates/repo/fragments/artifact.html

···
       </div>
 
     <div id="right-side" class="text-gray-500 dark:text-gray-400 flex items-center flex-shrink-0 gap-2 text-sm">
-      <span title="{{ longTimeFmt .Artifact.CreatedAt }}" class="hidden md:inline">{{ timeFmt .Artifact.CreatedAt }}</span>
-      <span title="{{ longTimeFmt .Artifact.CreatedAt }}" class="       md:hidden">{{ shortTimeFmt .Artifact.CreatedAt }}</span>
+      <span class="hidden md:inline">{{ template "repo/fragments/time" .Artifact.CreatedAt }}</span>
+      <span class="       md:hidden">{{ template "repo/fragments/shortTime" .Artifact.CreatedAt }}</span>
 
       <span class="select-none after:content-['·'] hidden md:inline"></span>
       <span class="truncate max-w-[100px] hidden md:inline">{{ .Artifact.MimeType }}</span>

appview/pages/templates/repo/fragments/time.html

···
+{{ define "repo/fragments/timeWrapper" }}
+<time datetime="{{ .Time | iso8601Fmt }}" title="{{ .Time | longTimeFmt }}">{{ .Content }}</time>
+{{ end }}
+
+{{ define "repo/fragments/time" }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | timeFmt)) }}
+{{ end }}
+
+{{ define "repo/fragments/shortTime" }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (. | shortTimeFmt)) }}
+{{ end }}
+
+{{ define "repo/fragments/shortTimeAgo" }}
+{{ template "repo/fragments/timeWrapper" (dict "Time" . "Content" (print (. | shortTimeFmt) " ago")) }}
+{{ end }}

appview/pages/templates/repo/index.html

···
                         </a>
 
                         {{ if .LastCommit }}
-                        <time class="text-xs text-gray-500 dark:text-gray-400"
-                            >{{ timeFmt .LastCommit.When }}</time
-                        >
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</span>
                         {{ end }}
                     </div>
                 </div>
···
                         </a>
 
                         {{ if .LastCommit }}
-                        <time class="text-xs text-gray-500 dark:text-gray-400"
-                            >{{ timeFmt .LastCommit.When }}</time
-                        >
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</span>
                         {{ end }}
                     </div>
                 </div>
···
           >
         </span>
         <div class="inline-block px-1 select-none after:content-['·']"></div>
-        <span>{{ timeFmt .Committer.When }}</span>
+        {{ template "repo/fragments/time" .Committer.When }}
 
         <!-- tags/branches -->
         {{ $tagsForCommit := index $.TagMap .Hash.String }}
···
             </a>
             {{ if .Commit }}
             <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-            <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .Commit.Committer.When }}</time>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Commit.Committer.When }}</span>
             {{ end }}
             {{ if .IsDefault }}
             <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
···
           </div>
           <div>
             {{ with .Tag }}
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .Tagger.When }}</time>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Tagger.When }}</span>
             {{ end }}
             {{ if eq $idx 0 }}
               {{ with .Tag }}<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>{{ end }}

appview/pages/templates/repo/issues/fragments/editIssueComment.html

···
           href="#{{ .CommentId }}"
           class="text-gray-500 hover:text-gray-500 hover:underline no-underline"
           id="{{ .CommentId }}">
-        {{ .Created | timeFmt }}
+        {{ template "repo/fragments/time" .Created }}
       </a>
 
       <button

appview/pages/templates/repo/issues/fragments/issueComment.html

···
           class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-400 hover:underline no-underline"
           id="{{ .CommentId }}">
         {{ if .Deleted }}
-          deleted {{ .Deleted | timeFmt }}
+          deleted {{ template "repo/fragments/time" .Deleted }}
         {{ else if .Edited }}
-          edited {{ .Edited | timeFmt }}
+          edited {{ template "repo/fragments/time" .Edited }}
         {{ else }}
-          {{ .Created | timeFmt }}
+          {{ template "repo/fragments/time" .Created }}
         {{ end }}
       </a>
 

appview/pages/templates/repo/issues/issue.html

···
                 {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
                 {{ template "user/fragments/picHandleLink" $owner }}
                <span class="select-none before:content-['\00B7']"></span>
-                <time title="{{ .Issue.Created | longTimeFmt }}">
-                    {{ .Issue.Created | timeFmt }}
-                </time>
+                {{ template "repo/fragments/time" .Issue.Created }}
             </span>
         </div>
 

appview/pages/templates/repo/issues/issues.html

···
       </span>
 
       <span class="before:content-['·']">
-        <time>
-          {{ .Created | timeFmt }}
-        </time>
+        {{ template "repo/fragments/time" .Created }}
       </span>
 
       <span class="before:content-['·']">

appview/pages/templates/repo/log.html

···
                           {{ template "repo/pipelines/fragments/pipelineSymbolLong" (dict "Pipeline" $pipeline "RepoInfo" $.RepoInfo) }}
                         {{ end }}
                     </td>
-                    <td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ timeFmt $commit.Committer.When }}</td>
+                    <td class=" py-3 align-top text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $commit.Committer.When }}</td>
                 </tr>
                 {{ end }}
         </tbody>
···
                         </a>
                     </span>
                     <div class="inline-block px-1 select-none after:content-['·']"></div>
-                    <span>{{ shortTimeFmt $commit.Committer.When }}</span>
+                    <span>{{ template "repo/fragments/shortTime" $commit.Committer.When }}</span>
 
                     <!-- ci status -->
                     {{ $pipeline := index $.Pipelines .Hash.String }}

appview/pages/templates/repo/pipelines/pipelines.html

···
         </div>
 
         <div class="text-sm md:text-base col-span-1 text-right">
-          <time title="{{ .Created | longTimeFmt }}">
-            {{ .Created | shortTimeFmt }} ago
-          </time>
+          {{ template "repo/fragments/shortTimeAgo" .Created }}
         </div>
 
         {{ $t := .TimeTaken }}

appview/pages/templates/repo/pulls/fragments/pullHeader.html

···
             {{ $owner := index $.DidHandleMap .Pull.OwnerDid }}
             {{ template "user/fragments/picHandleLink" $owner }}
             <span class="select-none before:content-['\00B7']"></span>
-            <time>{{ .Pull.Created | timeFmt }}</time>
+            {{ template "repo/fragments/time" .Pull.Created }}
 
             <span class="select-none before:content-['\00B7']"></span>
             <span>

appview/pages/templates/repo/pulls/pull.html

···
                 <span class="hidden md:inline">{{$re}}submitted</span>
                 by {{ template "user/fragments/picHandleLink" $owner }}
                 <span class="select-none before:content-['\00B7']"></span>
-                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ .RoundNumber }}"><time>{{ .Created | shortTimeFmt }}</time></a>
+                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500" href="#round-#{{ .RoundNumber }}">{{ template "repo/fragments/shortTime" .Created }}</a>
                 <span class="select-none before:content-['·']"></span>
                 {{ $s := "s" }}
                 {{ if eq (len .Comments) 1 }}
···
                 {{ $owner := index $.DidHandleMap $c.OwnerDid }}
                 {{ template "user/fragments/picHandleLink" $owner }}
                 <span class="before:content-['·']"></span>
-                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}"><time>{{ $c.Created | shortTimeFmt }}</time></a>
+                <a class="text-gray-500 dark:text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" href="#comment-{{.ID}}">{{ template "repo/fragments/time" $c.Created }}</a>
               </div>
               <div class="prose dark:prose-invert">
                 {{ $c.Body | markdown }}

appview/pages/templates/repo/pulls/pulls.html

···
                         {{ template "user/fragments/picHandleLink" $owner }}
                     </span>
 
-                    <span>
-                        <time>
-                            {{ .Created | timeFmt }}
-                        </time>
+                    <span class="before:content-['·']">
+                        {{ template "repo/fragments/time" .Created }}
                     </span>
 
                     <span class="before:content-['·']">

appview/pages/templates/repo/tags.html

···
             <span>{{ .Tag.Tagger.Name }}</span>
 
             <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-            <time>{{ shortTimeFmt .Tag.Tagger.When }}</time>
+            {{ template "repo/fragments/shortTime" .Tag.Tagger.When }}
             {{ end }}
           </div>
         </div>
···
               {{  slice .Tag.Target.String 0 8  }}
             </a>
             <span>{{ .Tag.Tagger.Name }}</span>
-            <time>{{ timeFmt .Tag.Tagger.When }}</time>
+            {{ template "repo/fragments/time" .Tag.Tagger.When }}
             {{ end }}
           </div>
         </div>

appview/pages/templates/repo/tree.html

···
             {{ if .LastCommit}}
             <div class="flex items-end gap-2">
               <span  class="text text-gray-500 dark:text-gray-400 mr-6">{{ .LastCommit.Message }}</span>
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</span>
             </div>
             {{ end }}
         </div>
···
             {{ if .LastCommit}}
             <div class="flex items-end gap-2">
               <span  class="text text-gray-500 dark:text-gray-400 mr-6">{{ .LastCommit.Message }}</span>
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
+              <span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</span>
             </div>
             {{ end }}
         </div>

appview/pages/templates/settings.html

···
           {{ i "key" "w-3 h-3 dark:text-gray-300" }}
           <p class="font-bold dark:text-white">{{ .Name }}</p>
         </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">added {{ .Created | timeFmt }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">added {{ template "repo/fragments/time" .Created }}</p>
         <div class="overflow-x-auto whitespace-nowrap flex-1 max-w-full">
           <code class="text-sm text-gray-500 dark:text-gray-400">{{ .Key }}</code>
         </div>
···
             {{ end }}
           </div>
         </div>
-        <p class="text-sm text-gray-500 dark:text-gray-400">added {{ .CreatedAt | timeFmt }}</p>
+        <p class="text-sm text-gray-500 dark:text-gray-400">added {{ template "repo/fragments/time" .CreatedAt }}</p>
       </div>
       <div class="flex gap-2 items-center">
         {{ if not .Verified }}

appview/pages/templates/spindles/fragments/spindleListing.html

···
     {{ i "hard-drive" "w-4 h-4" }}
     {{ .Instance }}
     <span class="text-gray-500">
-      {{ .Created | shortTimeFmt }} ago
+      {{ template "repo/fragments/shortTimeAgo" .Created }}
     </span>
   </a>
   {{ else }}
···
     {{ i "hard-drive" "w-4 h-4" }}
     {{ .Instance }}
     <span class="text-gray-500">
-      {{ .Created | shortTimeFmt }} ago
+      {{ template "repo/fragments/shortTimeAgo" .Created }}
     </span>
   </div>
   {{ end }}

appview/pages/templates/timeline.html

···
                                         >{{ .Repo.Name }}</a
                                     >
                                 {{ end }}
-                                <time
+                                <span
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Repo.Created | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Repo.Created }}</span
                                 >
                             </p>
                         </div>
···
                                 {{ template "user/fragments/picHandleLink" $userHandle }}
                                 followed
                                 {{ template "user/fragments/picHandleLink" $subjectHandle }}
-                                <time
+                                <span
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Follow.FollowedAt | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Follow.FollowedAt }}</span
                                 >
                             </p>
                         </div>
···
                                     class="no-underline hover:underline"
                                     >{{ $repoOwnerHandle | truncateAt30 }}/{{ .Star.Repo.Name }}</a
                                 >
-                                <time
+                                <span
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Star.Created | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Star.Created }}</spa
                                 >
                             </p>
                         </div>