diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000..ccc1d2ea --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,59 @@ +# GitHub Copilot Instructions + +## Project Overview +This is a Jekyll-based static blog for solrevdev.com using the Hyde theme with custom modifications. + +## Key Development Guidelines + +### Blog Posts +- Located in `_posts/` directory +- Use Jekyll front matter with these fields: + - `layout: post` + - `title: [Post Title]` + - `description: [SEO description]` + - `summary: [Brief summary]` + - `cover_image: [/images/filename.ext]` (optional) + - `tags: [array of tags]` + +### Cover Images +- Store in `/images/` directory +- Use `cover_image: /images/filename.ext` in front matter +- Supported formats: SVG (preferred), PNG, JPG - all handled gracefully +- Size handling: CSS automatically scales images responsively +- Recommended dimensions: 800x400px aspect ratio +- Keep file size under 50KB for performance +- Optional field - posts without cover images work perfectly + +### Local Development Image Issues +**Important**: During local development, images may not display properly due to URL resolution: + +**Solutions**: +1. **Use Jekyll server**: `bundle exec jekyll serve --host 127.0.0.1 --port 4000` +2. **Use localhost domain**: `http://localhost:4000` or `http://127.0.0.1:4000` +3. **Relative paths work**: with file:// protocol for testing + +**Don't use**: +- Absolute paths (`/images/...`) with file:// protocol - will fail +- localhost URLs without running Jekyll server + +### Styling +- Custom styles in `public/css/custom.scss` +- Uses SCSS with Jekyll compilation +- Responsive breakpoints: 768px (tablet), 480px (mobile) +- Cover images have hover effects and responsive sizing + +### File Structure +``` +├── _posts/ # Blog posts +├── _layouts/ # Jekyll layouts +├── _includes/ # Jekyll includes +├── public/css/ # SCSS stylesheets +├── images/ # Blog post images +├── claude.md # Claude development notes +└── .github/ # GitHub configuration +``` + +### Testing +- Test responsive design at 375px (mobile), 768px (tablet), 1200px+ (desktop) +- Cover images scale automatically across all device sizes +- Posts without cover images display normally \ No newline at end of file diff --git a/_config.yml b/_config.yml index e3ed5e5d..bcbd7798 100644 --- a/_config.yml +++ b/_config.yml @@ -46,7 +46,7 @@ version: "2.1.0" github: [metadata] -exclude: ["Rakefile", "vendor"] +exclude: ["Rakefile", "vendor", "claude.md", "CLAUDE.md", "warp.md", "WARP.md", "agent.md", "AGENT.md", "agents.md", "AGENTS.md"] # Social Sharing facebook_app_id: "1213637668669023" diff --git a/_layouts/post.html b/_layouts/post.html index bee8638b..9ce2fd11 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -4,6 +4,11 @@ ---
+ {% if page.cover_image %} +
+ {{ page.title }} +
+ {% endif %}

{{ page.title }}

{{ page.date | date_to_string }} {{ content }} diff --git a/_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md b/_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md index d77d6434..739f120e 100644 --- a/_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md +++ b/_posts/2025-08-20-evolving-seedfolder-with-github-copilot.md @@ -3,6 +3,7 @@ layout: post title: Evolving SeedFolder with GitHub Copilot - From Personal Tool to Multi-Template System description: How GitHub Copilot helped transform a simple dotfile copier into a comprehensive project scaffolding tool with multiple templates and cross-platform support 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. +cover_image: /images/seedfolder-evolution-cover.svg tags: - dotnet-global-tools - github-copilot diff --git a/claude.md b/claude.md new file mode 100644 index 00000000..5dfa2042 --- /dev/null +++ b/claude.md @@ -0,0 +1,52 @@ +# Claude Development Notes + +## Blog Cover Images + +### Implementation +- Added `cover_image` front matter field to blog posts +- Updated `_layouts/post.html` to display cover images when present +- Added responsive CSS styles in `public/css/custom.scss` for proper display across devices + +### Image URL Behavior During Local Development + +**Key Finding**: When developing locally, images sometimes do not display properly due to path resolution issues. + +**Working Solutions**: +1. **Relative paths** (`./images/filename.svg`) - ✅ Works with file:// protocol +2. **File protocol** (`file:///full/path/to/image`) - ✅ Works for local testing +3. **Jekyll server** with localhost/127.0.0.1 - ✅ Works when Jekyll server is running + +**Non-working Solutions**: +1. **Absolute paths** (`/images/filename.svg`) - ❌ Fails with file:// protocol +2. **localhost URLs** without server - ❌ Connection refused when Jekyll isn't running +3. **127.0.0.1 URLs** without server - ❌ Connection refused when Jekyll isn't running + +### Development Workflow +For local development, either: +1. Use Jekyll server: `bundle exec jekyll serve --host 127.0.0.1 --port 4000` +2. Use relative paths in Jekyll templates with `{{ site.baseurl }}` prefix +3. Test with file:// protocol using relative paths for quick validation + +### CSS Implementation +- Responsive design with different max-heights for desktop (400px), tablet (250px), and mobile (200px) +- Hover effects with subtle scale transform +- Proper shadow and border-radius for visual appeal +- Mobile-specific margin adjustments for better display + +### Cover Image Guidelines +- **Supported formats**: SVG (preferred), PNG, JPG - all handled gracefully by CSS +- **Size handling**: CSS automatically scales images responsively: + - Desktop: max-height 400px + - Tablet: max-height 250px + - Mobile: max-height 200px +- **Recommended dimensions**: 800x400px aspect ratio for optimal display +- **File size**: Keep under 50KB for performance (SVG typically 2-5KB) +- **Alt text**: Automatically uses page title for accessibility +- **Storage**: Place images in `/images/` directory + +### Testing Results (Production Ready) +- ✅ Images scale gracefully across all device sizes +- ✅ Posts without cover images display normally +- ✅ Performance impact minimal (2.3KB SVG) +- ✅ All image formats (SVG, PNG, JPG) supported +- ✅ Responsive breakpoints working properly \ No newline at end of file diff --git a/images/seedfolder-evolution-cover.svg b/images/seedfolder-evolution-cover.svg new file mode 100644 index 00000000..70ec1e9d --- /dev/null +++ b/images/seedfolder-evolution-cover.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + .NET + + + + Node + + + + Python + + + + + + SeedFolder Evolution + + + + + From Personal Tool to Multi-Template System + + + + + + + 🤖 GitHub Copilot + + + + + + + + + \ No newline at end of file diff --git a/public/css/custom.scss b/public/css/custom.scss index b70b5468..ae144532 100644 --- a/public/css/custom.scss +++ b/public/css/custom.scss @@ -22,3 +22,44 @@ kbd { word-break: inherit; word-wrap: inherit; } + +/* Cover image styles for blog posts */ +.post-cover-image { + margin-bottom: 2rem; + margin-top: -1rem; /* Pull up to reduce spacing */ +} + +.cover-image { + width: 100%; + height: auto; + max-height: 400px; + object-fit: cover; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: transform 0.3s ease; +} + +.cover-image:hover { + transform: scale(1.02); +} + +/* Responsive adjustments for mobile */ +@media (max-width: 768px) { + .post-cover-image { + margin-bottom: 1.5rem; + margin-left: -1rem; + margin-right: -1rem; + } + + .cover-image { + border-radius: 0; + max-height: 250px; + } +} + +/* Small mobile adjustments */ +@media (max-width: 480px) { + .cover-image { + max-height: 200px; + } +}