diff --git a/.eleventy.js b/.eleventy.js index ca40a2ee..c28b5858 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -75,6 +75,7 @@ export default async function (eleventyConfig) { }) eleventyConfig.addShortcode('appVersion', () => appVersion) + eleventyConfig.addShortcode('isProduction', () => process.env.ELEVENTY_PRODUCTION) // events if (process.env.ELEVENTY_PRODUCTION) eleventyConfig.on('afterBuild', copyErrorPages) diff --git a/config/filters/media.js b/config/filters/media.js index ac2d22c7..b7d0d895 100644 --- a/config/filters/media.js +++ b/config/filters/media.js @@ -1,11 +1,10 @@ export default { - bookStatus: (books, status) => books.filter(book => book['status'] === status), - bookFavorites: (books) => books.filter(book => book.favorite === true), + filterBooksByStatus: (books, status) => books.filter(book => book['status'] === status), + findFavoriteBooks: (books) => books.filter(book => book['favorite'] === true), bookYearLinks: (years) => years - .sort((a, b) => b.value - a.value) - .map((year, index) => `${year.value}${index < years.length - 1 ? ' / ' : ''}`) + .sort((a, b) => b['value'] - a['value']) + .map((year, index) => `${year['value']}${index < years.length - 1 ? ' / ' : ''}`) .join(''), - bookFinishedYear: (books, year) => books.filter(book => book.status === 'finished' && parseInt(book.year) === parseInt(year)), mediaLinks: (data, type, count = 10) => { if (!data || !type) return '' diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index 1ace9ec6..a8b17d95 100644 --- a/src/assets/scripts/index.js +++ b/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) } diff --git a/src/assets/styles/components/badge-grid.css b/src/assets/styles/components/badge-grid.css index 2dccaebd..1305828e 100644 --- a/src/assets/styles/components/badge-grid.css +++ b/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); } & > * { diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index a3a8af86..f2974229 100644 --- a/src/assets/styles/components/forms.css +++ b/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; } diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 01d46e8c..1ca31f09 100644 --- a/src/assets/styles/components/media-grid.css +++ b/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 { diff --git a/src/data/books.js b/src/data/books.js index fdf8345b..e4128157 100644 --- a/src/data/books.js +++ b/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']) + } } \ No newline at end of file diff --git a/src/includes/base.liquid b/src/includes/base.liquid index 78fad6ed..fae0b645 100644 --- a/src/includes/base.liquid +++ b/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 @@ - - + {%- if isProduction -%} + + + {%- endif -%}