cleanup

nonrational · Oct 20, 2024 · a5966e7 · a5966e7
1 parent 1fe927c
commit a5966e7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 33 deletions.
diff --git a/lib/agent.ts b/lib/agent.ts
@@ -68,10 +68,10 @@ export const getAgentReleaseInfo = (ua: string): AgentRelease => {
   const versionRank = Object.entries(agentStats.usage_global)
     .filter(([_, usage]) => usage > 0)
     .sort(([, usageA], [, usageB]) => usageB - usageA)
-    .findIndex(([v]) => v === version) + 1
+    .findIndex(([v]) => v === version) + 2
 
   return {
-    ok: true,
+    ok: Boolean(agentStats.release_date[version]),
     name,
     version,
     userAgent,

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -11,6 +11,12 @@ export const formatDateYearMonth = (date: Date) => {
   return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long' })
 }
 
+export const toOrdinal = (index: number): string => {
+  const s = ['th', 'st', 'nd', 'rd']
+  const v = index % 100
+  return index + (s[(v - 20) % 10] || s[v] || s[0])
+}
+
 export const andJoin = (arr: string[]) => {
   if (arr.length === 0) return ''
   if (arr.length === 1) return arr[0]

diff --git a/routes/index.tsx b/routes/index.tsx
@@ -2,7 +2,7 @@ import type { FunctionalComponent } from 'preact'
 import type { Handlers, PageProps } from '$fresh/server.ts'
 
 import { type AgentRelease, getAgentReleaseInfo } from '../lib/agent.ts'
-import { formatDateYearMonth, humanizedTimeSince, randInterjection } from '../lib/utils.ts'
+import { formatDateYearMonth, humanizedTimeSince, randInterjection, toOrdinal } from '../lib/utils.ts'
 import { getFamilyName, getGlobalUsageStats, getNorthAmericaUsageStats } from '../lib/family.ts'
 
 export type KnownBrowserName = string
@@ -22,7 +22,7 @@ export const handler: Handlers = {
   },
 }
 
-const MaybeKnownBrowserPreamble = ({ ok, userAgent, name, source }: RenderData) => {
+const AgentAck = ({ ok, userAgent, name, source }: RenderData) => {
   return (
     <p>
       {!ok && (
@@ -43,39 +43,41 @@ const MaybeKnownBrowserPreamble = ({ ok, userAgent, name, source }: RenderData)
   )
 }
 
-const ReleaseDescription = ({ userAgent, releaseDate, name, version, usage, currentVersion }: RenderData) => {
+const ReleaseDescription = ({ userAgent, ok, releaseDate, name, version }: RenderData) => {
   if (!userAgent) return null
 
   const timeSince = humanizedTimeSince(releaseDate)
+
+  return (
+    <p>
+      {name} {version} was released
+      {ok && ` ${timeSince}, in ${formatDateYearMonth(releaseDate)}.`}
+      {!ok && `. That's all we know.`}
+    </p>
+  )
+}
+
+const UsageStats = ({ userAgent, name, usage, version, currentVersion }: RenderData) => {
+  if (!userAgent) return null
+
   const globalUsage = getGlobalUsageStats(userAgent.browser, userAgent.device)
   const americasUsage = getNorthAmericaUsageStats(userAgent.browser, userAgent.device)
 
   return (
-    <>
-      <p>
-        {name} {version} was released
-        {releaseDate && ` ${timeSince}, in ${formatDateYearMonth(releaseDate)}.`}
-        {!releaseDate && `. That's all we know.`}
-      </p>
-      <p>
-        {
-          /* {familyName && familyUsage > 0 && (
-          <>
-            {familyUsage.toFixed(2)}% of the world uses {getFamilyName(name)}.<br />
-          </>
-        )} */
-        }
-        {Boolean(currentVersion && usage > 0) && <>This version</>}
-        {currentVersion === version && <>{' '}is the most recent release</>}
-        {currentVersion === version && usage > 0 && <>{' '}and</>}
-        {usage > 0 && (
-          <>
-            {' '}represents <strong>{usage.toFixed(2)}%</strong> of global browser traffic
-          </>
-        )}. {getFamilyName(name)} (on desktop) is used by <strong>{americasUsage.toFixed(2)}</strong>% of North America and{' '}
-        <strong>{globalUsage.toFixed(2)}%</strong> of the world.
-      </p>
-    </>
+    <p>
+      {Boolean(currentVersion && usage > 0) && <>This version</>}
+      {currentVersion === version && <>{' '}is the most recent release</>}
+      {currentVersion === version && usage > 0 && <>{' '}and</>}
+      {usage > 0 && (
+        <>
+          {' '}represents <strong>{usage.toFixed(2)}%</strong> of global browser traffic
+        </>
+      )}
+      {Boolean(currentVersion && usage > 0) && <>.</>}
+
+      {getFamilyName(name)} (on desktop) is used by <strong>{americasUsage.toFixed(2)}</strong>% of North America and{' '}
+      <strong>{globalUsage.toFixed(2)}%</strong> of the world.
+    </p>
   )
 }
 
@@ -102,11 +104,11 @@ const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
       </form>
 
       <div class='p-lg'>
-        <MaybeKnownBrowserPreamble {...data} />
+        <AgentAck {...data} />
         <ReleaseDescription {...data} />
-
+        <UsageStats {...data} />
         <p>
-          This is the {data.rank}th most popular version of {data.name} in the world.
+          This is the {data.rank > 1 && toOrdinal(data.rank)} most popular version of {data.name} in the world.
         </p>
       </div>
     </div>