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.
This commit is contained in:
4713
package-lock.json
generated
4713
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||
|
||||
127
server/index.js
127
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) {
|
||||
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(() => ({
|
||||
fullName: repo,
|
||||
name: repo.split("/")[1] || repo,
|
||||
description: "Kon gegevens niet ophalen.",
|
||||
repoUrl: `https://github.com/${repo}`,
|
||||
stars: 0,
|
||||
forks: 0,
|
||||
issues: 0,
|
||||
updatedAt: null,
|
||||
topics: []
|
||||
})))
|
||||
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.",
|
||||
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"));
|
||||
|
||||
153
src/App.css
153
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;
|
||||
}
|
||||
}
|
||||
194
src/App.jsx
194
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,12 @@ body {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #0b1120;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user