fix: Add safe date handling and content rendering to dynamic routes

This commit is contained in:
Daniel LaForce 2025-04-23 14:56:51 -06:00
parent ac308cd61c
commit 544b4c4ae0
3 changed files with 65 additions and 7 deletions

View File

@ -48,6 +48,24 @@ const formatDate = (date) => {
}); });
}; };
// Generate datetime attribute safely
const getISODate = (date) => {
if (!date) return '';
// Handle various date formats
try {
// If already a Date object
if (date instanceof Date) {
return date.toISOString();
}
// If it's a string or number, convert to Date
return new Date(date).toISOString();
} catch (error) {
// Fallback if date is invalid
console.error('Invalid date format:', date);
return '';
}
};
// Get the Content component for rendering markdown // Get the Content component for rendering markdown
const { Content } = await post.render(); const { Content } = await post.render();
--- ---
@ -57,7 +75,7 @@ const { Content } = await post.render();
<header class="post-header"> <header class="post-header">
<h1>{post.data.title}</h1> <h1>{post.data.title}</h1>
<div class="post-meta"> <div class="post-meta">
{post.data.pubDate && <time datetime={post.data.pubDate.toISOString()}>{formatDate(post.data.pubDate)}</time>} {post.data.pubDate && <time datetime={getISODate(post.data.pubDate)}>{formatDate(post.data.pubDate)}</time>}
{post.data.updatedDate && <div class="updated-date">Updated: {formatDate(post.data.updatedDate)}</div>} {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.readTime && <div class="read-time">{post.data.readTime} read</div>}
{post.data.author && <div class="author">By {post.data.author}</div>} {post.data.author && <div class="author">By {post.data.author}</div>}

View File

@ -35,20 +35,40 @@ const formatDate = (date) => {
day: 'numeric' day: 'numeric'
}); });
}; };
// Generate datetime attribute safely
const getISODate = (date) => {
if (!date) return '';
// Handle various date formats
try {
// If already a Date object
if (date instanceof Date) {
return date.toISOString();
}
// If it's a string or number, convert to Date
return new Date(date).toISOString();
} catch (error) {
// Fallback if date is invalid
console.error('Invalid date format:', date);
return '';
}
};
// Get the Content component for rendering markdown
const { Content } = await entry.render();
--- ---
<BaseLayout title={entry.data.title} description={entry.data.description || ''}> <BaseLayout title={entry.data.title} description={entry.data.description || ''}>
<article class="container configuration-detail"> <article class="container configuration-detail">
<header class="configuration-header"> <header class="configuration-header">
<h1>{entry.data.title}</h1> <h1>{entry.data.title}</h1>
{entry.data.pubDate && <time datetime={entry.data.pubDate.toISOString()}>{formatDate(entry.data.pubDate)}</time>} {entry.data.pubDate && <time datetime={getISODate(entry.data.pubDate)}>{formatDate(entry.data.pubDate)}</time>}
{entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>} {entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>}
</header> </header>
<div class="configuration-content"> <div class="configuration-content">
<div class="configuration-body"> <div class="configuration-body">
<!-- Render the content using the Content component --> <Content />
<slot />
</div> </div>
<aside class="configuration-sidebar"> <aside class="configuration-sidebar">

View File

@ -35,20 +35,40 @@ const formatDate = (date) => {
day: 'numeric' day: 'numeric'
}); });
}; };
// Generate datetime attribute safely
const getISODate = (date) => {
if (!date) return '';
// Handle various date formats
try {
// If already a Date object
if (date instanceof Date) {
return date.toISOString();
}
// If it's a string or number, convert to Date
return new Date(date).toISOString();
} catch (error) {
// Fallback if date is invalid
console.error('Invalid date format:', date);
return '';
}
};
// Get the Content component for rendering markdown
const { Content } = await entry.render();
--- ---
<BaseLayout title={entry.data.title} description={entry.data.description || ''}> <BaseLayout title={entry.data.title} description={entry.data.description || ''}>
<article class="container project-detail"> <article class="container project-detail">
<header class="project-header"> <header class="project-header">
<h1>{entry.data.title}</h1> <h1>{entry.data.title}</h1>
{entry.data.pubDate && <time datetime={entry.data.pubDate.toISOString()}>{formatDate(entry.data.pubDate)}</time>} {entry.data.pubDate && <time datetime={getISODate(entry.data.pubDate)}>{formatDate(entry.data.pubDate)}</time>}
{entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>} {entry.data.updatedDate && <div class="updated-date">Updated: {formatDate(entry.data.updatedDate)}</div>}
</header> </header>
<div class="project-content"> <div class="project-content">
<div class="project-body"> <div class="project-body">
<!-- Render the content using the Content component --> <Content />
<slot />
</div> </div>
<aside class="project-sidebar"> <aside class="project-sidebar">