feat: add react-router-dom for routing and implement plugin detail view

- Updated package.json to include react-router-dom dependency.
- Refactored App component to use React Router for navigation.
- Created PluginDetail component to display detailed information about a selected plugin.
- Added fetch functions for releases and commits in the server code.
- Enhanced UI with new styles for dark mode and improved layout.
- Implemented caching for API responses to optimize performance.

src/App.css

@@ -1,5 +1,5 @@
 :root {
-    color-scheme: light;
+    color-scheme: light dark;
 }
 
 .app {
@@ -10,6 +10,12 @@
     padding: 48px 8vw 64px;
 }
 
+.page {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
 .hero {
     display: flex;
     align-items: center;
@@ -62,6 +68,13 @@
     gap: 20px;
 }
 
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: auto;
+}
+
 .card {
     background: #fff;
     border-radius: 20px;
@@ -121,12 +134,20 @@
 }
 
 .link {
-    margin-top: auto;
     color: #4f46e5;
     font-weight: 600;
     text-decoration: none;
 }
 
+.ghost {
+    border: 1px solid #c7d2fe;
+    color: #4338ca;
+    padding: 8px 14px;
+    border-radius: 999px;
+    text-decoration: none;
+    font-weight: 600;
+}
+
 .state {
     background: #fff;
     border-radius: 16px;
@@ -146,6 +167,64 @@
     font-size: 0.9rem;
 }
 
