-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsingle.php
More file actions
executable file
·142 lines (127 loc) · 6.36 KB
/
single.php
File metadata and controls
executable file
·142 lines (127 loc) · 6.36 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
<?php
/**
* Single Post Template
*
* Displays individual blog posts with Frequency styling
*
* @package Frequency
*/
get_header();
?>
<main id="main-content" class="flex w-full flex-col items-center">
<article id="post-<?php the_ID(); ?>" <?php post_class('freq-container py-f64 max-w-(--breakpoint-lg)'); ?>>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Post Header -->
<header class="mb-f48">
<!-- Back to Blog Link -->
<a href="<?php echo esc_url(home_url('/')); ?>"
class="inline-flex items-center gap-2 text-primary hover:text-purple25 transition-colors mb-f24 font-semibold">
<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>
Back to Blog
</a>
<!-- Title -->
<h1 class="title-h2 text-black mb-f24">
<?php the_title(); ?>
</h1>
<!-- Post Meta -->
<div class="flex flex-wrap items-center gap-f16 text-gray1 mdText">
<time datetime="<?php echo get_the_date('c'); ?>" class="flex items-center gap-2">
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<?php echo get_the_date('F j, Y'); ?>
</time>
<?php
$reading_time = ceil(str_word_count(get_the_content()) / 200);
if ($reading_time > 0) : ?>
<span class="text-gray3">|</span>
<span class="flex items-center gap-2">
<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<?php echo $reading_time; ?> min read
</span>
<?php endif; ?>
</div>
</header>
<!-- Featured Image -->
<?php if (has_post_thumbnail()) : ?>
<figure class="mb-f48 -mx-f24 md:mx-0">
<?php the_post_thumbnail('large', [
'class' => 'w-full h-auto rounded-lg shadow-lg'
]); ?>
<?php if (get_the_post_thumbnail_caption()) : ?>
<figcaption class="mt-f8 text-center smText text-gray2">
<?php echo get_the_post_thumbnail_caption(); ?>
</figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>
<!-- Post Content -->
<div class="entry-content prose prose-lg max-w-none">
<?php the_content(); ?>
</div>
<!-- Tags -->
<?php if (has_tag()) : ?>
<footer class="mt-f48 pt-f24 border-t border-gray3">
<div class="flex flex-wrap items-center gap-2">
<span class="font-bold text-black">Tags:</span>
<?php
$tags = get_the_tags();
foreach ($tags as $tag) : ?>
<a href="<?php echo get_tag_link($tag->term_id); ?>"
class="smText px-3 py-1 border border-gray3 text-gray1 rounded-full hover:border-primary hover:text-primary transition-colors">
<?php echo esc_html($tag->name); ?>
</a>
<?php endforeach; ?>
</div>
</footer>
<?php endif; ?>
<?php endwhile; endif; ?>
</article>
<!-- Post Navigation -->
<nav class="freq-container py-f48 border-t border-gray3 w-full max-w-(--breakpoint-lg)" aria-label="Post navigation">
<div class="flex flex-col md:flex-row justify-between gap-f24">
<?php
$prev_post = get_previous_post();
$next_post = get_next_post();
?>
<div class="flex-1">
<?php if ($prev_post) : ?>
<a href="<?php echo get_permalink($prev_post->ID); ?>"
class="group flex flex-col p-f24 rounded-lg border border-gray3 hover:border-primary transition-colors">
<span class="smText text-gray2 mb-f8 flex items-center gap-2">
<svg class="w-4 h-4" 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>
Previous Post
</span>
<span class="font-bold text-black group-hover:text-primary transition-colors line-clamp-2">
<?php echo esc_html($prev_post->post_title); ?>
</span>
</a>
<?php endif; ?>
</div>
<div class="flex-1">
<?php if ($next_post) : ?>
<a href="<?php echo get_permalink($next_post->ID); ?>"
class="group flex flex-col p-f24 rounded-lg border border-gray3 hover:border-primary transition-colors text-right">
<span class="smText text-gray2 mb-f8 flex items-center justify-end gap-2">
Next Post
<svg class="w-4 h-4" 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>
<span class="font-bold text-black group-hover:text-primary transition-colors line-clamp-2">
<?php echo esc_html($next_post->post_title); ?>
</span>
</a>
<?php endif; ?>
</div>
</div>
</nav>
</main>
<?php
get_footer();