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.

package.json

@@ -13,7 +13,8 @@
     "dependencies": {
         "express": "^4.19.2",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.23.1"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^4.2.0",

server/index.js

@@ -35,45 +35,119 @@ function setCached(key, value) {
     cache.set(key, { value, expiresAt: Date.now() + CACHE_TTL_MS });
 }
 
-async function fetchRepo(ownerRepo) {
+async function fetchJson(url, cacheKey) {
-    const cached = getCached(ownerRepo);
+    const cached = getCached(cacheKey);
     if (cached) return cached;
 
-    const response = await fetch(`https://api.github.com/repos/${ownerRepo}`);
+    const response = await fetch(url, {
+        headers: {
+            Accept: "application/vnd.github+json",
+            "User-Agent": "siti-plugin-repo"
+        }
+    });
     if (!response.ok) {
-        throw new Error(`GitHub request failed for ${ownerRepo}`);
+        throw new Error(`GitHub request failed for ${url}`);
     }
     const data = await response.json();
+    setCached(cacheKey, data);
+    return data;
+}
+
+async function fetchRepo(ownerRepo) {
+    const cached = getCached(`repo:${ownerRepo}`);
+    if (cached) return cached;
+
+    const data = await fetchJson(`https://api.github.com/repos/${ownerRepo}`, `repo-raw:${ownerRepo}`);
     const mapped = {
         fullName: data.full_name,
         name: data.name,
         description: data.description,
         repoUrl: data.html_url,
+        defaultBranch: data.default_branch,
         stars: data.stargazers_count,
         forks: data.forks_count,
         issues: data.open_issues_count,
         updatedAt: data.updated_at,
         topics: data.topics || []
     };
-    setCached(ownerRepo, mapped);
+    setCached(`repo:${ownerRepo}`, mapped);
     return mapped;
 }
 
+async function fetchManifest(ownerRepo, defaultBranch) {
+    const cached = getCached(`manifest:${ownerRepo}`);
+    if (cached) return cached;
+
+    const branches = [defaultBranch, "main", "master"].filter(Boolean);
+    for (const branch of branches) {
+        const url = `https://raw.githubusercontent.com/${ownerRepo}/${branch}/manifest.json`;
+        const response = await fetch(url, {
+            headers: { "User-Agent": "siti-plugin-repo" }
+        });
+        if (response.ok) {
+            const manifest = await response.json();
+            setCached(`manifest:${ownerRepo}`, manifest);
+            return manifest;
+        }
+    }
+    return null;
+}
+
+async function fetchReleases(ownerRepo) {
+    const data = await fetchJson(
+        `https://api.github.com/repos/${ownerRepo}/releases?per_page=5`,
+        `releases:${ownerRepo}`
+    );
+    return Array.isArray(data)
+        ? data.map((release) => ({
+            tag: release.tag_name,
+            name: release.name || release.tag_name,
+            url: release.html_url,
+            publishedAt: release.published_at
+        }))
+        : [];
+}
+
+async function fetchCommits(ownerRepo) {
+    const data = await fetchJson(
+        `https://api.github.com/repos/${ownerRepo}/commits?per_page=5`,
+        `commits:${ownerRepo}`
+    );
+    return Array.isArray(data)
+        ? data.map((commit) => ({
+            sha: commit.sha,
+            message: commit.commit?.message,
+            author: commit.commit?.author?.name,
+            date: commit.commit?.author?.date,
+            url: commit.html_url
+        }))
+        : [];
+}
+
 app.get("/api/plugins", async (_req, res) => {
     try {
         const repos = await readRepos();
         const results = await Promise.all(
-            repos.map((repo) => fetchRepo(repo).catch(() => ({
+            repos.map(async (repo) => {
-                fullName: repo,
+                try {
-                name: repo.split("/")[1] || repo,
+                    const info = await fetchRepo(repo);
-                description: "Kon gegevens niet ophalen.",
+                    const manifest = await fetchManifest(repo, info.defaultBranch);
-                repoUrl: `https://github.com/${repo}`,
+                    return { ...info, manifest };
-                stars: 0,
+                } catch {
-                forks: 0,
+                    return {
-                issues: 0,
+                        fullName: repo,
-                updatedAt: null,
+                        name: repo.split("/")[1] || repo,
-                topics: []
+                        description: "Kon gegevens niet ophalen.",
-            })))
+                        repoUrl: `https://github.com/${repo}`,
+                        stars: 0,
+                        forks: 0,
+                        issues: 0,
+                        updatedAt: null,
+                        topics: [],
+                        manifest: null
+                    };
+                }
+            })
         );
 
         res.json({
@@ -86,6 +160,27 @@ app.get("/api/plugins", async (_req, res) => {
     }
 });
 
+app.get("/api/plugins/:owner/:repo", async (req, res) => {
+    const ownerRepo = `${req.params.owner}/${req.params.repo}`;
+    try {
+        const info = await fetchRepo(ownerRepo);
+        const [manifest, releases, commits] = await Promise.all([
+            fetchManifest(ownerRepo, info.defaultBranch).catch(() => null),
+            fetchReleases(ownerRepo).catch(() => []),
+            fetchCommits(ownerRepo).catch(() => [])
+        ]);
+
+        res.json({
+            ...info,
+            manifest,
+            releases,
+            commits
+        });
+    } catch (error) {
+        res.status(500).json({ error: "Kon plugin details niet laden." });
+    }
+});
+
 app.use(express.static(distDir));
 app.get("*", (_req, res) => {
     res.sendFile(path.join(distDir, "index.html"));

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) => (
+                {plugins.map((plugin) => {
-                    <article className="card" key={plugin.fullName}>
+                    const displayName = plugin.manifest?.plugin_name || plugin.name;
-                        <div className="card-header">
+                    const description = plugin.manifest?.description || plugin.description;
-                            <h2>{plugin.name}</h2>
+                    return (
-                            <span className="pill">{plugin.fullName}</span>
+                        <article className="card" key={plugin.fullName}>
-                        </div>
+                            <div className="card-header">
-                        <p>{plugin.description}</p>
+                                <h2>{displayName}</h2>
-                        <div className="meta">
+                                <span className="pill">{plugin.fullName}</span>
-                            <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>
-                        )}
+                            <p>{description}</p>
-                        <a className="link" href={plugin.repoUrl} target="_blank" rel="noreferrer">
+                            <div className="meta">
-                            Bekijk op GitHub →
+                                <span>★ {plugin.stars}</span>
-                        </a>
+                                <span>Forks {plugin.forks}</span>
-                    </article>
+                                <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>
 );