feat: instance info

getAlby · Aug 18, 2024 · 3107fb8 · 3107fb8
1 parent 557f4c5
commit 3107fb8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 44 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html data-theme="bumblebee" lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/jim.svg" />
+    <link rel="icon" type="image/png" href="/jim-sm.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Jim Index</title>
   </head>

diff --git a/public/jim-sm.png b/public/jim-sm.png
diff --git a/public/jim.svg b/public/jim.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import { NDKEvent } from "@nostr-dev-kit/ndk";
-import jimLogo from "./assets/jim.svg";
 import { useStore } from "./store";
 import { JIM_INSTANCE_KIND } from "./types";
 
@@ -65,10 +64,10 @@ export default function App() {
   }
 
   return (
-    <div className="">
-      <div className="flex justify-between items-center p-4">
+    <div className="p-4">
+      <div className="flex justify-between items-center">
         <div className="flex items-center gap-2">
-          <img src={jimLogo} className="w-6 h-6" />
+          <img src="/jim-index/jim-sm.png" className="w-12 h-12" />
           Jim Index
         </div>
         <div className="flex items-center justify-end gap-2">
@@ -81,27 +80,54 @@ export default function App() {
         </div>
       </div>
 
-      <div className="flex gap-4">
+      <div className="gap-4 grid grid-cols-1 md:flex">
         {store.jims.map((jim) => (
           <div key={jim.url} className="card bg-base-100 w-96 shadow-xl">
             <div className="card-body">
-              <h2 className="card-title">
-                <a
-                  href={jim.url}
-                  target="_blank"
-                  className="w-full link font-semibold"
-                >
+              <div className="flex items-center gap-2">
+                <div className="avatar">
+                  <div className="w-12 rounded-lg">
+                    <img
+                      src={
+                        jim.info?.image ||
+                        `https://api.dicebear.com/9.x/pixel-art/svg?seed=${jim.url}`
+                      }
+                    />
+                  </div>
+                </div>
+                <h2 className="card-title line-clamp-1">
+                  <a
+                    href={jim.url}
+                    target="_blank"
+                    className="w-full font-semibold line-clamp-1"
+                  >
+                    {jim.info?.name || "Unknown Jim"}
+                  </a>
+                </h2>
+              </div>
+              <p className="text-sm line-clamp-2" title={jim.info?.description}>
+                {jim.info?.description || "No description"}
+              </p>
+              <p>
+                <a href={jim.url} target="_blank" className="link">
                   {jim.url}
                 </a>
-              </h2>
+              </p>
               <p className="text-sm">
                 {jim.recommendedByUsers.length} recommendations (
                 {jim.recommendedByUsers.filter((r) => r.mutual).length} mutual)
               </p>
               <div className="card-actions justify-end mt-2">
+                <a
+                  href={jim.url}
+                  target="_blank"
+                  className="btn btn-primary btn-sm"
+                >
+                  Launch
+                </a>
                 <button
                   onClick={() => recommend(jim.eventId)}
-                  className="btn btn-primary btn-sm"
+                  className="btn btn-secondary btn-sm"
                 >
                   Recommend
                 </button>

diff --git a/src/store.ts b/src/store.ts
@@ -30,6 +30,11 @@ type Jim = {
   url: string;
   eventId: string;
   recommendedByUsers: { user: NDKUser; mutual: boolean }[];
+  info?: {
+    name?: string;
+    description?: string;
+    image?: string;
+  };
 };
 
 type Store = {
@@ -89,6 +94,20 @@ export const useStore = create<Store>((set) => ({
   }
   useStore.getState().setJims(jims);
 
+  // fetch jim info
+  for (const jim of jims) {
+    try {
+      const response = await fetch(new URL("/api/info", jim.url));
+      if (response.ok) {
+        jim.info = await response.json();
+      }
+    } catch (error) {
+      console.error("failed to fetch jim info", jim.url, error);
+    }
+  }
+
+  useStore.getState().setJims(jims);
+
   // mutual recommendations
 
   console.log("fetching user...");