From cd1eaca903e1996e2da87b71087217053c85294b Mon Sep 17 00:00:00 2001
From: uncenter <uncenter@uncenter.dev>
Date: Sat, 12 Jul 2025 17:11:21 -0400
Subject: [PATCH] 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                          |  5 ++++-
 appview/pages/templates/knot.html                 |  4 ++--
 appview/pages/templates/knots.html                |  4 ++--
 appview/pages/templates/repo/branches.html        |  4 ++--
 appview/pages/templates/repo/commit.html          |  2 +-
 appview/pages/templates/repo/compare/new.html     |  2 +-
 appview/pages/templates/repo/empty.html           |  2 +-
 .../pages/templates/repo/fragments/artifact.html  |  4 ++--
 appview/pages/templates/repo/fragments/time.html  | 15 +++++++++++++++
 appview/pages/templates/repo/index.html           | 14 +++++---------
 .../repo/issues/fragments/editIssueComment.html   |  2 +-
 .../repo/issues/fragments/issueComment.html       |  6 +++---
 appview/pages/templates/repo/issues/issue.html    |  4 +---
 appview/pages/templates/repo/issues/issues.html   |  4 +---
 appview/pages/templates/repo/log.html             |  4 ++--
 .../pages/templates/repo/pipelines/pipelines.html |  4 +---
 .../repo/pulls/fragments/pullHeader.html          |  2 +-
 appview/pages/templates/repo/pulls/pull.html      |  4 ++--
 appview/pages/templates/repo/pulls/pulls.html     |  6 ++----
 appview/pages/templates/repo/tags.html            |  4 ++--
 appview/pages/templates/repo/tree.html            |  4 ++--
 appview/pages/templates/settings.html             |  4 ++--
 .../spindles/fragments/spindleListing.html        |  4 ++--
 appview/pages/templates/timeline.html             | 12 ++++++------
 24 files changed, 63 insertions(+), 57 deletions(-)
 create mode 100644 appview/pages/templates/repo/fragments/time.html

diff --git a/appview/pages/funcmap.go b/appview/pages/funcmap.go
index abf2252..f15de80 100644
--- a/appview/pages/funcmap.go
+++ b/appview/pages/funcmap.go
@@ -107,7 +107,10 @@ func (p *Pages) funcMap() template.FuncMap {
 		},
 		"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 {
diff --git a/appview/pages/templates/knot.html b/appview/pages/templates/knot.html
index 46c6231..37782ed 100644
--- a/appview/pages/templates/knot.html
+++ b/appview/pages/templates/knot.html
@@ -26,11 +26,11 @@
     </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">
diff --git a/appview/pages/templates/knots.html b/appview/pages/templates/knots.html
index 3a21bf9..2509555 100644
--- a/appview/pages/templates/knots.html
+++ b/appview/pages/templates/knots.html
@@ -44,7 +44,7 @@
                 </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 }}
@@ -70,7 +70,7 @@
                 </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
diff --git a/appview/pages/templates/repo/branches.html b/appview/pages/templates/repo/branches.html
index 72a48f2..261b7d8 100644
--- a/appview/pages/templates/repo/branches.html
+++ b/appview/pages/templates/repo/branches.html
@@ -59,7 +59,7 @@
         </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>
@@ -98,7 +98,7 @@
           </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>
diff --git a/appview/pages/templates/repo/commit.html b/appview/pages/templates/repo/commit.html
index 8eaab8e..0b341da 100644
--- a/appview/pages/templates/repo/commit.html
+++ b/appview/pages/templates/repo/commit.html
@@ -34,7 +34,7 @@
             <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>
 
diff --git a/appview/pages/templates/repo/compare/new.html b/appview/pages/templates/repo/compare/new.html
index 5055aab..a501984 100644
--- a/appview/pages/templates/repo/compare/new.html
+++ b/appview/pages/templates/repo/compare/new.html
@@ -19,7 +19,7 @@
             <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>
+                <div class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $br.Commit.Committer.When }}</div>
               </div>
             </a>
             {{ end }}
diff --git a/appview/pages/templates/repo/empty.html b/appview/pages/templates/repo/empty.html
index 639df80..54cb8ee 100644
--- a/appview/pages/templates/repo/empty.html
+++ b/appview/pages/templates/repo/empty.html
@@ -17,7 +17,7 @@
           <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>
+              <div class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" $br.Commit.Committer.When }}</div>
             </div>
           </a>
           {{ end }}
diff --git a/appview/pages/templates/repo/fragments/artifact.html b/appview/pages/templates/repo/fragments/artifact.html
index bf8849d..b4d98b7 100644
--- a/appview/pages/templates/repo/fragments/artifact.html
+++ b/appview/pages/templates/repo/fragments/artifact.html
@@ -10,8 +10,8 @@
       </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>
