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.
2026-01-31 19:48:44 +00:00
parent 561f7fb5f2
commit 81d1d0910c
7 changed files with 2818 additions and 2383 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,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",
@@ -693,6 +694,14 @@
                "@jridgewell/sourcemap-codec": "^1.4.14"
            }
        },
+        "node_modules/@remix-run/router": {
+            "version": "1.23.2",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+            "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
        "node_modules/@rolldown/pluginutils": {
            "version": "1.0.0-beta.27",
            "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -1975,6 +1984,36 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/react-router": {
+            "version": "6.30.3",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+            "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+            "dependencies": {
+                "@remix-run/router": "1.23.2"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
+        "node_modules/react-router-dom": {
+            "version": "6.30.3",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+            "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+            "dependencies": {
+                "@remix-run/router": "1.23.2",
+                "react-router": "6.30.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
        "node_modules/rollup": {
            "version": "4.57.1",
            "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
--- a/package.json
+++ b/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",
--- a/server/index.js
+++ b/server/index.js
@@ -35,35 +35,106 @@ function setCached(key, value) {
    cache.set(key, { value, expiresAt: Date.now() + CACHE_TTL_MS });
 }

-async function fetchRepo(ownerRepo) {
-    const cached = getCached(ownerRepo);
+async function fetchJson(url, cacheKey) {
+    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) => {
+                try {
+                    const info = await fetchRepo(repo);
+                    const manifest = await fetchManifest(repo, info.defaultBranch);
+                    return { ...info, manifest };
+                } catch {
+                    return {
                        fullName: repo,
                        name: repo.split("/")[1] || repo,
                        description: "Kon gegevens niet ophalen.",
@@ -72,8 +143,11 @@ app.get("/api/plugins", async (_req, res) => {
                        forks: 0,
                        issues: 0,
                        updatedAt: null,
-                topics: []
-            })))
+                        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"));
--- a/src/App.css
+++ b/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;
@@ -155,3 +234,73 @@
        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;
+    }
+}
--- a/src/App.jsx
+++ b/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,13 +47,16 @@ export default function App() {
                {!loading && !error && plugins.length === 0 && (
                    <div className="state">Geen repositories gevonden.</div>
                )}
-                {plugins.map((plugin) => (
+                {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>{plugin.name}</h2>
+                                <h2>{displayName}</h2>
                                <span className="pill">{plugin.fullName}</span>
                            </div>
-                        <p>{plugin.description}</p>
+                            <p>{description}</p>
                            <div className="meta">
                                <span>★ {plugin.stars}</span>
                                <span>Forks {plugin.forks}</span>
@@ -63,11 +69,17 @@ export default function App() {
                                    ))}
                                </div>
                            )}
-                        <a className="link" href={plugin.repoUrl} target="_blank" rel="noreferrer">
-                            Bekijk op GitHub →
+                            <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>
+    );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -7,6 +7,12 @@ body {
    background: #ffffff;
 }

+@media (prefers-color-scheme: dark) {
+    body {
+        background: #0b1120;
+    }
+}
+
 img {
    max-width: 100%;
    display: block;
--- a/src/main.jsx
+++ b/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>
+        <BrowserRouter>
            <App />
+        </BrowserRouter>
    </React.StrictMode>
 );