that's enough for now

fresh.gen.ts

@@ -2,11 +2,11 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $_404 from "./routes/_404.tsx";
-import * as $_app from "./routes/_app.tsx";
-import * as $index from "./routes/index.tsx";
+import * as $_404 from "./routes/_404.tsx"
+import * as $_app from "./routes/_app.tsx"
+import * as $index from "./routes/index.tsx"
 
-import type { Manifest } from "$fresh/server.ts";
+import type { Manifest } from "$fresh/server.ts"
 
 const manifest = {
   routes: {
@@ -16,6 +16,6 @@ const manifest = {
   },
   islands: {},
   baseUrl: import.meta.url,
-} satisfies Manifest;
+} satisfies Manifest
 
-export default manifest;
+export default manifest

justfile

@@ -0,0 +1,2 @@
+serve:
+  deno task start

fixtures/releases.ts → lib/browsers.ts

@@ -248,6 +248,8 @@ const AppleSafari: BrowserDefinition = {
     wikipediaUrl: "https://en.wikipedia.org/wiki/Safari_version_history",
   },
   releases: {
+    19: null,
+    18: "2024-09-16",
     17: "2023-09-18",
     16: "2022-09-12",
     15: "2021-09-20",

lib/facts.ts

@@ -0,0 +1,59 @@
+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-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.",
+  "2023-10-31": "Halloween celebrations, especially significant in Western cultures, take place.",
+  "2023-10-10": "The Panama Canal was handed over to Panama for full control in 1979.",
+  "2023-09-12": "John F. Kennedy delivered his famous 'We choose to go to the Moon' speech at Rice University in 1962.",
+  "2023-08-15": "India celebrates its Independence Day, marking freedom from British rule in 1947.",
+  "2023-07-18": "Nelson Mandela International Day is celebrated, honoring the legacy of the former South African president.",
+  "2023-05-30": "Joan of Arc was burned at the stake in 1431 during the Hundred Years' War.",
+  "2023-05-02": "The Battle of Tannenberg Line during World War II began in 1944.",
+  "2023-04-04": "Dr. Martin Luther King Jr. was assassinated in 1968 in Memphis, Tennessee.",
+  "2023-03-07": "Alexander Graham Bell received a patent for the telephone in 1876.",
+  "2023-02-07": "The Beatles arrived in the United States for the first time in 1964.",
+  "2023-01-10": "The League of Nations was founded in 1920 as a result of the Paris Peace Conference.",
+  "2022-11-29": "The United Nations voted to partition Palestine in 1947, leading to the creation of Israel.",
+  "2022-10-25": "The Battle of Agincourt, a major English victory during the Hundred Years' War, was fought in 1415.",
+  "2022-09-27": "Google was officially incorporated as a company in 1998.",
+  "2022-08-30": "Thurgood Marshall was confirmed as the first African-American Supreme Court Justice in 1967.",
+  "2022-08-02": "The Gulf of Tonkin incident, which escalated U.S. involvement in Vietnam, occurred in 1964.",
+  "2022-06-21": "The first day of summer in the Northern Hemisphere (Summer Solstice).",
+  "2022-05-24": "The Brooklyn Bridge opened to traffic in 1883.",
+  "2022-04-26": "The Chernobyl nuclear disaster occurred in 1986 in the Soviet Union.",
+  "2022-03-29": "The United States withdrew its last troops from Vietnam in 1973.",
+  "2022-03-01": "The Articles of Confederation were ratified in 1781, the United States' first constitution.",
+  "2022-02-01": "NASA's space shuttle Columbia disintegrated during reentry in 2003, killing all seven astronauts aboard.",
+  "2022-01-04": "Louis Braille, the inventor of the reading system for the blind, was born in 1809.",
+  "2021-11-16": "The United States ended its combat mission in Iraq in 2011.",
+  "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-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.",
+  "2021-01-19": "Edgar Allan Poe was born in 1809, famous for his gothic literature and poems.",
+  "2020-11-17": "The computer mouse was first demonstrated by Douglas Engelbart in 1968.",
+  "2020-10-06": "The Yom Kippur War between Israel and a coalition of Arab states began in 1973.",
+  "2020-08-25": "Paris was liberated from Nazi occupation in 1944 during World War II.",
+  "2020-07-14": "The French Revolution's storming of the Bastille prison occurred in 1789.",
+  "2020-05-19": "Amelia Earhart became the first woman to fly solo nonstop across the Atlantic in 1932.",
+  "2020-04-07": "The World Health Organization declared COVID-19 a global pandemic in 2020.",
+  "2020-02-04": "Facebook was founded by Mark Zuckerberg and his college roommates in 2004.",
+  "2019-12-10": "Alfred Nobel, the founder of the Nobel Prize, passed away in 1896.",
+  "2019-10-22": "The Cuban Missile Crisis began in 1962, bringing the world to the brink of nuclear war.",
+  "2019-09-10": "Sweden became the first country in the world to introduce daylight saving time in 1916.",
+  "2019-07-30": "NASA's Mars Rover Opportunity launched in 2003 to explore the Martian surface.",
+  "2019-06-04": "The Tiananmen Square massacre took place in Beijing in 1989.",
+  "2019-04-23": "William Shakespeare was born and died on this day in 1564 and 1616, respectively.",
+  "2019-03-12": "The Girl Scouts of the USA were founded in 1912.",
+  "2019-01-29": "Oprah Winfrey's talk show debuted nationally in 1986.",
+  "2018-12-04": "The Civil Rights Act of 1964, prohibiting discrimination, was signed into law.",
+  "2018-10-16": "Marie Antoinette was executed during the French Revolution in 1793.",
+  "2018-09-04": "Google was founded by Larry Page and Sergey Brin in 1998.",
+  "2018-07-24": "The signing of the Kellogg-Briand Pact occurred in 1928, aiming to outlaw war.",
+}

