fix: Add safe date handling and content rendering to dynamic routes
This commit is contained in:
parent
ac308cd61c
commit
544b4c4ae0
|
@ -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>}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue