feat(twas): refracto to use intl api

frontend/deno.json

@@ -26,7 +26,6 @@
     "@std/front-matter": "jsr:@std/front-matter@1",
     "@std/semver": "jsr:@std/semver@1",
 
-    "twas": "npm:twas@^2.1.3",
     "$imagescript": "https://deno.land/x/[email protected]/mod.ts",
 
     "@deno/gfm": "jsr:@deno/[email protected]",

frontend/islands/admin/ScopeEdit.tsx

@@ -1,7 +1,7 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import type { FullScope } from "../../utils/api_types.ts";
 import { useState } from "preact/hooks";
-import twas from "twas";
+import { timeAgo } from "../../utils/timeAgo.ts";
 import { api, path } from "../../utils/api.ts";
 import { TableData, TableRow } from "../../components/Table.tsx";
 
@@ -71,7 +71,7 @@ export default function AdminScopeEdit({ scope }: { scope: FullScope }) {
           : publishAttemptsPerWeekLimit}
       </TableData>
       <TableData title={new Date(scope.createdAt).toISOString().slice(0, 10)}>
-        {twas(new Date(scope.createdAt).getTime())}
+        {timeAgo(new Date(scope.createdAt))}
       </TableData>
       <TableData align="right">
         {edit

frontend/islands/admin/UserEdit.tsx

@@ -1,6 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { useState } from "preact/hooks";
-import twas from "twas";
+import { timeAgo } from "../../utils/timeAgo.ts";
 import { FullUser } from "../../utils/api_types.ts";
 import { api, path } from "../../utils/api.ts";
 import { TableData, TableRow } from "../../components/Table.tsx";
@@ -68,7 +68,7 @@ export default function UserEdit({ user }: { user: FullUser }) {
           : String(isBlocked)}
       </TableData>
       <TableData title={new Date(user.createdAt).toISOString().slice(0, 10)}>
-        {twas(new Date(user.createdAt).getTime())}
+        {timeAgo(new Date(user.createdAt))}
       </TableData>
       <TableData class="relative whitespace-nowrap space-x-3 py-4 pl-3 pr-4 text-right text-sm font-semibold sm:pr-6">
         {edit

frontend/islands/new.tsx

@@ -8,7 +8,7 @@ import {
 import { Package, Scope } from "../utils/api_types.ts";
 import { api, path } from "../utils/api.ts";
 import { ComponentChildren } from "preact";
-import twas from "twas";
+import { timeAgo } from "../utils/timeAgo.ts";
 
 interface IconColorProps {
   done: Signal<unknown>;
@@ -419,7 +419,7 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {
               </p>
               <p>{pkg.value.description || <i>No description</i>}</p>
               <p class="text-jsr-gray-500">
-                Created {twas(new Date(pkg.value.createdAt).getTime())}.
+                Created {timeAgo(pkg.value.createdAt)}.
               </p>
               {fromCli && (
                 <p class="mt-2 text-jsr-gray-500">

frontend/routes/account/(_components)/AccountLayout.tsx

@@ -1,6 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { ComponentChildren } from "preact";
-import twas from "twas";
+import { timeAgo } from "../../../utils/timeAgo.ts";
 import { AccountNav, AccountNavTab } from "./AccountNav.tsx";
 import { FullUser, User } from "../../../utils/api_types.ts";
 import { GitHubUserLink } from "../../../islands/GithubUserLink.tsx";
@@ -25,7 +25,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
             {user.name}
           </h1>
           <p class="text-xs text-jsr-gray-600">
-            Created account {twas(new Date(user.createdAt).getTime())}
+            Created account {timeAgo(new Date(user.createdAt))}
           </p>
           <p class="text-base mt-2">
             <GitHubUserLink user={user} />

frontend/routes/account/tokens/index.tsx

@@ -5,7 +5,7 @@ import { define } from "../../../util.ts";
 import { path } from "../../../utils/api.ts";
 import { Token } from "../../../utils/api_types.ts";
 import { AccountLayout } from "../(_components)/AccountLayout.tsx";
-import twas from "twas";
+import { timeAgo } from "../../../utils/timeAgo.ts";
 import { RevokeToken } from "./(_islands)/RevokeToken.tsx";
 import TbPlus from "@preact-icons/tb/TbPlus";
 
@@ -105,7 +105,7 @@ function PersonalTokenRow({ token }: { token: Token }) {
                 <b>Active</b> {expiresAt === null
                   ? "forever"
                   : `– expires ${
-                    twas(new Date().getTime(), expiresAt.getTime()).replace(
+                    timeAgo(expiresAt).replace(
                       "ago",
                       "from now",
                     )
@@ -114,12 +114,12 @@ function PersonalTokenRow({ token }: { token: Token }) {
             )
             : (
               <span class="text-red-600">
-                <b>Inactive</b> - expired {twas(expiresAt.getTime())}
+                <b>Inactive</b> - expired {timeAgo(expiresAt)}
               </span>
             )}
         </p>
         <p class="text-sm sm:text-right">
-          Created {twas(new Date(token.createdAt).getTime())}
+          Created {timeAgo(new Date(token.createdAt))}
         </p>
       </div>
       <p class="text-sm text-jsr-gray-600">
@@ -160,7 +160,7 @@ function SessionRow({ token }: { token: Token }) {
                   <b>Active</b> {expiresAt === null
                     ? "forever"
                     : `– expires ${
-                      twas(new Date().getTime(), expiresAt.getTime()).replace(
+                      timeAgo(expiresAt).replace(
                         "ago",
                         "from now",
                       )
@@ -169,7 +169,7 @@ function SessionRow({ token }: { token: Token }) {
               )
               : (
                 <span class="text-red-600">
-                  <b>Inactive</b> - expired {twas(expiresAt.getTime())}
+                  <b>Inactive</b> - expired {timeAgo(expiresAt)}
                 </span>
               )}
 
@@ -178,7 +178,7 @@ function SessionRow({ token }: { token: Token }) {
         </div>
         <div>
           <p class="text-sm sm:text-right">
-            Created {twas(new Date(token.createdAt).getTime())}
+            Created {timeAgo(new Date(token.createdAt))}
           </p>
         </div>
       </div>

frontend/routes/admin/publishingTasks.tsx

@@ -5,7 +5,7 @@ import { AdminNav } from "./(_components)/AdminNav.tsx";
 import { path } from "../../utils/api.ts";
 import { List, PublishingTask } from "../../utils/api_types.ts";
 import { URLQuerySearch } from "../../components/URLQuerySearch.tsx";
-import twas from "twas";
+import { timeAgo } from "../../utils/timeAgo.ts";
 import PublishingTaskRequeue from "../../islands/PublishingTaskRequeue.tsx";
 
 export default define.page<typeof handler>(function PublishingTasks({
@@ -77,15 +77,15 @@ export default define.page<typeof handler>(function PublishingTasks({
                 10,
               )}
             >
-              {twas(new Date(publishingTask.createdAt).getTime())}
+              {timeAgo(new Date(publishingTask.createdAt))}
             </TableData>
             <TableData
               title={new Date(publishingTask.updatedAt).toISOString().slice(
                 0,
                 10,
               )}
             >
-              {twas(new Date(publishingTask.updatedAt).getTime())}
+              {timeAgo(new Date(publishingTask.updatedAt))}
             </TableData>
             <TableData>
               <PublishingTaskRequeue publishingTask={publishingTask} />

frontend/routes/package/(_components)/PackageHeader.tsx

@@ -9,7 +9,7 @@ import {
   TbRosetteDiscountCheck,
 } from "@preact-icons/tb";
 import { Tooltip } from "../../../components/Tooltip.tsx";
-import twas from "twas";
+import { timeAgo } from "../../../utils/timeAgo.ts";
 import { greaterThan, parse } from "@std/semver";
 
 interface PackageHeaderProps {
@@ -207,7 +207,7 @@ export function PackageHeader({
                     )}
                 >
                   {`${
-                    twas(new Date(selectedVersion.createdAt).getTime())
+                    timeAgo(new Date(selectedVersion.createdAt))
                   } (${selectedVersion.version})`}
                 </div>
               </div>

frontend/routes/package/og.ts

@@ -2,7 +2,7 @@
 
 import { HttpError, RouteConfig } from "fresh";
 import { Image } from "$imagescript";
-import twas from "twas";
+import { timeAgo } from "../../utils/timeAgo.ts";
 
 import { packageDataWithVersion } from "../../utils/data.ts";
 import { define } from "../../util.ts";
@@ -263,7 +263,7 @@ export const handler = define.handlers({
       const publishDateText = Image.renderText(
         dmmonoFont,
         25,
-        twas(new Date(selectedVersion.createdAt).getTime()),
+        timeAgo(new Date(selectedVersion.createdAt)),
         COLOR_GRAY,
       );
       const result = new Image(

frontend/routes/package/versions.tsx

@@ -7,7 +7,7 @@ import type {
 } from "../../utils/api_types.ts";
 import { define } from "../../util.ts";
 import { compare, equals, format, lessThan, parse, SemVer } from "@std/semver";
-import twas from "twas";
+import { timeAgo } from "../../utils/timeAgo.ts";
 import { packageData } from "../../utils/data.ts";
 import { PackageHeader } from "./(_components)/PackageHeader.tsx";
 import { PackageNav, Params } from "./(_components)/PackageNav.tsx";
@@ -239,7 +239,7 @@ function Version({
                     {" "}
                   </>
                 )}
-                {twas(new Date(version.createdAt).getTime())}
+                {timeAgo(new Date(version.createdAt))}
               </div>
             )}
           </div>
@@ -268,8 +268,7 @@ function Version({
               : <TbClockHour3 class="size-4 stroke-blue-500 stroke-2" />}
             <span>
               {ordinalNumber(tasks.length - i)} publishing attempt{" "}
-              {statusVerb[task.status]}{" "}
-              {twas(new Date(task.updatedAt).getTime())}
+              {statusVerb[task.status]} {timeAgo(new Date(task.updatedAt))}
             </span>
             <a href={`/status/${task.id}`} class="link justify-self-end z-20">
               Details

frontend/routes/status.tsx

@@ -9,7 +9,7 @@ import { path } from "../utils/api.ts";
 import { packageData } from "../utils/data.ts";
 import { PackageHeader } from "./package/(_components)/PackageHeader.tsx";
 import { PackageNav } from "./package/(_components)/PackageNav.tsx";
-import twas from "twas";
+import { timeAgo } from "../utils/timeAgo.ts";
 import PublishingTaskRequeue from "../islands/PublishingTaskRequeue.tsx";
 import { TbAlertCircle, TbCheck, TbClockHour3 } from "@preact-icons/tb";
 import { scopeIAM } from "../utils/iam.ts";
@@ -48,7 +48,7 @@ export default define.page<typeof handler>(function PackageListPage({
             </p>
             <p>
               <span class="font-semibold">Created:</span>{" "}
-              {twas(new Date(data.publishingTask.createdAt).getTime())}
+              {timeAgo(new Date(data.publishingTask.createdAt))}
             </p>
             {data.publishingTask.userId && (
               <p>

frontend/utils/timeAgo.ts

@@ -0,0 +1,24 @@
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+export function timeAgo(date: Date | string): string {
+  const now = new Date();
+  const past = new Date(date);
+  const diff = Math.abs(now.getTime() - past.getTime());
+
+  const duration = {
+    years: Math.floor(diff / (1000 * 60 * 60 * 24 * 365)),
+    months: Math.floor(
+      (diff % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30),
+    ),
+    days: Math.floor(
+      (diff % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24),
+    ),
+    hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+    minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+    seconds: Math.floor((diff % (1000 * 60)) / 1000),
+  };
+
+  // Force english because JSR is an English-only project
+  // @ts-ignore - TS doesn't know about this API yet
+  const formatter = new Intl.DurationFormat("en", { style: "long" });
+  return formatter.format(duration) + " ago";
+}