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",
"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",

2
package.json
View file

@ -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": {

2
src/_data/movies.js
View file

@ -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)],

12
src/_includes/base.liquid
View file

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

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

@ -7,8 +7,7 @@
position: relative;
overflow: hidden;
div {
&.meta-text{
div.meta-text {
color: white;
position: absolute;
left: var(--sizing-sm);
@ -29,7 +28,6 @@
text-shadow: rgba(0, 0, 0, 0.7) 0px 0px 10px;
}
}
}
& img {
width: 100%;
@ -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);
}

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

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

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

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

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

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