From ac308cd61cd99edbb123b2a7f70906783ec1f1be Mon Sep 17 00:00:00 2001
From: Daniel LaForce <daniel@argobox.com>
Date: Wed, 23 Apr 2025 14:47:31 -0600
Subject: [PATCH] fix: Add/update getStaticPaths for dynamic routes

---
 src/pages/blog/[slug].astro           | 266 +++++++++++++++++++++++---
 src/pages/configurations/[slug].astro | 205 ++++++++++++++++++++
 src/pages/projects/[slug].astro       | 228 ++++++++++++++++++++++
 3 files changed, 670 insertions(+), 29 deletions(-)

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 48a119f..3ade70d 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,38 +1,246 @@
 ---
-import { getCollection, getEntryBySlug } from 'astro:content';
-import BlogPost from '../../layouts/BlogPost.astro';
+// src/pages/blog/[slug].astro
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
 
+// Required getStaticPaths function for dynamic routes
 export async function getStaticPaths() {
-  const posts = await getCollection('blog');
-  return posts.map(post => ({
-    params: { slug: post.slug },
-    props: { post },
-  }));
+  try {
+    // Try first from 'blog' collection (auto-generated)
+    let allPosts = [];
+    try {
+      allPosts = await getCollection('blog', ({ data }) => {
+        return import.meta.env.PROD ? !data.draft : true;
+      });
+    } catch (e) {
+      console.log('Blog collection not found, trying posts');
+    }
+    
+    // If that fails or is empty, try 'posts' collection
+    if (allPosts.length === 0) {
+      allPosts = await getCollection('posts', ({ data }) => {
+        return import.meta.env.PROD ? !data.draft : true;
+      });
+    }
+    
+    return allPosts.map(post => ({
+      params: { slug: post.slug },
+      props: { post },
+    }));
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+    // Return empty array if both collections don't exist or are empty
+    return [];
+  }
 }
 
+// Get the post from props
 const { post } = Astro.props;
-const { Content } = await post.render();
 
