Cline rules

1# Content Creation Rules
2 
3## Blog Post File Naming Convention
4All blog posts MUST follow this exact naming pattern:
5```
6_post/YYYY/YYYY-MM-DD-slug-title.md
7```
8- Posts are organized by year in subdirectories under `_posts/`
9- Date format: `YYYY-MM-DD` (e.g., `2026-01-13`)
10- Slug: lowercase with hyphens, descriptive and SEO-friendly
11- Extension: `.md` (Markdown)
12 
13**Examples**:
14- `_posts/2026/2026-01-13-kubernetes-evolution.md`
15- `_posts/2026/2026-01-14-testing-strategies-modern-web.md`
16 
17## Front Matter Template
18Every blog post MUST start with YAML front matter using this exact structure:
19 
20```yaml
21---
22title: "Main Title: Subtitle for Context"
23layout: single
24date: YYYY-MM-DD
25categories:
26  - primary-category
27  - secondary-category
28tags:
29  - tag1
30  - tag2
31  - tag3
32excerpt: "A compelling one-sentence description that appears in post previews and social media shares. Should be engaging and informative."
33header:
34  overlay_image: "https://images.unsplash.com/photo-[ID]?w=1200&h=400&fit=crop&crop=entropy&auto=format&q=80"
35  og_image:      "https://images.unsplash.com/photo-[ID]?w=1200&h=630&fit=crop&crop=entropy&auto=format&q=80"
36  overlay_filter: "linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 100%)"
37  caption: "Photo by [Photographer Name](https://unsplash.com/@photographer) on [Unsplash](https://unsplash.com)"
38  teaser: "https://images.unsplash.com/photo-[ID]?w=600&h=300&fit=crop&crop=entropy&auto=format&q=80"
39---
40```
41 
42## Front Matter Guidelines
43- **title**: Use quotation marks, can include colons and subtitles
44- **layout**: Always `single` for blog posts
45- **date**: Format as `YYYY-MM-DD` (must match filename date)
46- **categories**: 1-3 categories, lowercase with hyphens
47- **tags**: 3-6 relevant tags, lowercase with hyphens
48- **excerpt**: Single sentence, 120-200 characters, compelling summary
49- **header images**: Use Unsplash images with proper attribution
50  - overlay_image: 1200x400px for desktop headers
51  - og_image: 1200x630px for social media sharing (LinkedIn, Facebook, Twitter) — uses same photo ID as overlay_image
52  - teaser: 600x300px for thumbnails and archive listings
53  - Always include photographer credit in caption
54 
55## Common Categories
56- artificial-intelligence
57- enterprise
58- software-development
59- productivity
60- web-development
61- cloud-computing
62- devops
63- testing
64- automation
65 
66## Content Creation Standards
67- **Length**: 2,000-5,000+ words for comprehensive coverage
68- **Structure**: Hook → History → Technical → Applications → Future
69- **Language**: British English spelling exclusively
70- **Tone**: Professional but accessible, narrative-driven with technical depth
71 
72## Required Content Elements
73- Opening hook: Compelling scenario or observation
74- Historical context: Evolution and background of the topic
75- Technical explanations: Detailed analysis with code/architecture examples
76- Practical applications: Real-world implications and use cases
77- Future outlook: Forward-looking analysis and predictions
78- Code examples: Proper syntax highlighting and context
79 
80## Pre-Publication Checklist
811. YAML front matter is valid and complete
822. File naming convention is followed exactly
833. Images load correctly from Unsplash
844. Local build succeeds without errors (`bundle exec jekyll serve`)
855. All internal links are valid
866. British English spelling is used throughout
87 
88## Header Image Options - CRITICAL FIX
89 
90**Option A: Local banner images (RECOMMENDED for reliability)**
91- Place custom banner images in `assets/images/banners/` directory
92- Banner dimensions should be 1200x400px minimum
93- Reference using relative path: `/assets/images/banners/banner-X.jpg`
94- These are always available and never return 404
95 
96**Option B: Valid Unsplash images (use with caution)**
97- Find suitable free Unsplash images relevant to article topic at unsplash.com
98- To extract the correct photo ID: visit the Unsplash photo page and copy the ID from the URL (format: `photo-[timestamp]-[alphanumeric]`, e.g., `photo-1515879218367-8466d910aaa4`)
99- NEVER invent random photo IDs — they will return 404 errors
100- Always verify the image URL loads correctly in a browser before including it in a blog post
101- Use same photo ID across all image size variations (overlay, OG, teaser)
102- Always include photographer credit in caption with link to photographer's Unsplash profile
103 
104**CRITICAL**: Always test header image URLs load before committing. Invalid/made-up Unsplash photo IDs are the #1 source of broken header images.
105 
106## Image URL Configuration (Unsplash only)
107| Purpose | Dimensions | URL Pattern |
108|---------|------------|-------------|
109| Header overlay | 1200x400 | `?w=1200&h=400&fit=crop&crop=entropy&auto=format&q=80` |
110| Social media (OG) | 1200x630 | `?w=1200&h=630&fit=crop&crop=entropy&auto=format&q=80` |
111| Teaser/thumbnail | 600x300 | `?w=600&h=300&fit=crop&crop=entropy&auto=format&q=80` |
112 
113## Attribution Requirements
114- Always include photographer credit in caption
115- Format: "Photo by [Photographer Name](https://unsplash.com/@photographer) on Unsplash"
116- Verify images are free to use (Unsplash license)
117- Avoid premium/premium-restricted images