Skip to content

Commit 9389488

Browse files
vukrosicvukrosic
committed
refactor: Update ReactMarkdown component prop handling to ignore node and remove blog post display from the home page.
1 parent 04d74d2 commit 9389488

5 files changed

Lines changed: 74 additions & 68 deletions

File tree

‎app/blog/[slug]/page.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
12
import { getPostBySlug, getAllPosts } from "@/lib/blog-utils";
23
import { notFound } from "next/navigation";
34
import ReactMarkdown from "react-markdown";
45
import remarkGfm from "remark-gfm";
5-
import Link from "next/link";
6+
67

78
interface PageProps {
8-
params: {
9+
params: Promise<{
910
slug: string;
10-
};
11+
}>;
1112
}
1213

1314
export async function generateStaticParams() {
@@ -18,7 +19,7 @@ export async function generateStaticParams() {
1819
}
1920

2021
export default async function BlogPostPage({ params }: PageProps) {
21-
const { slug } = params;
22+
const { slug } = await params;
2223
const post = getPostBySlug(slug);
2324

2425
if (!post) {
@@ -65,26 +66,27 @@ export default async function BlogPostPage({ params }: PageProps) {
6566
<ReactMarkdown
6667
remarkPlugins={[remarkGfm]}
6768
components={{
68-
h1: ({ node, ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
69-
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
70-
h3: ({ node, ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
71-
p: ({ node, ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
72-
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
73-
li: ({ node, ...props }) => <li className="" {...props} />,
74-
strong: ({ node, ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
75-
hr: ({ node, ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
76-
blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
77-
a: ({ node, ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
78-
code: ({ node, ...props }) => (
69+
h1: ({ ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
70+
h2: ({ ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
71+
h3: ({ ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
72+
p: ({ ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
73+
ul: ({ ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
74+
li: ({ ...props }) => <li className="" {...props} />,
75+
strong: ({ ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
76+
hr: ({ ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
77+
blockquote: ({ ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
78+
a: ({ ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
79+
code: ({ ...props }) => (
7980
<code className="bg-[#2a2928] px-1.5 py-0.5 rounded text-blue-300 font-mono text-sm" {...props} />
8081
),
81-
pre: ({ node, ...props }) => (
82+
pre: ({ ...props }) => (
8283
<pre className="bg-[#2a2928] p-6 rounded-xl border border-white/5 overflow-x-auto my-8 font-mono text-sm leading-relaxed" {...props} />
8384
),
84-
img: ({ node, ...props }) => (
85+
img: ({ ...props }) => (
8586
<span className="block my-12">
8687
<img
8788
className="rounded-2xl border border-white/10 shadow-2xl mx-auto"
89+
alt={props.alt || ""}
8890
{...props}
8991
/>
9092
{props.alt && (

‎app/blog/page.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
12
import React from 'react';
23
import fs from 'fs';
34
import path from 'path';
@@ -15,16 +16,16 @@ export default function PublishPage() {
1516
<ReactMarkdown
1617
remarkPlugins={[remarkGfm]}
1718
components={{
18-
h1: ({ node, ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
19-
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
20-
h3: ({ node, ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
21-
p: ({ node, ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
22-
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
23-
li: ({ node, ...props }) => <li className="" {...props} />,
24-
strong: ({ node, ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
25-
hr: ({ node, ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
26-
blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
27-
a: ({ node, ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
19+
h1: ({ ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
20+
h2: ({ ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
21+
h3: ({ ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
22+
p: ({ ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
23+
ul: ({ ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
24+
li: ({ ...props }) => <li className="" {...props} />,
25+
strong: ({ ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
26+
hr: ({ ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
27+
blockquote: ({ ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
28+
a: ({ ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
2829
}}
2930
>
3031
{content}

‎app/learn/page.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
12
import React from 'react';
23
import fs from 'fs';
34
import path from 'path';
@@ -15,16 +16,16 @@ export default function LearnPage() {
1516
<ReactMarkdown
1617
remarkPlugins={[remarkGfm]}
1718
components={{
18-
h1: ({ node, ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
19-
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
20-
h3: ({ node, ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
21-
p: ({ node, ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
22-
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
23-
li: ({ node, ...props }) => <li className="" {...props} />,
24-
strong: ({ node, ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
25-
hr: ({ node, ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
26-
blockquote: ({ node, ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
27-
a: ({ node, ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
19+
h1: ({ ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
20+
h2: ({ ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
21+
h3: ({ ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
22+
p: ({ ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
23+
ul: ({ ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
24+
li: ({ ...props }) => <li className="" {...props} />,
25+
strong: ({ ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
26+
hr: ({ ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
27+
blockquote: ({ ...props }) => <blockquote className="border-l-4 border-blue-500/50 pl-4 py-1 italic text-[#faf9f6]/75 my-6" {...props} />,
28+
a: ({ ...props }) => <a className="text-blue-400 hover:text-blue-300 transition-colors" target="_blank" rel="noopener noreferrer" {...props} />,
2829
}}
2930
>
3031
{content}

‎app/page.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
/* eslint-disable @typescript-eslint/no-explicit-any */
2+
/* eslint-disable @typescript-eslint/no-unused-vars */
13
import fs from "fs";
24
import path from "path";
35
import ReactMarkdown from "react-markdown";
46
import remarkGfm from "remark-gfm";
5-
import { getAllPosts, BlogPost } from "@/lib/blog-utils";
6-
import Link from "next/link";
7+
import { getAllPosts } from "@/lib/blog-utils";
78

89
export default function Home() {
910
const aboutPath = path.join(process.cwd(), "ABOUT_LAB.md");
@@ -12,7 +13,7 @@ export default function Home() {
1213
const researchPath = path.join(process.cwd(), "RESEARCH.md");
1314
const researchContent = fs.existsSync(researchPath) ? fs.readFileSync(researchPath, "utf8") : "";
1415

15-
const posts = getAllPosts();
16+
1617

1718
return (
1819
<>
@@ -51,16 +52,16 @@ export default function Home() {
5152
<ReactMarkdown
5253
remarkPlugins={[remarkGfm]}
5354
components={{
54-
h1: ({ ...props }: any) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
55-
h2: ({ ...props }: any) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
56-
h3: ({ ...props }: any) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 transition-colors" {...props} />,
57-
p: ({ ...props }: any) => <p className="text-[#faf9f6]/85 text-lg leading-relaxed mb-6" {...props} />,
58-
ul: ({ ...props }: any) => <ul className="list-disc list-inside mb-6 space-y-3 text-[#faf9f6]/85 text-lg" {...props} />,
59-
li: ({ ...props }: any) => <li className="" {...props} />,
60-
strong: ({ ...props }: any) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
61-
hr: ({ ...props }: any) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
62-
a: ({ ...props }: any) => <a className="text-[#faf9f6] hover:text-white transition-colors" {...props} />,
63-
blockquote: ({ ...props }: any) => <blockquote className="border-l-4 border-[#faf9f6]/30 pl-6 my-8 italic text-[#faf9f6]/75" {...props} />,
55+
h1: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...rest} /> },
56+
h2: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...rest} /> },
57+
h3: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 transition-colors" {...rest} /> },
58+
p: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <p className="text-[#faf9f6]/85 text-lg leading-relaxed mb-6" {...rest} /> },
59+
ul: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <ul className="list-disc list-inside mb-6 space-y-3 text-[#faf9f6]/85 text-lg" {...rest} /> },
60+
li: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <li className="" {...rest} /> },
61+
strong: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <strong className="text-[#faf9f6] font-semibold" {...rest} /> },
62+
hr: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <hr className="my-12 border-[#faf9f6]/5" {...rest} /> },
63+
a: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <a className="text-[#faf9f6] hover:text-white transition-colors" {...rest} /> },
64+
blockquote: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <blockquote className="border-l-4 border-[#faf9f6]/30 pl-6 my-8 italic text-[#faf9f6]/75" {...rest} /> },
6465
}}
6566
>
6667
{aboutContent}
@@ -70,16 +71,16 @@ export default function Home() {
7071
<ReactMarkdown
7172
remarkPlugins={[remarkGfm]}
7273
components={{
73-
h1: ({ ...props }: any) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
74-
h2: ({ ...props }: any) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
75-
h3: ({ ...props }: any) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 transition-colors" {...props} />,
76-
p: ({ ...props }: any) => <p className="text-[#faf9f6]/85 text-lg leading-relaxed mb-6" {...props} />,
77-
ul: ({ ...props }: any) => <ul className="list-disc list-inside mb-6 space-y-3 text-[#faf9f6]/85 text-lg" {...props} />,
78-
li: ({ ...props }: any) => <li className="" {...props} />,
79-
strong: ({ ...props }: any) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
80-
hr: ({ ...props }: any) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
81-
a: ({ ...props }: any) => <a className="text-[#faf9f6] hover:text-white transition-colors" {...props} />,
82-
blockquote: ({ ...props }: any) => <blockquote className="border-l-4 border-[#faf9f6]/30 pl-6 my-8 italic text-[#faf9f6]/75" {...props} />,
74+
h1: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...rest} /> },
75+
h2: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...rest} /> },
76+
h3: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 transition-colors" {...rest} /> },
77+
p: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <p className="text-[#faf9f6]/85 text-lg leading-relaxed mb-6" {...rest} /> },
78+
ul: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <ul className="list-disc list-inside mb-6 space-y-3 text-[#faf9f6]/85 text-lg" {...rest} /> },
79+
li: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <li className="" {...rest} /> },
80+
strong: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <strong className="text-[#faf9f6] font-semibold" {...rest} /> },
81+
hr: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <hr className="my-12 border-[#faf9f6]/5" {...rest} /> },
82+
a: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <a className="text-[#faf9f6] hover:text-white transition-colors" {...rest} /> },
83+
blockquote: ({ ...props }) => { const { node: _node, ...rest } = props as any; return <blockquote className="border-l-4 border-[#faf9f6]/30 pl-6 my-8 italic text-[#faf9f6]/75" {...rest} /> },
8384
}}
8485
>
8586
{researchContent}

‎app/request-review/page.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/no-unused-vars */
12
import React from 'react';
23
import fs from 'fs';
34
import path from 'path';
@@ -15,14 +16,14 @@ export default function RequestReviewPage() {
1516
<ReactMarkdown
1617
remarkPlugins={[remarkGfm]}
1718
components={{
18-
h1: ({ node, ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
19-
h2: ({ node, ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
20-
h3: ({ node, ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
21-
p: ({ node, ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
22-
ul: ({ node, ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
23-
li: ({ node, ...props }) => <li className="" {...props} />,
24-
strong: ({ node, ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
25-
hr: ({ node, ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
19+
h1: ({ ...props }) => <h1 className="text-4xl font-bold text-[#faf9f6] mb-8 border-b border-[#faf9f6]/10 pb-4" {...props} />,
20+
h2: ({ ...props }) => <h2 className="text-2xl font-bold text-[#faf9f6] mt-12 mb-6" {...props} />,
21+
h3: ({ ...props }) => <h3 className="text-xl font-bold text-[#faf9f6] mt-8 mb-4 hover:text-blue-400 transition-colors" {...props} />,
22+
p: ({ ...props }) => <p className="text-lg leading-relaxed mb-6" {...props} />,
23+
ul: ({ ...props }) => <ul className="list-disc list-inside mb-6 space-y-3 ml-4 text-lg" {...props} />,
24+
li: ({ ...props }) => <li className="" {...props} />,
25+
strong: ({ ...props }) => <strong className="text-[#faf9f6] font-semibold" {...props} />,
26+
hr: ({ ...props }) => <hr className="my-12 border-[#faf9f6]/5" {...props} />,
2627
}}
2728
>
2829
{content}

0 commit comments

Comments
 (0)