|
| 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 |
0 commit comments