chore: schemas, styles, cleanup

src/assets/scripts/index.js

@@ -42,9 +42,7 @@ window.addEventListener('load', () => {
     const checkModals = () => {
       let isAnyModalOpen = false
       modalInputs.forEach((modalInput) => {
-        if (modalInput.checked) {
-          isAnyModalOpen = true
-        }
+        if (modalInput.checked) isAnyModalOpen = true
       })
       toggleBodyScroll(isAnyModalOpen)
     }
@@ -56,9 +54,7 @@ window.addEventListener('load', () => {
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         modalInputs.forEach((modalInput) => {
-          if (modalInput.checked) {
-            modalInput.checked = false
-          }
+          if (modalInput.checked) modalInput.checked = false
         })
         toggleBodyScroll(false)
       }

src/assets/styles/components/badge-grid.css

@@ -1,10 +1,10 @@
 .badge-grid {
   display: grid;
   gap: var(--spacing-md);
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: var(--grid-columns-three);
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: var(--grid-columns-four);
   }
 
   & > * {

src/assets/styles/components/forms.css

@@ -35,6 +35,35 @@ select {
   padding: var(--spacing-xs) var(--spacing-sm);
 }
 
+fieldset {
+  border: var(--border-gray);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+    gap: var(--spacing-lg);
+  }
+
+  & label {
+    display: flex;
+    align-items: center;
+    gap: var(--sizing-xs);
+  }
+
+  & input[type="checkbox"] {
+    margin: 0;
+  }
+
+  & legend {
+    color: var(--text-color-inverted);
+    background-color: var(--accent-color);
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius-slight);
+  }
+}
+
 .search__form {
   margin-top: 0;
 
@@ -52,6 +81,11 @@ select {
   & li {
     margin: var(--spacing-sm) 0;
 
+    &:not(:last-child) {
+      margin-bottom: var(--sizing-base);
+      border-bottom: var(--border-gray);
+    }
+
     & a {
       text-decoration: none;
     }

src/assets/styles/components/media-grid.css

@@ -10,18 +10,21 @@
     margin-top: var(--spacing-base);
   }
 
+  :is(&.poster, &.square, &.vertical) img {
+    border-radius: var(--border-radius-slight);
+    width: 100%;
+  }
+
+  :is(&.poster, &.vertical) img {
+    height: auto;
+  }
+
   &.poster {
     grid-template-columns: var(--grid-poster);
 
     & a {
       aspect-ratio: var(--aspect-ratio-banner);
     }
-
-    & img {
-      border-radius: var(--border-radius-slight);
-      width: 100%;
-      height: auto;
-    }
   }
 
   &.square {
@@ -32,9 +35,7 @@
     }
 
     & img {
-      width: 100%;
       height: 100%;
-      border-radius: var(--border-radius-slight);
     }
   }
 
@@ -44,12 +45,6 @@
     & a {
       aspect-ratio: var(--aspect-ratio-vertical);
     }
-
-    & img {
-      width: 100%;
-      height: auto;
-      border-radius: var(--border-radius-slight);
-    }
   }
 
   & .item {

src/data/books.js

@@ -42,8 +42,19 @@ const sortBooksByYear = (books) => {
   return Object.values(years).filter(year => year['value'] > 2017)
 }
 
+const currentYear = new Date().getFullYear()
+
 export default async function () {
   const books = await fetchAllBooks()
+  const sortedByYear = sortBooksByYear(books)
+  const booksForCurrentYear = sortedByYear.find(
+    yearGroup => yearGroup.value === currentYear
+  )?.data || []
 
-  return { all: books, years: sortBooksByYear(books), feed: books.filter(book => book['feed']) }
+  return {
+    all: books,
+    years: sortedByYear,
+    currentYear: booksForCurrentYear,
+    feed: books.filter(book => book['feed'])
+  }
 }

src/includes/base.liquid

@@ -70,10 +70,10 @@
     {%- assign featuredShow = tv.favorites | shuffleArray | first -%}
     {%- assign ogImage = globals.cdn_url | append: featuredShow.grid.backdrop -%}
   {%- when 'books' -%}
-    {%- assign featuredBook = books.all | bookStatus: 'started' | reverse | first -%}
+    {%- assign featuredBook = books.all | filterBooksByStatus: 'started' | reverse | first -%}
     {%- assign ogImage = globals.cdn_url | append: featuredBook.grid.image -%}
   {%- when 'books-year' -%}
-    {%- assign featuredBook = books.all | bookStatus: 'finished' | bookFinishedYear: year.value | first -%}
+    {%- assign featuredBook = books.currentYear | first -%}
     {%- assign ogImage = globals.cdn_url | append: featuredBook.grid.image -%}
   {%- when 'book' -%}
     {%- assign ogImage = globals.cdn_url | append: book.grid.image -%}
@@ -117,8 +117,10 @@
     <link rel="alternate" href="https://coryd.dev/feeds/album-releases" title="Album releases / {{ globals.site_name }}" type="application/rss+xml">
     <link rel="alternate" href="https://coryd.dev/feeds/all" title="All activity / {{ globals.site_name }}" type="application/rss+xml">
     <script defer src="/assets/scripts/index.js?v={% appVersion %}"></script>
-    <script defer data-domain="coryd.dev" src="/js/script.js"></script>
-    <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+    {%- if isProduction -%}
+      <script defer data-domain="coryd.dev" src="/js/script.js"></script>
+      <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+    {%- endif -%}
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",

src/includes/partials/home/intro.liquid

@@ -1,4 +1,6 @@
 <article>
   {{ intro }}
-  {% render "partials/blocks/now-playing.liquid", nowPlaying:nowPlaying %}
+  {%- if isProduction -%}
+    {% render "partials/blocks/now-playing.liquid", nowPlaying:nowPlaying %}
+  {%- endif -%}
 </article>

src/includes/partials/home/recent-activity.liquid

@@ -2,7 +2,7 @@
 {%- assign track = music.week.tracks | first -%}
 {%- assign show = tv.recentlyWatched | first -%}
 {%- assign movie = movies.recentlyWatched | first -%}
-{%- assign book = books | bookFinishedYear: currentYear | first -%}
+{%- assign book = books | first -%}
 {%- assign link = links | first -%}
 <article>
   <h2>

src/pages/dynamic/books/index.html

@@ -7,8 +7,8 @@ updated: "now"
 schema: books
 ---
 {%- assign currentYear = 'now' | date: "%Y" -%}
-{%- assign bookData = books.all | bookStatus: 'started' | reverse -%}
-{%- assign currentBookCount = books.all | bookFinishedYear: currentYear | size -%}
+{%- assign bookData = books.all | filterBooksByStatus: 'started' | reverse -%}
+{%- assign currentBookCount = books.currentYear | size -%}
 <h2>Currently reading</h2>
 <p>Here's what I'm reading at the moment. I've finished <strong class="highlight-text">{{ currentBookCount }} books</strong> this year.</p>
 <p>{{ books.years | bookYearLinks }}</p>

src/pages/dynamic/books/year.html

@@ -7,8 +7,8 @@ pagination:
 permalink: "/books/years/{{ year.value }}.html"
 schema: books-year
 ---
-{%- assign bookData = year.data | bookStatus: 'finished' -%}
-{%- assign bookDataFavorites = bookData | bookFavorites -%}
+{%- assign bookData = year.data | filterBooksByStatus: 'finished' -%}
+{%- assign bookDataFavorites = bookData | findFavoriteBooks -%}
 {%- capture favoriteBooks -%}{{ bookDataFavorites | shuffleArray | mediaLinks: "book", 5 }}{%- endcapture -%}
 {%- assign currentYear = 'now' | date: "%Y" -%}
 {%- assign yearString = year.value | append: '' -%}

src/pages/dynamic/index.html

@@ -3,5 +3,5 @@ layout: default
 permalink: /
 ---
 {% render "partials/home/intro.liquid" intro:globals.intro, nowPlaying:nowPlaying.content %}
-{% render "partials/home/recent-activity.liquid" music:music, books:books.all, tv:tv, movies:movies, links:links %}
+{% render "partials/home/recent-activity.liquid" music:music, books:books.currentYear, tv:tv, movies:movies, links:links %}
 {% render "partials/home/recent-posts.liquid" posts:posts %}