Add meta images for blog series and introduce a script to extract series metadata from blog posts.

Author: adamgordonbell

data/blog_series.yml

@@ -5,46 +5,58 @@ series:
   - slug: "platform-engineering-pillars"
     title: "Platform Engineering Pillars Series"
     description: "Six essential pillars for transforming infrastructure chaos into streamlined developer platforms: provisioning, self-service, workflows, security, observability, and governance."
+    meta_image: "/blog/platform-engineering-pillars-1/meta.png"
   - slug: "ai-slack-bot"
     title: "AI Slack Bot Series"
     description: "Build AI-powered Slack bots using RAG, Embedchain, and AWS infrastructure with Pulumi, from basic chatbots to production-ready systems with real-time document processing."
+    meta_image: "/blog/ai-slack-bot-to-chat-using-embedchain-and-pulumi-on-aws/meta.png"
   - slug: "iac-best-practices"
     title: "IaC Best Practices Series"
     description: "Master Infrastructure as Code through a real-world case study: code organization, stack management, developer workflows, security patterns, and automation strategies for containerized applications on Kubernetes."
     prefix: "IaC Best Practices: "
+    meta_image: "/blog/iac-best-practices-understanding-code-organization-stacks/meta.png"
   - slug: "aws-networking-advanced"
     title: "Advanced AWS Networking Series"
     description: "Build hub-and-spoke network architecture in AWS with centralized egress and traffic inspection using Pulumi. Covers Transit Gateway setup, inspection VPC implementation, spoke VPC configuration, cost optimization through shared NAT gateways, and AWS Network Firewall integration for centralized security policies."
     prefix: "Advanced AWS Networking: "
+    meta_image: "/blog/advanced-aws-networking-part-1/aws-advanced-networking-part-1.png"
   - slug: "organizational-patterns"
     title: "Organizational Patterns Series"
     description: "Platform teams implementing infrastructure patterns to enable developer self-service through centralized repositories, automation teams, and developer portals using Pulumi"
     prefix: "Organizational Patterns: "
+    meta_image: "/blog/organizational-patterns-infra-repo/meta.png"
   - slug: "cloud-systems"
     title: "Cloud Systems Series"
     description: "Hands-on guide to modern cloud engineering practices: build and deploy a personal website through static hosting (S3), containerization (Docker), and orchestration (AWS ECS/Fargate) using infrastructure as code"
     prefix: "Cloud Systems: "
+    meta_image: "/blog/cloud-systems-part-one/meta.png"
   - slug: "kubernetes-fundamentals"
     title: "Kubernetes Fundamentals Series"
     description: "Learn container orchestration from local development to managed cloud services - deploy containerized apps, manage scaling, understand cluster architecture, and bridge Dev/Ops workflows using YAML and infrastructure as code with Pulumi."
     prefix: "Kubernetes Fundamentals: "
+    meta_image: "/blog/kubernetes-fundamentals-part-one/k8s-fundamentals.png"
   - slug: "azure-top-5"
     title: "Top 5 Things for Azure Developers Series"
     description: "Master virtual machines, serverless functions, static websites, Kubernetes cluster deployment, and DevOps automation on Azure"
     prefix: "Top 5 Things an Azure Developer Needs to Know: "
+    meta_image: "/blog/top-5-things-for-azure-devs-intro/azure-top-5.png"
   - slug: "embrace-kubernetes"
     title: "Embrace Kubernetes Series"
     description: "Learn strategic Kubernetes adoption: evaluate organizational readiness, assess technical requirements, identify suitable first projects, and implement Kubernetes where it delivers real business value"
     prefix: "It's Time to Embrace Kubernetes: "
+    meta_image: "/blog/embrace-kubernetes-part1/embrace-k8s.png"
   - slug: "kubernetes-getting-started"
     title: "Getting Started with Kubernetes Series"
     description: "Build Kubernetes clusters on AWS, Azure, GCP and deploy applications using Infrastructure as Code. Learn core objects like pods, services, volumes, deployments and move from basic setups to complex microservices."
     prefix: "Getting Started With Kubernetes: "
