-
-
-
-
-
- {featuredPost.tags.map((tag, index) => (
-
- {tag}
-
- ))}
-
-
-
- {featuredPost.title}
-
-
-
- {featuredPost.excerpt}
-
-
-
-
-
-
- {featuredPost.author}
-
-
-
- {featuredPost.date}
-
-
-
{featuredPost.readTime}
-
-
-
- Read Full Article
-
-
+ {displayFeaturedPost && (
+
+
+
+ Featured Article
+
-
-
+
+
+
+
+
+
+
+
+
+ {displayFeaturedPost.tags?.map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {displayFeaturedPost.title}
+
+
+
+ {displayFeaturedPost.excerpt}
+
+
+
+
+
+
+ {displayFeaturedPost.author}
+
+
+
+ {displayFeaturedPost.date}
+
+
+
{displayFeaturedPost.readTime}
+
+
+
+ Read Full Article
+
+
+
+
+
+
+ )}
{/* Blog Posts Grid */}
@@ -205,10 +237,10 @@ const Blog = () => {
>
{categories.map((category, index) => (
@@ -220,58 +252,60 @@ const Blog = () => {
{blogPosts.map((post, index) => (
-
-
-
-
-
-
-
-
- {post.tags.slice(0, 2).map((tag, tagIndex) => (
-
- {tag}
-
- ))}
+
+
+
+
+
-
- {post.title}
-
-
-
- {post.excerpt}
-
-
-
-
-
-
- {post.author}
-
-
-
- {post.date}
-
+
+
+ {post.tags.slice(0, 2).map((tag) => (
+
+ {tag}
+
+ ))}
+
+
+
+ {post.title}
+
+
+
+ {post.excerpt}
+
+
+
+
+
+
+ {post.author}
+
+
+
+ {post.date}
+
+
+
{post.readTime}
-
{post.readTime}
-
-
+
+
))}
diff --git a/src/pages/BlogPost.jsx b/src/pages/BlogPost.jsx
new file mode 100644
index 0000000..25f6ee3
--- /dev/null
+++ b/src/pages/BlogPost.jsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import matter from 'gray-matter';
+import { ArrowLeft, Calendar, User, Tag } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Buffer } from 'buffer'; // Explicitly import Buffer
+
+const BlogPost = () => {
+ const { slug } = useParams();
+ const [post, setPost] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const loadPost = async () => {
+ try {
+ const response = await fetch(`/src/blogs/${slug}.md`);
+ if (!response.ok) {
+ throw new Error('Post not found');
+ }
+ const content = await response.text();
+ const { data: frontmatter, content: markdownContent } = matter(content);
+
+ setPost({
+ frontmatter,
+ content: markdownContent
+ });
+ } catch (err) {
+ setError(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ loadPost();
+ }, [slug]);
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+ Back to Blog
+
+
+
+ {post.frontmatter.image && (
+
+
+
+ )}
+
+
+
+
+ {post.frontmatter.title}
+
+
+
+
+
+ {post.frontmatter.author}
+
+
+
+ {post.frontmatter.date}
+
+
{post.frontmatter.readTime}
+
+
+
+ {post.frontmatter.tags?.map((tag, index) => (
+
+
+ {tag}
+
+ ))}
+
+
+
+
+
,
+ h2: ({node, ...props}) => ,
+ h3: ({node, ...props}) => ,
+ p: ({node, ...props}) =>
,
+ ul: ({node, ...props}) => ,
+ ol: ({node, ...props}) => ,
+ li: ({node, ...props}) => ,
+ blockquote: ({node, ...props}) => (
+
+ ),
+ code: ({node, inline, ...props}) => (
+
+ ),
+ a: ({node, ...props}) => (
+
+ ),
+ }}
+ >
+ {post.content}
+
+
+
+
+
+ );
+};
+
+export default BlogPost;
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index af0941b..9e17ddd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,9 +6,15 @@ import path from 'path'
// https://vite.dev/config/
export default defineConfig({
plugins: [react(),tailwindcss()],
+ define: {
+ global: 'window',
+ 'process.env': {}, // Define process.env as an empty object
+ },
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
+ // Alias 'buffer' to 'buffer/index.js' for browser compatibility
+ 'buffer': 'buffer/index.js',
},
},
})