Skip to content

Commit af41867

Browse files
gallaylgallayl
committed
prettier fixes
1 parent 9bf8289 commit af41867

28 files changed

+1085
-486
lines changed

‎src/components/Footer.astro‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,20 @@ import logo from '../../public/images/furystack-logo-512.png';
2424
</div>
2525
<div class="footer-nav-group">
2626
<h4>Connect</h4>
27-
{SOCIAL.github && <a href={SOCIAL.github} target="_blank" rel="noopener noreferrer">GitHub</a>}
28-
{SOCIAL.x && <a href={SOCIAL.x} target="_blank" rel="noopener noreferrer">X (Twitter)</a>}
27+
{
28+
SOCIAL.github && (
29+
<a href={SOCIAL.github} target="_blank" rel="noopener noreferrer">
30+
GitHub
31+
</a>
32+
)
33+
}
34+
{
35+
SOCIAL.x && (
36+
<a href={SOCIAL.x} target="_blank" rel="noopener noreferrer">
37+
X (Twitter)
38+
</a>
39+
)
40+
}
2941
<a href="/rss.xml">RSS Feed</a>
3042
</div>
3143
</nav>
@@ -56,10 +68,15 @@ import logo from '../../public/images/furystack-logo-512.png';
5668
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
5769
}
5870
@media (max-width: 600px) {
59-
.footer-top { flex-direction: column; gap: 32px; }
71+
.footer-top {
72+
flex-direction: column;
73+
gap: 32px;
74+
}
6075
}
6176

62-
.footer-brand { max-width: 280px; }
77+
.footer-brand {
78+
max-width: 280px;
79+
}
6380

