feat: new frontend catalog (#369)

assets/scripts/featured-books.js

@@ -0,0 +1,23 @@
+/**
+ * Disallow duplicate books in the featured books list.
+ */
+window.addEventListener( 'load', function () {
+	const selects = document.querySelectorAll( '#sub-accordion-section-pb_front_page_catalog select' );
+	/**
+	 *
+	 * @param current
+	 * @param value
+	 */
+	let checkOtherValues = function ( current, value ) {
+		selects.forEach( function ( select ) {
+			if ( current.id !== select.id && select.value === value ) {
+				select.selectedIndex = -1;
+			}
+		} );
+	};
+	selects.forEach( function ( select ) {
+		select.addEventListener( 'change', function ( event ) {
+			checkOtherValues( event.target, event.target.value );
+		} );
+	} );
+} );

assets/styles/aldine.scss

@@ -11,6 +11,7 @@
 /** Import theme styles */
 @import "common/global";
 @import "components/book";
+@import "components/featured_book";
 @import "components/forms";
 @import "layouts/footer";
 @import "layouts/header";

assets/styles/components/_featured_book.scss

@@ -0,0 +1,31 @@
+.featured_book {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  max-width: 18rem;
+  height: 25rem;
+  border: solid 1px var(--accent);
+  margin: 0 0 2rem;
+
+  &__cover {
+    width: 100%;
+    height: 80%;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+
+  a {
+    margin: 0;
+    text-decoration: none;
+    text-align: center;
+    hyphens: auto;
+  }
+
+  &__title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 500;
+  }
+}

assets/styles/layouts/_page-catalog.scss

@@ -128,7 +128,7 @@
     margin: 2rem 0 1rem 1rem;
   }
 
