Merge pull request #41 from OpenSourceOrg/update/blog-import

Update blog archive page
OpenSourceOrg · Jan 18, 2024 · c257c30 · c257c30
2 parents 983aef6 + ca4370d
commit c257c30
Show file tree

Hide file tree

Showing 8 changed files with 277 additions and 40 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/themes/osi/assets/scss/_6_components.content.scss b/themes/osi/assets/scss/_6_components.content.scss
@@ -211,3 +211,94 @@ p, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, address {
 .post--content {
 	margin-bottom: 20px;
 }
+.blog {
+	.content .content-full .content--page {
+		max-width: 1250px;
+	}
+	.post-archive-wrap {
+		width:100%;
+
+		p:last-of-type {
+			margin-bottom: 0;
+		}
+		.wp-block-column h2 {
+			margin-top: 20px;
+		}
+	}
+	.sidebar.content--sidebar {
+		width:100%;
+		font-size: 14px;
+	}
+	article.first-post {
+		.osi-list--image img {
+			width: 100%;
+			margin-top: 40px;
+		}
+		.osi-list--post-content {
+			width: 100%;
+			background-color: #f7f7f7;
+			padding: 32px;
+
+			p:last-of-type {
+				margin-bottom: 0;
+			}
+		}
+	}
+	.entry-meta.post--byline a {
+		color: #767676;
+		font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.217), 16px);
+	}
+	.sidebar .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
+		margin: 0;
+	}
+	.sidebar ol.wp-block-latest-comments {
+		padding: 0;
+	}
+	.sidebar .wp-block-latest-posts__post-title {
+		font-size: 16px;
+	}
+	.special-sep {
+		margin: 100px 0;
+	}
+	.special-sep:after {
+		content: '';
+		left: calc(50% - 80px / 2);
+		width: 80px;
+		content: '';
+		position: absolute;
+		height: 40px;
+		top: -20px;
+		background: #FFFFFF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4yIiBiYXNlUHJvZmlsZT0idGlueSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQoJIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI0OCIgb3ZlcmZsb3c9InZpc2libGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZmlsbD0ibm9uZSIgZD0iTTE0My4zLDE2Ny44YzIyLjEtOC41LDMzLjEtMzMuMiwyNC42LTU1LjNjLTguNS0yMi4xLTMzLjItMzMuMS01NS4zLTI0LjZjLTIyLjEsOC41LTMzLjEsMzMuMi0yNC42LDU1LjMNCgkJYzQuMywxMS4zLDEzLjMsMjAuMywyNC42LDI0LjZMODMuOCwyNDNjLTYzLjUtMjQuNC05NS4zLTk1LjctNzAuOS0xNTkuM3M5NS43LTk1LjMsMTU5LjItNzAuOXM5NS4zLDk1LjcsNzAuOSwxNTkuMw0KCQljLTEyLjUsMzIuNi0zOC4zLDU4LjQtNzAuOSw3MC45TDE0My4zLDE2Ny44Ii8+DQoJPHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTE3Mi4yLDI0Ny40Yy0wLjYsMC0xLjItMC4xLTEuOC0wLjRjLTEuMS0wLjUtMS45LTEuNC0yLjMtMi40bC0yOC44LTc1LjFjLTAuOS0yLjMsMC4zLTQuOCwyLjUtNS43DQoJCWM5LjYtMy43LDE3LjEtMTAuOSwyMS4zLTIwLjJjNC4yLTkuNCw0LjQtMTkuOCwwLjgtMjkuNEMxNTYuMiw5NC4zLDEzNCw4NC40LDExNC4yLDkyYy0xOS44LDcuNi0yOS43LDI5LjgtMjIuMSw0OS42DQoJCWMzLjksMTAuMSwxMS45LDE4LjIsMjIuMSwyMi4xYzIuMywwLjksMy40LDMuNCwyLjUsNS43TDg4LDI0NC41Yy0wLjQsMS4xLTEuMywyLTIuMywyLjRjLTEuMSwwLjUtMi4zLDAuNS0zLjQsMC4xDQoJCWMtMzEuOC0xMi4yLTU3LTM2LjEtNzAuOS02Ny4zQy0yLjUsMTQ4LjctMy40LDExNCw4LjgsODIuMXMzNi4xLTU3LDY3LjItNzAuOXM2NS44LTE0LjgsOTcuNy0yLjZzNTcsMzYuMSw3MC45LDY3LjMNCgkJYzEzLjksMzEuMiwxNC44LDY1LjgsMi42LDk3LjdjLTEyLjksMzMuNy0zOS43LDYwLjUtNzMuNCw3My41QzE3My4yLDI0Ny4zLDE3Mi43LDI0Ny40LDE3Mi4yLDI0Ny40TDE3Mi4yLDI0Ny40eiBNMTI4LDguOQ0KCQljLTE2LjQsMC0zMi44LDMuNS00OC4zLDEwLjNjLTI5LDEyLjktNTEuMiwzNi40LTYyLjYsNjZjLTExLjQsMjkuNi0xMC41LDYxLjksMi40LDkwLjljMTIuMywyNy43LDM0LjIsNDkuMiw2MS45LDYxbDI1LjctNjcNCgkJYy0xMC42LTUuMi0xOC45LTE0LjMtMjMuMS0yNS40Yy05LjMtMjQuMywyLjktNTEuNywyNy4xLTYxYzI0LjMtOS4zLDUxLjYsMi45LDYxLDI3LjJjNC41LDExLjgsNC4yLDI0LjYtMC45LDM2LjENCgkJYy00LjUsMTAuMi0xMi4zLDE4LjItMjIuMiwyMy4xbDI1LjcsNjdjMjkuNS0xMi42LDUyLjgtMzYuNyw2NC4zLTY2LjdjMTEuNC0yOS42LDEwLjUtNjEuOS0yLjQtOTAuOWMtMTIuOS0yOS0zNi4zLTUxLjItNjYtNjIuNg0KCQlDMTU2LjgsMTEuNiwxNDIuMyw4LjksMTI4LDguOUwxMjgsOC45eiIvPg0KCTxwYXRoIGZpbGw9IiMyMzFGMjAiIGQ9Ik0yMzcuNywyMjkuNmMtMS42LDEuNi0yLjQsMy42LTIuNCw1LjhjMCwyLjMsMC44LDQuMywyLjQsNS45YzEuNiwxLjYsMy42LDIuNCw1LjksMi40DQoJCWMyLjMsMCw0LjItMC44LDUuOC0yLjRjMS42LTEuNiwyLjQtMy42LDIuNC01LjljMC0yLjItMC44LTQuMi0yLjQtNS44Yy0xLjYtMS43LTMuNi0yLjUtNS45LTIuNQ0KCQlDMjQxLjMsMjI3LjEsMjM5LjQsMjI3LjksMjM3LjcsMjI5LjZMMjM3LjcsMjI5LjZ6IE0yNTAuNywyNDIuNmMtMiwxLjktNC4zLDIuOC03LDIuOGMtMi44LDAtNS4yLTEtNy4xLTIuOQ0KCQljLTEuOS0xLjktMi45LTQuMy0yLjktNy4xYzAtMi45LDEtNS40LDMuMS03LjNjMi0xLjgsNC4zLTIuNyw2LjktMi43YzIuOCwwLDUuMSwxLDcuMSwyLjljMiwyLDIuOSw0LjMsMi45LDcuMQ0KCQlDMjUzLjcsMjM4LjIsMjUyLjcsMjQwLjYsMjUwLjcsMjQyLjZMMjUwLjcsMjQyLjZ6IE0yNDQuNSwyMzJjLTAuNC0wLjItMS0wLjItMS43LTAuMmgtMC43djMuMmgxLjFjMC43LDAsMS4yLTAuMSwxLjYtMC40DQoJCXMwLjYtMC43LDAuNi0xLjNDMjQ1LjQsMjMyLjcsMjQ1LjEsMjMyLjMsMjQ0LjUsMjMyTDI0NC41LDIzMnogTTIzOS4yLDI0MXYtMTEuMWMwLjcsMCwxLjcsMCwzLjEsMHMyLjEsMCwyLjMsMA0KCQljMC45LDAuMSwxLjYsMC4zLDIuMiwwLjZjMSwwLjUsMS41LDEuNCwxLjUsMi43YzAsMC45LTAuMywxLjYtMC44LDJjLTAuNSwwLjQtMS4yLDAuNy0xLjksMC43YzAuNywwLjEsMS4yLDAuNCwxLjYsMC42DQoJCWMwLjcsMC41LDEsMS40LDEsMi41djFjMCwwLjEsMCwwLjIsMCwwLjNzMCwwLjIsMC4xLDAuM2wwLjEsMC4zaC0yLjhjLTAuMS0wLjQtMC4xLTAuOS0wLjItMS41cy0wLjEtMS4xLTAuMi0xLjQNCgkJYy0wLjEtMC40LTAuNC0wLjctMC44LTAuOGMtMC4yLTAuMS0wLjUtMC4xLTEtMC4ybC0wLjYsMGgtMC42djMuOUgyMzkuMnoiLz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat center;
+	}
+}
+
+@media (min-width: 1000px) {
+	.blog {
+		article.first-post {
+			display: flex;
+			flex-wrap: nowrap !important;
+
+			.osi-list--image {
+				flex-basis: 60%;
+				flex-grow: 0;
+			}
+			.osi-list--post-content {
+				flex-basis: 52%;
+				flex-grow: 0;
+				align-self: center;
+				position: relative;
+				z-index: 9;
+				margin-left: -64px;
+			}
+		}
+		.sidebar.content--sidebar {
+			display:inline-block;
+			width:18%;
+			padding-left: 20px;
+		}
+		.post-archive-wrap {
+			display:inline-block;
+			width:80%;
+		}
+	}
+  }
diff --git a/themes/osi/functions.php b/themes/osi/functions.php
@@ -318,7 +318,7 @@ function osi_add_block_editor_assets() {
  * Register the "Footer - Above credits" sidebar.
  */
 function register_footer_above_sidebar() {
-    register_sidebar(
+	register_sidebar(
 		array(
 			'name'          => esc_html__( 'Footer - Above Credits', 'osi' ),
 			'id'            => 'footer-above-credits',
@@ -327,7 +327,37 @@ function register_footer_above_sidebar() {
 			'after_widget'  => '</div>',
 			'before_title'  => '<h2 class="widget-title">',
 			'after_title'   => '</h2>',
-    	)
+		)
 	);
 }
-add_action('widgets_init', 'register_footer_above_sidebar');
+add_action( 'widgets_init', 'register_footer_above_sidebar' );
+
+// these two functions adjust the 'news' (post archive) to show 1 fewer posts on the first page, for symmetry
+add_action( 'pre_get_posts', 'osi_query_offset', 1 );
+function osi_query_offset( &$query ) {
+	if ( ! ( $query->is_blog() || is_main_query() ) ) {
+		return;
+	}
+
+	$offset = -1;
+	$ppp    = get_option( 'posts_per_page' );
+
+	if ( $query->is_paged ) {
+		// Manually determine page query offset (offset + current page (minus one) x posts per page)
+		$page_offset = $offset + ( ( $query->query_vars['paged'] - 1 ) * $ppp );
+		// Apply adjust page offset
+		$query->set( 'offset', $page_offset );
+	} else {
+		// This is the first page. Set a different number for posts per page
+		$query->set( 'posts_per_page', $offset + $ppp );
+	}
+}
+
+add_filter( 'found_posts', 'osi_adjust_offset_pagination', 1, 2 );
+function osi_adjust_offset_pagination( $found_posts, $query ) {
+	$offset = -1;
+	if ( $query->is_blog() && is_main_query() ) {
+		return $found_posts - $offset;
+	}
+	return $found_posts;
+}
diff --git a/themes/osi/index.php b/themes/osi/index.php
@@ -23,34 +23,68 @@
 		?>
 		<section class="content--page" id="content-page">
 			<?php get_template_part( 'template-parts/breadcrumbs' ); ?>
-
-			<?php
-			if ( is_home() && ! is_front_page() ) :
-				?>
-				<header class="page--header">
-					<h1 class="archive-columns archive-title page--title">
-					<?php echo esc_html( osi_title() ); ?>
-				</h1>
-				</header>
-
-			<?php endif; ?>
-			<div class="wp-block-columns archive-columns" id="content-scroll">
-
 				<?php
+				$count = 0;
 				/* Start the Loop */
 				while ( have_posts() ) :
 					the_post();
+					// this conditional is just for the first post on the post archive page, so it'll display outside of the main archive loop
+					if ( is_home() && ! is_paged() && 0 === $wp_query->current_post ) :
+						?>
+						<article id="post-<?php the_ID(); ?>" <?php post_class( 'archive wp-block-column first-post ' ); ?>>
+							<?php get_template_part( 'template-parts/featured-image', 'medium' ); ?>
+							<section class="post--summary osi-list--post-content">
+								<header class="entry-header">
+									<?php
+									the_title( '<h2 class="post--title entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
+									?>
+								</header><!-- .entry-header -->
+
+								<div class="entry-content post--summary">
+									<?php
+										the_excerpt(
+											/* translators: %s: Name of current post. Only visible to screen readers */
+											wp_kses( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'osi' ), 'osi' )
+										);
+									?>
+								</div><!-- .entry-content -->
 
-					/*
-						* Include the Post-Type-specific template for the content.
-						* If you want to override this in a child theme, then include a file
-						* called content-___.php (where ___ is the Post Format name) and that will be used instead.
-						*/
-					get_template_part( 'template-parts/content-archive', get_post_type() );
+								<div class="entry-meta">
+									<?php
+									if ( 'post' === get_post_type() ) :
+										?>
+											<div class="post--byline entry-meta">
+												<?php osi_posted_on(); ?>
+											</div><!-- .entry-meta -->
+											<?php
+									endif;
+									?>
+								</div>
+							</section>
 
+						</article><!-- #post-<?php the_ID(); ?> -->
+						<div class="special-sep">
+							<hr />
+						</div>
+						<?php
+					else :
+						if ( 0 === $count ) :
+							?>
+						<div class="post-archive-wrap">
+							<h2>Recent Posts</h2>
+							<div class="wp-block-columns archive-columns" id="content-scroll">
+						<?php endif; ?>
+						<?php
+						get_template_part( 'template-parts/content-archive', get_post_type() );
+						$count++;
+					endif;
 				endwhile;
 				?>
+				</div>
 			</div>
+			<aside class="sidebar content--sidebar <?php echo esc_attr( osi_sidebar_class() ); ?>" role="complementary">
+				<?php get_template_part( 'template-parts/sidebar' ); ?>
+			</aside><!-- /.sidebar -->
 			</section>
 			<?php
 			if ( ( class_exists( 'Jetpack' ) && ! Jetpack::is_module_active( 'infinite-scroll' ) ) || ! class_exists( 'Jetpack' ) ) :
@@ -63,21 +97,12 @@
 				);
 			endif;
 			?>
-
 		<?php else : ?>
 			<?php get_template_part( 'template-parts/content', 'none' ); ?>
 			</section>
 
 	<?php endif; ?>
-
 	</main><!-- #primary -->
-
-	<?php if ( osi_display_sidebar() ) : ?>
-		<aside class="sidebar content--sidebar <?php echo esc_attr( osi_sidebar_class() ); ?>" role="complementary">
-			<?php get_template_part( 'template-parts/sidebar' ); ?>
-		</aside><!-- /.sidebar -->
-	<?php endif; ?>
-
 </section>
 
 <?php

diff --git a/themes/osi/package-lock.json b/themes/osi/package-lock.json
diff --git a/themes/osi/style.css b/themes/osi/style.css
diff --git a/themes/osi/style.css.map b/themes/osi/style.css.map
diff --git a/themes/osi/template-parts/content-archive.php b/themes/osi/template-parts/content-archive.php
@@ -8,19 +8,12 @@
  */
 
 ?>
-<?php $content_size = ( 'post' !== get_post_type() && !is_search() ) ? 'three-column' : 'two-column'; ?>
+<?php $content_size = ( 'post' !== get_post_type() && ! is_search() ) ? 'three-column' : 'two-column'; ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'archive wp-block-column ' . $content_size ); ?>>
 	<?php get_template_part( 'template-parts/featured-image', 'cropped' ); ?>
 	<section class="post--summary osi-list--post-content">
 		<header class="entry-header">
 			<?php
-			if ( 'post' === get_post_type() ) :
-				?>
-				<div class="post--byline entry-meta">
-					<?php osi_posted_on(); ?>
-				</div><!-- .entry-meta -->
-				<?php
-			endif;
 			the_title( '<h2 class="post--title entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 			?>
 		</header><!-- .entry-header -->
@@ -33,6 +26,15 @@
 				);
 				?>
 		</div><!-- .entry-content -->
+		<?php
+		if ( 'post' === get_post_type() ) :
+			?>
+			<div class="post--byline entry-meta">
+				<?php osi_posted_on(); ?>
+			</div><!-- .entry-meta -->
+			<?php
+		endif;
+		?>
 	</section>
 
 </article><!-- #post-<?php the_ID(); ?> -->