6481
.footer-logo {
6582
display: inline-flex;
@@ -71,8 +88,13 @@ import logo from '../../public/images/furystack-logo-512.png';
7188
text-decoration: none;
7289
margin-bottom: 8px;
7390
}
74-
.footer-logo:hover { text-decoration: none; color: #fff; }
75-
.footer-logo :global(img) { border-radius: 4px; }
91+
.footer-logo:hover {
92+
text-decoration: none;
93+
color: #fff;
94+
}
95+
.footer-logo :global(img) {
96+
border-radius: 4px;
97+
}
7698

7799
.footer-tagline {
78100
font-size: 1.35rem;
@@ -85,7 +107,11 @@ import logo from '../../public/images/furystack-logo-512.png';
85107
display: flex;
86108
gap: 56px;
87109
}
88-
@media (max-width: 400px) { .footer-nav { gap: 32px; } }
110+
@media (max-width: 400px) {
111+
.footer-nav {
112+
gap: 32px;
113+
}
114+
}
89115

90116
.footer-nav-group {
91117
display: flex;
@@ -106,7 +132,10 @@ import logo from '../../public/images/furystack-logo-512.png';
106132
text-decoration: none;
107133
transition: color 0.15s ease;
108134
}
109-
.footer-nav-group a:hover { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
135+
.footer-nav-group a:hover {
136+
color: rgba(255, 255, 255, 0.9);
137+
text-decoration: none;
138+
}
110139

111140
.footer-bottom {
112141
padding-top: 24px;

‎src/components/PostCard.astro‎

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,46 @@ const displayDatetime = format(date, 'dd LLL yyyy');
1717
1818
const slug = `/posts/${post.id}/`;
1919
const primaryTag = tags?.[0];
20-
const words = (post.body?.split(/\s+/).length) ?? 0;
20+
const words = post.body?.split(/\s+/).length ?? 0;
2121
const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
2222
---
2323

2424
<article class:list={['post-card', { 'no-image': !image, 'post-card-large': large }]}>
25-
{image && (
26-
<div class="post-card-image">
27-
<Image src={image} alt={title} width={720} height={400} loading={eager ? 'eager' : 'lazy'} />
28-
</div>
29-
)}
25+
{
26+
image && (
27+
<div class="post-card-image">
28+
<Image
29+
src={image}
30+
alt={title}
31+
width={720}
32+
height={400}
33+
loading={eager ? 'eager' : 'lazy'}
34+
/>
35+
</div>
36+
)
37+
}
3038
<div class="post-card-body">
31-
{primaryTag && (
32-
<span class="post-card-tag">
33-
<a href={`/tags/${primaryTag.toLowerCase().replace(/\s+/g, '-')}/`}>{primaryTag}</a>
34-
</span>
35-
)}
39+
{
40+
primaryTag && (
41+
<span class="post-card-tag">
42+
<a href={`/tags/${primaryTag.toLowerCase().replace(/\s+/g, '-')}/`}>{primaryTag}</a>
43+
</span>
44+
)
45+
}
3646
<h2 class="post-card-title">
3747
<a href={slug} class="post-card-link">{title}</a>
3848
</h2>
3949
{excerpt && <p class="post-card-excerpt">{excerpt}</p>}
4050
<footer class="post-card-meta">
4151
<span class="post-card-authors">
42-
{author.map((authorId, i) => (
43-
<>
44-
<a href={`/author/${authorId.toLowerCase()}/`}>{authorId}</a>
45-
{i < author.length - 1 && ', '}
46-
</>
47-
))}
52+
{
53+
author.map((authorId, i) => (
54+
<>
55+
<a href={`/author/${authorId.toLowerCase()}/`}>{authorId}</a>
56+
{i < author.length - 1 && ', '}
57+
</>
58+
))
59+
}
4860
</span>
4961
<time datetime={datetime}>{displayDatetime}</time>
5062
<span class="post-card-reading-time">{readingTime}</span>
@@ -60,11 +72,17 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
6072
background: #fff;
6173
border-radius: 12px;
6274
overflow: hidden;
63-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
64-
transition: box-shadow 0.25s ease, transform 0.25s ease;
75+
box-shadow:
76+
0 1px 3px rgba(0, 0, 0, 0.08),
77+
0 1px 2px rgba(0, 0, 0, 0.06);
78+
transition:
79+
box-shadow 0.25s ease,
80+
transform 0.25s ease;
6581
}
6682
.post-card:hover {
67-
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
83+
box-shadow:
84+
0 12px 28px rgba(0, 0, 0, 0.12),
85+
0 4px 10px rgba(0, 0, 0, 0.08);
6886
transform: translateY(-2px);
6987
}
7088

@@ -84,7 +102,9 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
84102
min-height: 320px;
85103
}
86104
@media (max-width: 800px) {
87-
.post-card-large { flex-direction: column; }
105+
.post-card-large {
106+
flex-direction: column;
107+
}
88108
}
89109

90110
/* Stretched link: the title <a> covers the entire card */
@@ -122,10 +142,14 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
122142
aspect-ratio: auto;
123143
}
124144
@media (max-width: 800px) {
125-
.post-card-large .post-card-image { aspect-ratio: 16 / 9; }
145+
.post-card-large .post-card-image {
146+
aspect-ratio: 16 / 9;
147+
}
126148
}
127149
@media (prefers-color-scheme: dark) {
128-
.post-card-image { background: var(--color-darkmode); }
150+
.post-card-image {
151+
background: var(--color-darkmode);
152+
}
129153
}
130154

131155
.post-card-body {
@@ -140,7 +164,9 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
140164
padding: 32px 36px;
141165
}
142166
@media (max-width: 800px) {
143-
.post-card-large .post-card-body { padding: 20px 24px 24px; }
167+
.post-card-large .post-card-body {
168+
padding: 20px 24px 24px;
169+
}
144170
}
145171

146172
.post-card-tag {
@@ -173,7 +199,9 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
173199
font-size: 2.8rem;
174200
}
175201
@media (prefers-color-scheme: dark) {
176-
.post-card-title { color: rgba(255, 255, 255, 0.92); }
202+
.post-card-title {
203+
color: rgba(255, 255, 255, 0.92);
204+
}
177205
}
178206

