baileykane.co
this repo has no description
www.baileykane.co/
Use BlogPostContent for each blog post
+36
-3
+34
components/BlogPostContent.tsx
+34
components/BlogPostContent.tsx
···
···
1
+
import { micromark } from "micromark";
2
+
import BlogPostType from "@/types/BlogPost";
3
+
4
+
export default function BlogPostContent({ blogPost }): React.ReactElement {
5
+
const { title, slug, content, publishedDate, updatedDate } =
6
+
blogPost as BlogPostType;
7
+
8
+
const formattedPublishedDate = new Date(publishedDate).toLocaleDateString(
9
+
"en-US",
10
+
{
11
+
month: "long",
12
+
day: "numeric",
13
+
year: "numeric",
14
+
}
15
+
);
16
+
17
+
const formattedUpdatedDate = new Date(updatedDate).toLocaleDateString(
18
+
"en-US",
19
+
{
20
+
month: "long",
21
+
day: "numeric",
22
+
year: "numeric",
23
+
}
24
+
);
25
+
26
+
const markdownContent = micromark(content || "Coming soon.");
27
+
28
+
return (
29
+
<div
30
+
className="mt-4 w-full max-w-none prose prose-stone dark:prose-invert leading-relaxed"
31
+
dangerouslySetInnerHTML={{ __html: markdownContent }}
32
+
/>
33
+
);
34
+
}
+2
-3
components/pageContent/blog/BlogPostPage.tsx
+2
-3
components/pageContent/blog/BlogPostPage.tsx
···
1
import BaseLayout from "@/components/BaseLayout";
2
-
// import BlogPostContent from "@/components/BlogPostContent";
3
import type BlogPostType from "@/types/BlogPost";
4
5
interface BlogPostProps {
···
12
return (
13
<BaseLayout titleText={`Blog | ${blogPost.title}`}>
14
<div className="max-w-3xl mx-auto">
15
-
{/* <BlogPostContent blogPost={blogPost} /> */}
16
-
{blogPost.title}
17
</div>
18
</BaseLayout>
19
);
···
1
import BaseLayout from "@/components/BaseLayout";
2
+
import BlogPostContent from "@/components/BlogPostContent";
3
import type BlogPostType from "@/types/BlogPost";
4
5
interface BlogPostProps {
···
12
return (
13
<BaseLayout titleText={`Blog | ${blogPost.title}`}>
14
<div className="max-w-3xl mx-auto">
15
+
<BlogPostContent blogPost={blogPost} />
16
</div>
17
</BaseLayout>
18
);