+    meta_image: "/blog/getting-started-with-k8s-part1/getting-started.png"
   - slug: "aws-credentials-cicd"
     title: "Managing AWS Credentials on CI/CD Series"
     description: "Step-by-step guide to secure AWS credentials in CI/CD pipelines: create dedicated IAM users, automate credential rotation, assume IAM roles for temporary access, and encrypt sensitive data with Pulumi. Includes serverless automation code and multi-account security patterns."
     prefix: "Managing AWS Credentials on CI/CD:"
+    meta_image: "/blog/managing-aws-credentials-on-cicd-part-1/meta.png"
   - slug: "architecture-as-code"
     title: "Architecture as Code Series"
     description: "Learn how to abstract infrastructure components across virtual machines, serverless, Kubernetes, and microservices architectures using modern programming languages with Pulumi"
     prefix: "Architecture as Code: "
+    meta_image: "/blog/architecture-as-code-intro/architecture.png"

extract_series_meta_images.py

@@ -0,0 +1,143 @@
+#!/usr/bin/env python3
+import os
+from datetime import datetime
+import re
+from pathlib import Path
+
+def extract_frontmatter(file_path):
+    """Extract key-value pairs from YAML frontmatter manually."""
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+        
+        # Look for frontmatter between --- delimiters
+        match = re.match(r'^---\s*\n(.*?)\n---\s*\n', content, re.DOTALL)
+        if not match:
+            return None
+        
+        frontmatter_text = match.group(1)
+        
+        # Simple parsing for the fields we need
+        data = {}
+        
+        # Extract series
+        series_match = re.search(r'^series:\s*(.+)$', frontmatter_text, re.MULTILINE)
+        if series_match:
+            data['series'] = series_match.group(1).strip().strip('"').strip("'")
+        
+        # Extract date
+        date_match = re.search(r'^date:\s*(.+)$', frontmatter_text, re.MULTILINE)
+        if date_match:
+            data['date'] = date_match.group(1).strip().strip('"').strip("'")
+        
+        # Extract meta_image
+        meta_image_match = re.search(r'^meta_image:\s*(.+)$', frontmatter_text, re.MULTILINE)
+        if meta_image_match:
+            data['meta_image'] = meta_image_match.group(1).strip().strip('"').strip("'")
+            
+        return data
+    except Exception as e:
+        print(f"Error processing {file_path}: {e}")
+        return None
+
+def find_blog_posts():
+    """Find all blog post markdown files."""
+    blog_dir = Path("content/blog")
+    markdown_files = []
+    
+    for item in blog_dir.iterdir():
+        if item.is_dir():
+            index_file = item / "index.md"
+            if index_file.exists():
+                markdown_files.append(index_file)
+    
+    return markdown_files
+
+def main():
+    series_data = {}
+    
+    blog_posts = find_blog_posts()
+    print(f"Found {len(blog_posts)} blog posts")
+    
+    for post_path in blog_posts:
+        frontmatter = extract_frontmatter(post_path)
+        if not frontmatter:
+            continue
+            
+        # Check if post has a series tag
+        series = frontmatter.get('series')
+        if not series:
+            continue
+            
+        # Get the date
+        date = frontmatter.get('date')
+        if not date:
+            continue
+            
+        # Convert date to datetime object for comparison
+        if isinstance(date, str):
+            try:
+                # Try different date formats
+                for date_format in ['%Y-%m-%d', '%Y-%m-%dT%H:%M:%S%z', '%Y-%m-%dT%H:%M:%S-%H:%M', '%Y-%m-%dT%H:%M:%SZ']:
+                    try:
+                        date_obj = datetime.strptime(date, date_format)
+                        break
+                    except ValueError:
+                        continue
+                else:
+                    # If none of the formats work, try to extract just the date part
+                    date_part = date.split('T')[0]
+                    date_obj = datetime.strptime(date_part, '%Y-%m-%d')
+                
+                # Convert to naive datetime if it has timezone info
+                if date_obj.tzinfo is not None:
+                    date_obj = date_obj.replace(tzinfo=None)
+                    
+            except ValueError:
+                print(f"Could not parse date '{date}' in {post_path}")
+                continue
+        else:
+            date_obj = date
+            
+        # Track the earliest date for each series (first article)
+        if series not in series_data:
+            series_data[series] = {
+                'earliest_date': date_obj,
+                'first_post': post_path,
+                'meta_image': frontmatter.get('meta_image'),
+                'post_count': 1
+            }
+        else:
+            series_data[series]['post_count'] += 1
+            if date_obj < series_data[series]['earliest_date']:
+                series_data[series]['earliest_date'] = date_obj
+                series_data[series]['first_post'] = post_path
+                series_data[series]['meta_image'] = frontmatter.get('meta_image')
+    
+    # Sort series by earliest date (oldest first to see first articles)
+    sorted_series = sorted(series_data.items(), 
+                          key=lambda x: x[1]['earliest_date'])
+    
+    print("\nFirst article meta_image for each series:")
+    print("=" * 60)
+    for series_slug, data in sorted_series:
+        earliest_date = data['earliest_date'].strftime('%Y-%m-%d')
+        post_count = data['post_count']
+        meta_image = data['meta_image'] or 'None'
+        
+        # Get the relative path from the blog post directory
+        first_post_dir = data['first_post'].parent.name
+        if meta_image and meta_image != 'None':
+            # Build the full path relative to the blog post
+            full_meta_image_path = f"/blog/{first_post_dir}/{meta_image}"
+        else:
+            full_meta_image_path = 'None'
+            
+        print(f"{series_slug}:")
+        print(f"  First post: {earliest_date} - {first_post_dir}")
+        print(f"  Meta image: {full_meta_image_path}")
+        print(f"  Total posts: {post_count}")
+        print()
+
+if __name__ == "__main__":
+    main()