179207
.post-card-excerpt {
@@ -187,7 +215,9 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
187215
font-size: 1.6rem;
188216
}
189217
@media (prefers-color-scheme: dark) {
190-
.post-card-excerpt { color: rgba(255, 255, 255, 0.55); }
218+
.post-card-excerpt {
219+
color: rgba(255, 255, 255, 0.55);
220+
}
191221
}
192222

193223
.post-card-meta {
@@ -198,7 +228,9 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
198228
color: var(--color-midgrey-l10);
199229
letter-spacing: 0.2px;
200230
}
201-
.post-card-meta time { white-space: nowrap; }
231+
.post-card-meta time {
232+
white-space: nowrap;
233+
}
202234
.post-card-meta time::before {
203235
content: '\00b7';
204236
margin-right: 6px;
@@ -212,8 +244,12 @@ const readingTime = `${Math.max(1, Math.ceil(words / 265))} min read`;
212244
font-weight: 600;
213245
text-decoration: none;
214246
}
215-
.post-card-authors a:hover { text-decoration: underline; }
247+
.post-card-authors a:hover {
248+
text-decoration: underline;
249+
}
216250
@media (prefers-color-scheme: dark) {
217-
.post-card-authors a { color: rgba(255, 255, 255, 0.75); }
251+
.post-card-authors a {
252+
color: rgba(255, 255, 255, 0.75);
253+
}
218254
}
219255
</style>

‎src/components/ReadNext.astro‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,33 @@ const showRelatedPosts = relatedPosts.length > 1;
1616
const hasContent = showRelatedPosts || prevPost || nextPost;
1717
---
1818

19-
{hasContent && (
20-
<aside class="read-next">
21-
<div class="read-next-inner">
22-
<h3 class="read-next-heading">Read Next</h3>
23-
<div class="read-next-feed">
24-
{showRelatedPosts && (
25-
<ReadNextCard
26-
currentSlug={currentSlug}
27-
tags={tags}
28-
relatedPosts={relatedPosts}
29-
/>
30-
)}
31-
{prevPost && <PostCard post={prevPost} />}
32-
{nextPost && <PostCard post={nextPost} />}
19+
{
20+
hasContent && (
21+
<aside class="read-next">
22+
<div class="read-next-inner">
23+
<h3 class="read-next-heading">Read Next</h3>
24+
<div class="read-next-feed">
25+
{showRelatedPosts && (
26+
<ReadNextCard currentSlug={currentSlug} tags={tags} relatedPosts={relatedPosts} />
27+
)}
28+
{prevPost && <PostCard post={prevPost} />}
29+
{nextPost && <PostCard post={nextPost} />}
30+
</div>
3331
</div>
34-
</div>
35-
</aside>
36-
)}
32+
</aside>
33+
)
34+
}
3735

3836
<style>
3937
.read-next {
4038
padding: 48px 5vw 64px;
4139
background: var(--color-whitegrey);
4240
}
43-
@media (prefers-color-scheme: dark) { .read-next { background: var(--color-darkmode-l04); } }
41+
@media (prefers-color-scheme: dark) {
42+
.read-next {
43+
background: var(--color-darkmode-l04);
44+
}
45+
}
4446

4547
.read-next-inner {
4648
max-width: 1120px;
@@ -61,5 +63,9 @@ const hasContent = showRelatedPosts || prevPost || nextPost;
6163
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
6264
gap: 24px;
6365
}
64-
@media (max-width: 600px) { .read-next-feed { grid-template-columns: 1fr; } }
66+
@media (max-width: 600px) {
67+
.read-next-feed {
68+
grid-template-columns: 1fr;
69+
}
70+
}
6571
</style>

0 commit comments

Comments
 (0)