diff --git a/appview/pages/templates/repo/fragments/time.html b/appview/pages/templates/repo/fragments/time.html
new file mode 100644
index 0000000..7934f81
--- /dev/null
+++ b/appview/pages/templates/repo/fragments/time.html
@@ -0,0 +1,15 @@
+{{ 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 }}
\ No newline at end of file
diff --git a/appview/pages/templates/repo/index.html b/appview/pages/templates/repo/index.html
index 55e5abd..7081f14 100644
--- a/appview/pages/templates/repo/index.html
+++ b/appview/pages/templates/repo/index.html
@@ -149,9 +149,7 @@
                         </a>
 
                         {{ if .LastCommit }}
-                        <time class="text-xs text-gray-500 dark:text-gray-400"
-                            >{{ timeFmt .LastCommit.When }}</time
-                        >
+                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</div>
                         {{ end }}
                     </div>
                 </div>
@@ -172,9 +170,7 @@
                         </a>
 
                         {{ if .LastCommit }}
-                        <time class="text-xs text-gray-500 dark:text-gray-400"
-                            >{{ timeFmt .LastCommit.When }}</time
-                        >
+                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</div>
                         {{ end }}
                     </div>
                 </div>
@@ -273,7 +269,7 @@
           >
         </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 }}
@@ -320,7 +316,7 @@
             </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>
+              <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Commit.Committer.When }}</div>
             {{ end }}
             {{ if .IsDefault }}
             <span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
@@ -366,7 +362,7 @@
           </div>
           <div>
             {{ with .Tag }}
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .Tagger.When }}</time>
+              <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Tagger.When }}</div>
             {{ end }}
             {{ if eq $idx 0 }}
               {{ with .Tag }}<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>{{ end }}
diff --git a/appview/pages/templates/repo/issues/fragments/editIssueComment.html b/appview/pages/templates/repo/issues/fragments/editIssueComment.html
index ce6aac3..64082f4 100644
--- a/appview/pages/templates/repo/issues/fragments/editIssueComment.html
+++ b/appview/pages/templates/repo/issues/fragments/editIssueComment.html
@@ -19,7 +19,7 @@
           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
diff --git a/appview/pages/templates/repo/issues/fragments/issueComment.html b/appview/pages/templates/repo/issues/fragments/issueComment.html
index 4ba3759..e3279f3 100644
--- a/appview/pages/templates/repo/issues/fragments/issueComment.html
+++ b/appview/pages/templates/repo/issues/fragments/issueComment.html
@@ -11,11 +11,11 @@
           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>
       
diff --git a/appview/pages/templates/repo/issues/issue.html b/appview/pages/templates/repo/issues/issue.html
index f26a536..f279343 100644
--- a/appview/pages/templates/repo/issues/issue.html
+++ b/appview/pages/templates/repo/issues/issue.html
@@ -35,9 +35,7 @@
                 {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
                 {{ template "user/fragments/picHandle" $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>
 
diff --git a/appview/pages/templates/repo/issues/issues.html b/appview/pages/templates/repo/issues/issues.html
index 1501159..21aede5 100644
--- a/appview/pages/templates/repo/issues/issues.html
+++ b/appview/pages/templates/repo/issues/issues.html
@@ -70,9 +70,7 @@
       </span>
 
       <span class="before:content-['·']">
-        <time>
-          {{ .Created | timeFmt }}
-        </time>
+        {{ template "repo/fragments/time" .Created }}
       </span>
 
       <span class="before:content-['·']">
diff --git a/appview/pages/templates/repo/log.html b/appview/pages/templates/repo/log.html
index 793cb4a..f0fb1e3 100644
--- a/appview/pages/templates/repo/log.html
+++ b/appview/pages/templates/repo/log.html
@@ -87,7 +87,7 @@
                           {{ 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>
@@ -163,7 +163,7 @@
                         </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 }}
diff --git a/appview/pages/templates/repo/pipelines/pipelines.html b/appview/pages/templates/repo/pipelines/pipelines.html
index 0d06538..457c189 100644
--- a/appview/pages/templates/repo/pipelines/pipelines.html
+++ b/appview/pages/templates/repo/pipelines/pipelines.html
@@ -74,9 +74,7 @@
         </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 }}
diff --git a/appview/pages/templates/repo/pulls/fragments/pullHeader.html b/appview/pages/templates/repo/pulls/fragments/pullHeader.html
index 24cb25a..c3a67c0 100644
--- a/appview/pages/templates/repo/pulls/fragments/pullHeader.html
+++ b/appview/pages/templates/repo/pulls/fragments/pullHeader.html
@@ -31,7 +31,7 @@
             {{ $owner := index $.DidHandleMap .Pull.OwnerDid }}
             {{ template "user/fragments/picHandle" $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>
diff --git a/appview/pages/templates/repo/pulls/pull.html b/appview/pages/templates/repo/pulls/pull.html
index 16d1084..0023358 100644
--- a/appview/pages/templates/repo/pulls/pull.html
+++ b/appview/pages/templates/repo/pulls/pull.html
@@ -55,7 +55,7 @@
                 <span class="hidden md:inline">{{$re}}submitted</span>
                 by <a href="/{{ $owner }}">{{ $owner }}</a>
                 <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 }}
@@ -154,7 +154,7 @@
                 {{ $owner := index $.DidHandleMap $c.OwnerDid }} 
                 <a href="/{{$owner}}">{{$owner}}</a>
                 <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 }}
