Dokploy/website
1
0
Fork 0
mirror of https://github.com/Dokploy/website synced 2025-06-26 18:16:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add error handling and improve blog post page rendering

Browse Source
This commit is contained in:
Mauricio Siu
2025-03-02 21:07:22 -06:00
parent 98ec4ab0c4
commit 3ae8888ef9
1 changed files with 257 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

505
apps/website/app/[locale]/blog/[slug]/page.tsx
View File

@@ -80,282 +80,291 @@ export async function generateStaticParams() {
} }
export default async function BlogPostPage({ params }: Props) { export default async function BlogPostPage({ params }: Props) {
const { locale, slug } = await params; try {
// setRequestLocale(locale); const { locale, slug } = await params;
const t = await getTranslations({ locale, namespace: "blog" }); // setRequestLocale(locale);
const post = await getPost(slug); const t = await getTranslations({ locale, namespace: "blog" });
const allPosts = await getPosts(); const post = await getPost(slug);
const allPosts = await getPosts();
// Get related posts (excluding current post) // Get related posts (excluding current post)
const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3); // Show only 3 related posts const relatedPosts = allPosts.filter((p) => p.id !== post?.id).slice(0, 3); // Show only 3 related posts
if (!post) { if (!post) {
notFound(); notFound();
} }
// Convertir HTML a Markdown // Convertir HTML a Markdown
const turndownService = new TurndownService({ const turndownService = new TurndownService({
headingStyle: "atx", headingStyle: "atx",
codeBlockStyle: "fenced", codeBlockStyle: "fenced",
}); });
const gfm = turndownPluginGfm.gfm; const gfm = turndownPluginGfm.gfm;
const tables = turndownPluginGfm.tables; const tables = turndownPluginGfm.tables;
const strikethrough = turndownPluginGfm.strikethrough; const strikethrough = turndownPluginGfm.strikethrough;
turndownService.use([tables, strikethrough, gfm, remarkToc]); turndownService.use([tables, strikethrough, gfm, remarkToc]);
const markdown = turndownService.turndown(post.html); const markdown = turndownService.turndown(post.html);
const formattedDate = new Date(post.published_at).toLocaleDateString(locale, { const formattedDate = new Date(post.published_at).toLocaleDateString(
year: "numeric", locale,
month: "long", {
day: "numeric", year: "numeric",
}); month: "long",
day: "numeric",
},
);
const components: Partial<Components> = { const components: Partial<Components> = {
h1: H1, h1: H1,
h2: H2, h2: H2,
h3: H3, h3: H3,
p: ({ node, children, ...props }) => ( p: ({ node, children, ...props }) => (
<p <p
className="text-base text-muted-foreground leading-relaxed mb-4" className="text-base text-muted-foreground leading-relaxed mb-4"
{...props} {...props}
>
{children}
</p>
),
a: ({ node, href, ...props }) => (
<a
href={href}
className="text-blue-500 hover:text-blue-500/80 transition-colors"
target="_blank"
rel="noopener noreferrer"
{...props}
/>
),
ul: ({ node, ...props }) => (
<ul className="list-disc list-inside space-y-2 mb-4" {...props} />
),
ol: ({ node, ...props }) => (
<ol className="list-decimal list-inside space-y-2 mb-4" {...props} />
),
li: ({ node, ...props }) => (
<li className="text-base leading-relaxed" {...props} />
),
blockquote: ({ node, ...props }) => (
<blockquote
className="border-l-4 border-primary pl-4 py-2 my-4 bg-muted/50"
{...props}
/>
),
table: ({ node, ...props }) => (
<div className="my-6 w-full overflow-x-auto border rounded-lg">
<table className="w-full border-collapse" {...props} />
</div>
),
thead: ({ node, ...props }) => (
<thead className="bg-muted border-b border-border" {...props} />
),
tbody: ({ node, ...props }) => (
<tbody className="divide-y divide-border" {...props} />
),
tr: ({ node, ...props }) => (
<tr className="transition-colors hover:bg-muted/50" {...props} />
),
th: ({ node, ...props }) => (
<th className="p-4 text-left font-semibold" {...props} />
),
td: ({ node, ...props }) => (
<td className="p-4 text-muted-foreground" {...props} />
),
img: ({ node, src, alt }) => (
<ZoomableImage
src={src || ""}
alt={alt || ""}
className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
/>
),
code: ({ className, children }) => {
const match = /language-(\w+)/.exec(className || "");
return (
<CodeBlock
lang={match ? (match[1] as BundledLanguage) : "ts"}
code={children?.toString() || ""}
/>
);
},
};
return (
<article className="mx-auto px-4 sm:px-6 lg:px-8 pb-12 max-w-7xl w-full">
<Link
href="/blog"
className="inline-flex items-center mb-8 text-primary hover:text-primary/80 transition-colors"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
> >
<path {children}
fillRule="evenodd" </p>
d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" ),
clipRule="evenodd" a: ({ node, href, ...props }) => (
<a
href={href}
className="text-blue-500 hover:text-blue-500/80 transition-colors"
target="_blank"
rel="noopener noreferrer"
{...props}
/>
),
ul: ({ node, ...props }) => (
<ul className="list-disc list-inside space-y-2 mb-4" {...props} />
),
ol: ({ node, ...props }) => (
<ol className="list-decimal list-inside space-y-2 mb-4" {...props} />
),
li: ({ node, ...props }) => (
<li className="text-base leading-relaxed" {...props} />
),
blockquote: ({ node, ...props }) => (
<blockquote
className="border-l-4 border-primary pl-4 py-2 my-4 bg-muted/50"
{...props}
/>
),
table: ({ node, ...props }) => (
<div className="my-6 w-full overflow-x-auto border rounded-lg">
<table className="w-full border-collapse" {...props} />
</div>
),
thead: ({ node, ...props }) => (
<thead className="bg-muted border-b border-border" {...props} />
),
tbody: ({ node, ...props }) => (
<tbody className="divide-y divide-border" {...props} />
),
tr: ({ node, ...props }) => (
<tr className="transition-colors hover:bg-muted/50" {...props} />
),
th: ({ node, ...props }) => (
<th className="p-4 text-left font-semibold" {...props} />
),
td: ({ node, ...props }) => (
<td className="p-4 text-muted-foreground" {...props} />
),
img: ({ node, src, alt }) => (
<ZoomableImage
src={src || ""}
alt={alt || ""}
className="object-cover max-w-lg mx-auto rounded-lg border max-lg:w-64 border-border overflow-hidden"
/>
),
code: ({ className, children }) => {
const match = /language-(\w+)/.exec(className || "");
return (
<CodeBlock
lang={match ? (match[1] as BundledLanguage) : "ts"}
code={children?.toString() || ""}
/> />
</svg> );
{t("backToBlog")} },
</Link> };
<div className="grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8"> return (
<div className="rounded-lg p-8 shadow-lg border border-border"> <article className="mx-auto px-4 sm:px-6 lg:px-8 pb-12 max-w-7xl w-full">
<header className="mb-8"> <Link
<h1 className="text-xl md:text-2xl xl:text-3xl font-bold mb-4"> href="/blog"
{post.title} className="inline-flex items-center mb-8 text-primary hover:text-primary/80 transition-colors"
</h1> >
<div className="flex items-center mb-6"> <svg
{post.primary_author?.profile_image && ( xmlns="http://www.w3.org/2000/svg"
<div className="relative h-12 w-12 rounded-full overflow-hidden mr-4"> className="h-5 w-5 mr-2"
{post.primary_author.twitter ? ( viewBox="0 0 20 20"
<a fill="currentColor"
href={`https://twitter.com/${post.primary_author.twitter}`} >
target="_blank" <path
rel="noopener noreferrer" fillRule="evenodd"
className="block cursor-pointer transition-opacity hover:opacity-90" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
> clipRule="evenodd"
/>
</svg>
{t("backToBlog")}
</Link>
<div className="grid grid-cols-1 lg:grid-cols-[1fr_250px] gap-8">
<div className="rounded-lg p-8 shadow-lg border border-border">
<header className="mb-8">
<h1 className="text-xl md:text-2xl xl:text-3xl font-bold mb-4">
{post.title}
</h1>
<div className="flex items-center mb-6">
{post.primary_author?.profile_image && (
<div className="relative h-12 w-12 rounded-full overflow-hidden mr-4">
{post.primary_author.twitter ? (
<a
href={`https://twitter.com/${post.primary_author.twitter}`}
target="_blank"
rel="noopener noreferrer"
className="block cursor-pointer transition-opacity hover:opacity-90"
>
<Image
src={post.primary_author.profile_image}
alt={post.primary_author.name}
fill
className="object-cover"
/>
</a>
) : (
<Image <Image
src={post.primary_author.profile_image} src={post.primary_author.profile_image}
alt={post.primary_author.name} alt={post.primary_author.name}
fill fill
className="object-cover" className="object-cover"
/> />
</a> )}
) : ( </div>
<Image )}
src={post.primary_author.profile_image} <div>
alt={post.primary_author.name} <p className="font-medium">
fill {post.primary_author?.twitter ? (
className="object-cover" <a
/> href={`https://twitter.com/${post.primary_author.twitter}`}
)} target="_blank"
rel="noopener noreferrer"
className="hover:text-primary transition-colors"
>
{post.primary_author.name || "Unknown Author"}
</a>
) : (
post.primary_author?.name || "Unknown Author"
)}
</p>
<p className="text-sm text-muted-foreground">
{formattedDate} • {post.reading_time} min read
</p>
</div>
</div>
{post.feature_image && (
<div className="relative w-full h-[400px] mb-8">
<ZoomableImage
src={post.feature_image}
alt={post.title}
className="rounded-lg h-full w-full object-cover"
/>
</div> </div>
)} )}
<div> </header>
<p className="font-medium">
{post.primary_author?.twitter ? ( <div className="prose prose-lg max-w-none">
<a <ReactMarkdown
href={`https://twitter.com/${post.primary_author.twitter}`} remarkPlugins={[
target="_blank" remarkGfm,
rel="noopener noreferrer" [remarkToc, { tight: true, maxDepth: 3 }],
className="hover:text-primary transition-colors" ]}
> rehypePlugins={[rehypeRaw]}
{post.primary_author.name || "Unknown Author"} components={components}
</a> >
) : ( {markdown}
post.primary_author?.name || "Unknown Author" </ReactMarkdown>
)}
</p>
<p className="text-sm text-muted-foreground">
{formattedDate} • {post.reading_time} min read
</p>
</div>
</div> </div>
{post.feature_image && (
<div className="relative w-full h-[400px] mb-8"> {post.tags && post.tags.length > 0 && (
<ZoomableImage <div className="mt-12 pt-6 border-t border-border">
src={post.feature_image} <h2 className="text-xl font-semibold mb-4">{t("tags")}</h2>
alt={post.title} <div className="flex flex-wrap gap-2">
className="rounded-lg h-full w-full object-cover" {post.tags.map((tag) => (
/> <Link
key={tag.id}
href={`/blog/tag/${tag.slug}`}
className="px-4 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm transition-colors"
>
{tag.name}
</Link>
))}
</div>
</div> </div>
)} )}
</header>
<div className="prose prose-lg max-w-none">
<ReactMarkdown
remarkPlugins={[
remarkGfm,
[remarkToc, { tight: true, maxDepth: 3 }],
]}
rehypePlugins={[rehypeRaw]}
components={components}
>
{markdown}
</ReactMarkdown>
</div> </div>
{post.tags && post.tags.length > 0 && ( <div className="hidden lg:block max-w-[16rem]">
<div className="mt-12 pt-6 border-t border-border"> <div className="sticky top-4">
<h2 className="text-xl font-semibold mb-4">{t("tags")}</h2> <TableOfContents />
<div className="flex flex-wrap gap-2">
{post.tags.map((tag) => (
<Link
key={tag.id}
href={`/blog/tag/${tag.slug}`}
className="px-4 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm transition-colors"
>
{tag.name}
</Link>
))}
</div>
</div> </div>
)}
</div>
<div className="hidden lg:block max-w-[16rem]">
<div className="sticky top-4">
<TableOfContents />
</div> </div>
</div> </div>
</div>
{relatedPosts.length > 0 && ( {relatedPosts.length > 0 && (
<div className="mt-12"> <div className="mt-12">
<h2 className="text-2xl font-bold mb-6">{t("relatedPosts")}</h2> <h2 className="text-2xl font-bold mb-6">{t("relatedPosts")}</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{relatedPosts.map((relatedPost) => { {relatedPosts.map((relatedPost) => {
const relatedPostDate = new Date( const relatedPostDate = new Date(
relatedPost.published_at, relatedPost.published_at,
).toLocaleDateString(locale, { ).toLocaleDateString(locale, {
year: "numeric", year: "numeric",
month: "long", month: "long",
day: "numeric", day: "numeric",
}); });
return ( return (
<Link <Link
key={relatedPost.id} key={relatedPost.id}
href={`/blog/${relatedPost.slug}`} href={`/blog/${relatedPost.slug}`}
className="group" className="group"
> >
<div className="bg-card rounded-lg overflow-hidden h-full shadow-lg transition-all duration-300 hover:shadow-xl border border-border"> <div className="bg-card rounded-lg overflow-hidden h-full shadow-lg transition-all duration-300 hover:shadow-xl border border-border">
{relatedPost.feature_image && ( {relatedPost.feature_image && (
<div className="relative h-48 w-full"> <div className="relative h-48 w-full">
<Image <Image
src={relatedPost.feature_image} src={relatedPost.feature_image}
alt={relatedPost.title} alt={relatedPost.title}
fill fill
className="object-cover" className="object-cover"
/> />
</div>
)}
<div className="p-6">
<h3 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
{relatedPost.title}
</h3>
<p className="text-sm text-muted-foreground mb-4">
{relatedPostDate} • {relatedPost.reading_time} min
read
</p>
<p className="text-muted-foreground line-clamp-2">
{relatedPost.excerpt}
</p>
</div> </div>
)}
<div className="p-6">
<h3 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors line-clamp-2">
{relatedPost.title}
</h3>
<p className="text-sm text-muted-foreground mb-4">
{relatedPostDate} • {relatedPost.reading_time} min read
</p>
<p className="text-muted-foreground line-clamp-2">
{relatedPost.excerpt}
</p>
</div> </div>
</div> </Link>
</Link> );
); })}
})} </div>
</div> </div>
</div> )}
)} </article>
</article> );
); } catch (error) {
console.error("Error in BlogPostPage:", error);
return <div>Error loading blog post</div>;
}
} }