cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: recently watched pages

Browse source
This commit is contained in:
Cory Dransfeldt 2024-05-20 13:17:54 -07:00
parent 53a5fbd906
commit 9fdb0db1fb
No known key found for this signature in database
12 changed files with 98 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "16.4.2", "version": "16.5.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "16.4.2", "version": "16.5.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.2.2", "@cdransf/api-text": "^1.2.2",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "16.4.2", "version": "16.5.0",
"description": "The source for my personal site. Built using 11ty.", "description": "The source for my personal site. Built using 11ty.",
"type": "module", "type": "module",
"scripts": { "scripts": {

2
src/_data/movies.js
View file

@ -63,7 +63,7 @@ export default async function () {
}).filter(movie => watched ? movie['lastWatched'] : !movie['lastWatched']) }).filter(movie => watched ? movie['lastWatched'] : !movie['lastWatched'])
const favoriteMovies = movies.filter(movie => movie['favorite']) const favoriteMovies = movies.filter(movie => movie['favorite'])
const collectedMovies = movies.filter(movie => movie['collected']) 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 { return {
movies: [...formatMovieData(movies), ...formatMovieData(movies, false)], movies: [...formatMovieData(movies), ...formatMovieData(movies, false)],

12
src/_includes/base.liquid
View file

@ -9,19 +9,19 @@
{% endif %} {% endif %}
{%- endcapture -%} {%- endcapture -%}
{%- capture ogImage -%} {%- capture ogImage -%}
{% if schema == 'blog' %} {%- if schema == 'blog' -%}
{{ meta.url }}/assets/img/ogi/{{ title | slugifyString }}-preview.png {{ meta.url }}/assets/img/ogi/{{ title | slugifyString }}-preview.png
{% elsif schema == 'music' %} {%- elsif schema == 'music' -%}
{{ music.recent.artists[0].image }} {{ music.recent.artists[0].image }}
{% elsif schema == 'watching' %} {%- elsif schema == 'watching' -%}
{%- assign featuredMovie = movies.recentlyWatched | first -%} {%- assign featuredMovie = movies.recentlyWatched | first -%}
{{ featuredMovie.backdrop }} {{ featuredMovie.backdrop }}
{% elsif schema == 'books' %} {%- elsif schema == 'books' -%}
{%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%} {%- assign featuredBook = books | bookStatus: 'started' | reverse | first -%}
{{ featuredBook.image }} {{ featuredBook.image }}
{% else %} {%- else -%}
{{ meta.meta_data.opengraph_default }} {{ meta.meta_data.opengraph_default }}
{% endif %} {%- endif -%}
{%- endcapture -%} {%- endcapture -%}
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">

28
src/_includes/partials/media/watching/backdrop-grid.liquid Normal file
View 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 %}

23
src/_includes/partials/media/watching/favorites-grid.liquid
View file

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

41
src/assets/styles/pages/watching.css
View file

@ -7,27 +7,25 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
div { div.meta-text {
&.meta-text{ color: white;
color: white; position: absolute;
position: absolute; left: var(--sizing-sm);
left: var(--sizing-sm); bottom: var(--sizing-lg);
bottom: var(--sizing-lg); z-index: 2;
z-index: 2;
& .header { & .header {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }
& .subheader { & .subheader {
font-size: var(--font-size-sm); font-size: var(--font-size-sm);
} }
& .header, & .header,
& .subheader { & .subheader {
line-height: 1.5; line-height: 1.5;
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
} }
} }
@ -74,13 +72,18 @@
flex-direction: column; flex-direction: column;
& .header, & .header,
& .subheader { & .subheader,
& .rating {
color: var(--color-lightest); color: var(--color-lightest);
font-size: var(--font-size-xs); font-size: var(--font-size-xs);
line-height: 1.5; line-height: 1.5;
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px; text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
} }
& .rating {
font-size: calc(var(--font-size-xs) * .75);
}
& .header { & .header {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
} }

2
src/pages/main/watching/favorites/movies.html
View file

@ -8,4 +8,4 @@ schema: watching
<h2 class="watching page-header">{{ title }}</h2> <h2 class="watching page-header">{{ title }}</h2>
<p>These are my favorite movies. There are many like them, but these are mine.</p> <p>These are my favorite movies. There are many like them, but these are mine.</p>
<hr class="large-spacing" /> <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 %}

2
src/pages/main/watching/favorites/shows.html
View file

@ -8,4 +8,4 @@ schema: watching
<h2 class="watching page-header">{{ title }}</h2> <h2 class="watching page-header">{{ title }}</h2>
<p>These are my favorite shows. There are many like them, but these are mine.</p> <p>These are my favorite shows. There are many like them, but these are mine.</p>
<hr class="large-spacing" /> <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 %}

24
src/pages/main/watching/index.html
View file

@ -10,15 +10,19 @@ schema: watching
{% render "partials/media/watching/hero.liquid" movie:featuredMovie %} {% 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> <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" %} {% 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"> <a class="link-icon flex-centered" href="/recent/movies">
{% tablericon "movie" "Recent movies" %} <h2 id="movies" class="section-header flex-centered">
Recent movies {% tablericon "movie" "Recent movies" %}
</h2> Recent movies
</h2>
</a>
{% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %} {% render "partials/media/grid.liquid", data:movies.recentlyWatched, shape: "vertical", count: 6 %}
<h2 id="tv" class="section-header flex-centered"> <a class="link-icon flex-centered" href="/recent/shows">
{% tablericon "device-tv" "Recent shows" %} <h2 id="tv" class="section-header flex-centered">
Recent shows {% tablericon "device-tv" "Recent shows" %}
</h2> Recent shows
</h2>
</a>
{% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %} {% render "partials/media/grid.liquid", data:tv.recentlyWatched, shape: "vertical", count: 6 %}
<a class="link-icon flex-centered" href="/watching/favorite-movies"> <a class="link-icon flex-centered" href="/watching/favorite-movies">
<h2 class="section-header flex-centered"> <h2 class="section-header flex-centered">
@ -27,7 +31,7 @@ schema: watching
</h2> </h2>
</a> </a>
{% assign favoriteMovies = movies.favorites | featuredWatching: 6 %} {% 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"> <a class="link-icon flex-centered" href="/watching/favorite-shows">
<h2 class="section-header flex-centered"> <h2 class="section-header flex-centered">
{% tablericon "star" "Favorite shows" %} {% tablericon "star" "Favorite shows" %}
@ -35,4 +39,4 @@ schema: watching
</h2> </h2>
</a> </a>
{% assign favoriteShows = tv.favorites | featuredWatching: 6 %} {% 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
View 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
View 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 %}