Skip to content

Commit 3e23e1b

Browse files
solrevdevsolrevdev
authored
Merge pull request #15 from solrevdev/feature/blog-cover-images
feat: Add responsive cover image support for blog posts
2 parents 55ee944 + 097ea43 commit 3e23e1b

File tree

7 files changed

+217
-1
lines changed

7 files changed

+217
-1
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# GitHub Copilot Instructions
2+
3+
## Project Overview
4+
This is a Jekyll-based static blog for solrevdev.com using the Hyde theme with custom modifications.
5+
6+
## Key Development Guidelines
7+
8+
### Blog Posts
9+
- Located in `_posts/` directory
10+
- Use Jekyll front matter with these fields:
11+
- `layout: post`
12+
- `title: [Post Title]`
13+
- `description: [SEO description]`
14+
- `summary: [Brief summary]`
15+
- `cover_image: [/images/filename.ext]` (optional)
16+
- `tags: [array of tags]`
17+
18+
### Cover Images
19+
- Store in `/images/` directory
20+
- Use `cover_image: /images/filename.ext` in front matter
21+
- Supported formats: SVG (preferred), PNG, JPG - all handled gracefully
22+
- Size handling: CSS automatically scales images responsively
23+
- Recommended dimensions: 800x400px aspect ratio
24+
- Keep file size under 50KB for performance
25+
- Optional field - posts without cover images work perfectly
26+
27+
### Local Development Image Issues
28+
**Important**: During local development, images may not display properly due to URL resolution:
29+
30+
**Solutions**:
31+
1. **Use Jekyll server**: `bundle exec jekyll serve --host 127.0.0.1 --port 4000`
32+
2. **Use localhost domain**: `http://localhost:4000` or `http://127.0.0.1:4000`
33+
3. **Relative paths work**: with file:// protocol for testing
34+
35+
**Don't use**:
36+
- Absolute paths (`/images/...`) with file:// protocol - will fail
37+
- localhost URLs without running Jekyll server
38+
39+
### Styling
40+
- Custom styles in `public/css/custom.scss`
41+
- Uses SCSS with Jekyll compilation
42+
- Responsive breakpoints: 768px (tablet), 480px (mobile)
43+
- Cover images have hover effects and responsive sizing
44+
45+
### File Structure
46+
```
47+
├── _posts/ # Blog posts
48+
├── _layouts/ # Jekyll layouts
49+
├── _includes/ # Jekyll includes
50+
├── public/css/ # SCSS stylesheets
51+
├── images/ # Blog post images
52+
├── claude.md # Claude development notes
53+
└── .github/ # GitHub configuration
54+
```
55+
56+
### Testing
57+
- Test responsive design at 375px (mobile), 768px (tablet), 1200px+ (desktop)
58+
- Cover images scale automatically across all device sizes
59+
- Posts without cover images display normally

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ version: "2.1.0"
4646

4747
github: [metadata]
4848

49-
exclude: ["Rakefile", "vendor"]
49+
exclude: ["Rakefile", "vendor", "claude.md", "CLAUDE.md", "warp.md", "WARP.md", "agent.md", "AGENT.md", "agents.md", "AGENTS.md"]
5050

5151
# Social Sharing
5252
facebook_app_id: "1213637668669023"

‎_layouts/post.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,11 @@
44
---
55

66
<div class="post">
7+
{% if page.cover_image %}
8+
<div class="post-cover-image">
9+
<img src="{{ site.baseurl }}{{ page.cover_image }}" alt="{{ page.title }}" class="cover-image">
10+
</div>
11+
{% endif %}
712
<h1 class="post-title">{{ page.title }}</h1>
813
<span class="post-date">{{ page.date | date_to_string }}</span>
914
{{ content }}

‎_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: post
33
title: Evolving SeedFolder with GitHub Copilot - From Personal Tool to Multi-Template System
44
description: How GitHub Copilot helped transform a simple dotfile copier into a comprehensive project scaffolding tool with multiple templates and cross-platform support
55
summary: How I used GitHub Copilot to evolve SeedFolder from a dotfile copier into a flexible, multi-template scaffolding tool with cross-platform support, better UX, and CI improvements.
6+
cover_image: /images/seedfolder-evolution-cover.svg
67
tags:
78
- dotnet-global-tools
89
- github-copilot