layouts/blog/series.html

@@ -8,20 +8,38 @@
             <div class="lg:w-7/12">
                 <header>
                     <h1 class="no-anchor">{{ .Title }}</h1>
-
                     {{ .Content }}
-
-
-                    <ul class="tags list-none p-0 my-8 inline-flex flex-wrap text-xs">
-                        {{ with .Site.Data.blog_series }}
-                            {{ range .series }}
-                                <li>
-                                    <a class="tag tag-blog text-xs m-1" href="/blog/tag/{{ .slug }}/">{{ .title }}</a>
-                                </li>
-                            {{ end }}
-                        {{ end }}
-                    </ul>
                 </header>
+
+                {{ with .Site.Data.blog_series }}
+                    {{ range .series }}
+                        <article class="mb-8 pb-8 border-b border-gray-200">
+                            <h2 class="no-anchor">
+                                <a data-track="series-{{ .slug }}" href="/blog/tag/{{ .slug }}/">{{ .title }}</a>
+                            </h2>
+                            
+                            <section class="blog-list-description">
+                                {{/* Display meta image if available */}}
+                                {{ if .meta_image }}
+                                    <a href="/blog/tag/{{ .slug }}/"
+                                        ><img
+                                            class="rounded-lg md:m-2 md:mt-0 md:max-w-xs md:float-right my-8 border-2 border-gray-100"
+                                            src="{{ .meta_image }}"
+                                            alt="{{ .title }}"
+                                    /></a>
+                                {{ end }}
+                                
+                                {{/* Display description */}}
+                                <p>{{ .description }}</p>
+                                
+                                {{/* Read more link */}}
+                                <p>
+                                    <a data-track="read-more-series" href="/blog/tag/{{ .slug }}/">View series &rarr;</a>
+                                </p>
+                            </section>
+                        </article>
+                    {{ end }}
+                {{ end }}
             </div>
             <div class="lg:w-2/12 pl-8"></div>
         </div>