feat: show dates with full timestamps on hover

Author: MatteoGabriele

app/components/PackageCard.vue

@@ -80,6 +80,7 @@ const emit = defineEmits<{
               <dd>
                 <NuxtTime
                   :datetime="result.package.date"
+                  :title="result.package.date"
                   year="numeric"
                   month="short"
                   day="numeric"

app/components/PackageVersions.vue

@@ -346,6 +346,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <NuxtTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
+                  :title="row.primaryVersion.time"
                   year="numeric"
                   month="short"
                   day="numeric"
@@ -395,6 +396,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <NuxtTime
                   v-if="v.time"
                   :datetime="v.time"
+                  :title="v.time"
                   class="text-[10px] text-fg-subtle"
                   year="numeric"
                   month="short"
@@ -476,6 +478,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <NuxtTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
+                  :title="row.primaryVersion.time"
                   class="text-[10px] text-fg-subtle"
                   year="numeric"
                   month="short"
@@ -586,6 +589,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       <NuxtTime
                         v-if="v.time"
                         :datetime="v.time"
+                        :title="v.time"
                         class="text-[10px] text-fg-subtle"
                         year="numeric"
                         month="short"

app/pages/[...package].vue

@@ -577,7 +577,11 @@ defineOgImageComponent('Package', {
           <div v-if="pkg.time?.modified" class="space-y-1">
             <dt class="text-xs text-fg-subtle uppercase tracking-wider sm:text-right">Updated</dt>
             <dd class="font-mono text-sm text-fg sm:text-right">
-              <NuxtTime :datetime="pkg.time.modified" date-style="medium" />
+              <NuxtTime
+                :datetime="pkg.time.modified"
+                :title="pkg.time.modified"
+                date-style="medium"
+              />
             </dd>
           </div>
         </dl>