‎claude.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
# Claude Development Notes
2+
3+
## Blog Cover Images
4+
5+
### Implementation
6+
- Added `cover_image` front matter field to blog posts
7+
- Updated `_layouts/post.html` to display cover images when present
8+
- Added responsive CSS styles in `public/css/custom.scss` for proper display across devices
9+
10+
### Image URL Behavior During Local Development
11+
12+
**Key Finding**: When developing locally, images sometimes do not display properly due to path resolution issues.
13+
14+
**Working Solutions**:
15+
1. **Relative paths** (`./images/filename.svg`) - ✅ Works with file:// protocol
16+
2. **File protocol** (`file:///full/path/to/image`) - ✅ Works for local testing
17+
3. **Jekyll server** with localhost/127.0.0.1 - ✅ Works when Jekyll server is running
18+
19+
**Non-working Solutions**:
20+
1. **Absolute paths** (`/images/filename.svg`) - ❌ Fails with file:// protocol
21+
2. **localhost URLs** without server - ❌ Connection refused when Jekyll isn't running
22+
3. **127.0.0.1 URLs** without server - ❌ Connection refused when Jekyll isn't running
23+
24+
### Development Workflow
25+
For local development, either:
26+
1. Use Jekyll server: `bundle exec jekyll serve --host 127.0.0.1 --port 4000`
27+
2. Use relative paths in Jekyll templates with `{{ site.baseurl }}` prefix
28+
3. Test with file:// protocol using relative paths for quick validation
29+
30+
### CSS Implementation
31+
- Responsive design with different max-heights for desktop (400px), tablet (250px), and mobile (200px)
32+
- Hover effects with subtle scale transform
33+
- Proper shadow and border-radius for visual appeal
34+
- Mobile-specific margin adjustments for better display
35+
36+
### Cover Image Guidelines
37+
- **Supported formats**: SVG (preferred), PNG, JPG - all handled gracefully by CSS
38+
- **Size handling**: CSS automatically scales images responsively:
39+
- Desktop: max-height 400px
40+
- Tablet: max-height 250px
41+
- Mobile: max-height 200px
42+
- **Recommended dimensions**: 800x400px aspect ratio for optimal display
43+
- **File size**: Keep under 50KB for performance (SVG typically 2-5KB)
44+
- **Alt text**: Automatically uses page title for accessibility
45+
- **Storage**: Place images in `/images/` directory
46+
47+
### Testing Results (Production Ready)
48+
- ✅ Images scale gracefully across all device sizes
49+
- ✅ Posts without cover images display normally
50+
- ✅ Performance impact minimal (2.3KB SVG)
51+
- ✅ All image formats (SVG, PNG, JPG) supported
52+
- ✅ Responsive breakpoints working properly

‎images/seedfolder-evolution-cover.svg‎

Lines changed: 58 additions & 0 deletions
Loading

‎public/css/custom.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,44 @@ kbd {
2222
word-break: inherit;
2323
word-wrap: inherit;
2424
}
25+
26+
/* Cover image styles for blog posts */
27+
.post-cover-image {
28+
margin-bottom: 2rem;
29+
margin-top: -1rem; /* Pull up to reduce spacing */
30+
}
31+
32+
.cover-image {
33+
width: 100%;
34+
height: auto;
35+
max-height: 400px;
36+
object-fit: cover;
37+
border-radius: 8px;
38+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
39+
transition: transform 0.3s ease;
40+
}
41+
42+
.cover-image:hover {
43+
transform: scale(1.02);
44+
}
45+
46+
/* Responsive adjustments for mobile */
47+
@media (max-width: 768px) {
48+
.post-cover-image {
49+
margin-bottom: 1.5rem;
50+
margin-left: -1rem;
51+
margin-right: -1rem;
52+
}
53+
54+
.cover-image {
55+
border-radius: 0;
56+
max-height: 250px;
57+
}
58+
}
59+
60+
/* Small mobile adjustments */
61+
@media (max-width: 480px) {
62+
.cover-image {
63+
max-height: 200px;
64+
}
65+
}

0 commit comments

Comments
 (0)