Add preview template config and starter static site.

Includes .webklar-preview.json for automatic deployment to *.project.webklar.com via the Webklar preview webhook. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-21 12:07:38 +00:00
commit c21c4f5a14
4 changed files with 118 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+dist/
+out/
+build/
+.env
+.env.local
+.DS_Store
+*.log
--- a/.webklar-preview.json
+++ b/.webklar-preview.json
@@ -0,0 +1,7 @@
+{
+  "enabled": true,
+  "type": "static",
+  "branch": "main",
+  "displayName": "Webklar Preview Vorlage",
+  "subdomain": "webklar-preview-template"
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,60 @@
+# webklar-preview-template
+
+Vorlage fuer Kunden-Websites mit automatischer Preview unter `*.project.webklar.com`.
+
+## Preview aktivieren
+
+Dieses Repo enthaelt [`.webklar-preview.json`](.webklar-preview.json). Beim Push auf den konfigurierten Branch startet der Deploy:
+
+- URL: `https://project.webklar.com/webhook/gitea`
+- Vorschau: `https://<subdomain>.project.webklar.com`
+
+## Konfiguration (`.webklar-preview.json`)
+
+| Feld | Beschreibung |
+|------|----------------|
+| `enabled` | `true` = Preview-Deploy aktiv |
+| `type` | `static` (Dateien direkt) oder `node_build` (npm build) |
+| `branch` | Branch fuer Deploy, z. B. `main` |
+| `displayName` | Anzeigename im Kundenportal |
+| `subdomain` | Optional; Default = Repo-Name |
+
+**Keine Passwoerter** in dieser Datei.
+
+### Beispiel fuer statische Seite
+
+```json
+{
+  "enabled": true,
+  "type": "static",
+  "branch": "main",
+  "displayName": "Friseur Mueller",
+  "subdomain": "friseur-mueller"
+}
+```
+
+### Beispiel fuer Vite/React (Build)
+
+```json
+{
+  "enabled": true,
+  "type": "node_build",
+  "branch": "main",
+  "displayName": "Restaurant Demo",
+  "subdomain": "restaurant-demo"
+}
+```
+
+## Neues Projekt aus dieser Vorlage
+
+1. In Gitea: **Use this template** / Repository aus Template erstellen
+2. `displayName` und `subdomain` in `.webklar-preview.json` anpassen
+3. Website-Inhalt ersetzen (`index.html` oder eigenes Frontend)
+4. Push auf `main` <20> Webhook deployt automatisch
+5. Im Admin-Portal (`project.webklar.com`) Kunde dem Projekt zuweisen
+
+## Gitea-Webhook (einmalig pro Org/Repo)
+
+- **URL:** `https://project.webklar.com/webhook/gitea`
+- **Secret:** `GITEA_WEBHOOK_TOKEN` (Server-`.env`)
+- **Events:** Push
--- a/index.html
+++ b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Webklar Preview Vorlage</title>
+  <style>
+    :root { --bg: #0f1419; --card: #1a2332; --text: #e7ecf3; --accent: #3b82f6; }
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      margin: 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+    }
+    main {
+      max-width: 32rem;
+      background: var(--card);
+      border-radius: 12px;
+      padding: 2rem;
+      text-align: center;
+    }
+    h1 { color: var(--accent); margin-top: 0; }
+    p { line-height: 1.6; opacity: 0.9; }
+    code { background: #0f172a; padding: 0.15rem 0.4rem; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Webklar Preview Vorlage</h1>
+    <p>Dieses Repository ist als Preview-Projekt konfiguriert.</p>
+    <p>Nach dem Push wird die Vorschau unter<br>
+      <code>webklar-preview-template.project.webklar.com</code><br>
+      bereitgestellt (Login <20>ber <code>project.webklar.com</code>).</p>
+    <p>Passe <code>.webklar-preview.json</code> und diese Seite fuer dein Kundenprojekt an.</p>
+  </main>
+</body>
+</html>