-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfront-page.php
More file actions
executable file
·180 lines (164 loc) · 9.28 KB
/
front-page.php
File metadata and controls
executable file
·180 lines (164 loc) · 9.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<?php
/**
* Front Page Template
*
* Displays the blog homepage with post listings
*
* @package Frequency
*/
get_header();
?>
<main id="main-content" class="flex w-full flex-col items-center">
<!-- Blog Posts -->
<div class="freq-container py-f64 max-w-(--breakpoint-xl)">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 10,
'paged' => $paged,
'orderby' => 'date',
'order' => 'DESC'
);
$blog_query = new WP_Query($args);
if ($blog_query->have_posts()) :
?>
<div class="posts-grid flex flex-col gap-f32 max-w-(--breakpoint-lg) mx-auto">
<?php
$first_post = true;
while ($blog_query->have_posts()) : $blog_query->the_post();
// First post is featured (larger)
if ($first_post) :
$first_post = false;
?>
<!-- Featured Post (First) -->
<article id="post-<?php the_ID(); ?>" <?php post_class('post-card group'); ?>>
<a href="<?php the_permalink(); ?>" class="flex flex-col gap-f32 p-f24 rounded-lg border border-gray3 hover:border-primary transition-all hover:shadow-lg">
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail flex-shrink-0 overflow-hidden rounded-lg">
<?php the_post_thumbnail('large', array('class' => 'w-full h-[300px] object-cover group-hover:scale-105 transition-transform duration-500')); ?>
</div>
<?php endif; ?>
<div class="flex flex-col justify-center flex-1">
<h2 class="title-h3 text-black group-hover:text-primary transition-colors mb-f12">
<?php the_title(); ?>
</h2>
<div class="smText text-gray2 mb-f16">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date('M j, Y'); ?>
</time>
</div>
<div class="body text-gray1 line-clamp-3 mb-f16">
<?php echo wp_trim_words(get_the_excerpt(), 30); ?>
</div>
<span class="inline-flex items-center gap-2 text-primary font-bold group-hover:gap-3 transition-all">
Read Article
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
</svg>
</span>
</div>
</a>
</article>
<?php else : ?>
<!-- Regular Post Card -->
<article id="post-<?php the_ID(); ?>" <?php post_class('post-card group'); ?>>
<a href="<?php the_permalink(); ?>" class="flex flex-col h-full rounded-lg border border-gray3 hover:border-primary transition-all hover:shadow-lg overflow-hidden">
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail overflow-hidden">
<?php the_post_thumbnail('medium_large', array('class' => 'w-full h-[200px] object-cover group-hover:scale-105 transition-transform duration-500')); ?>
</div>
<?php else : ?>
<div class="w-full h-[200px] bg-gradient-to-br from-purple75 to-primary flex items-center justify-center">
<svg class="w-16 h-16 text-white opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
</svg>
</div>
<?php endif; ?>
<div class="flex flex-col flex-1 p-f24">
<h2 class="title-h5 text-black group-hover:text-primary transition-colors mb-f8 line-clamp-2">
<?php the_title(); ?>
</h2>
<div class="xsText text-gray2 mb-f12">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date('M j, Y'); ?>
</time>
</div>
<div class="smText text-gray1 line-clamp-2 flex-1">
<?php echo wp_trim_words(get_the_excerpt(), 20); ?>
</div>
</div>
</a>
</article>
<?php
endif;
endwhile;
?>
</div>
<?php
// Pagination
if ($blog_query->max_num_pages > 1) :
?>
<nav class="pagination mt-f64 flex items-center justify-center gap-f16" aria-label="Posts navigation">
<?php
// Previous link
if (get_previous_posts_link('', $blog_query->max_num_pages)) :
?>
<div class="prev-posts">
<?php previous_posts_link(
'<span class="inline-flex items-center gap-2 px-f24 py-f12 rounded-full border border-gray3 hover:border-primary hover:text-primary transition-colors font-bold">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
Newer Posts
</span>',
$blog_query->max_num_pages
); ?>
</div>
<?php
endif;
?>
<span class="page-numbers current body text-gray2">
Page <?php echo $paged; ?> of <?php echo $blog_query->max_num_pages; ?>
</span>
<?php
// Next link
if (get_next_posts_link('', $blog_query->max_num_pages)) :
?>
<div class="next-posts">
<?php next_posts_link(
'<span class="inline-flex items-center gap-2 px-f24 py-f12 rounded-full border border-gray3 hover:border-primary hover:text-primary transition-colors font-bold">
Older Posts
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</span>',
$blog_query->max_num_pages
); ?>
</div>
<?php
endif;
?>
</nav>
<?php
endif;
wp_reset_postdata();
else :
?>
<div class="no-posts text-center py-f96">
<div class="mb-f24">
<svg class="w-24 h-24 mx-auto text-gray3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
</svg>
</div>
<h2 class="title-h3 text-black mb-f16"><?php esc_html_e('No posts yet', 'frequency'); ?></h2>
<p class="body text-gray1 max-w-[400px] mx-auto"><?php esc_html_e('Check back soon for articles and updates from the Frequency team.', 'frequency'); ?></p>
</div>
<?php
endif;
?>
</div>
</main>
<?php
get_footer();