120 lines
3.3 KiB
Text
120 lines
3.3 KiB
Text
---
|
|
import { parseISO, format } from "date-fns";;
|
|
import Layout from "@layouts/Layout.astro";
|
|
import AssociatedMedia from "@components/blocks/AssociatedMedia.astro";
|
|
import Warning from "@components/blocks/banners/Warning.astro";
|
|
import { fetchGlobalData } from "@utils/data/global/index.js";
|
|
import { md } from "@utils/helpers/general.js";
|
|
import icons from "@cdransf/astro-tabler-icons";
|
|
|
|
const { globals, movie } = await fetchGlobalData(Astro, Astro.url.pathname);
|
|
|
|
if (!movie) return Astro.redirect("/404", 404);
|
|
|
|
const {
|
|
IconArrowLeft,
|
|
IconHeart,
|
|
IconNeedle,
|
|
IconCircleCheck,
|
|
} = icons;
|
|
const pageTitle = `${movie.title} / Movies`;
|
|
const description = movie.description || `Details about ${movie.title}.`;
|
|
const alt = `${movie.title} / ${movie.year}${movie.rating ? ` (${movie.rating})` : ""}`;
|
|
---
|
|
|
|
<Layout
|
|
pageTitle={pageTitle}
|
|
description={description}
|
|
pageUrl={Astro.url.pathname}
|
|
ogImage={movie.backdrop}
|
|
>
|
|
<a class="back-link" href="/watching" title="Go back to the watching index page">
|
|
<div set:html={IconArrowLeft({ size: 18 })}/> Back to watching
|
|
</a>
|
|
<article class="watching focus">
|
|
<img
|
|
srcset={`
|
|
${globals.cdn_url}${movie.backdrop}?class=bannersm&type=webp 256w,
|
|
${globals.cdn_url}${movie.backdrop}?class=bannermd&type=webp 512w,
|
|
${globals.cdn_url}${movie.backdrop}?class=bannerbase&type=webp 1024w
|
|
`}
|
|
sizes="(max-width: 450px) 256px,
|
|
(max-width: 850px) 512px,
|
|
1024px"
|
|
src={`${globals.cdn_url}${movie.backdrop}?class=bannersm&type=webp`}
|
|
alt={alt}
|
|
class="image-banner"
|
|
loading="eager"
|
|
decoding="async"
|
|
width="256"
|
|
height="180"
|
|
/>
|
|
<div class="media-meta">
|
|
<span class="title">
|
|
<strong>{movie.title}</strong>
|
|
{movie.year && !movie.rating && ` (${movie.year})`}
|
|
</span>
|
|
{
|
|
movie.rating && (
|
|
<span>
|
|
{movie.rating}
|
|
{movie.year && ` (${movie.year})`}
|
|
</span>
|
|
)
|
|
}
|
|
{
|
|
movie.favorite && (
|
|
<span class="sub-meta favorite">
|
|
<div set:html={IconHeart({ size: 18 })}/> This is one of my favorite movies!
|
|
</span>
|
|
)
|
|
}
|
|
{
|
|
movie.tattoo && (
|
|
<span class="sub-meta tattoo">
|
|
<div set:html={IconNeedle({ size: 18 })}/> I have a tattoo inspired by this movie!
|
|
</span>
|
|
)
|
|
}
|
|
{
|
|
movie.collected && (
|
|
<span class="sub-meta collected">
|
|
<div set:html={IconCircleCheck({ size: 18 })}/> This movie is in my collection!
|
|
</span>
|
|
)
|
|
}
|
|
{
|
|
movie.lastWatched && (
|
|
<span class="sub-meta">
|
|
Last watched on{" "}
|
|
{format(parseISO(movie.lastWatched), "PPPP")}
|
|
</span>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
{movie.review && (
|
|
<>
|
|
<h2>My thoughts</h2>
|
|
<Warning text="There are probably spoilers after this banner — this is a warning about them." />
|
|
<div set:html={md(movie.review)}/>
|
|
</>
|
|
)}
|
|
|
|
<AssociatedMedia
|
|
artists={movie.artists}
|
|
books={movie.books}
|
|
genres={movie.genres}
|
|
movies={movie.related_movies}
|
|
posts={movie.posts}
|
|
shows={movie.shows}
|
|
/>
|
|
|
|
{movie.description && (
|
|
<>
|
|
<h2>Overview</h2>
|
|
<div set:html={md(movie.description)}/>
|
|
</>
|
|
)}
|
|
</article>
|
|
</Layout>
|