KeyArgo
/
laforceit-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Add/update getStaticPaths for dynamic routes

This commit is contained in:
Daniel LaForce 2025-04-23 14:47:31 -06:00
parent ad2e0acab2
commit ac308cd61c
3 changed files with 670 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
src/pages/blog/[slug].astro
View File

@ -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>
<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>

205
src/pages/configurations/[slug].astro
View File

@ -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>

228
src/pages/projects/[slug].astro
View File

@ -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>