fix: increase recommended logo size, improve javascript, replace Twit…

…ter logo (#474) * fix: increase recommended logo size and replace Twitter logo with X * fix: increase recommended logo size * fix: update CSS and javascript * fix: JS linting * fix: handle invalid anchors and improve form validation * chore: rebuild assets * build: npm build * fix: replace Twitter link in footer with LinkedIn * feat: add new social media options in the Customizer for LinkedIn, YouTube, and Bluesky * feat: add ability to change header background color to customizer, use SVG for YouTube icon, remove unneeded assets * fix: linting * build: npm build * chore: update Aetna * build: npm build * chore: fix standards * fix: adjust margin on homepage * build: npm build --------- Co-authored-by: GitHub Actions <[email protected]>
pressbooks · Dec 19, 2024 · 85cffed · 85cffed
1 parent fc9663f
commit 85cffed
Show file tree

Hide file tree

Showing 19 changed files with 169 additions and 87 deletions.
diff --git a/assets/images/banner.jpg b/assets/images/banner.jpg
diff --git a/assets/images/left-arrow.svg b/assets/images/left-arrow.svg
diff --git a/assets/images/right-arrow.svg b/assets/images/right-arrow.svg
diff --git a/assets/images/yt_icon_mono_dark.png b/assets/images/yt_icon_mono_dark.png
diff --git a/assets/scripts/routes/common.js b/assets/scripts/routes/common.js
@@ -1,9 +1,7 @@
 export default {
 	init() {
 		// JavaScript to be fired on all pages
-		// JavaScript to be fired on all pages
-		document.body.classList.remove( 'no-js' );
-		document.body.classList.add( 'js' );
+		document.body.classList.replace( 'no-js', 'js' );
 
 		jQuery( $ => {
 			$( document ).ready( function () {
@@ -14,38 +12,42 @@ export default {
 					sections[i].className += ' focusable';
 				}
 
-				// If there is a '#' in the URL (someone linking directly to a page with an anchor), go directly to that area and focus is
-				// Thanks to WebAIM.org for this idea
-				if ( document.location.hash && document.location.hash !== '#' ) {
-					let anchorUponArrival = document.location.hash;
-					setTimeout( function () {
-						$( anchorUponArrival ).scrollTo( { duration: 1500 } );
-						$( anchorUponArrival ).trigger( 'focus' );
-					}, 100 );
+				// Scroll to anchor if there's a hash in the URL & anchor exists on the page
+				if (document.location.hash && document.location.hash !== '#') {
+					const anchorUponArrival = document.location.hash;
+					setTimeout(() => {
+						const $anchorElement = $(anchorUponArrival);
+						if ($anchorElement.length) {
+							$anchorElement.scrollTo({ duration: 1500 });
+							$anchorElement.trigger('focus');
+						} else {
+							console.warn(`Anchor element "${anchorUponArrival}" not found in the document.`);
+						}
+					}, 100);
 				}
 			} );
 			$( '.js-header-nav-toggle' ).on( 'click', event => {
 				event.preventDefault();
 				$( '.header__nav' ).toggleClass( 'header__nav--active' );
 			} );
 		} );
-		// Props to Dave Rupert: https://daverupert.com/2017/11/happier-html5-forms/
-		const inputs = document.querySelectorAll( 'input, textarea' );
 
+		// Check form field validity when focus changes
+		const inputs = document.querySelectorAll( 'input, textarea' );
 		inputs.forEach( input => {
-			input.addEventListener(
-				'invalid',
-				event => {
-					input.classList.add( 'error' );
-				},
-				false
-			);
+			input.addEventListener('invalid', () => {
+					input.classList.add('error');
+				});
 			input.addEventListener( 'focus', function () {
 				input.classList.remove( 'error' );
 			} );
-			input.addEventListener( 'blur', function () {
-				input.checkValidity();
-			} );
+			input.addEventListener('blur', () => {
+				if (!input.checkValidity()) {
+					input.classList.add('error');
+				} else {
+					input.classList.remove('error');
+				}
+			});
 		} );
 	},
 	finalize() {

diff --git a/assets/styles/layouts/_header.scss b/assets/styles/layouts/_header.scss
@@ -25,14 +25,14 @@
 }
 
 .home #content{
-  margin-top: -15rem;
+  margin-top: -13rem;
   background: transparent;
 
   &.custom-homepage {
     margin-top: 0;
   }
   @media #{$breakpoint-large} {
-    margin-top: -55rem;
+    margin-top: -53rem;
 
     &.custom-homepage {
       margin-top: 0;
@@ -54,15 +54,15 @@
   .entry-title {
     font-family: $font-family-sans-serif;
     font-size: 1.875rem;
+    margin-top: 1.5em;
+    margin-bottom: 0;
+    text-align: center;
+    max-width: 100%;
+
     @media #{$breakpoint-large} {
       font-size: 3.25rem;
       line-height: 1.25em;
-      margin-top: 1.5em;
     }
-
-    margin-bottom: 0;
-    text-align: center;
-    max-width: 100%;
   }
 
   .entry-description {

diff --git a/dist/images/banner.jpg b/dist/images/banner.jpg
diff --git a/dist/images/left-arrow.svg b/dist/images/left-arrow.svg
diff --git a/dist/images/right-arrow.svg b/dist/images/right-arrow.svg
diff --git a/dist/images/yt_icon_mono_dark.png b/dist/images/yt_icon_mono_dark.png
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,19 +1,15 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=3d34a35fb0f0f504be08e54784ab85be",
+    "/scripts/aldine.js": "/scripts/aldine.js?id=0adb6d4dd590ed78d063a0478a4e664b",
     "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=33370b66c7af12320fc0e1250f6be399",
-    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=2bc3bfa90831ab142ee9ebeb14ddab3c",
+    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=9ec61d635ee0b72460d236f714b3a779",
     "/scripts/customizer.js": "/scripts/customizer.js?id=14dca3944228dd789c27c772d55bf471",
     "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=c31594589675d7c5662aaddcf7a9669a",
     "/scripts/page-section.js": "/scripts/page-section.js?id=19d5c30146ea1a763bcf2bd733a75e77",
     "/styles/editor.css": "/styles/editor.css?id=3fd7086e0f2bcacabc5152bf57ca90ca",
-    "/styles/aldine.css": "/styles/aldine.css?id=c3f302b09bb208459883dfce19146665",
+    "/styles/aldine.css": "/styles/aldine.css?id=4262ad31437620dfdc11822640de10ba",
     "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff?id=2a7aae81673f4707bbe78c8f12b72b64",
-    "/images/banner.jpg": "/images/banner.jpg?id=04a813e0b4f94ddfef1951557166e417",
     "/images/catalog-header.jpg": "/images/catalog-header.jpg?id=223b9f7a23985f2a72df72e4e4a2ffdc",
     "/images/header.jpg": "/images/header.jpg?id=c6712212b6aa749cf1cf1f077c679f9f",
-    "/images/left-arrow.svg": "/images/left-arrow.svg?id=91d479e2d001857a3ee46691c0187854",
     "/images/logo.svg": "/images/logo.svg?id=d71cb98d33ef823ffd27b15ae07e723a",
-    "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a74591e1fc94a4",
-    "/images/right-arrow.svg": "/images/right-arrow.svg?id=ee2d7230318ea54ae20bd9d5fd96efd6",
-    "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png?id=ee68b73409979a92944025ae95a18011"
+    "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a74591e1fc94a4"
 }
diff --git a/dist/scripts/aldine.js b/dist/scripts/aldine.js
diff --git a/dist/scripts/catalog-admin.js b/dist/scripts/catalog-admin.js
diff --git a/dist/styles/aldine.css b/dist/styles/aldine.css
diff --git a/footer.php b/footer.php
@@ -13,6 +13,9 @@
 
 <?php
 
+$network_linkedin = get_option( 'pb_network_linkedin' );
+$network_youtube = get_option( 'pb_network_youtube' );
+$network_bluesky = get_option( 'pb_network_bluesky' );
 $network_facebook = get_option( 'pb_network_facebook' );
 $network_twitter = get_option( 'pb_network_twitter' );
 $network_instagram = get_option( 'pb_network_instagram' );
@@ -52,10 +55,40 @@
 					<?php dynamic_sidebar( 'network-footer-block-1' ); ?>
 				</div>
 			<?php } ?>
-			<?php if ( is_active_sidebar( 'network-footer-block-2' ) || ! empty( $network_facebook ) || ! empty( $network_twitter ) || ! empty( $network_instagram ) ) { ?>
+			<?php if ( is_active_sidebar( 'network-footer-block-2' ) || ! empty( $network_linkedin ) || ! empty( $network_youtube ) || ! empty( $network_bluesky ) || ! empty( $network_facebook ) || ! empty( $network_twitter ) || ! empty( $network_instagram ) ) { ?>
 				<div class="footer__network__block footer__network__block--2">
 					<?php dynamic_sidebar( 'network-footer-block-2' ); ?>
 					<div class="social-media">
+						<?php if ( ! empty( $network_linkedin ) ) { ?>
+							<?php /* translators: %s network name */ ?>
+							<a class="linkedin" href="<?php echo $network_linkedin; ?>" title="<?php printf( __( '%s on LinkedIn', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
+								<svg class="icon--svg">
+									<use href="#linkedin" />
+								</svg>
+								<?php /* translators: %s network name */ ?>
+								<span class="screen-reader-text"><?php printf( __( '%s on LinkedIn', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
+							</a>
+						<?php } ?>
+						<?php if ( ! empty( $network_youtube ) ) { ?>
+							<?php /* translators: %s network name */ ?>
+							<a class="linkedin" href="<?php echo $network_youtube; ?>" title="<?php printf( __( '%s on YouTube', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
+								<svg class="icon--svg">
+									<use href="#youtube" />
+								</svg>
+								<?php /* translators: %s network name */ ?>
+								<span class="screen-reader-text"><?php printf( __( '%s on YouTube', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
+							</a>
+						<?php } ?>
+						<?php if ( ! empty( $network_bluesky ) ) { ?>
+							<?php /* translators: %s network name */ ?>
+							<a class="linkedin" href="<?php echo $network_bluesky; ?>" title="<?php printf( __( '%s on Bluesky', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
+								<svg class="icon--svg">
+									<use href="#bluesky" />
+								</svg>
+								<?php /* translators: %s network name */ ?>
+								<span class="screen-reader-text"><?php printf( __( '%s on Bluesky', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
+							</a>
+						<?php } ?>
 						<?php if ( ! empty( $network_facebook ) ) { ?>
 							<?php /* translators: %s network name */ ?>
 							<a class="facebook" href="<?php echo $network_facebook; ?>" title="<?php printf( __( '%s on Facebook', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
@@ -68,12 +101,12 @@
 						<?php } ?>
 						<?php if ( ! empty( $network_twitter ) ) { ?>
 							<?php /* translators: %s network name */ ?>
-							<a class="twitter" href="<?php echo $network_twitter; ?>" title="<?php printf( __( '%s on Twitter', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
+							<a class="twitter" href="<?php echo $network_twitter; ?>" title="<?php printf( __( '%s on X', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?>">
 								<svg class="icon--svg">
 									<use href="#twitter" />
 								</svg>
 								<?php /* translators: %s network name */ ?>
-								<span class="screen-reader-text"><?php printf( __( '%s on Twitter', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
+								<span class="screen-reader-text"><?php printf( __( '%s on X', 'pressbooks-aldine' ), get_bloginfo( 'name', 'display' ) ); ?></span>
 							</a>
 						<?php } ?>
 						<?php if ( ! empty( $network_instagram ) ) { ?>
@@ -112,15 +145,17 @@
 				</ul>
 			</div>
 			<div class="footer__pressbooks__social">
-				<a class="facebook" href="https://www.youtube.com/user/pressbooks" title="<?php _e( 'Pressbooks on YouTube', 'pressbooks-aldine' ); ?>">
-					<img class="youtube-link" src="<?php bloginfo( 'template_directory' ); ?>/assets/images/yt_icon_mono_dark.png" alt="YouTube">
+				<a class="youtube" href="https://www.youtube.com/user/pressbooks" title="<?php _e( 'Pressbooks on YouTube', 'pressbooks-aldine' ); ?>">
+					<svg class="icon--svg">
+						<use href="#youtube" />
+					</svg>
 					<span class="screen-reader-text"><?php _e( 'Pressbooks on YouTube', 'pressbooks-aldine' ); ?></span>
 				</a>
-				<a class="twitter" href="https://twitter.com/intent/follow?screen_name=pressbooks" title="<?php _e( 'Pressbooks on Twitter', 'pressbooks-aldine' ); ?>">
+				<a class="linkedin" href="https://www.linkedin.com/company/pressbooks/?originalSubdomain=ca" title="<?php _e( 'Pressbooks on LinkedIn', 'pressbooks-aldine' ); ?>">
 					<svg class="icon--svg">
-						<use href="#twitter" />
+						<use href="#linkedin" />
 					</svg>
-				<span class="screen-reader-text"><?php _e( 'Pressbooks on Twitter', 'pressbooks-aldine' ); ?></span></a>
+					<span class="screen-reader-text"><?php _e( 'Pressbooks on LinkedIn', 'pressbooks-aldine' ); ?></span></a>
 			</div>
 		</section>
 	</div><!-- .container -->