app/views/user/details.php

@@ -3,40 +3,55 @@ use Aviat\AnimeClient\Kitsu;
 ?>
 <main class="user-page details">
 	<h2 class="toph">
+		About
 		<?= $helper->a(
-			"https://kitsu.io/users/{$data['slug']}",
+				"https://kitsu.io/users/{$data['slug']}",
-			$data['name'], [
+				$data['name'], [
-			'title' => 'View profile on Kitsu'
+				'title' => 'View profile on Kitsu'
 		])
 		?>
 	</h2>
 
-	<p><?= $escape->html($data['about']) ?></p>
-
 	<section class="flex flex-no-wrap">
 		<aside class="info">
-			<center>
+			<table class="media-details invisible">
-				<?= $helper->img($data['avatar'], ['alt' => '']); ?>
+				<tr>
-			</center>
+					<td><?= $helper->img($data['avatar'], ['alt' => '']); ?></td>
+					<td><?= $escape->html($data['about']) ?></td>
+				</tr>
+			</table>
 			<br />
 			<table class="media-details">
+				<?php foreach ([
+					'joinDate' => 'Joined',
+					'birthday' => 'Birthday',
+					'location' => 'Location'
+			   ] as $key => $label): ?>
+				<?php if ($data[$key] !== null): ?>
 				<tr>
-					<td>Location</td>
+					<td><?= $label ?></td>
-					<td><?= $data['location'] ?></td>
+					<td><?= $data[$key] ?></td>
 				</tr>
+				<?php endif ?>
+				<?php endforeach; ?>
+
+				<?php if ($data['website'] !== null): ?>
 				<tr>
 					<td>Website</td>
 					<td><?= $helper->a($data['website'], $data['website']) ?></td>
 				</tr>
+				<?php endif ?>
+
 				<?php if ( ! empty($data['waifu'])): ?>
 				<tr>
 					<td><?= $escape->html($data['waifu']['label']) ?></td>
 					<td>
 						<?php
 							$character = $data['waifu']['character'];
-							echo $helper->a(
+							echo $component->character(
-								$url->generate('character', ['slug' => $character['slug']]),
+									$character['names']['canonical'],
-								$character['names']['canonical']
+									$url->generate('character', ['slug' => $character['slug']]),
+									$helper->img(Kitsu::getImage($character))
 							);
 						?>
 					</td>
@@ -75,7 +90,7 @@ use Aviat\AnimeClient\Kitsu;
 						$rendered[] = $component->character(
 								$item['names']['canonical'],
 								$url->generate('character', ['slug' => $item['slug']]),
-								$helper->img($item['image']['original']['url'])
+								$helper->img(Kitsu::getImage($item))
 						);
 					}
 					else

frontEndSrc/css/src/general.css

@@ -333,7 +333,8 @@ td.danger, td.danger:hover, td.danger:active {
 .borderless th,
 .invisible tr,
 .invisible td,
-.invisible th {
+.invisible th,
+table.invisible {
 	box-shadow: none;
 	border: 0;
 }
@@ -836,19 +837,11 @@ aside.info {
 	max-width: 390px;
 }
 
-/* .fixed aside.info + article {
-	max-width: inherit;
-} */
-
 aside picture, aside img {
 	display: block;
 	margin: 0 auto;
 }
 
-/* aside.info + article {
-	max-width: 66%;
-} */
-
 /* ----------------------------------------------------------------------------
 	User page styles
 -----------------------------------------------------------------------------*/

src/AnimeClient/API/Kitsu/Queries/MangaDetails.graphql

@@ -19,7 +19,7 @@ query ($slug: String!) {
 		}
 		categories(first: 100) {
 			nodes {
-				title(locales: "*")
+				title(locales: "en")
 			}
 		}
 		chapterCount
@@ -51,7 +51,7 @@ query ($slug: String!) {
 				startCursor
 			}
 		}
-		description
+		description(locales: "en")
 		startDate
 		endDate
 		mappings(first: 10) {
@@ -98,7 +98,7 @@ query ($slug: String!) {
 					names {
 						alternatives
 						canonical
-						localized
+						localized(locales: "*")
 					}
 					slug
 				}
@@ -116,7 +116,7 @@ query ($slug: String!) {
 		titles {
 			canonical
 			canonicalLocale
-			localized(locales: "*")
+			localized(locales: ["en", "en-t-ja", "ja", "ja-jp"])
 		}
 	}
 }

src/AnimeClient/API/Kitsu/Queries/UserDetails.graphql

@@ -18,6 +18,7 @@ query ($slug: String!) {
 			}
 		}
 		birthday
+		createdAt
 		id
 		location
 		name
@@ -151,7 +152,7 @@ query ($slug: String!) {
 			names {
 				canonical
 				alternatives
-				localized
+				localized(locales: "*")
 			}
 		}
 		waifuOrHusbando

src/AnimeClient/API/Kitsu/Transformer/AnimeTransformer.php

@@ -57,7 +57,7 @@ final class AnimeTransformer extends AbstractTransformer
 
 				$details = $rawCharacter['character'];
 				$characters[$type][$details['id']] = [
-					'image' => $details['image']['original']['url'] ?? '',
+					'image' => Kitsu::getImage($details),
 					'name' => $details['names']['canonical'],
 					'slug' => $details['slug'],
 				];
@@ -101,7 +101,7 @@ final class AnimeTransformer extends AbstractTransformer
 				$staff[$role][$person['id']] = [
 					'id' => $person['id'],
 					'name' => $name,
-					'image' => $person['image']['original']['url'],
+					'image' => Kitsu::getImage($person),
 					'slug' => $person['slug'],
 				];
 

src/AnimeClient/API/Kitsu/Transformer/CharacterTransformer.php

@@ -49,7 +49,7 @@ final class CharacterTransformer extends AbstractTransformer
 			'castings' => $castings,
 			'description' => $data['description']['en'],
 			'id' => $data['id'],
-			'image' => $data['image']['original']['url'] ?? 'images/placeholder.png',
+			'image' => Kitsu::getImage($data),
 			'media' => $media,
 			'name' => $name,
 			'names' => $names,
@@ -130,7 +130,7 @@ final class CharacterTransformer extends AbstractTransformer
 						'person' => [
 							'id' => $voice['person']['id'],
 							'slug' => $voice['person']['slug'],
-							'image' => $voice['person']['image']['original']['url'],
+							'image' => Kitsu::getImage($voice['person']),
 							'name' => $voice['person']['name'],
 						],
 						'series' => [],

src/AnimeClient/API/Kitsu/Transformer/MangaTransformer.php

@@ -57,7 +57,7 @@ final class MangaTransformer extends AbstractTransformer
 				if (array_key_exists($details['id'], $characters[$type]))
 				{
 					$characters[$type][$details['id']] = [
-						'image' => $details['image']['original']['url'],
+						'image' => Kitsu::getImage($details),
 						'name' => $details['names']['canonical'],
 						'slug' => $details['slug'],
 					];
@@ -103,7 +103,7 @@ final class MangaTransformer extends AbstractTransformer
 					'id' => $person['id'],
 					'slug' => $person['slug'],
 					'name' => $name,
-					'image' => $person['image']['original']['url'],
+					'image' => Kitsu::getImage($person),
 				];
 
 				usort($staff[$role], static fn ($a, $b) => $a['name'] <=> $b['name']);

src/AnimeClient/API/Kitsu/Transformer/PersonTransformer.php

@@ -36,7 +36,7 @@ final class PersonTransformer extends AbstractTransformer
 			'id' => $data['id'],
 			'name' => $canonicalName,
 			'birthday' => $data['birthday'],
-			'image' => $data['image']['original']['url'],
+			'image' => Kitsu::getImage($data),
 			'names' => array_diff($data['names']['localized'], [$canonicalName]),
 			'description' => $data['description']['en'] ?? '',
 			'characters' => $orgData['characters'],
@@ -129,7 +129,7 @@ final class PersonTransformer extends AbstractTransformer
 						'character' => [
 							'id' => $character['id'],
 							'slug' => $character['slug'],
-							'image' => $character['image']['original']['url'] ?? '',
+							'image' => Kitsu::getImage($character),
 							'canonicalName' => $character['names']['canonical'],
 						],
 						'media' => [

src/AnimeClient/API/Kitsu/Transformer/UserTransformer.php

@@ -41,6 +41,8 @@ final class UserTransformer extends AbstractTransformer
 		return User::from([
 			'about' => $base['about'],
 			'avatar' => $base['avatarImage']['original']['url'],
+			'birthday' => Kitsu::formatDate($base['birthday']) . ' (' . Kitsu::friendlyTime(Kitsu::getDateDiff($base['birthday']), 'year') . ')',
+			'joinDate' => Kitsu::formatDate($base['createdAt']) . ' (' . Kitsu::friendlyTime(Kitsu::getDateDiff($base['createdAt']), 'day') . ')',
 			'favorites' => $this->organizeFavorites($favorites),
 			'location' => $base['location'],
 			'name' => $base['name'],

src/AnimeClient/Kitsu.php

@@ -72,18 +72,18 @@ final class Kitsu
 		}
 
 		$monthMap = [
-			'01' => 'Jan',
+			'01' => 'January',
-			'02' => 'Feb',
+			'02' => 'February',
-			'03' => 'Mar',
+			'03' => 'March',
-			'04' => 'Apr',
+			'04' => 'April',
 			'05' => 'May',
-			'06' => 'Jun',
+			'06' => 'June',
-			'07' => 'Jul',
+			'07' => 'July',
-			'08' => 'Aug',
+			'08' => 'August',
-			'09' => 'Sep',
+			'09' => 'September',
-			'10' => 'Oct',
+			'10' => 'October',
-			'11' => 'Nov',
+			'11' => 'November',
-			'12' => 'Dec',
+			'12' => 'December',
 		];
 
 		[$startYear, $startMonth, $startDay] = explode('-', $startDate);
@@ -130,6 +130,29 @@ final class Kitsu
 		return MangaPublishingStatus::NOT_YET_PUBLISHED;
 	}
 
+	public static function formatDate(string $date): string
+	{
+		$date = new DateTimeImmutable($date);
+
+		return $date->format('F d, Y');
+	}
+
+	public static function getDateDiff(string $date): int
+	{
+		$now = new DateTimeImmutable();
+		$then = new DateTimeImmutable($date);
+
+		$interval = $now->diff($then, true);
+
+		$years = $interval->y * self::SECONDS_IN_MINUTE * self::MINUTES_IN_YEAR;
+		$days = $interval->d * self::SECONDS_IN_MINUTE * self::MINUTES_IN_DAY;
+		$hours = $interval->h * self::SECONDS_IN_MINUTE * self::MINUTES_IN_HOUR;
+		$minutes = $interval->i * self::SECONDS_IN_MINUTE;
+		$seconds = $interval->s;
+
+		return $years + $days + $hours + $minutes + $seconds;
+	}
+
 	/**
 	 * @return array<string, string>
 	 */
@@ -335,15 +358,29 @@ final class Kitsu
 	/**
 	 * Get the url of the posterImage from Kitsu, with fallbacks
 	 */
-	public static function getPosterImage(array $base, int $size = 1): string
+	public static function getPosterImage(array $base, int $sizeId = 1): string
 	{
-		$rawUrl = $base['posterImage']['views'][$size]['url']
+		$rawUrl = $base['posterImage']['views'][$sizeId]['url']
 			?? $base['posterImage']['original']['url']
 			?? '/public/images/placeholder.png';
 
 		$parts = explode('?', $rawUrl);
 
-		return (empty($parts)) ? $rawUrl : $parts[0];
+		return $parts[0];
+	}
+
+	/**
+	 * Get the url of the image from Kitsu, with fallbacks
+	 */
+	public static function getImage(array $base, int $sizeId = 1): string
+	{
+		$rawUrl = $base['image']['original']['url']
+			?? $base['image']['views'][$sizeId]['url']
+			?? '/public/images/placeholder.png';
+
+		$parts = explode('?', $rawUrl);
+
+		return $parts[0];
 	}
 
 	/**
@@ -430,7 +467,7 @@ final class Kitsu
 	/**
 	 * Convert a time in seconds to a more human-readable format
 	 */
-	public static function friendlyTime(int $seconds): string
+	public static function friendlyTime(int $seconds, string $minUnit = 'second'): string
 	{
 		// All the seconds left
 		$remSeconds = $seconds % self::SECONDS_IN_MINUTE;
@@ -469,6 +506,11 @@ final class Kitsu
 			}
 
 			$parts[] = "{$value} {$label}";
+
+			if ($label === $minUnit || $label === $minUnit . 's')
+			{
+				break;
+			}
 		}
 
 		$last = array_pop($parts);

src/AnimeClient/Types/User.php

@@ -21,6 +21,8 @@ final class User extends AbstractType
 {
 	public ?string $about;
 	public ?string $avatar;
+	public ?string $birthday;
+	public ?string $joinDate;
 	public ?array $favorites;
 	public ?string $location;
 	public ?string $name;