Enhance project features and styling

- Updated `package.json` to include a new script for copying `404.html` for GitHub Pages support and added `react-syntax-highlighter` as a dependency.
- Introduced a new `copy-404.js` script to facilitate SPA routing on GitHub Pages.
- Added a `Projects` page to display GitHub projects with enhanced styling in `index.css`.
- Implemented syntax highlighting in the `Post` component using `react-syntax-highlighter`.
- Created new markdown posts on CQRS and DDD with Clean Architecture for better content coverage.
- Refactored `Layout` to include a link to the new `Projects` page.

Author: vicheanath

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "node scripts/generate-posts.js && vite",
-    "build": "node scripts/generate-posts.js && tsc -b && vite build",
+    "build": "node scripts/generate-posts.js && tsc -b && vite build && node scripts/copy-404.js",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -15,6 +15,7 @@
     "react-dom": "^19.2.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
+    "react-syntax-highlighter": "^16.1.0",
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -0,0 +1,20 @@
+/**
+ * Copy dist/index.html to dist/404.html so GitHub Pages serves the SPA
+ * for any path (e.g. /posts, /post/slug). The server returns 404.html for
+ * unknown routes, and the React app loads and handles the URL.
+ */
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const dist = path.join(__dirname, '..', 'dist');
+const indexHtml = path.join(dist, 'index.html');
+const notFoundHtml = path.join(dist, '404.html');
+
+if (!fs.existsSync(indexHtml)) {
+  console.error('dist/index.html not found. Run the build first.');
+  process.exit(1);
+}
+fs.copyFileSync(indexHtml, notFoundHtml);
+console.log('Copied index.html to 404.html for GitHub Pages SPA routing.');

scripts/copy-404.js

@@ -1,5 +1,5 @@
 import { Outlet, NavLink } from 'react-router-dom';
-import { Home, Newspaper, Github } from 'lucide-react';
+import { Home, Newspaper, FolderGit2, Github } from 'lucide-react';
 import profileData from '../content/profile.json';
 
 const profile = profileData as { name: string };
@@ -31,15 +31,10 @@ export default function Layout() {
             <Newspaper size={18} aria-hidden />
             <span>Posts</span>
           </NavLink>
-          <a
-            href="https://github.com/vicheanath/vicheanath.github.io"
-            className="nav__link nav__link--external"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Github size={18} aria-hidden />
-            <span>GitHub</span>
-          </a>
+          <NavLink to="/projects" className="nav__link">
+            <FolderGit2 size={18} aria-hidden />
+            <span>Projects</span>
+          </NavLink>
         </nav>
       </header>
       <main className="main" id="main">