Skip to content

Commit

Permalink
feat: improve blog page
Browse files Browse the repository at this point in the history
  • Loading branch information
@nedpals
nedpals committed Apr 2, 2024
1 parent bd7c7f9 commit d86cadf
Show file tree
Hide file tree
Showing 8 changed files with 69 additions and 62 deletions.
2 changes: 1 addition & 1 deletion front-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

$page_sections = [
'upper' => ['overview', 'preevents'],
'lower' => ['agenda', 'speakers', 'tickets', 'testimonials', 'sponsors-cta', 'faqs', 'countdown', 'social_feed', 'sponsors', 'common/cta']
'lower' => ['agenda', 'speakers', 'tickets', 'testimonials', 'sponsors-cta', 'faqs', 'countdown', 'social_feed', 'common/sponsors', 'common/cta']
];
?>

Expand Down
6 changes: 6 additions & 0 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,12 @@ function devcon_msummit2024_load_fonts() {
}
add_action('wp_head', 'devcon_msummit2024_load_fonts', 10);

function devcon_msummit2024_excerpt_length( $length ) {
return 45;
}

add_filter( 'excerpt_length', 'devcon_msummit2024_excerpt_length', 999 );

/**
* Disable WP admin bar
*/
Expand Down
13 changes: 10 additions & 3 deletions home.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,10 @@ class="absolute inset-x-0 top-0 w-full bg-no-repeat bg-top bg-contain lg:bg-cove

<?php if (have_posts() && $paged == 1) : the_post(); ?>
<div class="w-full pb-8">
<?php get_template_part('template-parts/blog/article-card', 'horizontal', args: ['post' => $post]); ?>
<?php get_template_part('template-parts/blog/article-card', 'horizontal', args: [
'post' => $post,
'class' => 'md:h-[30rem]'
]); ?>
</div>
<?php endif ?>

Expand All @@ -37,7 +40,7 @@ class="absolute inset-x-0 top-0 w-full bg-no-repeat bg-top bg-contain lg:bg-cove
?>

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<?php get_template_part('template-parts/blog/article-card', args: ['post' => $post]); ?>
<?php get_template_part('template-parts/blog/article-card', args: ['post' => $post, 'excerpt' => true]); ?>
</div>

<?php
Expand All @@ -60,6 +63,10 @@ class="absolute inset-x-0 top-0 w-full bg-no-repeat bg-top bg-contain lg:bg-cove
</div>

<?php
$sections = ['common/sponsors', 'landing-page/social_feed', 'common/cta'];

foreach ($sections as $section) {
get_template_part('template-parts/' . $section);
}

