From 9fdb0db1fba64624933d4bba2d00bb59932a6cd7 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 20 May 2024 13:17:54 -0700 Subject: [PATCH] feat: recently watched pages --- package-lock.json | 4 +- package.json | 2 +- src/_data/movies.js | 2 +- src/_includes/base.liquid | 12 +++--- .../media/watching/backdrop-grid.liquid | 28 +++++++++++++ .../media/watching/favorites-grid.liquid | 23 ----------- src/assets/styles/pages/watching.css | 41 ++++++++++--------- src/pages/main/watching/favorites/movies.html | 2 +- src/pages/main/watching/favorites/shows.html | 2 +- src/pages/main/watching/index.html | 24 ++++++----- src/pages/main/watching/recent/movies.html | 11 +++++ src/pages/main/watching/recent/shows.html | 11 +++++ 12 files changed, 98 insertions(+), 64 deletions(-) create mode 100644 src/_includes/partials/media/watching/backdrop-grid.liquid delete mode 100644 src/_includes/partials/media/watching/favorites-grid.liquid create mode 100644 src/pages/main/watching/recent/movies.html create mode 100644 src/pages/main/watching/recent/shows.html diff --git a/package-lock.json b/package-lock.json index d8c5e114..b8561265 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 5f8bbf17..da394397 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/_data/movies.js b/src/_data/movies.js index 7bdbab74..c98f57a7 100644 --- a/src/_data/movies.js +++ b/src/_data/movies.js @@ -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)], diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid index 0b6d7977..005c34ae 100644 --- a/src/_includes/base.liquid +++ b/src/_includes/base.liquid @@ -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 -%} diff --git a/src/_includes/partials/media/watching/backdrop-grid.liquid b/src/_includes/partials/media/watching/backdrop-grid.liquid new file mode 100644 index 00000000..9a2d79d9 --- /dev/null +++ b/src/_includes/partials/media/watching/backdrop-grid.liquid @@ -0,0 +1,28 @@ +{% if mediaItems.size > 0 %} +
+ {% for media in mediaItems limit: count %} + {% capture alt %}{{ media.title | escape }} ({{ media.year }}){% endcapture %} + +
+
+ {% if media.type == 'movie' %} +
{{ media.title }}
+
+ {{ media.year }} + {% if rating and media.rating %} + ({{ media.rating }}) + {% endif %} +
+ {% else %} +
{{ media.name }}
+ {% endif %} +
+ {%- capture loadingStrategy -%} + {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%} + {%- endcapture -%} + {{ alt }} +
+ + {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/src/_includes/partials/media/watching/favorites-grid.liquid b/src/_includes/partials/media/watching/favorites-grid.liquid deleted file mode 100644 index 9d59cfbf..00000000 --- a/src/_includes/partials/media/watching/favorites-grid.liquid +++ /dev/null @@ -1,23 +0,0 @@ -{% if favorites.size > 0 %} -
- {% for favorite in favorites limit: count %} - {% capture alt %}{{ favorite.title | escape }} ({{ favorite.year }}){% endcapture %} - -
-
- {% if favorite.type == 'movie' %} -
{{ favorite.title }}
-
{{ favorite.year }}
- {% else %} -
{{ favorite.name }}
- {% endif %} -
- {%- capture loadingStrategy -%} - {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%} - {%- endcapture -%} - {{ alt }} -
- - {% endfor %} -
-{% endif %} \ No newline at end of file diff --git a/src/assets/styles/pages/watching.css b/src/assets/styles/pages/watching.css index 66f8990f..76e839b1 100644 --- a/src/assets/styles/pages/watching.css +++ b/src/assets/styles/pages/watching.css @@ -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); } diff --git a/src/pages/main/watching/favorites/movies.html b/src/pages/main/watching/favorites/movies.html index 256638d3..5fec3fce 100644 --- a/src/pages/main/watching/favorites/movies.html +++ b/src/pages/main/watching/favorites/movies.html @@ -8,4 +8,4 @@ schema: watching

{{ title }}

These are my favorite movies. There are many like them, but these are mine.

-{% render "partials/media/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %} \ No newline at end of file +{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.favorites, count: 99 %} \ No newline at end of file diff --git a/src/pages/main/watching/favorites/shows.html b/src/pages/main/watching/favorites/shows.html index 761eaf77..70354431 100644 --- a/src/pages/main/watching/favorites/shows.html +++ b/src/pages/main/watching/favorites/shows.html @@ -8,4 +8,4 @@ schema: watching

{{ title }}

These are my favorite shows. There are many like them, but these are mine.

-{% render "partials/media/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %} \ No newline at end of file +{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.favorites, count: 99 %} \ No newline at end of file diff --git a/src/pages/main/watching/index.html b/src/pages/main/watching/index.html index 5e9523c8..dacd41c3 100644 --- a/src/pages/main/watching/index.html +++ b/src/pages/main/watching/index.html @@ -10,15 +10,19 @@ schema: watching {% render "partials/media/watching/hero.liquid" movie:featuredMovie %}

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 movies and shows I'm planning to watch.

{% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %} -

- {% tablericon "movie" "Recent movies" %} - Recent movies -

+ +

+ {% tablericon "movie" "Recent movies" %} + Recent movies +

+ {% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %} -

- {% tablericon "device-tv" "Recent shows" %} - Recent shows -

+ +

+ {% tablericon "device-tv" "Recent shows" %} + Recent shows +

+ {% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}

@@ -27,7 +31,7 @@ schema: watching

{% 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 %}

{% tablericon "star" "Favorite shows" %} @@ -35,4 +39,4 @@ schema: watching

{% assign favoriteShows = tv.favorites | featuredWatching: 6 %} -{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %} \ No newline at end of file +{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:favoriteShows, count: 6 %} \ No newline at end of file diff --git a/src/pages/main/watching/recent/movies.html b/src/pages/main/watching/recent/movies.html new file mode 100644 index 00000000..3c20bcd3 --- /dev/null +++ b/src/pages/main/watching/recent/movies.html @@ -0,0 +1,11 @@ +--- +title: Recent movies +layout: default +permalink: "/recent/movies/index.html" +schema: watching +--- +

{% tablericon "arrow-left" "Go back" %} Go back

+

{{ title }}

+

These are the movies I've watched recently. There are many like them, but these are mine.

+
+{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:movies.recentlyWatched, count: 99, rating: true %} \ No newline at end of file diff --git a/src/pages/main/watching/recent/shows.html b/src/pages/main/watching/recent/shows.html new file mode 100644 index 00000000..cd6a73d9 --- /dev/null +++ b/src/pages/main/watching/recent/shows.html @@ -0,0 +1,11 @@ +--- +title: Recent shows +layout: default +permalink: "/recent/shows/index.html" +schema: watching +--- +

{% tablericon "arrow-left" "Go back" %} Go back

+

{{ title }}

+

These are the shows I've watched recently. There are many like them, but these are mine.

+
+{% render "partials/media/watching/backdrop-grid.liquid", mediaItems:tv.recentlyWatched, count: 99 %} \ No newline at end of file