-  .book {
+  .book, .featured_book {
     height: 14.375rem;
     width: calc(50% - 1rem);
     margin: 0 1rem 1rem 0;

assets/styles/layouts/_page-home.scss

@@ -79,7 +79,7 @@
       flex-direction: row;
       justify-content: center;
 
-      .book {
+      .book, .featured_book {
         margin-right: 1rem;
         margin-left: 1rem;
       }

dist/mix-manifest.json

@@ -1,19 +1,19 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=3d34a35fb0f0f504be08e54784ab85be",
+    "/scripts/aldine.js": "/scripts/aldine.js",
-    "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=33370b66c7af12320fc0e1250f6be399",
+    "/scripts/call-to-action.js": "/scripts/call-to-action.js",
-    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=2bc3bfa90831ab142ee9ebeb14ddab3c",
+    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js",
-    "/scripts/customizer.js": "/scripts/customizer.js?id=14dca3944228dd789c27c772d55bf471",
+    "/scripts/customizer.js": "/scripts/customizer.js",
-    "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=c31594589675d7c5662aaddcf7a9669a",
+    "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js",
-    "/scripts/page-section.js": "/scripts/page-section.js?id=19d5c30146ea1a763bcf2bd733a75e77",
+    "/scripts/page-section.js": "/scripts/page-section.js",
-    "/styles/editor.css": "/styles/editor.css?id=3fd7086e0f2bcacabc5152bf57ca90ca",
+    "/styles/editor.css": "/styles/editor.css",
-    "/styles/aldine.css": "/styles/aldine.css?id=9c16e4ea9817fe0bd35a6b7222cd5736",
+    "/styles/aldine.css": "/styles/aldine.css",
-    "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff?id=2a7aae81673f4707bbe78c8f12b72b64",
+    "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff",
-    "/images/banner.jpg": "/images/banner.jpg?id=04a813e0b4f94ddfef1951557166e417",
+    "/images/banner.jpg": "/images/banner.jpg",
-    "/images/catalog-header.jpg": "/images/catalog-header.jpg?id=223b9f7a23985f2a72df72e4e4a2ffdc",
+    "/images/catalog-header.jpg": "/images/catalog-header.jpg",
-    "/images/header.jpg": "/images/header.jpg?id=c6712212b6aa749cf1cf1f077c679f9f",
+    "/images/header.jpg": "/images/header.jpg",
-    "/images/left-arrow.svg": "/images/left-arrow.svg?id=91d479e2d001857a3ee46691c0187854",
+    "/images/left-arrow.svg": "/images/left-arrow.svg",
-    "/images/logo.svg": "/images/logo.svg?id=d71cb98d33ef823ffd27b15ae07e723a",
+    "/images/logo.svg": "/images/logo.svg",
-    "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a74591e1fc94a4",
+    "/images/pb.svg": "/images/pb.svg",
-    "/images/right-arrow.svg": "/images/right-arrow.svg?id=ee2d7230318ea54ae20bd9d5fd96efd6",
+    "/images/right-arrow.svg": "/images/right-arrow.svg",
-    "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png?id=ee68b73409979a92944025ae95a18011"
+    "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png"
 }

dist/scripts/customizer-toggle.js

@@ -1 +1,32 @@
-document.addEventListener("DOMContentLoaded",(function(){var t=document.getElementById("_customize-input-pb_network_contact_form"),e=document.getElementById("customize-control-pb_network_contact_email"),s=document.getElementById("customize-control-pb_network_contact_link"),n=document.getElementById("customize-control-pb_network_contact_form_title");function c(){!1===t.checked?(e.classList.add("hidden"),e.style.cssText=null,n.classList.add("hidden"),n.style.cssText=null,s.classList.remove("hidden"),s.style.cssText="display: list-item;"):(e.classList.remove("hidden"),e.style.cssText="display: list-item;",n.classList.remove("hidden"),n.style.cssText="display: list-item;",s.classList.add("hidden"),s.style.cssText=null)}t.addEventListener("click",c),c()}));
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (function() { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./assets/scripts/customizer-toggle.js":
+/*!*********************************************!*\
+  !*** ./assets/scripts/customizer-toggle.js ***!
+  \*********************************************/
+/***/ (function() {
+
+eval("document.addEventListener('DOMContentLoaded', function () {\n  var checkbox = document.getElementById('_customize-input-pb_network_contact_form');\n  var email = document.getElementById('customize-control-pb_network_contact_email');\n  var link = document.getElementById('customize-control-pb_network_contact_link');\n  var title = document.getElementById('customize-control-pb_network_contact_form_title');\n  checkbox.addEventListener('click', toggleReadOnly);\n\n  /**\n   *\n   */\n  function toggleReadOnly() {\n    if (checkbox.checked === false) {\n      email.classList.add('hidden');\n      email.style.cssText = null;\n      title.classList.add('hidden');\n      title.style.cssText = null;\n      link.classList.remove('hidden');\n      link.style.cssText = 'display: list-item;';\n    } else {\n      email.classList.remove('hidden');\n      email.style.cssText = 'display: list-item;';\n      title.classList.remove('hidden');\n      title.style.cssText = 'display: list-item;';\n      link.classList.add('hidden');\n      link.style.cssText = null;\n    }\n  }\n  toggleReadOnly();\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJkb2N1bWVudCIsImFkZEV2ZW50TGlzdGVuZXIiLCJjaGVja2JveCIsImdldEVsZW1lbnRCeUlkIiwiZW1haWwiLCJsaW5rIiwidGl0bGUiLCJ0b2dnbGVSZWFkT25seSIsImNoZWNrZWQiLCJjbGFzc0xpc3QiLCJhZGQiLCJzdHlsZSIsImNzc1RleHQiLCJyZW1vdmUiXSwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQHByZXNzYm9va3MvcHJlc3Nib29rcy1hbGRpbmUvLi9hc3NldHMvc2NyaXB0cy9jdXN0b21pemVyLXRvZ2dsZS5qcz8yMTdlIl0sInNvdXJjZXNDb250ZW50IjpbImRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoICdET01Db250ZW50TG9hZGVkJywgZnVuY3Rpb24gKCkge1xuXHRsZXQgY2hlY2tib3ggPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCggJ19jdXN0b21pemUtaW5wdXQtcGJfbmV0d29ya19jb250YWN0X2Zvcm0nICk7XG5cdGxldCBlbWFpbCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCAnY3VzdG9taXplLWNvbnRyb2wtcGJfbmV0d29ya19jb250YWN0X2VtYWlsJyApO1xuXHRsZXQgbGluayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCAnY3VzdG9taXplLWNvbnRyb2wtcGJfbmV0d29ya19jb250YWN0X2xpbmsnICk7XG5cdGxldCB0aXRsZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCAnY3VzdG9taXplLWNvbnRyb2wtcGJfbmV0d29ya19jb250YWN0X2Zvcm1fdGl0bGUnICk7XG5cblx0Y2hlY2tib3guYWRkRXZlbnRMaXN0ZW5lciggJ2NsaWNrJywgdG9nZ2xlUmVhZE9ubHkgKTtcblxuXHQvKipcblx0ICpcblx0ICovXG5cdGZ1bmN0aW9uIHRvZ2dsZVJlYWRPbmx5KCkge1xuXHRcdGlmICggY2hlY2tib3guY2hlY2tlZCA9PT0gZmFsc2UgKSB7XG5cdFx0XHRlbWFpbC5jbGFzc0xpc3QuYWRkKCAnaGlkZGVuJyApO1xuXHRcdFx0ZW1haWwuc3R5bGUuY3NzVGV4dCA9IG51bGw7XG5cblx0XHRcdHRpdGxlLmNsYXNzTGlzdC5hZGQoICdoaWRkZW4nICk7XG5cdFx0XHR0aXRsZS5zdHlsZS5jc3NUZXh0ID0gbnVsbDtcblxuXHRcdFx0bGluay5jbGFzc0xpc3QucmVtb3ZlKCAnaGlkZGVuJyApO1xuXHRcdFx0bGluay5zdHlsZS5jc3NUZXh0ID0gJ2Rpc3BsYXk6IGxpc3QtaXRlbTsnO1xuXHRcdH0gZWxzZSB7XG5cdFx0XHRlbWFpbC5jbGFzc0xpc3QucmVtb3ZlKCAnaGlkZGVuJyApO1xuXHRcdFx0ZW1haWwuc3R5bGUuY3NzVGV4dCA9ICdkaXNwbGF5OiBsaXN0LWl0ZW07JztcblxuXHRcdFx0dGl0bGUuY2xhc3NMaXN0LnJlbW92ZSggJ2hpZGRlbicgKTtcblx0XHRcdHRpdGxlLnN0eWxlLmNzc1RleHQgPSAnZGlzcGxheTogbGlzdC1pdGVtOyc7XG5cblx0XHRcdGxpbmsuY2xhc3NMaXN0LmFkZCggJ2hpZGRlbicgKTtcblx0XHRcdGxpbmsuc3R5bGUuY3NzVGV4dCA9IG51bGw7XG5cdFx0fVxuXHR9XG5cblx0dG9nZ2xlUmVhZE9ubHkoKTtcblxufSApO1xuIl0sIm1hcHBpbmdzIjoiQUFBQUEsUUFBUSxDQUFDQyxnQkFBZ0IsQ0FBRSxrQkFBa0IsRUFBRSxZQUFZO0VBQzFELElBQUlDLFFBQVEsR0FBR0YsUUFBUSxDQUFDRyxjQUFjLENBQUUsMENBQTBDLENBQUU7RUFDcEYsSUFBSUMsS0FBSyxHQUFHSixRQUFRLENBQUNHLGNBQWMsQ0FBRSw0Q0FBNEMsQ0FBRTtFQUNuRixJQUFJRSxJQUFJLEdBQUdMLFFBQVEsQ0FBQ0csY0FBYyxDQUFFLDJDQUEyQyxDQUFFO0VBQ2pGLElBQUlHLEtBQUssR0FBR04sUUFBUSxDQUFDRyxjQUFjLENBQUUsaURBQWlELENBQUU7RUFFeEZELFFBQVEsQ0FBQ0QsZ0JBQWdCLENBQUUsT0FBTyxFQUFFTSxjQUFjLENBQUU7O0VBRXBEO0FBQ0Q7QUFDQTtFQUNDLFNBQVNBLGNBQWMsR0FBRztJQUN6QixJQUFLTCxRQUFRLENBQUNNLE9BQU8sS0FBSyxLQUFLLEVBQUc7TUFDakNKLEtBQUssQ0FBQ0ssU0FBUyxDQUFDQyxHQUFHLENBQUUsUUFBUSxDQUFFO01BQy9CTixLQUFLLENBQUNPLEtBQUssQ0FBQ0MsT0FBTyxHQUFHLElBQUk7TUFFMUJOLEtBQUssQ0FBQ0csU0FBUyxDQUFDQyxHQUFHLENBQUUsUUFBUSxDQUFFO01BQy9CSixLQUFLLENBQUNLLEtBQUssQ0FBQ0MsT0FBTyxHQUFHLElBQUk7TUFFMUJQLElBQUksQ0FBQ0ksU0FBUyxDQUFDSSxNQUFNLENBQUUsUUFBUSxDQUFFO01BQ2pDUixJQUFJLENBQUNNLEtBQUssQ0FBQ0MsT0FBTyxHQUFHLHFCQUFxQjtJQUMzQyxDQUFDLE1BQU07TUFDTlIsS0FBSyxDQUFDSyxTQUFTLENBQUNJLE1BQU0sQ0FBRSxRQUFRLENBQUU7TUFDbENULEtBQUssQ0FBQ08sS0FBSyxDQUFDQyxPQUFPLEdBQUcscUJBQXFCO01BRTNDTixLQUFLLENBQUNHLFNBQVMsQ0FBQ0ksTUFBTSxDQUFFLFFBQVEsQ0FBRTtNQUNsQ1AsS0FBSyxDQUFDSyxLQUFLLENBQUNDLE9BQU8sR0FBRyxxQkFBcUI7TUFFM0NQLElBQUksQ0FBQ0ksU0FBUyxDQUFDQyxHQUFHLENBQUUsUUFBUSxDQUFFO01BQzlCTCxJQUFJLENBQUNNLEtBQUssQ0FBQ0MsT0FBTyxHQUFHLElBQUk7SUFDMUI7RUFDRDtFQUVBTCxjQUFjLEVBQUU7QUFFakIsQ0FBQyxDQUFFIiwiZmlsZSI6Ii4vYXNzZXRzL3NjcmlwdHMvY3VzdG9taXplci10b2dnbGUuanMuanMiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./assets/scripts/customizer-toggle.js\n");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval-source-map devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./assets/scripts/customizer-toggle.js"]();
+/******/ 	
+/******/ })()
+;

dist/scripts/customizer.js

@@ -1 +1,32 @@
-wp.customize("blogname",(function(t){t.bind((function(t){return document.querySelector(".home .entry-title").textContent=t}))})),wp.customize("blogdescription",(function(t){t.bind((function(t){return document.querySelector(".home .entry-description").textContent=t}))}));
+/*
+ * ATTENTION: An "eval-source-map" devtool has been used.
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (function() { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./assets/scripts/customizer.js":
+/*!**************************************!*\
+  !*** ./assets/scripts/customizer.js ***!
+  \**************************************/
+/***/ (function() {
+
+eval("wp.customize('blogname', function (value) {\n  value.bind(function (to) {\n    return document.querySelector('.home .entry-title').textContent = to;\n  });\n});\nwp.customize('blogdescription', function (value) {\n  value.bind(function (to) {\n    return document.querySelector('.home .entry-description').textContent = to;\n  });\n});//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ3cCIsImN1c3RvbWl6ZSIsInZhbHVlIiwiYmluZCIsInRvIiwiZG9jdW1lbnQiLCJxdWVyeVNlbGVjdG9yIiwidGV4dENvbnRlbnQiXSwic291cmNlcyI6WyJ3ZWJwYWNrOi8vQHByZXNzYm9va3MvcHJlc3Nib29rcy1hbGRpbmUvLi9hc3NldHMvc2NyaXB0cy9jdXN0b21pemVyLmpzPzE2NzciXSwic291cmNlc0NvbnRlbnQiOlsid3AuY3VzdG9taXplKCAnYmxvZ25hbWUnLCB2YWx1ZSA9PiB7XG5cdHZhbHVlLmJpbmQoIHRvID0+IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoICcuaG9tZSAuZW50cnktdGl0bGUnICkudGV4dENvbnRlbnQgPSB0byApO1xufSApO1xuXG53cC5jdXN0b21pemUoICdibG9nZGVzY3JpcHRpb24nLCB2YWx1ZSA9PiB7XG5cdHZhbHVlLmJpbmQoIHRvID0+IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoICcuaG9tZSAuZW50cnktZGVzY3JpcHRpb24nICkudGV4dENvbnRlbnQgPSB0byApO1xufSApO1xuIl0sIm1hcHBpbmdzIjoiQUFBQUEsRUFBRSxDQUFDQyxTQUFTLENBQUUsVUFBVSxFQUFFLFVBQUFDLEtBQUssRUFBSTtFQUNsQ0EsS0FBSyxDQUFDQyxJQUFJLENBQUUsVUFBQUMsRUFBRTtJQUFBLE9BQUlDLFFBQVEsQ0FBQ0MsYUFBYSxDQUFFLG9CQUFvQixDQUFFLENBQUNDLFdBQVcsR0FBR0gsRUFBRTtFQUFBLEVBQUU7QUFDcEYsQ0FBQyxDQUFFO0FBRUhKLEVBQUUsQ0FBQ0MsU0FBUyxDQUFFLGlCQUFpQixFQUFFLFVBQUFDLEtBQUssRUFBSTtFQUN6Q0EsS0FBSyxDQUFDQyxJQUFJLENBQUUsVUFBQUMsRUFBRTtJQUFBLE9BQUlDLFFBQVEsQ0FBQ0MsYUFBYSxDQUFFLDBCQUEwQixDQUFFLENBQUNDLFdBQVcsR0FBR0gsRUFBRTtFQUFBLEVBQUU7QUFDMUYsQ0FBQyxDQUFFIiwiZmlsZSI6Ii4vYXNzZXRzL3NjcmlwdHMvY3VzdG9taXplci5qcy5qcyIsInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./assets/scripts/customizer.js\n");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval-source-map devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./assets/scripts/customizer.js"]();
+/******/ 	
+/******/ })()
+;

functions.php

@@ -64,6 +64,7 @@ add_action( 'updated_option', '\Aldine\Actions\add_color_variants', 10, 3 );
 add_action( 'customize_register', '\Aldine\Customizer\customize_register' );
 add_action( 'customize_preview_init', '\Aldine\Customizer\customize_preview_js' );
 add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_color_contrast_validator' );
+add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\featured_books_scripts' );
 add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_contact_form_tweaks' );
 add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_pb_a11y_in_customizer' );
 

inc/customizer/namespace.php

@@ -7,8 +7,11 @@
 
 namespace Aldine\Customizer;
 
+use function Aldine\Helpers\get_catalog_options;
 use PressbooksMix\Assets;
 
+const MAX_FEATURED_BOOKS = 4;
+
 /**
  * Add postMessage support for site title and description for the Theme Customizer.
  *
@@ -177,14 +180,16 @@ function customize_register( \WP_Customize_Manager $wp_customize ) {
 		$wp_customize->add_setting(
 			'pb_front_page_catalog', [
 				'type' => 'option',
-			]
+			],
 		);
+
 		$wp_customize->add_control(
 			'pb_front_page_catalog', [
 				'label' => __( 'Show Front Page Catalog', 'pressbooks-aldine' ),
 				'section'  => 'pb_front_page_catalog',
 				'settings' => 'pb_front_page_catalog',
 				'type' => 'checkbox',
+				'default' => '0',
 			]
 		);
 		$wp_customize->add_setting(
@@ -201,6 +206,27 @@ function customize_register( \WP_Customize_Manager $wp_customize ) {
 				'settings' => 'pb_front_page_catalog_title',
 			]
 		);
+
+		$options = get_catalog_options();
+		$books = collect( $options['books'] )->pluck( 'title', 'id' )->toArray();
+		$books = [ '' => __( 'Select a book', 'pressbooks-aldine' ) ] + $books;
+
+		foreach ( range( 1, MAX_FEATURED_BOOKS ) as $i ) {
+			$wp_customize->add_setting(
+				"pb_front_page_catalog_book_{$i}", [
+					'type' => 'option',
+				]
+			);
+			$wp_customize->add_control(
+				"pb_front_page_catalog_book_{$i}", [
+					'label' => __( 'Featured book', 'pressbooks-aldine' ) . " {$i}",
+					'section'  => 'pb_front_page_catalog',
+					'settings' => "pb_front_page_catalog_book_{$i}",
+					'type' => 'select',
+					'choices' => $books,
+				]
+			);
+		}
 	}
 
 	$wp_customize->add_section(
@@ -274,6 +300,16 @@ function customize_preview_js() {
 	wp_enqueue_script( 'aldine/customizer', $assets->getPath( 'scripts/customizer.js' ), [ 'customize-preview' ], false, null );
 }
 
+/**
+ * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
+ */
+function featured_books_scripts() {
+	$assets = new Assets( 'pressbooks-aldine', 'theme' );
+	$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
+
+	wp_enqueue_script( 'aldine/featured-books', $assets->getPath( 'scripts/featured-books.js' ), [], false, null );
+}
+
 /**
  * Load color contrast validation tool
  *

inc/helpers/namespace.php

@@ -7,14 +7,129 @@
 
 namespace Aldine\Helpers;
 
+use const Aldine\Customizer\MAX_FEATURED_BOOKS;
+use function Pressbooks\Metadata\get_institutions_flattened;
 use function \Pressbooks\Metadata\book_information_to_schema;
 use function \Pressbooks\Metadata\is_bisac;
 use function \Pressbooks\Utility\str_starts_with;
 use Pressbooks\DataCollector\Book as BookDataCollector;
+use Pressbooks\Licensing;
+
+/**
+ * Get all the books in the catalog
+ *
+ * @return array[]
+ */
+function get_catalog_options(): array {
+
+	$dc = BookDataCollector::init();
+	/**
+	 * Filter the WP_Site_Query args for the catalog display.
+	 *
+	 * @since 1.0.0
+	 */
+	$args = apply_filters(
+		'pb_aldine_catalog_query_args',
+		/**
+		 * Deprecation notice
+		 *
+		 * @deprecated 1.0.0
+		 *
+		 * @see Pressbooks Publisher
+		 */
+		apply_filters(
+			'pb_publisher_catalog_query_args',
+			[
+				'number' => 1000000,
+				'meta_key' => $dc::IN_CATALOG, // @codingStandardsIgnoreLine
+				'meta_value' => 1, // @codingStandardsIgnoreLine
+				'public' => 1,
+				'archived' => 0,
+				'spam' => 0,
+				'deleted' => 0,
+				'network_id' => get_network()->site_id,
+			]
+		)
+	);
+	return get_catalog_data( $args );
+}
+
+/**
+ * Get featured books
+ *
+ * @return array
+ */
+function get_featured_books(): array {
+
+	$featured_books = [];
+
+	foreach ( range( 1, MAX_FEATURED_BOOKS ) as $book ) {
+		$book = get_option( 'pb_front_page_catalog_book_' . $book );
+		if ( $book ) {
+			$featured_books[] = $book;
+		}
+	}
+
+	if ( empty( $featured_books ) ) {
+		return [];
+	}
+
+	$args = [
+		'site__in'      => $featured_books,
+		'sort_by_featured' => true,
+	];
+
+	return get_catalog_data( $args );
+}
 
 /**
  * Get catalog data
  *
+ * @param  array $args Query arguments
+ * @return array[]
+ */
+function get_catalog_data( array $args ): array {
+	$dc = BookDataCollector::init();
+	/**
+	 * WordPress site
+	 *
+	 * @var \WP_Site $site
+	 */
+
+	$sites_in_catalog = [];
+	$sites = get_sites( $args );
+	foreach ( $sites as $site ) {
+		$site->pb_title = $dc->get( $site->blog_id, $dc::TITLE );
+		$sites_in_catalog[] = $site;
+	}
+	$books = [];
+	foreach ( $sites_in_catalog as $site ) {
+		$book_information = $dc->get( $site->blog_id, $dc::BOOK_INFORMATION_ARRAY );
+		if ( is_array( $book_information ) && ! empty( $book_information ) ) {
+			$schema = book_information_to_schema( $book_information );
+			$book['title'] = $schema['name'];
+			$book['id'] = $site->blog_id;
+			$book['link'] = get_blogaddress_by_id( $site->blog_id );
+			$book['metadata'] = $schema;
+			$books[] = $book;
+		}
+	}
+	// Sort by featured books.
+	if ( isset( $args['sort_by_featured'] ) ) {
+		usort( $books, function ( $a, $b ) use ( $args ) {
+			return array_search( $a['id'], $args['site__in'], true ) - array_search($b['id'],
+			$args['site__in'], true);
+		} );
+	}
+
+	return [
+		'books' => $books,
+	];
+}
+
+/**
+ * Get paginated catalog data
+ *
  * @param int $page Catalog page
  * @param int $per_page Books per page
  * @param string $orderby Sort order
@@ -23,7 +138,7 @@ use Pressbooks\DataCollector\Book as BookDataCollector;
  *
  * @return array
  */
-function get_catalog_data( $page = 1, $per_page = 10, $orderby = 'title', $license = '', $subject = '' ) {
+function get_paginated_catalog_data( $page = 1, $per_page = 10, $orderby = 'title', $license = '', $subject = '' ) {
 
 	if ( ! defined( 'PB_PLUGIN_VERSION' ) ) {
 		return [
@@ -118,7 +233,7 @@ function get_catalog_data( $page = 1, $per_page = 10, $orderby = 'title', $licen
  */
 function get_catalog_licenses() {
 	if ( defined( 'PB_PLUGIN_VERSION' ) ) {
-		$licenses = ( new \Pressbooks\Licensing() )->getSupportedTypes();
+		$licenses = ( new Licensing() )->getSupportedTypes();
 		foreach ( $licenses as $key => $value ) {
 			$licenses[ $key ] = preg_replace( '/\([^)]+\)/', '', $value['desc'] );
 		}
@@ -136,7 +251,7 @@ function get_catalog_licenses() {
  */
 function get_available_licenses( $catalog_data ) {
 	$licenses = [];
-	$licensing = new \Pressbooks\Licensing();
+	$licensing = new Licensing();
 
 	foreach ( $catalog_data['books'] as $book ) {
 		$license = $licensing->getLicenseFromUrl( $book['metadata']['license']['url'] );
@@ -158,7 +273,7 @@ function get_institutions(): array {
 		return [];
 	}
 
-	return \Pressbooks\Metadata\get_institutions_flattened();
+	return get_institutions_flattened();
 }
 
 /**

page-catalog.php

@@ -17,16 +17,16 @@ if ( has_filter( 'pb_network_catalog' ) ) {
 use function Aldine\Helpers\get_available_institutions;
 use function Aldine\Helpers\get_available_licenses;
 use function Aldine\Helpers\get_available_subjects;
-use function Aldine\Helpers\get_catalog_data;
 use function Aldine\Helpers\get_catalog_licenses;
 use function Aldine\Helpers\get_institutions;
+use function Aldine\Helpers\get_paginated_catalog_data;
 
 $current_page = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
 $orderby = ( get_query_var( 'orderby' ) ) ? get_query_var( 'orderby' ) : 'title';
 $subject = ( get_query_var( 'subject' ) ) ? get_query_var( 'subject' ) : '';
 $license = ( get_query_var( 'license' ) ) ? get_query_var( 'license' ) : '';
 $institution = get_query_var( 'institution' ) ?? '';
-$catalog_data = get_catalog_data( $current_page, 9, $orderby, $license, $subject );
+$catalog_data = get_paginated_catalog_data();
 $previous_page = ( $current_page > 1 ) ? $current_page - 1 : 0;
 $next_page = $current_page + 1;
 $licenses = get_catalog_licenses();

partials/book.php

@@ -18,16 +18,16 @@ $institution_names = array_map( static function ( $item ) {
 }, $book['metadata']['institutions'] ?? [] );
 ?>
 <li class="book"
-<?php
+		<?php
-if ( $date ) {
+		if ( $date ) {
-	?>
+			?>
-	data-date-published="<?php echo $date; ?>"<?php } ?>
+			data-date-published="<?php echo $date; ?>"<?php } ?>
 	data-license="<?php echo ( new \Pressbooks\Licensing() )->getLicenseFromUrl( $book['metadata']['license']['url'] ); ?>"
 	data-institution="<?php echo implode( ',', $institution_codes ); ?>"
-	<?php
+		<?php
-	if ( ! empty( $subject ) ) {
+		if ( ! empty( $subject ) ) {
-		?>
+			?>
-		data-subject="<?php echo $subject ?>"<?php } ?>
+			data-subject="<?php echo $subject ?>"<?php } ?>
 >
 	<p class="book__title">
 		<a href="<?php echo $book['link']; ?>"><?php echo maybe_truncate_string( $book['metadata']['name'] ); ?></a>
@@ -44,14 +44,14 @@ if ( $date ) {
 	*/
 	?>
 	<?php if ( ! empty( $subject ) ) { ?>
-	<p class="book__subject">
+		<p class="book__subject">
-		<a href="<?php echo network_home_url( "/catalog/#$subject" ) ?>"><?php echo \Pressbooks\Metadata\get_subject_from_thema( $book['subject'] ); ?></a>
+			<a href="<?php echo network_home_url( "/catalog/#$subject" ) ?>"><?php echo \Pressbooks\Metadata\get_subject_from_thema( $book['subject'] ); ?></a>
-	</p>
+		</p>
 	<?php } ?>
 	<?php if ( $institution_names ) : ?>
-	<p class="book__institutions">
+		<p class="book__institutions">
-		<?php echo implode( ', ', $institution_names ); ?>
+			<?php echo implode( ', ', $institution_names ); ?>
-	</p>
+		</p>
 	<?php endif; ?>
 	<p class="book__read-more">
 		<a href="<?php echo $book['link']; ?>"><?php _e( 'About this book', 'pressbooks-aldine' ); ?> <svg aria-hidden="true"><use xlink:href="#arrow-right" /></svg></a>

partials/content-front-page.php

@@ -7,19 +7,18 @@
  * @package Aldine
  */
 
-use function Aldine\Helpers\get_catalog_data;
+use function Aldine\Helpers\get_catalog_page;
+use function Aldine\Helpers\get_featured_books;
 use function Aldine\Helpers\has_sections;
 
 $pb_front_page_catalog_title = get_option( 'pb_front_page_catalog_title' );
-$latest_books_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __( 'Our Latest Titles', 'pressbooks-aldine' );
+$latest_books_title = ( ! empty( $pb_front_page_catalog_title ) ) ? $pb_front_page_catalog_title : __('Our Latest Titles',
+'pressbooks-aldine');
 if ( get_option( 'pb_front_page_catalog' ) ) {
-	$page = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;
+	$catalog_data = get_featured_books();
-	$catalog_data = get_catalog_data( $page, 3, 'latest' );
-	$previous_page = ( $page > 1 ) ? $page - 1 : 0;
-	$next_page = $page + 1;
 }
 
-$catalog_page = \Aldine\Helpers\get_catalog_page();
+$catalog_page = get_catalog_page();
 if ( $catalog_page ) {
 	$catalog_permalink = get_permalink( $catalog_page->ID );
 }
@@ -51,29 +50,23 @@ if ( $catalog_page ) {
 		?>
 	</div><!-- .entry-content -->
 </article><!-- #post-<?php the_ID(); ?> -->
-
 <?php if ( get_option( 'pb_front_page_catalog' ) && ! empty( $catalog_data['books'] ) ) : ?>
-<div id="latest-books" class="latest-books">
+	<div id="latest-books" class="latest-books">
-	<h2 id="latest-books-title"><?php echo $latest_books_title; ?></h2>
+		<h2 id="latest-books-title"><?php echo $latest_books_title; ?></h2>
-	<div class="slider" role="region" aria-labelledby="latest-books-title" data-total-pages="<?php echo $catalog_data['pages']; ?>"
+		<div class="books">
-		<?php
+			<?php
-		if ( $next_page <= $catalog_data['pages'] ) :
+			foreach ( $catalog_data['books'] as $book ) :
+				include( locate_template( 'partials/featured-book.php' ) );
+			endforeach;
 			?>
-		data-next-page="<?php echo $next_page; ?>"<?php endif; ?>>
+		</div>
-		<ul class="books">
+		<p class="catalog-link">
-		<?php
+			<a class="call-to-action" href="<?php echo $catalog_permalink ?? ''; ?>">
-		foreach ( $catalog_data['books'] as $book ) :
+													<?php
-			include( locate_template( 'partials/book.php' ) );
+													_e('View Complete Catalog',
-		endforeach;
+													'pressbooks-aldine');
-		?>
+													?>
-		</ul>
+						</a>
-		<?php
+		</p>
-		if ( $previous_page || $next_page ) {
-			include( locate_template( 'partials/paged-navigation.php' ) ); }
-		?>
 	</div>
-	<p class="catalog-link">
-		<a class="call-to-action" href="<?php echo $catalog_permalink ?? ''; ?>"><?php _e( 'View Complete Catalog', 'pressbooks-aldine' ); ?></a>
-	</p>
-</div>
 <?php endif; ?>

partials/content-page-catalog.php

@@ -89,7 +89,7 @@
 	endforeach;
 	?>
 </ul>
-<?php if ( $catalog_data['pages'] > 1 ) : ?>
+<?php if ( isset( $catalog_data['pages'] ) && $catalog_data['pages'] > 1 ) : ?>
 <nav class="catalog-navigation">
 	<?php
 	if ( $previous_page ) :

partials/featured-book.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Template for displaying books in network catalog
+ *
+ * @package Aldine
+ */
+
+use function \Aldine\Helpers\maybe_truncate_string;
+?>
+<div class="featured_book">
+	<div class="featured_book__cover" style="background-image: url('<?php echo $book['metadata']['image']; ?>' );"></div>
+	<p class="featured_book__title">
+		<a href="<?php echo $book['link']; ?>"><?php echo maybe_truncate_string( $book['metadata']['name'] ); ?></a>
+	</p>
+</div>