projects.

Author: fezcode

package-lock.json

@@ -11,6 +11,7 @@
     "front-matter": "^4.0.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.9.4",
     "react-scripts": "5.0.1",

package.json

@@ -0,0 +1,21 @@
+# My Projects
+
+## Project One
+Pinned: true
+
+A short description of the first project.
+[Link to Project One](https://example.com/project-one)
+![Project One Image](/images/project-one.png)
+
+## Project Two
+Pinned: true
+
+A short description of the second project.
+[Link to Project Two](https://example.com/project-two)
+![Project Two Image](/images/project-two.png)
+
+## Project Three
+
+A short description of the third project.
+[Link to Project Three](https://example.com/project-three)
+

public/data/Projects.md

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import PostItem from '../components/PostItem';
 import ProjectCard from '../components/ProjectCard';
-import projects from '../data/projects';
+import { useProjects } from '../utils/projectParser';
+import { FaThumbtack, FaBlog } from 'react-icons/fa';
 
 const HomePage = () => {
   const [posts, setPosts] = useState([]);
+  const { projects, loading, error } = useProjects();
   const pinnedProjects = projects.filter(p => p.pinned);
 
   useEffect(() => {
@@ -13,6 +15,14 @@ const HomePage = () => {
     setPosts(postSlugs);
   }, []);
 
+  if (loading) {
+    return <div className="py-16 sm:py-24 text-center text-white">Loading projects...</div>;
+  }
+
+  if (error) {
+    return <div className="py-16 sm:py-24 text-center text-red-500">Error loading projects: {error.message}</div>;
+  }
+
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
@@ -26,7 +36,9 @@ const HomePage = () => {
         </div>
 
         <div className="mt-16">
-          <h2 className="text-2xl font-semibold tracking-tight text-white text-center">Pinned Projects</h2>
+          <h2 className="text-2xl font-semibold tracking-tight text-white text-center flex items-center justify-center gap-2">
+            <FaThumbtack className="text-primary-400" /> Pinned Projects
+          </h2>
           <div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
             {pinnedProjects.map(project => (
               <ProjectCard key={project.slug} project={project} />
@@ -35,7 +47,9 @@ const HomePage = () => {
         </div>
 
         <div className="mt-8">
-          <h2 className="text-2xl font-semibold tracking-tight text-white text-center">Recent Blog Posts</h2>
+          <h2 className="text-2xl font-semibold tracking-tight text-white text-center flex items-center justify-center gap-2">
+            <FaBlog className="text-primary-400" /> Recent Blog Posts
+          </h2>
           <div className="mt-8">
             {posts.slice(0, 5).map(slug => (
               <PostItem key={slug} slug={slug} />

src/data/projects.js

@@ -1,20 +1,35 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import projects from '../data/projects';
+import ReactMarkdown from 'react-markdown';
+import { useProjects } from '../utils/projectParser';
 
 const ProjectPage = () => {
   const { slug } = useParams();
+  const { projects, loading, error } = useProjects();
+
+  if (loading) {
+    return <div className="py-16 sm:py-24 text-center text-white">Loading project...</div>;
+  }
+
+  if (error) {
+    return <div className="py-16 sm:py-24 text-center text-red-500">Error loading project: {error.message}</div>;
+  }
+
   const project = projects.find(p => p.slug === slug);
 
   if (!project) {
-    return <div>Project not found</div>;
+    return <div className="py-16 sm:py-24 text-center text-white">Project not found</div>;
   }
 
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-3xl px-6 lg:px-8">
         <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">{project.title}</h1>
-        <p className="mt-6 text-lg leading-8 text-gray-300">{project.description}</p>
+        {project.image && <img src={project.image} alt={project.title} className="mt-8 w-full rounded-lg" />}
+        {project.link && <p className="mt-4 text-lg leading-8 text-gray-300"><a href={project.link} target="_blank" rel="noopener noreferrer" className="text-indigo-400 hover:text-indigo-300">View Project</a></p>}
+        <div className="mt-6 text-lg leading-8 text-gray-300 prose prose-invert">
+          <ReactMarkdown>{project.description}</ReactMarkdown>
+        </div>
       </div>
     </div>
   );

src/pages/HomePage.js

@@ -1,8 +1,18 @@
 import React from 'react';
-import projects from '../data/projects';
 import ProjectCard from '../components/ProjectCard';
+import { useProjects } from '../utils/projectParser';
 
 const ProjectsPage = () => {
+  const { projects, loading, error } = useProjects();
+
+  if (loading) {
+    return <div className="py-16 sm:py-24 text-center text-white">Loading projects...</div>;
+  }
+
+  if (error) {
+    return <div className="py-16 sm:py-24 text-center text-red-500">Error loading projects: {error.message}</div>;
+  }
+
   return (
     <div className="py-16 sm:py-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">

src/pages/ProjectPage.js

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+
+const parseProjectsMarkdown = (markdown) => {
+  const projects = [];
+  const projectSections = markdown.split('## ').slice(1); // Split by '## ' and remove the first empty element
+
+  projectSections.forEach(section => {
+    const lines = section.split('\n').filter(line => line.trim() !== '');
+    if (lines.length === 0) return;
+
+    const title = lines[0].trim();
+    const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-*|-*$/g, '');
+
+    let description = [];
+    let link = '';
+    let image = '';
+    let pinned = false;
+
+    for (let i = 1; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (line.startsWith('[Link to')) {
+        const match = line.match(/\[Link to .*?\]\((.*?)\)/);
+        if (match && match[1]) {
+          link = match[1];
+        }
+      } else if (line.startsWith('![') && line.includes('](')) {
+        const match = line.match(/!\[.*?\]\((.*?)\)/);
+        if (match && match[1]) {
+          image = match[1];
+        }
+      } else if (line.startsWith('Pinned:')) {
+        pinned = line.toLowerCase().includes('true');
+      } else {
+        description.push(line);
+      }
+    }
+
+    projects.push({
+      slug,
+      title,
+      description: description.join('\n'),
+      link,
+      image,
+      pinned,
+    });
+  });
+
+  return projects;
+};
+
+export const useProjects = () => {
+  const [projects, setProjects] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        const response = await fetch('/data/Projects.md');
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const markdown = await response.text();
+        const parsedProjects = parseProjectsMarkdown(markdown);
+        setProjects(parsedProjects);
+      } catch (e) {
+        setError(e);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProjects();
+  }, []);
+
+  return { projects, loading, error };
+};