diff options
| author | Fuwn <[email protected]> | 2023-10-24 18:18:37 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2023-10-24 18:18:37 -0700 |
| commit | f99fd41ee23d7669812ff1d88d23a9b7f22db901 (patch) | |
| tree | 7ef2abecd0b9fdf44fd87c2076a2e637da002d09 | |
| parent | fix(routes): remove old user route (diff) | |
| download | due.moe-f99fd41ee23d7669812ff1d88d23a9b7f22db901.tar.xz due.moe-f99fd41ee23d7669812ff1d88d23a9b7f22db901.zip | |
feat(user): prettier user route
| -rw-r--r-- | src/lib/AniList/user.ts | 5 | ||||
| -rw-r--r-- | src/routes/user/[user]/+page.svelte | 44 |
2 files changed, 38 insertions, 11 deletions
diff --git a/src/lib/AniList/user.ts b/src/lib/AniList/user.ts index dd9995fd..fdc98a58 100644 --- a/src/lib/AniList/user.ts +++ b/src/lib/AniList/user.ts @@ -15,6 +15,9 @@ export interface User { volumesRead: number; }; }; + avatar: { + large: string; + }; } export const user = async (username: string): Promise<User> => { @@ -28,7 +31,7 @@ export const user = async (username: string): Promise<User> => { }, body: JSON.stringify({ query: `{ User(name: "${username}") { - name id statistics { + name id avatar { large } statistics { anime { count meanScore minutesWatched episodesWatched } diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte index 227ba252..858e6aec 100644 --- a/src/routes/user/[user]/+page.svelte +++ b/src/routes/user/[user]/+page.svelte @@ -27,14 +27,38 @@ {:else if userData === undefined} Loading ... {:else} - <p> - <a href={`https://anilist.co/user/${userData.name}`} target="_blank" title={String(userData.id)} - >@{userData.name}</a - > - • <a href={`/user/${userData.name}/badges`}>Badge Wall</a> - </p> - - This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of anime - and read - {((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga. + <div class="user-grid"> + <p> + <a + href={`https://anilist.co/user/${userData.name}`} + target="_blank" + title={String(userData.id)} + > + <img src={userData.avatar.large} alt="" width="100vw" /> + </a> + </p> + + <div> + <p> + <a + href={`https://anilist.co/user/${userData.name}`} + target="_blank" + title={String(userData.id)}>@{userData.name}</a + > + • <a href={`/user/${userData.name}/badges`}>Badge Wall</a> + </p> + + This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of + anime and read + {((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga. + </div> + </div> {/if} + +<style> + .user-grid { + display: flex; + flex-wrap: wrap; + column-gap: 1.5em; + } +</style> |