feat(cms): add maintained user guide with Súgó menu entry

- docs/felhasznaloi-utmutato.md: user guide for the website and the CMS (login, editing, arrays, save/validation, publish, security) - /guide endpoint renders the markdown auth-protected via a dependency-free renderer (scripts/markdown-render.js) in the CMS dark theme - new ❓ Súgó entry in the CMS bottom bar - steering rule: the guide must be updated in the same commit as any CMS or website feature change Closes MITHOME-57
2026-08-18 13:20:44 +02:00
parent 8be8c2b552
commit 1d3abc8cba
6 changed files with 363 additions and 2 deletions
@@ -14,12 +14,14 @@ const path = require('path');
 const { exec } = require('child_process');
 const crypto = require('crypto');
 const { validateContent } = require('./proto/src/content/schema');
+const { renderMarkdown } = require('./scripts/markdown-render');

 const PORT = Number(process.env.CONTENT_EDITOR_PORT) || 4001;
 const CONTENT_DIR = path.join(__dirname, 'proto', 'src', 'content');
 const BACKUP_DIR = path.join(__dirname, '.content-backups');
 const MAX_REQUEST_BODY_BYTES = 256 * 1024;
 const AUDIT_LOG_FILE = process.env.CONTENT_EDITOR_AUDIT_FILE || path.join(__dirname, '.content-editor-audit.jsonl');
+const GUIDE_FILE = process.env.CONTENT_EDITOR_GUIDE_FILE || path.join(__dirname, 'docs', 'felhasznaloi-utmutato.md');
 const RATE_LIMIT_WINDOW_MS = 15 * 60 * 1000;
 const AUTH_MAX_ATTEMPTS = 5;
 const PUBLISH_MAX_ATTEMPTS = 3;
@@ -151,6 +153,7 @@ ${message ? `<div class="toast ${message.type === 'ok' ? 'ok' : 'err'}">${messag
  <button class="btn-publish" onclick="publish()" id="publishBtn">🚀 Publikálás & ${CMS_DEPLOY_ENV === 'staging' ? 'Staging deploy' : 'Élesítés'}</button>
  <span class="save-status" id="saveStatus"></span>
  <a href="${CMS_DEPLOY_ENV === 'staging' ? 'https://stage.mozdit.hu' : 'http://localhost:3000'}" target="_blank" class="preview-link">🔗 Előnézet →</a>
+  <a href="/guide" target="_blank" class="preview-link">❓ Súgó</a>
  <button class="btn-logout" onclick="logout()">🚪 Kilépés</button>
 </div>

@@ -458,8 +461,51 @@ render(DATA, document.getElementById('editor'));

 // Auto-dismiss toast
 const toast = document.querySelector('.toast');
-if (toast) setTimeout(() => toast.remove(), 3500);
-</script>
+ if (toast) setTimeout(() => toast.remove(), 3500);
+ </script>
+</body>
+</html>`;
+
+// User guide page — renders docs/felhasznaloi-utmutato.md with the shared dark theme.
+const GUIDE_PAGE = (contentHtml) => `<!DOCTYPE html>
+<html lang="hu">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>mozdIT — Felhasználói útmutató</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f1117; color: #e2e8f0; line-height: 1.65; padding-bottom: 64px; }
+    header { background: linear-gradient(135deg,#1a1f2e,#252d40); border-bottom: 1px solid #2d3748; padding: 14px 32px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
+    header h1 { font-size: 17px; font-weight: 700; background: linear-gradient(135deg,#60a5fa,#a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+    header a { color: #94a3b8; text-decoration: none; font-size: 14px; margin-left: auto; }
+    header a:hover { color: #e2e8f0; }
+    main { max-width: 760px; margin: 0 auto; padding: 32px 24px; }
+    h1 { font-size: 24px; margin: 16px 0 12px; color: #f1f5f9; }
+    h2 { font-size: 20px; margin: 28px 0 10px; color: #93c5fd; border-bottom: 1px solid #2d3748; padding-bottom: 6px; }
+    h3 { font-size: 16px; margin: 20px 0 8px; color: #c4b5fd; }
+    h4 { font-size: 14px; margin: 16px 0 6px; color: #c4b5fd; }
+    p { margin: 8px 0; }
+    ul, ol { margin: 8px 0 8px 22px; }
+    li { margin: 4px 0; }
+    a { color: #7dd3fc; }
+    code { background: #1e293b; border-radius: 4px; padding: 1px 6px; font-size: 0.9em; color: #fbbf24; }
+    pre { background: #1e293b; border: 1px solid #2d3748; border-radius: 8px; padding: 12px 16px; overflow-x: auto; margin: 12px 0; }
+    pre code { background: none; padding: 0; color: #e2e8f0; }
+    hr { border: none; border-top: 1px solid #2d3748; margin: 24px 0; }
+  </style>
+</head>
+<body>
+
+<header>
+  <h1>mozdIT — Felhasználói útmutató</h1>
+  <a href="/">← Vissza a szerkesztőhöz</a>
+</header>
+
+<main>
+${contentHtml}
+</main>
+
 </body>
 </html>`;

@@ -572,6 +618,19 @@ const server = http.createServer(async (req, res) => {
    return;
  }

+  // GET /guide — user guide rendered from the maintained markdown in the repo.
+  if (req.method === 'GET' && u.pathname === '/guide') {
+    let contentHtml;
+    try {
+      contentHtml = renderMarkdown(fs.readFileSync(GUIDE_FILE, 'utf8'));
+    } catch (error) {
+      contentHtml = '<p>Az útmutató jelenleg nem elérhető. Kérlek, szólj a fejlesztőnek.</p>';
+    }
+    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+    res.end(GUIDE_PAGE(contentHtml));
+    return;
+  }
+
  // POST /save — JSON body
  if (req.method === 'POST' && u.pathname === '/save') {
    let body = '';