routes/index.tsx

@@ -1,8 +1,10 @@
 import type { Handlers, PageProps } from "$fresh/server.ts"
 import { UserAgent } from "$std/http/user_agent.ts"
 import type { FunctionalComponent } from "preact"
-import type { BrowserName, ReleaseDate } from "../fixtures/releases.ts"
-import { getReleaseInfo, isKnownBrowser } from "../fixtures/releases.ts"
+
+import type { BrowserName, ReleaseDate } from "../lib/browsers.ts"
+import { getReleaseInfo, isKnownBrowser } from "../lib/browsers.ts"
+import { HISTORICAL_FACTS } from "../lib/facts.ts"
 
 export const handler: Handlers = {
   GET(req, ctx) {
@@ -22,14 +24,15 @@ export const handler: Handlers = {
       return ctx.render({ source, known: true, userAgent, ...userAgent.browser, ...releaseInfo })
     }
 
-    return ctx.render({ source, known: false, userAgent, name, version: major, on: null, before: null, after: null })
+    return ctx.render({ source, known: false, userAgent, name, major, on: null, before: null, after: null })
   },
 }
 
 type HomeProps = PageProps & {
   data: {
     source: string
     known: boolean
+    major: string
     userAgent: string
     name: BrowserName
     version: number
@@ -40,53 +43,82 @@ type HomeProps = PageProps & {
 }
 
 const formatDate = (date: Date) => date.toLocaleDateString()
+const toISODate = (date: Date) => date.toISOString().split("T")[0]
 
-const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
-  const { source, known, userAgent, name, version, on, before, after } = data
+const MaybeKnownBrowserPreamble = ({ known, name, source }: HomeProps["data"]) => {
+  return (
+    <p>
+      {!known && (
+        <>
+          Whoa! That's a new one! Err, maybe 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.
+        </>
+      )}
+    </p>
+  )
+}
 
+const ReleaseDescription = ({ name, major, on, before, after }: HomeProps["data"]) => {
   const daysSinceRelease = on && Math.floor((new Date().getTime() - on.getTime()) / (1000 * 60 * 60 * 24))
   const yearsSinceRelease = on && Math.floor(daysSinceRelease / 365)
 
+  return (
+    <p>
+      {name} {major} was released
+      {on && ` on or about ${formatDate(on)}`}
+      {!on && after && !before && ` sometime`}
+      {!on && after && ` after ${formatDate(after)}`}
+      {!on && after && before && ` and`}
+      {!on && before && ` before ${formatDate(before)}`}
+      {
+        /* {!on && after && before &&
+          ` between ${formatDate(after)} and ${formatDate(before)}`} */
+      }
+      {!on && !after && !before && `. That's all we know`}
+      .
+      {on && yearsSinceRelease > 1 && ` That's ${yearsSinceRelease} years ago.`}
+    </p>
+  )
+}
+
+const Home: FunctionalComponent<HomeProps> = ({ data }: PageProps) => {
+  const { source, known, userAgent, name, major, on, before, after } = data
+
   return (
     <div class="container lg mx-auto flex flex-col items-center justify-center">
-      <h1 class="text-4xl font-bold">user-agent.info</h1>
+      <h1 class="text-4xl font-bold mt-8">user-agent.info</h1>
       <div class="m-8">
         <form method="GET" class="block flex flex-row gap-lg">
           <input
             name="ua"
-            value={userAgent}
+            value={source === "query" ? userAgent : null}
+            placeholder={source === "header" ? userAgent : null}
             style={{ width: "850px" }}
-            // dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white
             class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg text-sm p-2.5"
           />
           <button type="submit" class="ml-2">Submit</button>
         </form>
       </div>
       <div class="mx-md">
-        {!known && (
-          <p>
-            Whoa! That's a new one! Or maybe it's an old one? {name && `Consider opening a PR for ${name}.`}
-          </p>
-        )}
-        {known && (
-          <>
-            {known && source === "query" && <p>Ok! That looks to be {name}.</p>}
-            {known && source === "header" && <p>Ok! Looks like you're using {name}.</p>}
-            {name} {version} was released
-            {on && ` on or about ${formatDate(on)}`}
-            {!on && after && !before && ` sometime`}
-            {!on && after && ` after ${formatDate(after)}`}
-            {!on && after && before && ` and`}
-            {!on && before && ` before ${formatDate(before)}`}
-            {
-              /* {!on && after && before &&
-          ` between ${formatDate(after)} and ${formatDate(before)}`} */
-            }
-            {!on && !after && !before && `. That's all we know`}
-            .
-            {on && yearsSinceRelease > 1 && ` That's ${yearsSinceRelease} years ago.`}
-          </>
-        )}
+        <MaybeKnownBrowserPreamble known={known} name={name} source={source} />
+        {known && <ReleaseDescription name={name} major={major} on={on} before={before} after={after} />}
+        <p>
+          {on && HISTORICAL_FACTS[toISODate(on)] && (
+            <>
+              <em>On that day in history...</em> {HISTORICAL_FACTS[toISODate(on)]}
+            </>
+          )}
+        </p>
       </div>
     </div>
   )

static/styles.css

@@ -13,6 +13,10 @@ footer {
   width: 100%;
 }
 
+p {
+  margin-bottom: 24px;
+}
+
 a:hover {
   text-decoration: underline;
 }