ChitoWarlock/soc_site-astro
1
0
Fork 0
mirror of https://github.com/jorgev259/soc_site-astro.git synced 2025-06-29 07:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix album page response

Browse source
This commit is contained in:
Jorge Vargas 2025-02-20 21:29:17 -06:00
parent c16243df76
commit c8db1c57b4
1 changed files with 36 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/pages/album/[id].astro
View file

@ -34,7 +34,6 @@ const album = await prismaClient.albums.findUnique({
if (!album) { if (!album) {
Astro.response.status = 404 Astro.response.status = 404
Astro.response.statusText = 'Not found' Astro.response.statusText = 'Not found'
return
} }
const { currentLocale } = Astro const { currentLocale } = Astro
--- ---
@ -53,8 +52,8 @@ const { currentLocale } = Astro
<div class='flex-1'> <div class='flex-1'>
<div class='size-full relative cursor-pointer'> <div class='size-full relative cursor-pointer'>
<Image <Image
src={`https://cdn.sittingonclouds.net/album/${album.id}.png`} src={`https://cdn.sittingonclouds.net/album/${album?.id}.png`}
alt={`${album.title} cover`} alt={`${album?.title} cover`}
class='rounded-md size-full object-contain absolute' class='rounded-md size-full object-contain absolute'
quality='mid' quality='mid'
width={2560} width={2560}
@ -64,24 +63,26 @@ const { currentLocale } = Astro
</div> </div>
<div class='flex-1'> <div class='flex-1'>
<div class='bg-dark rounded-md py-4 px-6'> <div class='bg-dark rounded-md py-4 px-6'>
<div class='font-medium text-4xl text-center'>{album.title}</div> <div class='font-medium text-4xl text-center'>{album?.title}</div>
{album.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap' }}>{album.subTitle}</h6> : null} {album?.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap' }}>{album?.subTitle}</h6> : null}
<table class='mt-4'> <table class='mt-4'>
<tbody> <tbody>
{ {
album.releaseDate ? ( album?.releaseDate ? (
<tr> <tr>
<th class='width-row'>{m.releaseDate()}</th> <th class='width-row'>{m.releaseDate()}</th>
<td>{new Intl.DateTimeFormat(currentLocale, { dateStyle: 'medium' }).format(album.releaseDate)}</td> <td>
{new Intl.DateTimeFormat(currentLocale, { dateStyle: 'medium' }).format(album?.releaseDate)}
</td>
</tr> </tr>
) : null ) : null
} }
{ {
album.artistList.length > 0 && ( (album?.artistList.length ?? 0) > 0 && (
<tr> <tr>
<th>{m.artists()}</th> <th>{m.artists()}</th>
<td>{album.artistList.map(({ artist }) => artist.name).join(', ')}</td> <td>{album?.artistList.map(({ artist }) => artist.name).join(', ')}</td>
</tr> </tr>
) )
} }
@ -91,8 +92,8 @@ const { currentLocale } = Astro
<td> <td>
{ {
[ [
album.categoryList.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]()).join(' & '), album?.categoryList.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]()).join(' & '),
album.classificationList.map(({ classificationName }) => classificationName).join(', ') album?.classificationList.map(({ classificationName }) => classificationName).join(', ')
] ]
.filter((f) => f !== '') .filter((f) => f !== '')
.join(' - ') .join(' - ')
@ -100,23 +101,23 @@ const { currentLocale } = Astro
</td> </td>
</tr> </tr>
{ {
album.label && ( album?.label && (
<tr> <tr>
<th>{m.publishedBy()}</th> <th>{m.publishedBy()}</th>
<td> <td>
<a class='btn btn-link p-0' href={`/publisher/${album.label}`}> <a class='btn btn-link p-0' href={`/publisher/${album?.label}`}>
{album.label} {album?.label}
</a> </a>
</td> </td>
</tr> </tr>
) )
} }
{ {
album.platformList.length > 0 && ( (album?.platformList.length ?? 0) > 0 && (
<tr> <tr>
<th>{m.platforms()}</th> <th>{m.platforms()}</th>
<td> <td>
{album.platformList.map(({ platform }, i) => ( {album?.platformList.map(({ platform }, i) => (
<Fragment key={platform.id}> <Fragment key={platform.id}>
{id === '29' ? ( {id === '29' ? (
<span class='btn p-0' style={{ color: 'white' }}> <span class='btn p-0' style={{ color: 'white' }}>
@ -127,7 +128,7 @@ const { currentLocale } = Astro
{platform.name} {platform.name}
</a> </a>
)} )}
{i !== album.platformList.length - 1 && ', '} {i !== album?.platformList.length - 1 && ', '}
</Fragment> </Fragment>
))} ))}
</td> </td>
@ -135,16 +136,16 @@ const { currentLocale } = Astro
) )
} }
{ {
album.gameList.length > 0 && ( (album?.gameList.length ?? 0) > 0 && (
<tr> <tr>
<th>{m.games()}</th> <th>{m.games()}</th>
<td> <td>
{album.gameList.map(({ game }, i) => ( {album?.gameList.map(({ game }, i) => (
<Fragment key={game.slug}> <Fragment key={game.slug}>
<a class='btn btn-link p-0' href={`/game/${game.slug}`}> <a class='btn btn-link p-0' href={`/game/${game.slug}`}>
{game.name} {game.name}
</a> </a>
{i !== album.gameList.length - 1 && ', '} {i !== album?.gameList.length - 1 && ', '}
</Fragment> </Fragment>
))} ))}
</td> </td>
@ -152,16 +153,16 @@ const { currentLocale } = Astro
) )
} }
{ {
album.animList.length > 0 && ( (album?.animList.length ?? 0) > 0 && (
<tr> <tr>
<th>{m.animations()}</th> <th>{m.animations()}</th>
<td> <td>
{album.animList.map(({ animation }, i) => ( {album?.animList.map(({ animation }, i) => (
<Fragment key={id}> <Fragment key={id}>
<a class='btn btn-link p-0' href={`/anim/${id}`}> <a class='btn btn-link p-0' href={`/anim/${id}`}>
{animation.title} {animation.title}
</a> </a>
{i !== album.animList.length - 1 && ', '} {i !== album?.animList.length - 1 && ', '}
</Fragment> </Fragment>
))} ))}
</td> </td>
@ -172,12 +173,12 @@ const { currentLocale } = Astro
<tr> <tr>
<th>{m.avgRating()}</th> <th>{m.avgRating()}</th>
<td> <td>
<!-- <StarCounter albumId={album.id} /> --> <!-- <StarCounter albumId={album?.id} /> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<!-- <UserButtons id={album.id} /> --> <!-- <UserButtons id={album?.id} /> -->
</div> </div>
</div> </div>
</div> </div>
@ -189,28 +190,28 @@ const { currentLocale } = Astro
</h1> </h1>
<div class='px-3'> <div class='px-3'>
<TrackList discs={album.discs} client:only='react' /> <TrackList discs={album?.discs ?? []} client:only='react' />
</div> </div>
</div> </div>
<div class='flex-1 bg-dark rounded-md p-3'> <div class='flex-1 bg-dark rounded-md p-3'>
{ {
album.vgmdb && ( album?.vgmdb && (
<div class='mt-2 mb-3 ml-2 flex'> <div class='mt-2 mb-3 ml-2 flex'>
<span class='text-xl'>{m.checkVGMDB()}:</span> <span class='text-xl'>{m.checkVGMDB()}:</span>
<a href={album.vgmdb} class='ml-2' target='_blank' rel='noopener noreferrer'> <a href={album?.vgmdb} class='ml-2' target='_blank' rel='noopener noreferrer'>
<Image width={100} height={30} alt={'VGMdb'} src={vgmdbLogo} /> <Image width={100} height={30} alt={'VGMdb'} src={vgmdbLogo} />
</a> </a>
</div> </div>
) )
} }
{ {
album.stores.length > 0 && ( (album?.stores.length ?? 0) > 0 && (
<div class='row mt-2 px-3'> <div class='row mt-2 px-3'>
<div class='bg-red-500 text-white text-4xl rounded-md px-3 py-4'> <div class='bg-red-500 text-white text-4xl rounded-md px-3 py-4'>
<h1 class='text-center text-3xl uppercase font-semibold drop-shadow-lg'>{m.buyOriginal()}</h1> <h1 class='text-center text-3xl uppercase font-semibold drop-shadow-lg'>{m.buyOriginal()}</h1>
<hr class='my-2.5' /> <hr class='my-2.5' />
<div class='flex justify-center flex-wrap gap-4'> <div class='flex justify-center flex-wrap gap-4'>
{album.stores.map(({ url, provider }, i) => ( {album?.stores.map(({ url, provider }, i) => (
<a target='_blank' rel='noopener noreferrer' href={url}> <a target='_blank' rel='noopener noreferrer' href={url}>
<Image <Image
class='rounded-md' class='rounded-md'
@ -230,7 +231,7 @@ const { currentLocale } = Astro
<hr /> <hr />
<div> <div>
{ {
album.downloads?.map((download) => { album?.downloads?.map((download) => {
const { links, title } = download const { links, title } = download
return ( return (
@ -324,11 +325,11 @@ const { currentLocale } = Astro
<div class='mt-2'> <div class='mt-2'>
<div class='grid grid-cols-4 gap-x-1.5'> <div class='grid grid-cols-4 gap-x-1.5'>
{ {
album.relatedAlbumList.map(({ relatedAlbum }) => ( album?.relatedAlbumList.map(({ relatedAlbum }) => (
<AlbumBox <AlbumBox
title={relatedAlbum.title} title={relatedAlbum?.title}
href={`/album/${relatedAlbum.id}`} href={`/album/${relatedAlbum?.id}`}
image={`/album/${relatedAlbum.id}.png`} image={`/album/${relatedAlbum?.id}.png`}
/> />
)) ))
} }