feat: dynamic media pages
This commit is contained in:
parent
ae973948c8
commit
0187aaa766
13 changed files with 560 additions and 360 deletions
|
|
@ -11,7 +11,7 @@ article {
|
|||
}
|
||||
|
||||
& h3,
|
||||
&:not(:has(h3)) p {
|
||||
&:not(:has(h3)) p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,11 @@ export default async function () {
|
|||
try {
|
||||
const movies = await fetchAllMovies()
|
||||
const favoriteMovies = movies.filter(movie => movie['favorite'])
|
||||
const recentlyWatchedMovies = movies.filter(movie => movie['last_watched'] && year - DateTime.fromISO(movie['last_watched']).year <= 3)
|
||||
const now = DateTime.now();
|
||||
const recentlyWatchedMovies = movies.filter(movie => {
|
||||
const lastWatched = movie['last_watched']
|
||||
return (lastWatched && now.diff(DateTime.fromISO(lastWatched), 'months').months <= 6)
|
||||
})
|
||||
|
||||
return {
|
||||
movies,
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export default async function () {
|
|||
|
||||
return {
|
||||
shows,
|
||||
recentlyWatched: episodes.slice(0, 225),
|
||||
recentlyWatched: episodes.slice(0, 125),
|
||||
favorites: shows.filter(show => show.favorite).sort((a, b) => a.title.localeCompare(b.title)),
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
|
|||
|
|
@ -4,26 +4,12 @@
|
|||
{%- assign pageTitle = post.title -%}
|
||||
{%- elsif title -%}
|
||||
{%- assign pageTitle = title | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif artist.name -%}
|
||||
{%- assign pageTitle = 'Artists / ' | append: artist.name | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif schema == 'music-index' -%}
|
||||
{%- assign pageTitle = 'Music / ' | append: globals.site_name -%}
|
||||
{%- elsif schema == 'music-period' -%}
|
||||
{%- assign pageTitle = 'Music / ' | append: page.title | append: globals.site_name -%}
|
||||
{%- elsif genre.name -%}
|
||||
{%- assign pageTitle = 'Music / ' | append: genre.name | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif book.title -%}
|
||||
{%- assign pageTitle = 'Books / ' | append: book.title | append: ' by ' | append: book.author | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif year.value -%}
|
||||
{%- assign pageTitle = ' / Books ' | prepend: year.value | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif movie.title -%}
|
||||
{%- assign pageTitle = 'Movies / ' | append: movie.title -%}
|
||||
{%- if movie.rating -%}
|
||||
{%- assign pageTitle = pageTitle | append: ' (' | append: movie.rating | append: ')' -%}
|
||||
{%- endif -%}
|
||||
{%- assign pageTitle = pageTitle | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif show.title -%}
|
||||
{%- assign pageTitle = 'Shows / ' | append: show.title | append: ' / ' | append: globals.site_name -%}
|
||||
{%- elsif page.description -%}
|
||||
{%- assign pageTitle = page.title | append: ' / ' | append: globals.site_name -%}
|
||||
{%- endif -%}
|
||||
|
|
@ -31,16 +17,6 @@
|
|||
{%- assign pageDescription = globals.site_description -%}
|
||||
{%- if schema == 'blog' -%}
|
||||
{%- assign pageDescription = post.description | markdown | strip_html -%}
|
||||
{%- elsif artist.description -%}
|
||||
{%- assign pageDescription = artist.description | markdown | strip_html | htmlTruncate -%}
|
||||
{%- elsif book.description -%}
|
||||
{%- assign pageDescription = book.review | markdown | strip_html | default: book.description | htmlTruncate -%}
|
||||
{%- elsif movie.description -%}
|
||||
{%- assign pageDescription = movie.review | markdown | strip_html | default: movie.description | htmlTruncate -%}
|
||||
{%- elsif show.description -%}
|
||||
{%- assign pageDescription = show.review | markdown | strip_html | default: show.description | htmlTruncate -%}
|
||||
{%- elsif genre.description -%}
|
||||
{%- assign pageDescription = genre.description | markdown | strip_html | htmlTruncate -%}
|
||||
{%- elsif page.description -%}
|
||||
{%- assign pageDescription = page.description -%}
|
||||
{%- elsif description -%}
|
||||
|
|
@ -53,10 +29,6 @@
|
|||
{%- assign ogImage = globals.cdn_url | append: page.image -%}
|
||||
{%- when 'music-index' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: music.week.artists[0].grid.image -%}
|
||||
{%- when 'artist' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: artist.grid.image -%}
|
||||
{%- when 'genre' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: genre.artists[0].grid.image -%}
|
||||
{%- when 'watching' -%}
|
||||
{%- assign featuredMovie = movies.recentlyWatched | first -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: featuredMovie.grid.backdrop -%}
|
||||
|
|
@ -75,15 +47,6 @@
|
|||
{%- when 'books-year' -%}
|
||||
{%- assign featuredBook = books.currentYear | first -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: featuredBook.grid.image -%}
|
||||
{%- when 'book' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: book.grid.image -%}
|
||||
{%- when 'movie' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: movie.grid.backdrop -%}
|
||||
{%- when 'show' -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: show.grid.backdrop -%}
|
||||
{%- when 'genre' -%}
|
||||
{%- assign genreArtist = genre.artists | shuffleArray | first -%}
|
||||
{%- assign ogImage = globals.cdn_url | append: genreArtist.grid.image -%}
|
||||
{%- endcase -%}
|
||||
{%- assign escapedPageDescription = pageDescription | escape -%}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
pagination:
|
||||
data: books.all
|
||||
size: 1
|
||||
alias: book
|
||||
permalink: "{{ book.url }}/index.html"
|
||||
schema: book
|
||||
---
|
||||
{%- capture alt -%}
|
||||
{{ book.title }}{% if book.author %} by {{ book.author }}{% endif %}
|
||||
{%- endcapture -%}
|
||||
<a class="icon-link" href="/books" title="Go back to the books index page">{% tablericon "arrow-left" %} Back to books</a>
|
||||
<article class="book-focus">
|
||||
<div class="book-display">
|
||||
<img
|
||||
srcset="
|
||||
{{ globals.cdn_url }}{{ book.image }}?class=verticalsm&type=webp 200w,
|
||||
{{ globals.cdn_url }}{{ book.image }}?class=verticalmd&type=webp 400w,
|
||||
{{ globals.cdn_url }}{{ book.image }}?class=verticalbase&type=webp 800w
|
||||
"
|
||||
sizes="(max-width: 450px) 203px,
|
||||
(max-width: 850px) 406px,
|
||||
(max-width: 1000px) 812px,
|
||||
812px"
|
||||
src="{{ globals.cdn_url }}{{ book.image }}?class=verticalsm&type=webp"
|
||||
alt="{{ alt | replaceQuotes }}"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="307"
|
||||
/>
|
||||
<div class="book-meta">
|
||||
<p class="title"><strong>{{ book.title }}</strong></p>
|
||||
{% if book.rating %}<p>{{ book.rating }}</p>{% endif %}
|
||||
{% if book.author %}
|
||||
<p class="sub-meta">By {{ book.author }}</p>
|
||||
{% endif %}
|
||||
{%- if book.favorite -%}
|
||||
<p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite books!</p>
|
||||
{%- endif -%}
|
||||
{%- if book.tattoo -%}
|
||||
<p class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this book!</p>
|
||||
{%- endif -%}
|
||||
{% if book.status == 'finished' %}
|
||||
<p class="sub-meta">Finished on: <strong class="highlight-text">{{ book.date_finished | date: "%B %e, %Y" }}</strong></p>
|
||||
{% endif %}
|
||||
{% if book.status == 'started' %}
|
||||
{%- assign percentage = book.progress | append: '%' -%}
|
||||
{% render "partials/media/progress-bar.liquid", percentage:percentage %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if book.review %}
|
||||
{% render "partials/blocks/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
|
||||
<h2>My thoughts</h2>
|
||||
{{ book.review | markdown }}
|
||||
<hr />
|
||||
{% endif %}
|
||||
{% render "partials/blocks/associated-media.liquid", posts:book.posts %}
|
||||
{% render "partials/blocks/associated-media.liquid", books:book.related_books %}
|
||||
{% render "partials/blocks/associated-media.liquid", artists:book.artists %}
|
||||
{% render "partials/blocks/associated-media.liquid", movies:book.movies %}
|
||||
{% render "partials/blocks/associated-media.liquid", shows:book.shows %}
|
||||
{% render "partials/blocks/associated-media.liquid", genres:book.genres %}
|
||||
{% if book.description %}
|
||||
<h2>Overview</h2>
|
||||
{{ book.description | markdown }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
pagination:
|
||||
data: artists
|
||||
size: 1
|
||||
alias: artist
|
||||
permalink: "{{ artist.url }}/index.html"
|
||||
updated: "now"
|
||||
schema: artist
|
||||
---
|
||||
{%- capture alt -%}
|
||||
{{ artist.name }} / {{ artist.country }}
|
||||
{%- endcapture -%}
|
||||
{%- capture playLabel -%}
|
||||
{%- if artist.total_plays == 1 -%}
|
||||
play
|
||||
{%- else -%}
|
||||
plays
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
|
||||
<a class="icon-link" href="/music" title="Go back to the music index page">{% tablericon "arrow-left" %} Back to music</a>
|
||||
<article class="artist-focus">
|
||||
<div class="artist-display">
|
||||
<img
|
||||
srcset="
|
||||
{{ globals.cdn_url }}{{ artist.image }}?class=w200&type=webp 200w,
|
||||
{{ globals.cdn_url }}{{ artist.image }}?class=w600&type=webp 400w,
|
||||
{{ globals.cdn_url }}{{ artist.image }}?class=w800&type=webp 800w
|
||||
"
|
||||
sizes="(max-width: 450px) 200px,
|
||||
(max-width: 850px) 400px,
|
||||
800px"
|
||||
src="{{ globals.cdn_url }}{{ artist.image }}?class=w200&type=webp"
|
||||
alt="{{ alt | replaceQuotes }}"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="200"
|
||||
height="200"
|
||||
/>
|
||||
<div class="artist-meta">
|
||||
<p class="title"><strong>{{ artist.name }}</strong></p>
|
||||
<p class="sub-meta country">{% tablericon "map-pin" %} {{ artist.country }}</p>
|
||||
{%- if artist.favorite -%}
|
||||
<p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite artists!</p>
|
||||
{%- endif -%}
|
||||
{%- if artist.tattoo -%}
|
||||
<p class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this artist!</p>
|
||||
{%- endif -%}
|
||||
{%- if artist.total_plays > 0 -%}
|
||||
<p class="sub-meta"><strong class="highlight-text">{{ artist.total_plays | formatNumber }} {{ playLabel }}</strong></p>
|
||||
{%- endif -%}
|
||||
<p class="sub-meta">
|
||||
<a href="{{ artist.genre.url }}" title="Learn more about {{ artist.genre.name | escape }}">
|
||||
{{ artist.genre.name }}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% render "partials/blocks/associated-media.liquid", posts:artist.posts %}
|
||||
{% render "partials/blocks/associated-media.liquid", artists:artist.related_artists %}
|
||||
{% render "partials/blocks/associated-media.liquid", books:artist.books %}
|
||||
{% render "partials/blocks/associated-media.liquid", movies:artist.movies %}
|
||||
{% render "partials/blocks/associated-media.liquid", shows:artist.shows %}
|
||||
{%- if artist.description -%}
|
||||
<h2>Overview</h2>
|
||||
<div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
|
||||
<button data-toggle-button>Show more</button>
|
||||
{%- endif -%}
|
||||
{%- if artist.concerts -%}
|
||||
<hr />
|
||||
<p id="concerts" class="concerts">
|
||||
{% tablericon "device-speaker" %}
|
||||
I've seen this artist live!
|
||||
</p>
|
||||
<ul>
|
||||
{% for concert in artist.concerts %}
|
||||
{%- capture venue -%}
|
||||
{% if concert.venue_name %}
|
||||
{% if concert.venue_latitude and concert.venue_longitude %}
|
||||
<a href="https://www.openstreetmap.org/?mlat={{ concert.venue_latitude }}&mlon={{ concert.venue_longitude }}#map=18/{{ concert.venue_latitude }}/{{ concert.venue_longitude }}">{{ concert.venue_name_short }}</a>
|
||||
{% else %}
|
||||
{{ concert.venue_name_short }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%- endcapture -%}
|
||||
<li>
|
||||
On <strong class="highlight-text">{{ concert.date | date: "%B %e, %Y" }}</strong>
|
||||
{% if venue %} at {{ venue }}{% endif %}
|
||||
{%- if concert.notes -%}
|
||||
{% assign notes = concert.notes | prepend: "### Notes\n" | markdown %}
|
||||
{% render "partials/blocks/modal.liquid", label:"Concert info", icon:"info-circle", content:notes, id:concert.id %}
|
||||
{%- endif -%}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endif -%}
|
||||
{%- if artist.books or artist.concerts or artist.movies -%}<hr />{%- endif -%}
|
||||
<table>
|
||||
<tr>
|
||||
<th>Album</th>
|
||||
<th>Plays</th>
|
||||
<th>Year</th>
|
||||
</tr>
|
||||
{% for album in artist.albums %}
|
||||
<tr>
|
||||
<td>{{ album.name }}</td>
|
||||
<td>{{ album.total_plays }}</td>
|
||||
<td>{{ album.release_year }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<p><em>These are the albums by this artist that are in my collection, not necessarily a comprehensive discography.</em></p>
|
||||
</article>
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
pagination:
|
||||
data: movies.movies
|
||||
size: 1
|
||||
alias: movie
|
||||
permalink: "{{ movie.url }}/index.html"
|
||||
schema: movie
|
||||
---
|
||||
{%- capture alt -%}
|
||||
{{ movie.title }} / {{ movie.year }}{% if move.rating %} ({{ movie.rating }}){% endif %}
|
||||
{%- endcapture -%}
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} 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 | replaceQuotes }}"
|
||||
class="image-banner"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="256"
|
||||
height="180"
|
||||
/>
|
||||
<div class="meta">
|
||||
<p class="title"><strong>{{ movie.title }}</strong>{%- if movie.year and not movie.rating %} ({{ movie.year }}){%- endif -%}</p>
|
||||
{%- if movie.rating -%}
|
||||
<p>
|
||||
{{ movie.rating }}
|
||||
{%- if movie.year %}
|
||||
({{ movie.year }})
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{% endif -%}
|
||||
{%- if movie.favorite -%}
|
||||
<p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite movies!</p>
|
||||
{%- endif -%}
|
||||
{%- if movie.tattoo -%}
|
||||
<p class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this movie!</p>
|
||||
{%- endif -%}
|
||||
{%- if movie.collected -%}
|
||||
<p class="sub-meta collected">{% tablericon "circle-check" %} This movie is in my collection!</p>
|
||||
{%- endif -%}
|
||||
{%- if movie.lastWatched -%}<p class="sub-meta">Last watched on {{ movie.lastWatched | date: "%B %e, %Y" }}.</p>{%- endif -%}
|
||||
</div>
|
||||
{% if movie.review %}
|
||||
{% render "partials/blocks/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
|
||||
<h2>My thoughts</h2>
|
||||
{{ movie.review | markdown }}
|
||||
<hr />
|
||||
{% endif %}
|
||||
{% render "partials/blocks/associated-media.liquid", posts:movie.posts %}
|
||||
{% render "partials/blocks/associated-media.liquid", movies:movie.related_movies %}
|
||||
{% render "partials/blocks/associated-media.liquid", shows:movie.shows %}
|
||||
{% render "partials/blocks/associated-media.liquid", artists:movie.artists %}
|
||||
{% render "partials/blocks/associated-media.liquid", books:movie.books %}
|
||||
{% render "partials/blocks/associated-media.liquid", genres:movie.genres %}
|
||||
{% if movie.description %}
|
||||
<h2>Overview</h2>
|
||||
{{ movie.description | markdown }}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
pagination:
|
||||
data: tv.shows
|
||||
size: 1
|
||||
alias: show
|
||||
permalink: "{{ show.url }}/index.html"
|
||||
schema: show
|
||||
---
|
||||
{%- capture alt -%}
|
||||
{{ show.title }} / {{ show.year }}
|
||||
{%- endcapture -%}
|
||||
<a class="icon-link" href="/watching" title="Go back to the watching index page">{% tablericon "arrow-left" %} Back to watching</a>
|
||||
<article class="watching focus">
|
||||
<img
|
||||
srcset="
|
||||
{{ globals.cdn_url }}{{ show.backdrop }}?class=bannersm&type=webp 256w,
|
||||
{{ globals.cdn_url }}{{ show.backdrop }}?class=bannermd&type=webp 512w,
|
||||
{{ globals.cdn_url }}{{ show.backdrop }}?class=bannerbase&type=webp 1024w
|
||||
"
|
||||
sizes="(max-width: 450px) 256px,
|
||||
(max-width: 850px) 512px,
|
||||
1024px"
|
||||
src="{{ globals.cdn_url }}{{ show.backdrop }}?class=bannersm&type=webp"
|
||||
alt="{{ alt | replaceQuotes }}"
|
||||
class="image-banner"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
width="256"
|
||||
height="180"
|
||||
/>
|
||||
<div class="meta">
|
||||
<p class="title"><strong>{{ show.title }}</strong>{%- if show.year %} ({{ show.year }}){%- endif -%}</p>
|
||||
{%- if show.favorite -%}
|
||||
<p class="sub-meta favorite">{% tablericon "heart" %} This is one of my favorite shows!</p>
|
||||
{%- endif -%}
|
||||
{%- if show.tattoo -%}
|
||||
<p class="sub-meta tattoo">{% tablericon "needle" %} I have a tattoo inspired by this show!</p>
|
||||
{%- endif -%}
|
||||
{%- if show.collected -%}
|
||||
<p class="sub-meta collected">{% tablericon "circle-check" %} This show is in my collection!</p>
|
||||
{%- endif -%}
|
||||
{%- if show.episode.formatted_episode -%}
|
||||
{%- capture lastWatchedText -%}
|
||||
I last watched <strong class="highlight-text">{{ show.episode.formatted_episode }}</strong> on {{ show.episode.last_watched_at | date: "%B %e, %Y" }}.
|
||||
{%- endcapture -%}
|
||||
<p class="sub-meta">{{ lastWatchedText }}</p>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{% if show.review %}
|
||||
{% render "partials/blocks/banners/warning.liquid", text: "There are probably spoilers after this banner — this is a warning about them." %}
|
||||
<h2>My thoughts</h2>
|
||||
{{ show.review | markdown }}
|
||||
<hr />
|
||||
{% endif %}
|
||||
{% render "partials/blocks/associated-media.liquid", posts:show.posts %}
|
||||
{% render "partials/blocks/associated-media.liquid", artists:show.artists %}
|
||||
{% render "partials/blocks/associated-media.liquid", shows:show.related_shows %}
|
||||
{% render "partials/blocks/associated-media.liquid", movies:show.movies %}
|
||||
{% render "partials/blocks/associated-media.liquid", books:show.books %}
|
||||
{% if show.description %}
|
||||
<h2>Overview</h2>
|
||||
{{ show.description | markdown }}
|
||||
{% endif %}
|
||||
</article>
|
||||
Reference in a new issue