first commit

2026-01-31 18:30:11 +00:00
commit b1d0c2183d
13 changed files with 2777 additions and 0 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+.dist
+.vite
+.git
+.gitignore
+npm-debug.log
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules
--- a/18
+++ b/18
@@ -0,0 +1,18 @@
+# Build stage
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Runtime stage
+FROM node:20-alpine
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package.json package-lock.json* ./
+RUN npm install --omit=dev
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/server ./server
+EXPOSE 3001
+CMD ["node", "server/index.js"]
--- a/index.html
+++ b/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="nl">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Siti Plugin Repo</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "siti-plugin-repo",
+    "private": true,
+    "version": "0.1.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "dev:server": "node server/index.js",
+        "build": "vite build",
+        "preview": "vite preview --host 0.0.0.0 --port 4173",
+        "start": "node server/index.js"
+    },
+    "dependencies": {
+        "express": "^4.19.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-react": "^4.2.0",
+        "vite": "^5.0.0"
+    }
+}
--- a/server/index.js
+++ b/server/index.js
@@ -0,0 +1,96 @@
+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import fs from "fs/promises";
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+const CACHE_TTL_MS = Number(process.env.CACHE_TTL_MS || 10 * 60 * 1000);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const rootDir = path.resolve(__dirname, "..");
+const distDir = path.join(rootDir, "dist");
+const reposFile = path.join(__dirname, "repos.json");
+
+const cache = new Map();
+
+async function readRepos() {
+    const content = await fs.readFile(reposFile, "utf-8");
+    const parsed = JSON.parse(content);
+    return Array.isArray(parsed) ? parsed : [];
+}
+
+function getCached(key) {
+    const entry = cache.get(key);
+    if (!entry) return null;
+    if (Date.now() > entry.expiresAt) {
+        cache.delete(key);
+        return null;
+    }
+    return entry.value;
+}
+
+function setCached(key, value) {
+    cache.set(key, { value, expiresAt: Date.now() + CACHE_TTL_MS });
+}
+
+async function fetchRepo(ownerRepo) {
+    const cached = getCached(ownerRepo);
+    if (cached) return cached;
+
+    const response = await fetch(`https://api.github.com/repos/${ownerRepo}`);
+    if (!response.ok) {
+        throw new Error(`GitHub request failed for ${ownerRepo}`);
+    }
+    const data = await response.json();
+    const mapped = {
+        fullName: data.full_name,
+        name: data.name,
+        description: data.description,
+        repoUrl: data.html_url,
+        stars: data.stargazers_count,
+        forks: data.forks_count,
+        issues: data.open_issues_count,
+        updatedAt: data.updated_at,
+        topics: data.topics || []
+    };
+    setCached(ownerRepo, mapped);
+    return mapped;
+}
+
+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: []
+            })))
+        );
+
+        res.json({
+            count: results.length,
+            updatedAt: new Date().toISOString(),
+            items: results
+        });
+    } catch (error) {
+        res.status(500).json({ error: "Kon plugins niet laden." });
+    }
+});
+
+app.use(express.static(distDir));
+app.get("*", (_req, res) => {
+    res.sendFile(path.join(distDir, "index.html"));
+});
+
+app.listen(PORT, () => {
+    console.log(`Server draait op http://localhost:${PORT}`);
+});
--- a/server/repos.json
+++ b/server/repos.json
@@ -0,0 +1,5 @@
+[
+    "SitiWeb/siti-ai-product-content-generator",
+    "SitiWeb/siti-stock-plugin",
+    "SitiWeb/SitiWeb-SelectCourier"
+]
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,157 @@
+:root {
+    color-scheme: light;
+}
+
+.app {
+    min-height: 100vh;
+    background: radial-gradient(circle at top, #f5f7ff, #ffffff 45%);
+    color: #0f172a;
+    font-family: "Inter", system-ui, sans-serif;
+    padding: 48px 8vw 64px;
+}
+
+.hero {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    margin-bottom: 48px;
+    flex-wrap: wrap;
+}
+
+.eyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    font-size: 12px;
+    color: #6366f1;
+    font-weight: 600;
+    margin: 0 0 8px;
+}
+
+.hero h1 {
+    font-size: clamp(2.4rem, 4vw, 3.4rem);
+    margin: 0 0 8px;
+}
+
+.subtitle {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #475569;
+    max-width: 520px;
+}
+
+.cta {
+    background: #4f46e5;
+    color: #fff;
+    padding: 12px 20px;
+    border-radius: 999px;
+    text-decoration: none;
+    font-weight: 600;
+    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.cta:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.3);
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 20px;
+}
+
+.card {
+    background: #fff;
+    border-radius: 20px;
+    padding: 24px;
+    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.card h2 {
+    margin: 0;
+    font-size: 1.3rem;
+}
+
+.card p {
+    margin: 0;
+    color: #475569;
+}
+
+.pill {
+    background: #eef2ff;
+    color: #4338ca;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+}
+
+.meta {
+    display: flex;
+    gap: 12px;
+    font-size: 0.9rem;
+    color: #64748b;
+}
+
+.topics {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.topic {
+    background: #f1f5f9;
+    color: #475569;
+    font-size: 0.75rem;
+    padding: 4px 8px;
+    border-radius: 999px;
+}
+
+.link {
+    margin-top: auto;
+    color: #4f46e5;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.state {
+    background: #fff;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
+    color: #475569;
+}
+
+.state.error {
+    background: #fee2e2;
+    color: #b91c1c;
+}
+
+.footer {
+    margin-top: 48px;
+    color: #94a3b8;
+    font-size: 0.9rem;
+}
+
+@media (max-width: 600px) {
+    .app {
+        padding: 40px 6vw 56px;
+    }
+
+    .hero {
+        align-items: flex-start;
+    }
+}
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from "react";
+import "./App.css";
+
+export default function App() {
+    const [plugins, setPlugins] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [lastSync, setLastSync] = useState(null);
+
+    useEffect(() => {
+        async function loadPlugins() {
+            try {
+                const response = await fetch("/api/plugins");
+                if (!response.ok) {
+                    throw new Error("Kon plugins niet laden");
+                }
+                const data = await response.json();
+                setPlugins(data.items || []);
+                setLastSync(data.updatedAt);
+            } catch (err) {
+                setError("Laden van GitHub data is mislukt.");
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        loadPlugins();
+    }, []);
+
+    return (
+        <div className="app">
+            <header className="hero">
+                <div>
+                    <p className="eyebrow">WordPress plugin overzicht</p>
+                </div>
+                <a className="cta" href="https://github.com/SitiWeb" target="_blank" rel="noreferrer">
+                    GitHub SitiWeb
+                </a>
+            </header>
+
+            <section className="grid">
+                {loading && <div className="state">Bezig met laden…</div>}
+                {error && <div className="state error">{error}</div>}
+                {!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>
+                                ))}
+                            </div>
+                        )}
+                        <a className="link" href={plugin.repoUrl} target="_blank" rel="noreferrer">
+                            Bekijk op GitHub →
+                        </a>
+                    </article>
+                ))}
+            </section>
+
+            <footer className="footer">
+                <span>
+                    Laatste sync: {lastSync ? new Date(lastSync).toLocaleString("nl-NL") : "-"}
+                </span>
+            </footer>
+        </div>
+    );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,13 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background: #ffffff;
+}
+
+img {
+    max-width: 100%;
+    display: block;
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        proxy: {
+            "/api": "http://localhost:3001"
+        }
+    }
+});