-// Handle undefined or null values
-const title = post.data.title || '';
-const description = post.data.description || '';
-const pubDate = post.data.pubDate ? new Date(post.data.pubDate) : new Date();
-const updatedDate = post.data.updatedDate ? new Date(post.data.updatedDate) : undefined;
-const heroImage = post.data.heroImage || undefined;
-const category = post.data.category || undefined;
-const tags = post.data.tags || [];
-const draft = post.data.draft || false;
+// Format date helper
+const formatDate = (date) => {
+  if (!date) return '';
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+
+// Get the Content component for rendering markdown
+const { Content } = await post.render();
 ---
 
-<BlogPost
-  title={title}
-  description={description}
-  pubDate={pubDate}
-  updatedDate={updatedDate}
-  heroImage={heroImage}
-  category={category}
-  tags={tags}
-  draft={draft}
->
-  <Content />
-</BlogPost> 
\ No newline at end of file
+<BaseLayout title={post.data.title} description={post.data.description || ''}>
+  <article class="container blog-post">
+    <header class="post-header">
+      <h1>{post.data.title}</h1>
+      <div class="post-meta">
+        {post.data.pubDate && <time datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time>}
+        {post.data.updatedDate && <div class="updated-date">Updated: {formatDate(post.data.updatedDate)}</div>}
+        {post.data.readTime && <div class="read-time">{post.data.readTime} read</div>}
+        {post.data.author && <div class="author">By {post.data.author}</div>}
+      </div>
+    </header>
+    
+    {post.data.heroImage && (
+      <div class="hero-image">
+        <img src={post.data.heroImage} alt={post.data.title} />
+      </div>
+    )}
+    
+    <div class="post-content">
+      <div class="post-body">
+        <Content />
+      </div>
+      
+      <aside class="post-sidebar">
+        {post.data.tags && post.data.tags.length > 0 && (
+          <div class="tags-section">
+            <h3>Tags</h3>
+            <div class="tags">
+              {post.data.tags.map(tag => (
+                <a href={`/tag/${tag}`} class="tag">{tag}</a>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        <div class="category-section">
+          <h3>Category</h3>
+          <a href={`/categories/${post.data.category || 'Uncategorized'}`} class="category">
+            {post.data.category || 'Uncategorized'}
+          </a>
+        </div>
+        
+        {post.data.categories && post.data.categories.length > 0 && (
+          <div class="categories-section">
+            <h3>Categories</h3>
+            <div class="categories">
+              {post.data.categories.map(category => (
+                <a href={`/categories/${category}`} class="category">
+                  {category}
+                </a>
+              ))}
+            </div>
+          </div>
+        )}
+      </aside>
+    </div>
+  </article>
+</BaseLayout>
+
+<style>
+  .container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 var(--container-padding, 1.5rem);
+  }
+  
+  .blog-post {
+    padding: 2rem 0;
+  }
+  
+  .post-header {
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+  
+  .post-header h1 {
+    font-size: var(--font-size-4xl, 2.25rem);
+    margin-bottom: 1rem;
+    line-height: 1.2;
+  }
+  
+  .post-meta {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+    color: var(--text-tertiary);
+    font-size: var(--font-size-sm, 0.875rem);
+    font-family: var(--font-mono);
+  }
+  
+  .hero-image {
+    margin-bottom: 2rem;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .hero-image img {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  
+  .post-content {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: 2rem;
+  }
+  
+  .post-body {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .post-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  .tags-section, .category-section, .categories-section {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .tags-section h3, .category-section h3, .categories-section h3 {
+    font-size: var(--font-size-lg, 1.125rem);
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+  }
+  
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .tag {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: rgba(56, 189, 248, 0.1);
+    border-radius: 20px;
+    color: var(--accent-primary);
+    font-size: var(--font-size-xs, 0.75rem);
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  
+  .tag:hover {
+    background: rgba(56, 189, 248, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .category, .categories {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .category {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    border-radius: 20px;
+    color: var(--bg-primary);
+    font-size: var(--font-size-sm, 0.875rem);
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+  
+  .category:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  @media (max-width: 768px) {
+    .post-content {
+      grid-template-columns: 1fr;
+    }
+    
+    .post-header h1 {
+      font-size: var(--font-size-2xl, 1.5rem);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/configurations/[slug].astro b/src/pages/configurations/[slug].astro
index e69de29..f958fbd 100644
--- a/src/pages/configurations/[slug].astro
+++ b/src/pages/configurations/[slug].astro
@@ -0,0 +1,205 @@
+---
+// src/pages/configurations/[slug].astro
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+// Required getStaticPaths function for dynamic routes
+export async function getStaticPaths() {
+  try {
+    const configEntries = await getCollection('configurations', ({ data }) => {
+      // Filter out drafts in production
+      return import.meta.env.PROD ? !data.draft : true;
+    });
+    
+    return configEntries.map(entry => ({
+      params: { slug: entry.slug },
+      props: { entry },
+    }));
+  } catch (error) {
+    console.error('Error fetching configurations:', error);
+    // Return empty array if collection doesn't exist or is empty
+    return [];
+  }
+}
+
+// Get the configuration from props
+const { entry } = Astro.props;
+
+// Format date helper
+const formatDate = (date) => {
+  if (!date) return '';
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+---
+
+<BaseLayout title={entry.data.title} description={entry.data.description || ''}>
+  <article class="container configuration-detail">
+    <header class="configuration-header">
+      <h1>{entry.data.title}</h1>
+      {entry.data.pubDate && <time datetime={entry.data.pubDate.toISOString()}>{formatDate(entry.data.pubDate)}</time>}
+      {entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>}
+    </header>
+    
+    <div class="configuration-content">
+      <div class="configuration-body">
+        <!-- Render the content using the Content component -->
+        <slot />
+      </div>
+      
+      <aside class="configuration-sidebar">
+        {entry.data.heroImage && (
+          <div class="configuration-image">
+            <img src={entry.data.heroImage} alt={entry.data.title} />
+          </div>
+        )}
+        
+        {entry.data.tags && entry.data.tags.length > 0 && (
+          <div class="tags-section">
+            <h3>Tags</h3>
+            <div class="tags">
+              {entry.data.tags.map(tag => (
+                <a href={`/tag/${tag}`} class="tag">{tag}</a>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        <div class="category-section">
+          <h3>Category</h3>
+          <a href={`/categories/${entry.data.category || 'Uncategorized'}`} class="category">
+            {entry.data.category || 'Uncategorized'}
+          </a>
+        </div>
+      </aside>
+    </div>
+  </article>
+</BaseLayout>
+
+<style>
+  .container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 var(--container-padding, 1.5rem);
+  }
+  
+  .configuration-detail {
+    padding: 2rem 0;
+  }
+  
+  .configuration-header {
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+  
+  .configuration-header h1 {
+    font-size: var(--font-size-3xl, 1.875rem);
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+  }
+  
+  .configuration-header time, .updated-date {
+    color: var(--text-tertiary);
+    font-size: var(--font-size-sm, 0.875rem);
+    font-family: var(--font-mono);
+  }
+  
+  .updated-date {
+    margin-top: 0.25rem;
+  }
+  
+  .configuration-content {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: 2rem;
+  }
+  
+  .configuration-body {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .configuration-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  .configuration-image {
+    margin-bottom: 1.5rem;
+  }
+  
+  .configuration-image img {
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .tags-section, .category-section {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .tags-section h3, .category-section h3 {
+    font-size: var(--font-size-lg, 1.125rem);
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+  }
+  
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .tag {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: rgba(56, 189, 248, 0.1);
+    border-radius: 20px;
+    color: var(--accent-primary);
+    font-size: var(--font-size-xs, 0.75rem);
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+  
+  .tag:hover {
+    background: rgba(56, 189, 248, 0.2);
+    transform: translateY(-2px);
+  }
+  
+  .category {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    border-radius: 20px;
+    color: var(--bg-primary);
+    font-size: var(--font-size-sm, 0.875rem);
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+  }
+  
+  .category:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  @media (max-width: 768px) {
+    .configuration-content {
+      grid-template-columns: 1fr;
+    }
+    
+    .configuration-header h1 {
+      font-size: var(--font-size-2xl, 1.5rem);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/projects/[slug].astro b/src/pages/projects/[slug].astro
index e69de29..0e8944a 100644
--- a/src/pages/projects/[slug].astro
+++ b/src/pages/projects/[slug].astro
@@ -0,0 +1,228 @@
+---
+// src/pages/projects/[slug].astro
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+
+// Required getStaticPaths function for dynamic routes
+export async function getStaticPaths() {
+  try {
+    const projectEntries = await getCollection('projects', ({ data }) => {
+      // Filter out drafts in production
+      return import.meta.env.PROD ? !data.draft : true;
+    });
+    
+    return projectEntries.map(entry => ({
+      params: { slug: entry.slug },
+      props: { entry },
+    }));
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+    // Return empty array if collection doesn't exist or is empty
+    return [];
+  }
+}
+
+// Get the project from props
+const { entry } = Astro.props;
+
+// Format date helper
+const formatDate = (date) => {
+  if (!date) return '';
+  const d = new Date(date);
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+};
+---
+
+<BaseLayout title={entry.data.title} description={entry.data.description || ''}>
+  <article class="container project-detail">
+    <header class="project-header">
+      <h1>{entry.data.title}</h1>
+      {entry.data.pubDate && <time datetime={entry.data.pubDate.toISOString()}>{formatDate(entry.data.pubDate)}</time>}
+      {entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>}
+    </header>
+    
+    <div class="project-content">
+      <div class="project-body">
+        <!-- Render the content using the Content component -->
+        <slot />
+      </div>
+      
+      <aside class="project-sidebar">
+        {entry.data.heroImage && (
+          <div class="project-image">
+            <img src={entry.data.heroImage} alt={entry.data.title} />
+          </div>
+        )}
+        
+        {entry.data.technologies && entry.data.technologies.length > 0 && (
+          <div class="tech-section">
+            <h3>Technologies</h3>
+            <div class="technologies">
+              {entry.data.technologies.map(tech => (
+                <span class="technology">{tech}</span>
+              ))}
+            </div>
+          </div>
+        )}
+        
+        <div class="project-links">
+          {entry.data.github && (
+            <a href={entry.data.github} target="_blank" rel="noopener noreferrer" class="project-link github">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+              </svg>
+              GitHub Repository
+            </a>
+          )}
+          
+          {entry.data.live && (
+            <a href={entry.data.live} target="_blank" rel="noopener noreferrer" class="project-link live">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                <polyline points="15 3 21 3 21 9"></polyline>
+                <line x1="10" y1="14" x2="21" y2="3"></line>
+              </svg>
+              Live Demo
+            </a>
+          )}
+        </div>
+      </aside>
+    </div>
+  </article>
+</BaseLayout>
+
+<style>
+  .container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 var(--container-padding, 1.5rem);
+  }
+  
+  .project-detail {
+    padding: 2rem 0;
+  }
+  
+  .project-header {
+    margin-bottom: 2rem;
+    text-align: center;
+  }
+  
+  .project-header h1 {
+    font-size: var(--font-size-3xl, 1.875rem);
+    margin-bottom: 0.5rem;
+    line-height: 1.2;
+  }
+  
+  .project-header time, .updated-date {
+    color: var(--text-tertiary);
+    font-size: var(--font-size-sm, 0.875rem);
+    font-family: var(--font-mono);
+  }
+  
+  .updated-date {
+    margin-top: 0.25rem;
+  }
+  
+  .project-content {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: 2rem;
+  }
+  
+  .project-body {
+    background: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .project-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  .project-image {
+    margin-bottom: 1.5rem;
+  }
+  
+  .project-image img {
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .tech-section, .project-links {
+    background: var(--card-bg);
+    border-radius: 8px;
+    padding: 1.5rem;
+    border: 1px solid var(--border-primary);
+  }
+  
+  .tech-section h3 {
+    font-size: var(--font-size-lg, 1.125rem);
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+  }
+  
+  .technologies {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  
+  .technology {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: rgba(56, 189, 248, 0.1);
+    border-radius: 20px;
+    color: var(--accent-primary);
+    font-size: var(--font-size-xs, 0.75rem);
+  }
+  
+  .project-links {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .project-link {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.3s ease;
+  }
+  
+  .github {
+    background: #24292e;
+    color: white;
+  }
+  
+  .live {
+    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+    color: white;
+  }
+  
+  .project-link:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  }
+  
+  @media (max-width: 768px) {
+    .project-content {
+      grid-template-columns: 1fr;
+    }
+    
+    .project-header h1 {
+      font-size: var(--font-size-2xl, 1.5rem);
+    }
+  }
+</style>
\ No newline at end of file