Add tailwindcss to simplify future css.

Author: dardub

head.ts

@@ -3,21 +3,13 @@ export default function Head({ pageTitle, styles }: { pageTitle?: string, styles
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>${ pageTitle || "MyTube App"}</title>
+    <link rel="stylesheet" href="/static/main.build.css" />
     <style>
-    #dropzone {
-        width: 75%;
-        height: 10px;
-        transition: height 100ms ease-out;
-    }
-    #dropzone.active {
-        height: 25px;
-        border: 4px dashed red;
-    }
-    body {
-        background: black;
-        color: white;
-    }
-    ${styles || ""}
+      body {
+          background: black;
+          color: white;
+      }
+      ${styles || ""}
     </style>
     <script src="https://unpkg.com/[email protected]"></script>
     <script type="module" src="/static/MyTube.js"></script>

home-controller.ts

@@ -3,16 +3,33 @@ import Player from "./player/player.ts";
 import Head from "./head.ts";
 import Html from "./html.ts";
 import { compressResponse } from "./utils.ts";
+import { YT_API_KEY } from "./.env.json";
 
 export default async function HomeController(request: Request): Promise<Response> {
-    const html = Html({
-      head: Head({
-        pageTitle: "MyTube Home Page",
-      }),
-      body: Player(),
-    })
-    const res: Response = compressResponse(html, request, { 
-      headers: { [Headers.ContentType]: ContentTypes.Html }
-    });
-    return res;
+    let url = `https://www.googleapis.com/youtube/v3/videos?key=${YT_API_KEY}&part=snippet,statistics&chart=mostPopular`;
+
+    try {
+      const ytResponse = await fetch(url);
+      if (!ytResponse.ok) throw new Error("Response status: " + ytResponse.status);
+
+      const json = await ytResponse.json();
+      
+        const html = Html({
+          head: Head({
+            pageTitle: "MyTube Home Page",
+          }),
+          body: Player(json),
+        })
+        const res: Response = compressResponse(html, request, { 
+          headers: { [Headers.ContentType]: ContentTypes.Html }
+        });
+        return res;
+
+    } catch (error) {
+      return new Response(`<pre>${error}\n${error.stack}</pre>`, {
+        headers: {
+          [Headers.ContentType]: ContentTypes.Html,
+        },
+      });
+    }
 }

package.json

@@ -1,15 +1,17 @@
 {
   "name": "todo",
   "version": "1.0.0",
-  "description": "Todo app made simply",
+  "author": "Darren Dub",
   "main": "index.tsx",
+  "devDependencies": {
+    "@types/bun": "^1.1.6",
+    "tailwindcss": "^3.4.4"
+  },
+  "description": "Todo app made simply",
+  "license": "ISC",
   "scripts": {
     "start": "bun run --hot index.ts",
+    "tailwind:build": "bun run tailwindcss -i ./static/main.css -o ./static/main.build.css --watch",
     "debug": "bun run --inspect index.ts"
-  },
-  "author": "Darren Dub",
-  "license": "ISC",
-  "devDependencies": {
-    "@types/bun": "^1.1.6"
   }
 }

player/player.ts

@@ -1,4 +1,4 @@
-export default function Player() {
+export default function Player(data) {
     return (`
         <div id="player"></div>
         <script type="module" src="./player/static/scripts.js"></script>

search.ts

@@ -5,30 +5,40 @@ type SearchResource = {
         channelId: string;
         playlistId?: string;
     },
-    snippet: {
-        publishedAt: Date;
-        channelId: string;
-        title: string;
-        description: string;
-        thumbnails: {
-            default?: {
-                url: string;
-                width: number;
-                height: number;
-            },
-            medium?: {
-                url: string;
-                width: number;
-                height: number;
-            },
-            high?: {
-                url: string;
-                width: number;
-                height: number;
-            },
-        };
-        channelTitle: string;
-    }
+    snippet?: Snippet;
+    statistics?: Statistics;
+}
+
+type Snippet = {
+    publishedAt: Date;
+    channelId: string;
+    title: string;
+    description: string;
+    thumbnails: {
+        default?: {
+            url: string;
+            width: number;
+            height: number;
+        },
+        medium?: {
+            url: string;
+            width: number;
+            height: number;
+        },
+        high?: {
+            url: string;
+            width: number;
+            height: number;
+        },
+    };
+    channelTitle: string;
+}
+
+type Statistics = {
+    viewCount: number;
+    likeCount: number;
+    favoriteCount: number;
+    commentCount: number;
 }
 
 type SearchResponse = {