feat: recently watched pages
This commit is contained in:
parent
53a5fbd906
commit
9fdb0db1fb
12 changed files with 98 additions and 64 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "16.4.2",
|
||||
"version": "16.5.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "16.4.2",
|
||||
"version": "16.5.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.2.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "16.4.2",
|
||||
"version": "16.5.0",
|
||||
"description": "The source for my personal site. Built using 11ty.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ export default async function () {
|
|||
}).filter(movie => watched ? movie['lastWatched'] : !movie['lastWatched'])
|
||||
const favoriteMovies = movies.filter(movie => movie['favorite'])
|
||||
const collectedMovies = movies.filter(movie => movie['collected'])
|
||||
const recentlyWatchedMovies = movies.filter(movie => movie['last_watched']).sort((a, b) => new Date(b['last_watched']) - new Date(a['last_watched'])).slice(0, 6)
|
||||
const recentlyWatchedMovies = movies.filter(movie => movie['last_watched']).sort((a, b) => new Date(b['last_watched']) - new Date(a['last_watched']))
|
||||
|
||||
return {
|
||||
movies: [...formatMovieData(movies), ...formatMovieData(movies, false)],
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@
|
|||
{% endif %}
|
||||
{%- endcapture -%}
|
||||
{%- capture ogImage -%}
|
||||
{% if schema == 'blog' %}
|
||||
{%- if schema == 'blog' -%}
|
||||
{{ meta.url }}/assets/img/ogi/{{ title | slugifyString }}-preview.png
|
||||
{% elsif schema == 'music' %}
|
||||
{%- elsif schema == 'music' -%}
|
||||
{{ music.recent.artists[0].image }}
|
||||
{% elsif schema == 'watching' %}
|
||||
{%- elsif schema == 'watching' -%}
|
||||
{%- assign featuredMovie = movies.recentlyWatched | first -%}
|
||||
{{ featuredMovie.backdrop }}
|
||||
{% elsif schema == 'books' %}
|
||||
{%- elsif schema == 'books' -%}
|
||||
{%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%}
|
||||
{{ featuredBook.image }}
|
||||
{% else %}
|
||||
{%- else -%}
|
||||
{{ meta.meta_data.opengraph_default }}
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
|
|
|||
28
src/_includes/partials/media/watching/backdrop-grid.liquid
Normal file
28
src/_includes/partials/media/watching/backdrop-grid.liquid
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{% if mediaItems.size > 0 %}
|
||||
<div class="watching grid">
|
||||
{% for media in mediaItems limit: count %}
|
||||
{% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %}
|
||||
<a href="{{ media.url }}">
|
||||
<div class="watching item shadow">
|
||||
<div class="meta-text">
|
||||
{% if media.type == 'movie' %}
|
||||
<div class="header">{{ media.title }}</div>
|
||||
<div class="subheader flex-centered gap-xs">
|
||||
{{ media.year }}
|
||||
{% if rating and media.rating %}
|
||||
<span class="rating"> ({{ media.rating }})</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="header">{{ media.name }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- capture loadingStrategy -%}
|
||||
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ media.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=75" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{% if favorites.size > 0 %}
|
||||
<div class="watching grid">
|
||||
{% for favorite in favorites limit: count %}
|
||||
{% capture alt %}{{ favorite.title | escape }} ({{ favorite.year }}){% endcapture %}
|
||||
<a href="{{ favorite.url }}">
|
||||
<div class="watching item shadow">
|
||||
<div class="meta-text">
|
||||
{% if favorite.type == 'movie' %}
|
||||
<div class="header">{{ favorite.title }}</div>
|
||||
<div class="subheader">{{ favorite.year }}</div>
|
||||
{% else %}
|
||||
<div class="header">{{ favorite.name }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{%- capture loadingStrategy -%}
|
||||
{%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
<img src="https://coryd.dev/.netlify/images/?url={{ favorite.backdrop }}&fit=cover&w=256&h=144&fm=webp&q=75" alt="{{ alt }}" loading="{{ loadingStrategy }}" decoding="async" width="256" height="144" />
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -7,27 +7,25 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
&.meta-text{
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: var(--sizing-sm);
|
||||
bottom: var(--sizing-lg);
|
||||
z-index: 2;
|
||||
div.meta-text {
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: var(--sizing-sm);
|
||||
bottom: var(--sizing-lg);
|
||||
z-index: 2;
|
||||
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
& .subheader {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
& .subheader {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
& .header,
|
||||
& .subheader {
|
||||
line-height: 1.5;
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
& .header,
|
||||
& .subheader {
|
||||
line-height: 1.5;
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,13 +72,18 @@
|
|||
flex-direction: column;
|
||||
|
||||
& .header,
|
||||
& .subheader {
|
||||
& .subheader,
|
||||
& .rating {
|
||||
color: var(--color-lightest);
|
||||
font-size: var(--font-size-xs);
|
||||
line-height: 1.5;
|
||||
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
}
|
||||
|
||||
& .rating {
|
||||
font-size: calc(var(--font-size-xs) * .75);
|
||||
}
|
||||
|
||||
& .header {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ schema: watching
|
|||
<h2 class="watching page-header">{{ title }}</h2>
|
||||
<p>These are my favorite movies. There are many like them, but these are mine.</p>
|
||||
<hr class="large-spacing" />
|
||||
{% render "partials/media/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.favorites, count: 99 %}
|
||||
|
|
@ -8,4 +8,4 @@ schema: watching
|
|||
<h2 class="watching page-header">{{ title }}</h2>
|
||||
<p>These are my favorite shows. There are many like them, but these are mine.</p>
|
||||
<hr class="large-spacing" />
|
||||
{% render "partials/media/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.favorites, count: 99 %}
|
||||
|
|
@ -10,15 +10,19 @@ schema: watching
|
|||
{% render "partials/media/watching/hero.liquid" movie:featuredMovie %}
|
||||
<p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
|
||||
{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
|
||||
<h2 id="movies" class="section-header flex-centered">
|
||||
{% tablericon "movie" "Recent movies" %}
|
||||
Recent movies
|
||||
</h2>
|
||||
<a class="link-icon flex-centered" href="/recent/movies">
|
||||
<h2 id="movies" class="section-header flex-centered">
|
||||
{% tablericon "movie" "Recent movies" %}
|
||||
Recent movies
|
||||
</h2>
|
||||
</a>
|
||||
{% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
|
||||
<h2 id="tv" class="section-header flex-centered">
|
||||
{% tablericon "device-tv" "Recent shows" %}
|
||||
Recent shows
|
||||
</h2>
|
||||
<a class="link-icon flex-centered" href="/recent/shows">
|
||||
<h2 id="tv" class="section-header flex-centered">
|
||||
{% tablericon "device-tv" "Recent shows" %}
|
||||
Recent shows
|
||||
</h2>
|
||||
</a>
|
||||
{% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
|
||||
<a class="link-icon flex-centered" href="/watching/favorite-movies">
|
||||
<h2 class="section-header flex-centered">
|
||||
|
|
@ -27,7 +31,7 @@ schema: watching
|
|||
</h2>
|
||||
</a>
|
||||
{% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
|
||||
{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:favoriteMovies, count: 6 %}
|
||||
<a class="link-icon flex-centered" href="/watching/favorite-shows">
|
||||
<h2 class="section-header flex-centered">
|
||||
{% tablericon "star" "Favorite shows" %}
|
||||
|
|
@ -35,4 +39,4 @@ schema: watching
|
|||
</h2>
|
||||
</a>
|
||||
{% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
|
||||
{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:favoriteShows, count: 6 %}
|
||||
11
src/pages/main/watching/recent/movies.html
Normal file
11
src/pages/main/watching/recent/movies.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Recent movies
|
||||
layout: default
|
||||
permalink: "/recent/movies/index.html"
|
||||
schema: watching
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="watching page-header">{{ title }}</h2>
|
||||
<p>These are the movies I've watched recently. There are many like them, but these are mine.</p>
|
||||
<hr class="large-spacing" />
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.recentlyWatched, count: 99, rating: true %}
|
||||
11
src/pages/main/watching/recent/shows.html
Normal file
11
src/pages/main/watching/recent/shows.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: Recent shows
|
||||
layout: default
|
||||
permalink: "/recent/shows/index.html"
|
||||
schema: watching
|
||||
---
|
||||
<p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
|
||||
<h2 class="watching page-header">{{ title }}</h2>
|
||||
<p>These are the shows I've watched recently. There are many like them, but these are mine.</p>
|
||||
<hr class="large-spacing" />
|
||||
{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.recentlyWatched, count: 99 %}
|
||||
Reference in a new issue