new things

index.ts

@@ -7,6 +7,13 @@ const db = new Database("database.db");
 
 await Bun.cron("./scripts/sync-rss.js", "*/5 * * * *", "rss-sync");
 
+interface ServiceAlert {
+    id: string
+    date: string
+    is_collision: number
+    content: string
+}
+
 Bun.serve({
     routes: {
         "/": async () => {
@@ -16,24 +23,45 @@ Bun.serve({
                 ).text(),
             );
 
-            const latestCollision = await db
+            const latestCollision = db
-                .query(
+                .query<ServiceAlert, []>(
                     "SELECT * FROM service_alerts WHERE is_collision ORDER BY date DESC LIMIT 1;",
                 )
-                .get();
+                .get()!;
+
+            const allCollisions = db.query<ServiceAlert, []>("SELECT * FROM service_alerts WHERE is_collision ORDER BY date ASC").all()
+
+            const last60Days = new Array(60).fill(false)
+
+            for (const collision of allCollisions) {
+                const collisionDay = startOfDay(new Date(collision.date), { in: tz("America/Denver") })
+                const difference = differenceInDays(startOfToday({ in: tz("America/Denver") }), collisionDay)
+                if (difference > 60) {
+                    continue
+                }
+
+                last60Days[difference] = true
+            }
+
+            last60Days.reverse()
 
             return new Response(
                 homeTemplate({
                     daysSince: differenceInDays(
                         startOfToday({ in: tz("America/Denver") }),
-                        startOfDay(new Date(latestCollision.date), { in: tz("America/Denver") }),
+                        startOfDay(new Date(latestCollision.date), {
+                            in: tz("America/Denver"),
+                        }),
                     ),
                     latestCollision: {
                         ...latestCollision,
-                        formattedDate: format(new Date(
+                        formattedDate: format(
-                            latestCollision.date,
+                            new Date(latestCollision.date),
-                        ), "LLL d, yyyy", { in: tz("America/Denver") }),
+                            "LLL d, yyyy",
+                            { in: tz("America/Denver") },
+                        ),
                     },
+                    last90Days: last60Days,
                 }),
                 {
                     headers: { "Content-Type": "text/html" },

templates/home.handlebars

@@ -4,8 +4,9 @@
         <title>IT HAS BEEN {{ daysSince }} DAYS SINCE A CAR HIT A UTA TRAIN</title>
         <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
         <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>
-    <body class="py-10">
+    <body class="py-10 px-5">
         <div
             class="max-w-96 bg-blue-950 text-white mx-auto rounded-lg p-8 space-y-4 mb-10"
         >
@@ -23,9 +24,25 @@
             </p>
         </div>
 
-        <div class="max-w-96 mx-auto font-sans overflow-hidden">
+        <div class="max-w-96 mx-auto font-sans overflow-hidden mb-10">
             <div class="bg-gray-200 border border-gray-500 rounded-t-lg px-2">{{ latestCollision.formattedDate }}</div>
             <pre class="font-sans text-wrap border border-gray-500 border-t-0 rounded-b-lg p-2">{{ latestCollision.content }}</pre>
         </div>
+
+        <div class="flex justify-between max-w-96 mx-auto h-8">
+            {{#each last90Days }}
+                {{#if this}}
+                    <div class="h-full w-0.5 sm:w-1 bg-red-400"></div>
+                {{else}}
+                    <div class="h-full w-0.5 sm:w-1 bg-green-400"></div>
+                {{/if}}
+            {{/each}}
+        </div>
+
+        <div class="max-w-96 mx-auto flex justify-between">
+            <div class="text-gray-600 text-sm">60 days ago</div>
+            <div class="text-gray-600 text-sm">Today</div>
+        </div>
+
     </body>
 </html>