feat: dynamic media pages
This commit is contained in:
parent
ae973948c8
commit
0187aaa766
13 changed files with 560 additions and 360 deletions
|
|
@ -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