Change KitsuClub to have attached images and link

Because it used to be way too basic

netlify/functions/kitsuclub.ts

@@ -4,6 +4,7 @@ import { api } from "./shared/api.js";
 
 const handler: Handler = async () => {
   const kitsuclub = await api<{
+    id: string
     user: {
       name: string
       username: string
@@ -11,7 +12,14 @@ const handler: Handler = async () => {
       emojis: Record<string, string>
     }
     text: string
+    renoteCount: number
+    repliesCount: number
+    reactionCount: number
     createdAt: string
+    files: {
+      thumbnailUrl: string
+      comment: string
+    }[]
   }[]>("https://kitsunes.club/api/users/notes", process.env.API_KITSUCLUB, true, JSON.stringify({
     "userId": "a2hgd7delf",
     "limit": 1,
@@ -34,12 +42,16 @@ const handler: Handler = async () => {
   }
 
   const activity: KitsuclubInfo = {
-    id: details.user.username,
+    note_id: details.id,
+    user_id: details.user.username,
     username: details.user.name,
     avatar: details.user.avatarUrl,
     emojis: details.user.emojis,
     text: details.text,
-    date: details.createdAt
+    date: details.createdAt,
+    images: details.files.map((f) => {
+      return {url: f.thumbnailUrl, alt: f.comment};
+    })
   };
 
   return {

src/App.css

@@ -21,3 +21,7 @@ p a {
   color: rgb(244, 196, 253);
   text-decoration: underline;
 }
+
+time {
+  font-weight: bold
+}

src/Infos/Fediverse/KitsuClub.tsx

@@ -1,14 +1,20 @@
 import React, {useState, useEffect} from "react";
 import Website from "../Website.js";
 import DataHandler from "#Infos/DataHandler.js";
+import Link from "#parts/Link.js";
 
 export type KitsuclubInfo = {
-  id: string
+  note_id: string
+  user_id: string
   username: string
   avatar: string
   emojis: Record<string, string>
   text: string
   date: string
+  images: {
+    url: string
+    alt: string
+  }[]
 } | undefined;
 
 export default function KitsuClub() {
@@ -19,14 +25,22 @@ export default function KitsuClub() {
     if (data) {
       try {
         const date = new Date(data.date).toISOString();
+        const images: React.JSX.Element[] = data.images.map((i, index) => <img className="mt-2" key={`img-${index}`} src={i.url} alt={i.alt}/>);
         setElements([
           <div key={"kitsuclub-details"} className="text-left mb-2">
             <img key={"kitsuclub-avatar"} src={data.avatar} alt="avatar" className="float-left rounded-lg w-12 mr-2"/>
             <strong key={"kitsuclub-username"} className="inline-flex">{...emojify(data.username, data.emojis)}</strong>
             <br/>
-            <strong key={"kitsuclub-date"} className="inline-flex text-sm">{date.substring(0, date.indexOf("T"))}</strong>
+            <time key={"kitsuclub-date"} className="inline-flex text-sm" dateTime={date}>
+              {date.substring(0, date.indexOf("T")).concat(" " + date.substring(date.indexOf("T") + 1, date.indexOf(".")) + " UTC")}
+            </time>
           </div>,
-          <p key={"kitsuclub-text"} className="text-left">{...emojify(data.text, data.emojis)}</p>, // emojis that are only in the post aren't in the response yet :(
+          // emojis that are only in the post aren't in the response yet :(
+          <Link classes="mt-1 px-2 py-2 inline-block font-bold leading-[18px] bg-white text-blue-800 text-left text-sm"
+            key={"link"} link={`https://kitsunes.club/notes/${data.note_id}`} text={<>{
+              ...emojify(data.text, data.emojis).concat(images)
+            }</>}
+          />
         ]);
       } catch {
         setError(true);
@@ -37,7 +51,7 @@ export default function KitsuClub() {
   return (
     <Website
       name="KitsuClub"
-      link={`https://kitsunes.club/@${data?.id ?? "taevas"}`}
+      link={`https://kitsunes.club/@${data?.user_id ?? "taevas"}`}
       elements={elements}
       error={error}
     />

src/parts/Link.tsx

@@ -7,7 +7,7 @@ export default function Link({
 }: {
   classes?: string;
   link: string;
-  text: string;
+  text: string | React.JSX.Element;
 }) {
   return (
     <a