diff --git a/appview/pages/templates/repo/pulls/pulls.html b/appview/pages/templates/repo/pulls/pulls.html
index 2c46070..f4c9dbf 100644
--- a/appview/pages/templates/repo/pulls/pulls.html
+++ b/appview/pages/templates/repo/pulls/pulls.html
@@ -79,10 +79,8 @@
                         {{ template "user/fragments/picHandle" $owner }}
                     </span>
 
-                    <span>
-                        <time>
-                            {{ .Created | timeFmt }}
-                        </time>
+                    <span class="before:content-['·']">
+                        {{ template "repo/fragments/time" .Created }}
                     </span>
 
                     <span class="before:content-['·']">
diff --git a/appview/pages/templates/repo/tags.html b/appview/pages/templates/repo/tags.html
index a17d05f..2fe3fa1 100644
--- a/appview/pages/templates/repo/tags.html
+++ b/appview/pages/templates/repo/tags.html
@@ -35,7 +35,7 @@
             <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>
@@ -54,7 +54,7 @@
               {{  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>
diff --git a/appview/pages/templates/repo/tree.html b/appview/pages/templates/repo/tree.html
index 6dcbb36..12af682 100644
--- a/appview/pages/templates/repo/tree.html
+++ b/appview/pages/templates/repo/tree.html
@@ -63,7 +63,7 @@
                 </div>
             </a>
             {{ if .LastCommit}}
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
+              <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</div>
             {{ end }}
         </div>
     </div>
@@ -80,7 +80,7 @@
                 </div>
             </a>
             {{ if .LastCommit}}
-              <time class="text-xs text-gray-500 dark:text-gray-400">{{ timeFmt .LastCommit.When }}</time>
+              <div class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .LastCommit.When }}</div>
             {{ end }}
         </div>
     </div>
diff --git a/appview/pages/templates/settings.html b/appview/pages/templates/settings.html
index 1405791..8a1979b 100644
--- a/appview/pages/templates/settings.html
+++ b/appview/pages/templates/settings.html
@@ -39,7 +39,7 @@
           {{ 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>
@@ -112,7 +112,7 @@
             {{ 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 }}
diff --git a/appview/pages/templates/spindles/fragments/spindleListing.html b/appview/pages/templates/spindles/fragments/spindleListing.html
index 71a5e73..56ae1e0 100644
--- a/appview/pages/templates/spindles/fragments/spindleListing.html
+++ b/appview/pages/templates/spindles/fragments/spindleListing.html
@@ -11,7 +11,7 @@
     {{ i "hard-drive" "w-4 h-4" }}
     {{ .Instance }}
     <span class="text-gray-500">
-      {{ .Created | shortTimeFmt }} ago
+      {{ template "repo/fragments/shortTimeAgo" .Created }}
     </span>
   </a>
   {{ else }}
@@ -19,7 +19,7 @@
     {{ i "hard-drive" "w-4 h-4" }}
     {{ .Instance }}
     <span class="text-gray-500">
-      {{ .Created | shortTimeFmt }} ago
+      {{ template "repo/fragments/shortTimeAgo" .Created }}
     </span>
   </div>
   {{ end }}
diff --git a/appview/pages/templates/timeline.html b/appview/pages/templates/timeline.html
index 02cba48..4ecadc1 100644
--- a/appview/pages/templates/timeline.html
+++ b/appview/pages/templates/timeline.html
@@ -84,9 +84,9 @@
                                         >{{ .Repo.Name }}</a
                                     >
                                 {{ end }}
-                                <time
+                                <div
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Repo.Created | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Repo.Created }}</div
                                 >
                             </p>
                         </div>
@@ -98,9 +98,9 @@
                                 {{ template "user/fragments/picHandle" $userHandle }}
                                 followed
                                 {{ template "user/fragments/picHandle" $subjectHandle }}
-                                <time
+                                <div
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Follow.FollowedAt | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Follow.FollowedAt }}</div
                                 >
                             </p>
                         </div>
@@ -116,9 +116,9 @@
                                     class="no-underline hover:underline"
                                     >{{ $repoOwnerHandle | truncateAt30 }}/{{ .Star.Repo.Name }}</a
                                 >
-                                <time
+                                <div
                                     class="text-gray-700 dark:text-gray-400 text-xs"
-                                    >{{ .Star.Created | timeFmt }}</time
+                                    >{{ template "repo/fragments/time" .Star.Created }}</div
                                 >
                             </p>
                         </div>
-- 
2.43.0