Skip to content

Commit 43c1cce

Browse files
shivasuryaclaude
shivasurya
and
claude
authored
feat(docs): Enhance blog post reading experience with modern typography (#380)
Improved the blog detail pages with: - Bigger, more readable fonts (1.25rem base, up from 1.1rem) - Modern system font stack for better readability - Enhanced typography hierarchy with larger headings - Better spacing and line-height for comfortable reading - Polished, modern design with clean aesthetic - Improved code blocks, blockquotes, and images styling - Responsive design for mobile devices - Dark mode support with proper color adjustments - Smoother share button interactions The blog list page remains unchanged as requested. Co-authored-by: Claude <[email protected]>
1 parent 6bba200 commit 43c1cce

File tree

2 files changed

+439
-52
lines changed

2 files changed

+439
-52
lines changed

‎docs/src/layouts/BlogPostLayout.astro‎

Lines changed: 80 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,117 @@
11
---
2-
// BlogPostLayout.astro - A reusable template for blog posts
2+
// BlogPostLayout.astro - A reusable template for blog posts with modern typography
33
// Usage: Just import this layout in your MDX file and wrap your content with it
44
55
const { frontmatter, hideTitle = false } = Astro.props;
66
const isSplashTemplate = frontmatter.template === 'splash';
77
import { Icon } from '@astrojs/starlight/components';
8+
import '../styles/blog-post.css';
89
---
910

10-
<div style="max-width: 850px; margin: 0 auto; padding: 2rem 1.5rem;">
11+
<div class="blog-post-wrapper">
1112
<!-- Hero section with title and metadata -->
12-
<div style="margin-bottom: 3rem; position: relative;">
13-
<div style="border-left: 5px solid #4c6ef5; padding-left: 1.5rem;">
13+
<div class="blog-post-hero">
14+
<div class="blog-post-hero-border">
1415
{!isSplashTemplate && (
15-
<h1 style="font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; color: #2a2f45;">{frontmatter.title}</h1>
16+
<h1 class="blog-post-title">{frontmatter.title}</h1>
1617
)}
17-
<p style="font-size: 1.25rem; font-weight: 400; margin-bottom: 1.5rem;">{frontmatter.description}</p>
18-
19-
<div style="display: flex; align-items: center; margin-top: 1rem; flex-wrap: wrap; gap: 1rem;">
18+
<p class="blog-post-description">{frontmatter.description}</p>
19+
20+
<div class="blog-post-meta">
2021
{frontmatter.author && (
2122
<div style="display: flex; align-items: center;">
22-
<div style="width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-right: 0.75rem;">
23-
<img src={`https://www.gravatar.com/avatar/93047f1d8e343ca3af1451616829ceb1?s=150`} alt={frontmatter.author} style="width: 100%; height: 100%; object-fit: cover;" />
23+
<div class="blog-post-avatar">
24+
<img src={`https://www.gravatar.com/avatar/93047f1d8e343ca3af1451616829ceb1?s=150`} alt={frontmatter.author} />
2425
</div>
25-
<div>
26-
<div style="font-weight: 500;"><a href="https://x.com/sshivasurya">{frontmatter.author}</a></div>
26+
<div class="blog-post-author-info">
27+
<div class="blog-post-author-name">
28+
<a href="https://x.com/sshivasurya">{frontmatter.author}</a>
29+
</div>
2730
{frontmatter.pubDate && (
28-
<div style="color: #718096; font-size: 0.9rem;">
31+
<div class="blog-post-date">
2932
{new Date(frontmatter.pubDate).toLocaleDateString('en-US', {
30-
year: 'numeric',
31-
month: 'long',
33+
year: 'numeric',
34+
month: 'long',
3235
day: 'numeric'
3336
})}
3437
</div>
3538
)}
3639
</div>
3740
</div>
3841
)}
39-
42+
4043
{frontmatter.tags && (
41-
<div style="margin-left: auto; background-color: #EDF2F7; color: #4a5568; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 0.9rem; font-weight: 500;">
42-
{Array.isArray(frontmatter.tags)
43-
? frontmatter.tags.join(' • ')
44+
<div class="blog-post-tags">
45+
{Array.isArray(frontmatter.tags)
46+
? frontmatter.tags.join(' • ')
4447
: frontmatter.tags}
4548
</div>
4649
)}
4750
</div>
4851
</div>
4952
</div>
5053

51-
<div style="display: flex; justify-content: left; gap: 0.5rem; flex-wrap: wrap;">
52-
<a href={`https://x.com/intent/tweet?text=${encodeURIComponent(frontmatter.title)}&url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`} target="_blank" rel="noopener noreferrer" style="background-color: #1DA1F2; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
53-
<Icon name="twitter" style="margin-right: 0.5rem;" />
54-
</a>
55-
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`} target="_blank" rel="noopener noreferrer" style="background-color: #0077B5; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
56-
<Icon name="linkedin" style="margin-right: 0.5rem;" />
57-
</a>
58-
<a href={`https://www.reddit.com/submit?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&title=${encodeURIComponent(frontmatter.title)}`} target="_blank" rel="noopener noreferrer" style="background-color: #FF4500; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
59-
<Icon name="reddit" style="margin-right: 0.5rem;" />
60-
</a>
61-
<a href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&t=${encodeURIComponent(frontmatter.title)}`} target="_blank" rel="noopener noreferrer" style="background-color: #FF6600; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; text-decoration: none;">
62-
<span style="font-size: 1rem;">HN</span>
63-
</a>
64-
</div>
54+
<!-- Share buttons at top -->
55+
<div class="blog-post-share">
56+
<a href={`https://x.com/intent/tweet?text=${encodeURIComponent(frontmatter.title)}&url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`}
57+
target="_blank"
58+
rel="noopener noreferrer"
59+
class="blog-post-share-btn twitter">
60+
<Icon name="twitter" />
61+
</a>
62+
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`}
63+
target="_blank"
64+
rel="noopener noreferrer"
65+
class="blog-post-share-btn linkedin">
66+
<Icon name="linkedin" />
67+
</a>
68+
<a href={`https://www.reddit.com/submit?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&title=${encodeURIComponent(frontmatter.title)}`}
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
class="blog-post-share-btn reddit">
72+
<Icon name="reddit" />
73+
</a>
74+
<a href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&t=${encodeURIComponent(frontmatter.title)}`}
75+
target="_blank"
76+
rel="noopener noreferrer"
77+
class="blog-post-share-btn hackernews">
78+
<span>HN</span>
79+
</a>
80+
</div>
6581

6682
<!-- Article content with improved typography -->
67-
<div style="font-size: 1.1rem; line-height: 1.8;">
83+
<article class="blog-post-content">
6884
<slot />
69-
70-
<!-- Share buttons -->
71-
<div style="margin-top: 3rem; text-align: center;">
72-
<h3 style="font-size: 1.25rem; margin-bottom: 1rem;">Share this post</h3>
73-
<div style="display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
74-
<a href={`https://x.com/intent/tweet?text=${encodeURIComponent(frontmatter.title)}&url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`} target="_blank" rel="noopener noreferrer" style="background-color: #1DA1F2; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
75-
<Icon name="twitter" style="margin-right: 0.5rem;" />
76-
</a>
77-
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`} target="_blank" rel="noopener noreferrer" style="background-color: #0077B5; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
78-
<Icon name="linkedin" style="margin-right: 0.5rem;" />
79-
</a>
80-
<a href={`https://www.reddit.com/submit?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&title=${encodeURIComponent(frontmatter.title)}`} target="_blank" rel="noopener noreferrer" style="background-color: #FF4500; color: white; padding: 1rem 1rem; border-radius: 0.25rem; text-decoration: none;">
81-
<Icon name="reddit" style="margin-right: 0.5rem;" />
82-
</a>
83-
<a href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&t=${encodeURIComponent(frontmatter.title)}`} target="_blank" rel="noopener noreferrer" style="background-color: #FF6600; color: white; padding: 0.5rem 1rem; border-radius: 0.25rem; text-decoration: none;">
84-
<span style="font-size: 1rem;">HN</span>
85-
</a>
86-
</div>
85+
</article>
86+
87+
<!-- Share buttons at bottom -->
88+
<div class="blog-post-share-bottom">
89+
<h3>Share this post</h3>
90+
<div class="blog-post-share">
91+
<a href={`https://x.com/intent/tweet?text=${encodeURIComponent(frontmatter.title)}&url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`}
92+
target="_blank"
93+
rel="noopener noreferrer"
94+
class="blog-post-share-btn twitter">
95+
<Icon name="twitter" />
96+
</a>
97+
<a href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}`}
98+
target="_blank"
99+
rel="noopener noreferrer"
100+
class="blog-post-share-btn linkedin">
101+
<Icon name="linkedin" />
102+
</a>
103+
<a href={`https://www.reddit.com/submit?url=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&title=${encodeURIComponent(frontmatter.title)}`}
104+
target="_blank"
105+
rel="noopener noreferrer"
106+
class="blog-post-share-btn reddit">
107+
<Icon name="reddit" />
108+
</a>
109+
<a href={`https://news.ycombinator.com/submitlink?u=${encodeURIComponent('https://codepathfinder.dev/' + Astro.url.pathname)}&t=${encodeURIComponent(frontmatter.title)}`}
110+
target="_blank"
111+
rel="noopener noreferrer"
112+
class="blog-post-share-btn hackernews">
113+
<span>HN</span>
114+
</a>
87115
</div>
88116
</div>
89117
</div>

0 commit comments

Comments
 (0)