DynamicArticle.tsx
For the full content of this gist, refer to https://gist.github.com/CodingAbdullah/3ceb5292457311ec1c5690729057c551
McMaster. Software Engineer with a keen interest in blockchain and web3.
// Custom Article Canvas Page for creating and publishing a Medium style blog post
import ArticleAuthorBio from "@/components/ArticleAuthorBio";
import ArticleHeader from "@/components/ArticleHeader";
import ArticleAuthorInfoList from "@/utils/constants/ArticleAuthorInfoList";
import ArticleHeaderInfoList from "@/utils/constants/ArticleHeaderInfoList";
import MDXRemoteArticle from "./MDXRemoteArticle";
import fetchArticle from "@/utils/functions/crud/fetchArticle";
// Custom Dynamic Article component encompasses loading article content stored in a Supabase database
export default async function DynamicArticle({ slug } : { slug: string }) {
// Make a call to the back-end and fetch article information
const articleData = await fetchArticle(slug);
if (!articleData || !articleData.content) {
throw new Error("Invalid article");
}
else {
return (
<div className="min-h-screen flex flex-col bg-black">
<main className="flex-grow px-4 py-8">
<div className="max-w-4xl mx-auto">
<ArticleHeader articleHeaderInformation={ArticleHeaderInfoList} />
<div className="glass-card p-8 mb-8">
<MDXRemoteArticle content={articleData.content} />
</div>
<ArticleAuthorBio authorInformation={ArticleAuthorInfoList} />
</div>
</main>
</div>
);
}
};