fix: Address dependency issues within KendoReact components.

- add gray-matter to reduce duplicated meta data for posts
    - rename files in data/BlogPosts/ to address limitations in path handling

src/data/BlogPosts/0-setting-up-camp.md

@@ -1,11 +1,13 @@
 ---
 title: #0 - Setting Up Camp
+slug: 0-setting-up-camp
+fileName: 
 published: true
 date: 2025-08-24 05:00:00 UTC
 tags: fullstack,developerjourney,BuildInPublic,introduction
 canonical_url: https://campfire.dlseitz.dev/0-setting-up-camp
 header:
-    image: /assets/#0-setting-up-camp.jpg
+    image: /assets/0-setting-up-camp.jpg
     attribution: 'Photo by <a href="https://unsplash.com/@kemaldgn?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Kemal Berkay Dogan</a> on <a href="https://unsplash.com/photos/a-campfire-with-a-cup-of-coffee-sitting-in-front-of-it-TcUN5sDZPZ8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>'
 ---
 

src/data/blog-post-data.js

@@ -1,4 +1,25 @@
-// /data/blog-post-data.js
+import matter from 'gray-matter';
+
+const modules = import.meta.glob('./BlogPosts/*.md', { query: '?raw', import: 'default' });
+
+export async function loadPosts() {
+    const posts = [];
+
+    for (const path in modules) {
+        const fileContent = await modules[path]();
+        const { data } = matter(fileContent);
+
+        posts.push({
+            ...data,
+            path,
+        });
+    }
+
+    return posts;
+}
+
+
+/* // /data/blog-post-data.js
 export const blogPosts = [
     {
         title: "#0 - Setting Up Camp",
@@ -87,4 +108,4 @@ export const blogPosts = [
         tags: null,
         published: false
     }
-];
+]; */

src/pages/Dashboard.jsx

@@ -1,58 +1,69 @@
 // DashboardPage.jsx
 import React from 'react';
-import { blogPosts } from '../data/blog-post-data';
+import { loadPosts } from '../data/blog-post-data';
 import { Button } from '@progress/kendo-react-buttons';
 
 const Dashboard = React.forwardRef((props, ref) => {
-    // Separate published and draft posts
+    // State to hold posts loaded asynchronously
+    const [blogPosts, setBlogPosts] = useState([]);
+
+    // Load posts on component mount
+    useEffect(() => {
+        const fetchPosts = async () => {
+            const postsData = await loadPosts();
+            setBlogPosts(postsData);
+        };
+        fetchPosts();
+    }, []);
+
+    // Separate published and draft posts (no changes here)
     const publishedPosts = blogPosts.filter(post => post.published);
     const draftPosts = blogPosts.filter(post => !post.published);
 
     const handleEdit = (slug) => {
-        // Navigate to editor page for the given post slug
         props.navigate(`/editor/${slug}`);
     };
 
     return (
-        <div  style={{ textAlign: 'center' }} ref={ref}>
-        <h1>Dashboard</h1>
+        <div style={{ textAlign: 'center' }} ref={ref}>
+            <h1>Dashboard</h1>
 
-        <section style={{ textAlign: 'center' }}>
-            <h2>Published Posts</h2>
-            {publishedPosts.length ? (
-            <ul>
-                {publishedPosts.map(post => (
-                <li key={post.slug}>
-                    <a class="k-link" href={post.canonical_url} target="_blank" rel="noreferrer">
-                    {post.title}
-                    </a>{' '}
-                    <span style={{ marginLeft: '30px', padding: '0 20px' }} >{post.date}</span>{' '}
-                    <Button style={{ marginLeft: '30px', padding: '0 20px' }}  onClick={() => handleEdit(post.slug)}>Edit</Button>
-                </li>
-                ))}
-            </ul>
-            ) : (
-            <p>No published posts.</p>
-            )}
-        </section>
+            <section style={{ textAlign: 'center' }}>
+                <h2>Published Posts</h2>
+                {publishedPosts.length ? (
+                    <ul>
+                        {publishedPosts.map(post => (
+                            <li key={post.slug}>
+                                <a className="k-link" href={post.canonical_url} target="_blank" rel="noreferrer">
+                                    {post.title}
+                                </a>{' '}
+                                <span style={{ marginLeft: '30px', padding: '0 20px' }}>{post.date}</span>{' '}
+                                <Button style={{ marginLeft: '30px', padding: '0 20px' }} onClick={() => handleEdit(post.slug)}>Edit</Button>
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>No published posts.</p>
+                )}
+            </section>
 
-        <section style={{ textAlign: 'center' }}>
-            <h2>Drafts</h2>
-            {draftPosts.length ? (
-            <ul>
-                {draftPosts.map(post => (
-                <li key={post.slug}>
-                    {post.title}{' '}
-                    <Button style={{ marginLeft: '30px', padding: '0 20px' }} onClick={() => handleEdit(post.slug)}>Edit</Button>
-                </li>
-                ))}
-            </ul>
-            ) : (
-            <p>No drafts.</p>
-            )}
-        </section>
+            <section style={{ textAlign: 'center' }}>
+                <h2>Drafts</h2>
+                {draftPosts.length ? (
+                    <ul>
+                        {draftPosts.map(post => (
+                            <li key={post.slug}>
+                                {post.title}{' '}
+                                <Button style={{ marginLeft: '30px', padding: '0 20px' }} onClick={() => handleEdit(post.slug)}>Edit</Button>
+                            </li>
+                        ))}
+                    </ul>
+                ) : (
+                    <p>No drafts.</p>
+                )}
+            </section>
         </div>
     );
 });
 
-export default Dashboard;
+export default Dashboard;