+.detail-hero {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.detail-actions {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.detail-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+.detail-list {
+    display: grid;
+    gap: 12px;
+    margin: 16px 0;
+}
+
+.detail-list div {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    color: #64748b;
+}
+
+.detail-list strong {
+    color: inherit;
+}
+
+.list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    display: grid;
+    gap: 12px;
+}
+
+.list li {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    color: #64748b;
+}
+
+.list a {
+    color: #4f46e5;
+    text-decoration: none;
+    font-weight: 600;
+}
+
 @media (max-width: 600px) {
     .app {
         padding: 40px 6vw 56px;
@@ -154,4 +233,74 @@
     .hero {
         align-items: flex-start;
     }
+}
+
+@media (prefers-color-scheme: dark) {
+    .app {
+        background: radial-gradient(circle at top, #1e1b4b, #0b1120 50%);
+        color: #e2e8f0;
+    }
+
+    .subtitle {
+        color: #cbd5f5;
+    }
+
+    .card {
+        background: #0f172a;
+        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
+    }
+
+    .card p {
+        color: #cbd5f5;
+    }
+
+    .pill {
+        background: #312e81;
+        color: #e0e7ff;
+    }
+
+    .meta {
+        color: #94a3b8;
+    }
+
+    .topic {
+        background: #1e293b;
+        color: #cbd5f5;
+    }
+
+    .link {
+        color: #a5b4fc;
+    }
+
+    .ghost {
+        border-color: #4f46e5;
+        color: #e0e7ff;
+    }
+
+    .detail-list div {
+        color: #cbd5f5;
+    }
+
+    .list li {
+        color: #cbd5f5;
+    }
+
+    .list a {
+        color: #a5b4fc;
+    }
+
+    .state {
+        background: #0f172a;
+        color: #cbd5f5;
+        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.4);
+    }
+
+    .state.error {
+        background: #7f1d1d;
+        color: #fee2e2;
+    }
+
+    .footer {
+        color: #94a3b8;
+    }
 }

src/App.jsx

@@ -1,7 +1,8 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, Route, Routes, useParams } from "react-router-dom";
 import "./App.css";
 
-export default function App() {
+function Home() {
     const [plugins, setPlugins] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -28,10 +29,12 @@ export default function App() {
     }, []);
 
     return (
-        <div className="app">
+        <div className="page">
             <header className="hero">
                 <div>
                     <p className="eyebrow">WordPress plugin overzicht</p>
+                    <h1>Siti Plugin Repo</h1>
+                    <p className="subtitle">Al je publieke WordPress plugins op één plek.</p>
                 </div>
                 <a className="cta" href="https://github.com/SitiWeb" target="_blank" rel="noreferrer">
                     GitHub SitiWeb
@@ -44,30 +47,39 @@ export default function App() {
                 {!loading && !error && plugins.length === 0 && (
                     <div className="state">Geen repositories gevonden.</div>
                 )}
-                {plugins.map((plugin) => (
-                    <article className="card" key={plugin.fullName}>
-                        <div className="card-header">
-                            <h2>{plugin.name}</h2>
-                            <span className="pill">{plugin.fullName}</span>
-                        </div>
-                        <p>{plugin.description}</p>
-                        <div className="meta">
-                            <span>★ {plugin.stars}</span>
-                            <span>Forks {plugin.forks}</span>
-                            <span>Issues {plugin.issues}</span>
-                        </div>
-                        {plugin.topics.length > 0 && (
-                            <div className="topics">
-                                {plugin.topics.slice(0, 4).map((topic) => (
-                                    <span className="topic" key={topic}>{topic}</span>
-                                ))}
+                {plugins.map((plugin) => {
+                    const displayName = plugin.manifest?.plugin_name || plugin.name;
+                    const description = plugin.manifest?.description || plugin.description;
+                    return (
+                        <article className="card" key={plugin.fullName}>
+                            <div className="card-header">
+                                <h2>{displayName}</h2>
+                                <span className="pill">{plugin.fullName}</span>
                             </div>
-                        )}
-                        <a className="link" href={plugin.repoUrl} target="_blank" rel="noreferrer">
-                            Bekijk op GitHub →
-                        </a>
-                    </article>
-                ))}
+                            <p>{description}</p>
+                            <div className="meta">
+                                <span>★ {plugin.stars}</span>
+                                <span>Forks {plugin.forks}</span>
+                                <span>Issues {plugin.issues}</span>
+                            </div>
+                            {plugin.topics.length > 0 && (
+                                <div className="topics">
+                                    {plugin.topics.slice(0, 4).map((topic) => (
+                                        <span className="topic" key={topic}>{topic}</span>
+                                    ))}
+                                </div>
+                            )}
+                            <div className="actions">
+                                <Link className="link" to={`/plugin/${plugin.fullName}`}>
+                                    Bekijk details →
+                                </Link>
+                                <a className="ghost" href={plugin.repoUrl} target="_blank" rel="noreferrer">
+                                    GitHub
+                                </a>
+                            </div>
+                        </article>
+                    );
+                })}
             </section>
 
             <footer className="footer">
@@ -78,3 +90,133 @@ export default function App() {
         </div>
     );
 }
+
+function PluginDetail() {
+    const { owner, repo } = useParams();
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        async function loadDetail() {
+            try {
+                const response = await fetch(`/api/plugins/${owner}/${repo}`);
+                if (!response.ok) {
+                    throw new Error("Kon details niet laden");
+                }
+                const detail = await response.json();
+                setData(detail);
+            } catch (err) {
+                setError("Laden van plugin details is mislukt.");
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        loadDetail();
+    }, [owner, repo]);
+
+    const manifest = data?.manifest;
+    const displayName = manifest?.plugin_name || data?.name || repo;
+    const description = manifest?.description || data?.description;
+    const author = manifest?.author || "-";
+    const version = manifest?.version || "-";
+
+    const releases = useMemo(() => data?.releases || [], [data]);
+    const commits = useMemo(() => data?.commits || [], [data]);
+
+    return (
+        <div className="page">
+            <header className="detail-hero">
+                <div>
+                    <p className="eyebrow">Plugin details</p>
+                    <h1>{displayName}</h1>
+                    <p className="subtitle">{description}</p>
+                </div>
+                <div className="detail-actions">
+                    <Link className="ghost" to="/">← Terug</Link>
+                    {data?.repoUrl && (
+                        <a className="cta" href={data.repoUrl} target="_blank" rel="noreferrer">
+                            GitHub
+                        </a>
+                    )}
+                </div>
+            </header>
+
+            {loading && <div className="state">Bezig met laden…</div>}
+            {error && <div className="state error">{error}</div>}
+
+            {!loading && !error && data && (
+                <section className="detail-grid">
+                    <div className="card">
+                        <h2>Manifest</h2>
+                        <div className="detail-list">
+                            <div>
+                                <span>Naam</span>
+                                <strong>{displayName}</strong>
+                            </div>
+                            <div>
+                                <span>Versie</span>
+                                <strong>{version}</strong>
+                            </div>
+                            <div>
+                                <span>Auteur</span>
+                                <strong>{author}</strong>
+                            </div>
+                            <div>
+                                <span>Repository</span>
+                                <strong>{data.fullName}</strong>
+                            </div>
+                        </div>
+                        {manifest?.author_url && (
+                            <a className="link" href={manifest.author_url} target="_blank" rel="noreferrer">
+                                Auteur website →
+                            </a>
+                        )}
+                    </div>
+
+                    <div className="card">
+                        <h2>Releases</h2>
+                        {releases.length === 0 && <p>Geen releases gevonden.</p>}
+                        <ul className="list">
+                            {releases.map((release) => (
+                                <li key={release.tag}>
+                                    <a href={release.url} target="_blank" rel="noreferrer">
+                                        {release.name}
+                                    </a>
+                                    <span>{release.publishedAt ? new Date(release.publishedAt).toLocaleDateString("nl-NL") : "-"}</span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+
+                    <div className="card">
+                        <h2>Recente commits</h2>
+                        {commits.length === 0 && <p>Geen commits gevonden.</p>}
+                        <ul className="list">
+                            {commits.map((commit) => (
+                                <li key={commit.sha}>
+                                    <a href={commit.url} target="_blank" rel="noreferrer">
+                                        {commit.message?.split("\n")[0] || commit.sha.slice(0, 7)}
+                                    </a>
+                                    <span>{commit.author || "-"}</span>
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                </section>
+            )}
+        </div>
+    );
+}
+
+export default function App() {
+    return (
+        <div className="app">
+            <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/plugin/:owner/:repo" element={<PluginDetail />} />
+            </Routes>
+        </div>
+    );
+}

src/index.css

@@ -7,6 +7,12 @@ body {
     background: #ffffff;
 }
 
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #0b1120;
+    }
+}
+
 img {
     max-width: 100%;
     display: block;

src/main.jsx

@@ -1,10 +1,13 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App.jsx";
 import "./index.css";
 
 createRoot(document.getElementById("root")).render(
     <React.StrictMode>
-        <App />
+        <BrowserRouter>
+            <App />
+        </BrowserRouter>
     </React.StrictMode>
 );