even wider lines

README.md

@@ -1,7 +1,6 @@
 # Fresh project
 
-Your new Fresh project is ready to go. You can follow the Fresh "Getting Started" guide here:
-https://fresh.deno.dev/docs/getting-started
+Your new Fresh project is ready to go. You can follow the Fresh "Getting Started" guide here: https://fresh.deno.dev/docs/getting-started
 
 ### Usage
 

deno.jsonc

@@ -7,11 +7,13 @@
     "start": "deno run -A --watch=static/,routes/ dev.ts",
     "build": "deno run -A dev.ts build",
     "preview": "deno run -A main.ts",
-    "update": "deno run -A -r https://fresh.deno.dev/update ."
+    "update": "deno run -A -r https://fresh.deno.dev/update .",
+    // custom tasks
+    "format-all": "deno fmt ."
   },
   "fmt": {
     "semiColons": false,
-    "lineWidth": 130,
+    "lineWidth": 140,
     "singleQuote": true
   },
   "lint": {
@@ -27,14 +29,14 @@
   ],
   "imports": {
     "$fresh/": "https://deno.land/x/fresh@1.7.3/",
-    "preact": "https://esm.sh/preact@10.22.0",
-    "preact/": "https://esm.sh/preact@10.22.0/",
+    "$std/": "https://deno.land/std@0.216.0/",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "preact": "https://esm.sh/preact@10.22.0",
+    "preact/": "https://esm.sh/preact@10.22.0/",
     "tailwindcss": "npm:tailwindcss@3.4.1",
     "tailwindcss/": "npm:/tailwindcss@3.4.1/",
-    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
-    "$std/": "https://deno.land/std@0.216.0/"
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js"
   },
   "compilerOptions": {
     "jsx": "react-jsx",

justfile

@@ -1,2 +1,5 @@
-serve:
+start:
   deno task start
+
+format:
+  deno task format-all

lib/facts.ts

@@ -1,6 +1,5 @@
 export const HISTORICAL_FACTS: Record<string, string> = {
-  '2024-10-15':
-    "NASA's Artemis III mission is set to return humans to the Moon for the first time in over 50 years (scheduled for 2024).",
+  '2024-10-15': "NASA's Artemis III mission is set to return humans to the Moon for the first time in over 50 years (scheduled for 2024).",
   '2024-09-16': 'General Motors was founded by William C. Durant in 1908.',
   '2024-09-15': "Marilyn Monroe's famous skirt scene was filmed above a subway grate on a NYC sidewalk in 1954.",
   '2023-12-06': 'The 13th Amendment to the United States Constitution, abolishing slavery, was ratified in 1865.',
@@ -31,8 +30,7 @@ export const HISTORICAL_FACTS: Record<string, string> = {
   '2021-10-19': 'The Siege of Yorktown, the last major battle of the American Revolutionary War, ended in 1781.',
   '2021-09-21': 'International Day of Peace, declared by the United Nations, is celebrated on this day.',
   '2021-08-31': 'Princess Diana tragically died in a car accident in Paris in 1997.',
-  '2021-07-20':
-    'The Apollo 11 moon landing took place in 1969, with Neil Armstrong becoming the first person to walk on the Moon.',
+  '2021-07-20': 'The Apollo 11 moon landing took place in 1969, with Neil Armstrong becoming the first person to walk on the Moon.',
   '2021-05-25': 'George Floyd was killed by police in Minneapolis, sparking global protests against racial injustice in 2020.',
   '2021-04-13': 'Thomas Jefferson, the third President of the United States, was born in 1743.',
   '2021-03-02': 'The U.S. Congress passed the Jones Act in 1917, giving Puerto Ricans U.S. citizenship.',

routes/index.tsx

@@ -1,4 +1,3 @@
-import { format } from '$std/datetime/mod.ts'
 import { UserAgent } from '$std/http/user_agent.ts'
 import type { FunctionalComponent } from 'preact'
 import type { Handlers, PageProps } from '$fresh/server.ts'
@@ -56,26 +55,36 @@ export const handler: Handlers = {
 
 type HomeProps = PageProps & { data: AgentInfo }
 
-const formatDate = (date: Date) => format(date, 'MMMM d, yyyy')
+const getLocale = () => navigator.language || navigator.languages[0] || 'en-US'
+
+const formatYearMonth = (date: Date) => {
+  return date.toLocaleDateString(getLocale(), { year: 'numeric', month: 'long' })
+}
 const toISODate = (date: Date) => date.toISOString().split('T')[0]
 
-const MaybeKnownBrowserPreamble = ({ known, name, source }: AgentInfo) => {
+const genSuffix = () => {
+  const suffixes = ['Sweet', 'Nice', 'Cool', 'Awesome', 'Rad', 'Neat', 'Groovy', 'Dope', 'Tight', 'Sick', 'Wicked', 'Lit', 'Fire']
+  return suffixes[Math.floor(Math.random() * suffixes.length)]
+}
+
+const MaybeKnownBrowserPreamble = ({ userAgent, known, name, source }: AgentInfo) => {
   return (
     <p>
       {!known && (
         <>
-          Whoa! That's a new one! Err, maybe an old one? {name && (
+          Whoa! That's a new one! Or, maybe it's an old one? {name && (
             <>
               We haven't seen <strong>{name}</strong> before.{' '}
             </>
           )}
           Care to open a PR?
         </>
       )}
+
       {known && source === 'query' && <>Ok! That looks to be {name}.</>}
       {known && source === 'header' && (
         <>
-          Ok! Looks like you're using <strong>{name}</strong>. Nice one.
+          Looks like you're using <strong>{name}</strong> on <strong>{userAgent?.os.name}</strong>. {genSuffix()}.
         </>
       )}
     </p>
@@ -99,7 +108,14 @@ const timeSinceRelease = (on: Date | undefined | null): string | null => {
   if (adjustedMonths > 0) parts.push(`${adjustedMonths} month${adjustedMonths > 1 ? 's' : ''}`)
   if (adjustedDays > 0) parts.push(`${adjustedDays} day${adjustedDays > 1 ? 's' : ''}`)
 
-  return parts.join(', ') + ' ago'
+  return andJoin(parts) + ' ago'
+}
+
+const andJoin = (arr: string[]) => {
+  if (arr.length === 0) return ''
+  if (arr.length === 1) return arr[0]
+  if (arr.length === 2) return arr.join(' and ')
+  return arr.slice(0, -1).join(', ') + ', and ' + arr.slice(-1)[0]
 }
 
 const ReleaseDescription = ({ name, userAgent, on, before, after }: AgentInfo) => {
@@ -110,20 +126,19 @@ const ReleaseDescription = ({ name, userAgent, on, before, after }: AgentInfo) =
   return (
     <p>
       {name} {userAgent.browser.major} was released
-      {on && ` on or about ${formatDate(on)}`}
+      {on && ` in ${formatYearMonth(on)} – ${timeSince}.`}
       {!on && after && !before && ` sometime`}
-      {!on && after && ` after ${formatDate(after)}`}
+      {!on && after && ` after ${formatYearMonth(after)}`}
       {!on && after && before && ` and`}
-      {!on && before && ` before ${formatDate(before)}`}
+      {!on && before && ` before ${formatYearMonth(before)}`}
       {!on && !after && !before && `. That's all we know`}
-      .
-      {timeSince && ` That's ${timeSince}.`}
+      {}
     </p>
   )
 }
 
 const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
-  const { source, known, userAgent, name, major, on, before, after } = data
+  const { source, known, userAgent, on } = data
 
   return (
     <div class='container lg mx-auto flex flex-col items-center justify-center'>