get_template_part('template-parts/common/cta');
get_footer();
9 changes: 7 additions & 2 deletions inc/template-tags.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function devcon_msummit2024_posted_on($class_name = '', bool $link = true, WP_Po
/**
* Prints HTML with meta information for the current author.
*/
function devcon_msummit2024_posted_by($class_name = '', bool $link = true, WP_Post|null $post = null) {
function devcon_msummit2024_posted_by($class_name = '', bool $link = true, WP_Post|null $post = null, $avatar = false) {
$author_meta = esc_html(get_the_author_meta( 'display_name', $post ? $post->post_author : get_the_author_meta( 'ID' ) ));
$pby_string = $link ? '<a class="url fn n" href="' . esc_url( get_author_posts_url($post ? $post->post_author : get_the_author_meta( 'ID' ) ) ) . '">' . $author_meta . '</a>' : $author_meta;

Expand All @@ -50,8 +50,13 @@ function devcon_msummit2024_posted_by($class_name = '', bool $link = true, WP_Po
'<span class="author vcard">'.$pby_string.'</span>'
);

echo '<span class="byline '.$class_name.'"> ' . $byline . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
$text = '<span class="byline '.$class_name.'"> ' . $byline . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

if ($avatar) {
$text = '<div class="inline-flex items-center space-x-2">' . get_avatar( $post ? $post->post_author : get_the_author_meta( 'ID' ), 32, '', '', [ 'class' => 'rounded-full' ] ) . $text . '</div>';
}

echo $text;
}
endif;

Expand Down
40 changes: 13 additions & 27 deletions template-parts/blog/article-card-horizontal.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
/** @var $args array */

$args = wp_parse_args($args, [
'post' => $post
'post' => $post,
'class' => ''
]);

$post = $args['post'];
Expand All @@ -13,39 +14,24 @@
<a href="<?php the_permalink($post); ?>"
rel="bookmark norewrite"
title="<?php the_title_attribute(['post' => $post]); ?>"
class="flex h-full shadow-lg transition-transform scale-100 hover:scale-[1.05]">
class="<?php echo $args['class'] ?> flex items-stretch h-full shadow-lg transition-all scale-100 hover:scale-[1.05] border border-white/20 hover:border-[hsl(52deg,100%,50%)] rounded-xl">

<div class="w-2/5 bg-black rounded-l-xl bg-center bg-cover bg-no-repeat"
style="background-image: url(<?php echo $thumbnail_url ?>)">
</div>

<div class="w-3/5 h-full rounded-r-xl pr-0.5 py-0.5 pr-0.5 bg-gradient-to-r from-transparent to-[hsl(52deg,100%,50%)]">
<div class="h-full flex flex-col w-full p-8 rounded-r-xl bg-[#18073F]">
<?php if (!empty($category)) { ?>
<div class="mb-4 uppercase font-bold relative bg-gradient-to-r from-[hsl(52deg,100%,50%)] to-transparent text-black rounded-l px-6 py-2">
<?php echo $category[0]->name ?>
</div>
<?php } ?>

<div class="mb-4 text-white/70 w-full">
<?php devcon_msummit2024_posted_on('pr-2 border-r border-white/70', false, $post); ?>
<?php devcon_msummit2024_posted_by('pl-2', false, $post); ?>
</div>

<h2 class="mb-4 text-4xl w-full uppercase font-bold pb-3"><?php echo get_the_title($post); ?></h2>

<!-- Post Excerpt -->
<div class="mb-4 text-white prose w-full">
<?php echo get_the_excerpt($post); ?>
<div class="w-3/5 flex flex-col justify-center rounded-r-xl px-12 py-20 bg-white/5">
<?php if (!empty($category)) { ?>
<div class="self-start text-sm rounded-full border border-[hsl(52deg,100%,50%)] text-[hsl(52deg,100%,50%)] px-4 py-1 mb-4">
<?php echo $category[0]->name ?>
</div>
<?php } ?>

<div class="mt-4 self-end w-1/2 px-4 btn btn-primary flex items-center justify-between">
<span>Read More</span>
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5493 12.0582H1.31329C1.0388 12.0582 0.775552 11.943 0.581457 11.7378C0.387362 11.5327 0.27832 11.2545 0.27832 10.9644C0.27832 10.6744 0.387362 10.3962 0.581457 10.191C0.775552 9.98592 1.0388 9.87069 1.31329 9.87069H20.5493L13.0002 1.89507C12.8059 1.68969 12.6967 1.41114 12.6967 1.12069C12.6967 0.830242 12.8059 0.551691 13.0002 0.346313C13.1946 0.140938 13.4581 0.0255585 13.733 0.0255585C14.0078 0.0255585 14.2714 0.140938 14.4657 0.346313L23.7805 10.1901C23.8769 10.2917 23.9533 10.4124 24.0055 10.5452C24.0577 10.6781 24.0846 10.8206 24.0846 10.9644C24.0846 11.1083 24.0577 11.2508 24.0055 11.3836C23.9533 11.5165 23.8769 11.6372 23.7805 11.7388L14.4657 21.5826C14.2714 21.7879 14.0078 21.9033 13.733 21.9033C13.4581 21.9033 13.1946 21.7879 13.0002 21.5826C12.8059 21.3772 12.6967 21.0986 12.6967 20.8082C12.6967 20.5177 12.8059 20.2392 13.0002 20.0338L20.5493 12.0582Z" fill="currentColor"/>
</svg>
</div>
</div>
<h2 class="mb-2 text-4xl md:text-5xl lg:text-6xl w-full font-bold pb-3"><?php echo get_the_title($post); ?></h2>

<div class="mb-4 mt-4 text-white/90 w-full space-x-4 flex items-center text-lg">
<?php devcon_msummit2024_posted_by('font-semibold', false, $post, true); ?>
<?php devcon_msummit2024_posted_on('', false, $post); ?>
</div>
</div>
</a>
59 changes: 31 additions & 28 deletions template-parts/blog/article-card.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,51 @@
/** @var $args array */

$args = wp_parse_args($args, [
'post' => $post
'post' => $post,
'excerpt' => false
]);

$post = $args['post'];
$category = get_the_category($post->ID);
$thumbnail_url = get_the_post_thumbnail_url() ?: devcon_msummit2024_get_asset_url('blog_placeholder.jpg', return: true);
?>

<a href="<?php the_permalink($post); ?>"
rel="bookmark norewrite"
title="<?php the_title_attribute(['post' => $post]); ?>"
class="flex flex-col h-full shadow-lg transition-transform scale-100 hover:scale-[1.05]">
class="relative flex flex-col h-full shadow-lg transition-transform scale-100 hover:scale-[1.05]">

<div class="relative">
<?php $category = get_the_category($post->ID) ?>
<?php $thumbnail_url = get_the_post_thumbnail_url() ?>
<?php $thumbnail_url = $thumbnail_url ?: devcon_msummit2024_get_asset_url('blog_placeholder.jpg', return: true); ?>
<div class="h-full rounded-t-xl px-[1px] pt-[1px] bg-gradient-to-t from-transparent to-[hsl(52deg,100%,50%)] flex flex-col">
<div class="pb-[calc(9/16*100%)] bg-black rounded-t-xl bg-center bg-cover bg-no-repeat"
style="background-image: url(<?php echo $thumbnail_url ?>)">
</div>

<div class="pb-[calc(9/16*100%)] bg-black rounded-t-xl bg-center bg-cover bg-no-repeat"
style="background-image: url(<?php echo $thumbnail_url ?>)">
<div class="px-6 pb-6 pt-4 h-full flex flex-col w-full bg-[#1F0D43]">
<?php if (!empty($category)) { ?>
<div class="uppercase font-bold relative bg-gradient-to-r from-[hsl(52deg,100%,50%)] to-transparent text-black rounded-t-xl px-6 py-2">
<div class="self-start text-sm rounded-full border border-[hsl(52deg,100%,50%)] text-[hsl(52deg,100%,50%)] px-4 py-1 mb-4">
<?php echo $category[0]->name ?>
</div>
</div>
<?php } ?>
</div>
</div>

<div class="h-full rounded-b-xl px-0.5 pb-0.5 bg-gradient-to-b from-transparent to-[hsl(52deg,100%,50%)]">
<div class="h-full flex flex-col w-full p-6 rounded-b-xl bg-[#18073F]">
<h3 class="text-xl w-full uppercase font-bold pb-3"><?php echo get_the_title($post); ?></h3>

<div class="pt-4 pb-8 text-sm text-white/70 w-full border-t border-white/20">
<?php devcon_msummit2024_posted_on('pr-2 border-r border-white/70', false, $post); ?>
<?php devcon_msummit2024_posted_by('pl-2', false, $post); ?>
</div>

<div class="px-4 btn btn-primary mt-auto flex items-center justify-between">
<span>Read More</span>
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5493 12.0582H1.31329C1.0388 12.0582 0.775552 11.943 0.581457 11.7378C0.387362 11.5327 0.27832 11.2545 0.27832 10.9644C0.27832 10.6744 0.387362 10.3962 0.581457 10.191C0.775552 9.98592 1.0388 9.87069 1.31329 9.87069H20.5493L13.0002 1.89507C12.8059 1.68969 12.6967 1.41114 12.6967 1.12069C12.6967 0.830242 12.8059 0.551691 13.0002 0.346313C13.1946 0.140938 13.4581 0.0255585 13.733 0.0255585C14.0078 0.0255585 14.2714 0.140938 14.4657 0.346313L23.7805 10.1901C23.8769 10.2917 23.9533 10.4124 24.0055 10.5452C24.0577 10.6781 24.0846 10.8206 24.0846 10.9644C24.0846 11.1083 24.0577 11.2508 24.0055 11.3836C23.9533 11.5165 23.8769 11.6372 23.7805 11.7388L14.4657 21.5826C14.2714 21.7879 14.0078 21.9033 13.733 21.9033C13.4581 21.9033 13.1946 21.7879 13.0002 21.5826C12.8059 21.3772 12.6967 21.0986 12.6967 20.8082C12.6967 20.5177 12.8059 20.2392 13.0002 20.0338L20.5493 12.0582Z" fill="currentColor"/>
</svg>
</div>
</div>
<h3 class="text-xl w-full font-bold pb-3"><?php echo get_the_title($post); ?></h3>

<div class="py-3 text-sm text-[hsl(52deg,100%,50%)] w-full border-t border-white/20 flex space-x-3">
<?php devcon_msummit2024_posted_on('font-semibold', false, $post); ?>
<?php devcon_msummit2024_posted_by('', false, $post); ?>
</div>

<?php if ($args['excerpt']) { ?>
<div class="text-white text-sm w-full">
<?php echo get_the_excerpt($post); ?>
</div>
<?php } ?>
</div>
</div>

<div class="px-8 py-4 btn btn-primary rounded-t-none rounded-b-xl mt-auto flex items-center justify-between">
<span class="mr-4">Read More</span>
<svg width="25" height="22" viewBox="0 0 25 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5493 12.0582H1.31329C1.0388 12.0582 0.775552 11.943 0.581457 11.7378C0.387362 11.5327 0.27832 11.2545 0.27832 10.9644C0.27832 10.6744 0.387362 10.3962 0.581457 10.191C0.775552 9.98592 1.0388 9.87069 1.31329 9.87069H20.5493L13.0002 1.89507C12.8059 1.68969 12.6967 1.41114 12.6967 1.12069C12.6967 0.830242 12.8059 0.551691 13.0002 0.346313C13.1946 0.140938 13.4581 0.0255585 13.733 0.0255585C14.0078 0.0255585 14.2714 0.140938 14.4657 0.346313L23.7805 10.1901C23.8769 10.2917 23.9533 10.4124 24.0055 10.5452C24.0577 10.6781 24.0846 10.8206 24.0846 10.9644C24.0846 11.1083 24.0577 11.2508 24.0055 11.3836C23.9533 11.5165 23.8769 11.6372 23.7805 11.7388L14.4657 21.5826C14.2714 21.7879 14.0078 21.9033 13.733 21.9033C13.4581 21.9033 13.1946 21.7879 13.0002 21.5826C12.8059 21.3772 12.6967 21.0986 12.6967 20.8082C12.6967 20.5177 12.8059 20.2392 13.0002 20.0338L20.5493 12.0582Z" fill="currentColor"/>
</svg>
</div>
</a>
0 template-parts/landing-page/sponsors.php → template-parts/common/sponsors.php
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion template-sponsors.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
get_header();

$page_sections = [
'lower' => ['landing-page/testimonials', 'landing-page/faqs', 'landing-page/countdown', 'landing-page/sponsors', 'landing-page/social_feed']
'lower' => ['landing-page/testimonials', 'landing-page/faqs', 'landing-page/countdown', 'common/sponsors', 'landing-page/social_feed']
];
?>

Expand Down

0 comments on commit d86cadf

Please sign in to comment.