nca-ai-cms-astro-plugin 1.0.18 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nca-ai-cms-astro-plugin",
-  "version": "1.0.18",
+  "version": "1.1.1",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
@@ -12,7 +12,8 @@
     "./api/*": "./src/api/*",
     "./pages/*": "./src/pages/*",
     "./db/*": "./src/db/*",
-    "./middleware.ts": "./src/middleware.ts"
+    "./middleware.ts": "./src/middleware.ts",
+    "./components/frontend/*": "./src/components/frontend/*"
   },
   "scripts": {
     "test": "vitest run",

package/src/api/articles/create.ts

@@ -0,0 +1,103 @@
+import type { APIRoute } from 'astro';
+import { z } from 'zod';
+import { ContentGenerator } from '../../services/ContentGenerator';
+import { ImageGenerator } from '../../services/ImageGenerator';
+import { PromptService } from '../../services/PromptService';
+import { ArticleService } from '../../services/ArticleService';
+import { Article } from '../../domain/entities/Article';
+import { FileWriter } from '../../services/FileWriter';
+import { convertToWebP } from '../../services/ImageConverter';
+import { getEnvVariable } from '../../utils/envUtils';
+import { contentPath } from 'virtual:nca-ai-cms/config';
+import { jsonResponse, jsonError } from '../_utils';
+
+const CreateArticleSchema = z.object({
+  input: z.string().min(1, 'Thema ist erforderlich'),
+  notes: z.string().optional(),
+});
+
+// POST /api/articles/create - Generate content + image and save in one call
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    // CSRF: reject cross-origin requests
+    const origin = request.headers.get('origin');
+    const requestUrl = new URL(request.url);
+    if (origin && new URL(origin).origin !== requestUrl.origin) {
+      return jsonError('Forbidden', 403);
+    }
+
+    let body: unknown;
+    try {
+      body = await request.json();
+    } catch {
+      return jsonError('Invalid JSON', 400);
+    }
+
+    const parsed = CreateArticleSchema.safeParse(body);
+    if (!parsed.success) {
+      return jsonError(parsed.error.errors[0]?.message ?? 'Invalid request', 400);
+    }
+
+    const { input, notes } = parsed.data;
+    const isUrl = /^https?:\/\//.test(input);
+
+    // Build combined input with notes if provided
+    const combinedInput = notes ? `${input}\n\nHinweise: ${notes}` : input;
+
+    const apiKey = getEnvVariable('GOOGLE_GEMINI_API_KEY');
+    const promptService = new PromptService();
+    const generator = new ContentGenerator({ apiKey, promptService });
+
+    // Generate content
+    const article = isUrl
+      ? await generator.generateFromUrl(combinedInput)
+      : await generator.generateFromKeywords(combinedInput);
+
+    // Create article entity with image reference
+    const articleEntity = new Article({
+      title: article.title,
+      description: article.description,
+      content: article.content,
+      date: new Date(),
+      tags: article.tags,
+      image: './hero.webp',
+      contentPath,
+    });
+
+    // Save markdown file
+    const writer = new FileWriter();
+    await writer.write(articleEntity);
+
+    // Generate and save hero image
+    try {
+      const imageGenerator = new ImageGenerator({ apiKey });
+      const image = await imageGenerator.generate(article.title);
+
+      if (image.base64) {
+        const heroPath = `${articleEntity.folderPath}/hero.webp`;
+        await convertToWebP(image.base64, heroPath);
+
+        // Update frontmatter with imageAlt
+        const service = new ArticleService(contentPath);
+        await service.updateContent(articleEntity.slug.toString(), {
+          imageAlt: image.alt,
+        });
+      }
+    } catch (imageError) {
+      console.error('Image generation failed (article saved without image):', imageError);
+    }
+
+    // Build the slug path for redirect
+    const slugPath = `${articleEntity.year}/${articleEntity.month}/${articleEntity.slug.toString()}`;
+
+    return jsonResponse({
+      success: true,
+      slug: slugPath,
+      articleId: articleEntity.slug.toString(),
+      title: article.title,
+    });
+  } catch (error) {
+    console.error('Create article error:', error);
+    return jsonError(error);
+  }
+};

package/src/components/frontend/EditorToolbar.astro

@@ -0,0 +1,393 @@
+---
+interface Props {
+  isAuthenticated?: boolean;
+  currentPath?: string;
+}
+
+const { isAuthenticated, currentPath = '' } = Astro.props;
+
+// Extract context from current path for smart defaults
+// /services/gleitschleifen → "Gleitschleifen"
+// /services/laserreinigung → "Laserreinigung"
+let pageContext = '';
+const serviceMatch = currentPath.match(/^\/services\/([^/]+)/);
+if (serviceMatch) {
+  const slug = serviceMatch[1];
+  pageContext = slug.charAt(0).toUpperCase() + slug.slice(1).replace(/-/g, ' ');
+}
+---
+
+{isAuthenticated && (
+  <div id="editor-toolbar" data-page-context={pageContext}>
+    <!-- FAB Button -->
+    <button
+      id="editor-fab"
+      type="button"
+      aria-label="Neuen Artikel erstellen"
+      title="Neuen Artikel erstellen"
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+        <line x1="12" y1="5" x2="12" y2="19" />
+        <line x1="5" y1="12" x2="19" y2="12" />
+      </svg>
+    </button>
+
+    <!-- Panel -->
+    <div id="editor-panel" hidden>
+      <div class="editor-panel-header">
+        <h3>Neuer Artikel</h3>
+        <button type="button" id="editor-panel-close" aria-label="Schließen">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+
+      {pageContext && (
+        <div class="editor-context-badge">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+            <circle cx="12" cy="10" r="3" />
+          </svg>
+          <span>Kontext: {pageContext}</span>
+        </div>
+      )}
+
+      <form id="editor-create-form">
+        <label for="editor-input-topic">Thema oder Keyword</label>
+        <input
+          type="text"
+          id="editor-input-topic"
+          name="input"
+          placeholder={pageContext ? `z.B. ${pageContext} Kosten, ${pageContext} Vorteile` : 'z.B. Laserreinigung'}
+          required
+          autocomplete="off"
+        />
+
+        <details id="editor-details">
+          <summary>Zusätzliche Hinweise</summary>
+          <textarea
+            id="editor-input-notes"
+            name="notes"
+            rows="3"
+            placeholder="z.B. Fokus auf Kostenersparnis, Vergleich mit Sandstrahlen erwähnen"
+          ></textarea>
+        </details>
+
+        <div class="editor-panel-actions">
+          <button type="submit" id="editor-submit-btn">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+            </svg>
+            Generieren
+          </button>
+        </div>
+
+        <div id="editor-progress" hidden>
+          <div class="editor-progress-spinner"></div>
+          <span id="editor-progress-text">Artikel wird generiert...</span>
+        </div>
+
+        <div id="editor-error" hidden></div>
+      </form>
+    </div>
+  </div>
+)}
+
+<style>
+  #editor-toolbar {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 9999;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  #editor-fab {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: #1e293b;
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    transition: transform 0.2s, background 0.2s;
+  }
+
+  #editor-fab:hover {
+    background: #334155;
+    transform: scale(1.05);
+  }
+
+  #editor-fab.active {
+    transform: rotate(45deg);
+    background: #475569;
+  }
+
+  #editor-panel {
+    position: absolute;
+    bottom: 72px;
+    right: 0;
+    width: 360px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
+    border: 1px solid #e2e8f0;
+    overflow: hidden;
+  }
+
+  .editor-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .editor-panel-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .editor-panel-header button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #94a3b8;
+    padding: 4px;
+    border-radius: 4px;
+  }
+
+  .editor-panel-header button:hover {
+    color: #475569;
+    background: #f1f5f9;
+  }
+
+  .editor-context-badge {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 20px;
+    padding: 8px 12px;
+    background: #eff6ff;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #1d4ed8;
+    margin-top: 12px;
+  }
+
+  #editor-create-form {
+    padding: 20px;
+  }
+
+  #editor-create-form label {
+    display: block;
+    font-size: 13px;
+    font-weight: 500;
+    color: #475569;
+    margin-bottom: 6px;
+  }
+
+  #editor-create-form input,
+  #editor-create-form textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    font-size: 14px;
+    color: #1e293b;
+    background: #f8fafc;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+  }
+
+  #editor-create-form input:focus,
+  #editor-create-form textarea:focus {
+    outline: none;
+    border-color: #3b82f6;
+    background: white;
+  }
+
+  #editor-create-form textarea {
+    resize: vertical;
+    font-family: inherit;
+  }
+
+  #editor-details {
+    margin-top: 12px;
+  }
+
+  #editor-details summary {
+    font-size: 13px;
+    color: #64748b;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  #editor-details summary:hover {
+    color: #3b82f6;
+  }
+
+  #editor-details textarea {
+    margin-top: 8px;
+  }
+
+  .editor-panel-actions {
+    margin-top: 16px;
+  }
+
+  #editor-submit-btn {
+    width: 100%;
+    padding: 10px 16px;
+    background: #1e293b;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: background 0.2s;
+  }
+
+  #editor-submit-btn:hover {
+    background: #334155;
+  }
+
+  #editor-submit-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  #editor-progress {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 16px;
+    padding: 12px;
+    background: #f0f9ff;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #1e40af;
+  }
+
+  .editor-progress-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #bfdbfe;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+    animation: editor-spin 0.8s linear infinite;
+    flex-shrink: 0;
+  }
+
+  @keyframes editor-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  #editor-error {
+    margin-top: 12px;
+    padding: 10px 12px;
+    background: #fef2f2;
+    border-radius: 8px;
+    font-size: 13px;
+    color: #dc2626;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  @media (max-width: 480px) {
+    #editor-panel {
+      width: calc(100vw - 2rem);
+      right: -1rem;
+    }
+  }
+</style>
+
+<script>
+  const toolbar = document.getElementById('editor-toolbar') as HTMLElement;
+  const fab = document.getElementById('editor-fab') as HTMLButtonElement;
+  const panel = document.getElementById('editor-panel') as HTMLElement;
+  const closeBtn = document.getElementById('editor-panel-close') as HTMLButtonElement;
+  const form = document.getElementById('editor-create-form') as HTMLFormElement;
+  const submitBtn = document.getElementById('editor-submit-btn') as HTMLButtonElement;
+  const progress = document.getElementById('editor-progress') as HTMLElement;
+  const progressText = document.getElementById('editor-progress-text') as HTMLElement;
+  const errorDiv = document.getElementById('editor-error') as HTMLElement;
+  const topicInput = document.getElementById('editor-input-topic') as HTMLInputElement;
+  const notesInput = document.getElementById('editor-input-notes') as HTMLTextAreaElement;
+
+  if (fab && panel && toolbar) {
+    const pageContext = toolbar.dataset.pageContext || '';
+
+    const togglePanel = () => {
+      const isOpen = !panel.hidden;
+      panel.hidden = isOpen;
+      fab.classList.toggle('active', !isOpen);
+      if (!isOpen) {
+        topicInput?.focus();
+      }
+    };
+
+    fab.addEventListener('click', togglePanel);
+    closeBtn?.addEventListener('click', togglePanel);
+
+
+    form?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const input = topicInput.value.trim();
+      if (!input) return;
+
+      submitBtn.disabled = true;
+      errorDiv.hidden = true;
+      progress.hidden = false;
+      progressText.textContent = 'Artikel wird generiert...';
+
+      try {
+        // Auto-add page context to notes if on a service page
+        let notes = notesInput?.value.trim() || '';
+        if (pageContext && !input.toLowerCase().includes(pageContext.toLowerCase())) {
+          notes = notes
+            ? `Kontext: ${pageContext}. ${notes}`
+            : `Artikel im Kontext von ${pageContext}`;
+        }
+
+        const res = await fetch('/api/articles/create', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            input,
+            notes: notes || undefined,
+          }),
+        });
+
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({ error: 'Unbekannter Fehler' }));
+          throw new Error(data.error || `Fehler ${res.status}`);
+        }
+
+        const data = await res.json();
+        progressText.textContent = 'Weiterleitung...';
+        window.location.href = `/articles/${data.slug}`;
+      } catch (err) {
+        errorDiv.textContent = err instanceof Error ? err.message : 'Generierung fehlgeschlagen';
+        errorDiv.hidden = false;
+        progress.hidden = true;
+        submitBtn.disabled = false;
+      }
+    });
+  }
+</script>

package/src/components/frontend/InlineEditor.astro

@@ -0,0 +1,346 @@
+---
+interface Props {
+  articleId: string;
+  markdown: string;
+  title: string;
+  description: string;
+  isAuthenticated?: boolean;
+}
+
+const { articleId, markdown, title, description, isAuthenticated } = Astro.props;
+---
+
+<div class="inline-editor-wrapper" data-article-id={articleId} data-authenticated={isAuthenticated ? 'true' : 'false'}>
+  <div class="inline-editor-content">
+    {isAuthenticated && (
+      <div class="inline-editor-toolbar">
+        <button
+          type="button"
+          class="inline-edit-btn"
+          aria-label="Inhalt bearbeiten"
+          title="Inhalt bearbeiten"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="inline-regenerate-btn"
+          aria-label="Text neu generieren"
+          title="Text neu generieren"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M23 4v6h-6" />
+            <path d="M1 20v-6h6" />
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="inline-apply-btn"
+          hidden
+          aria-label="Änderungen übernehmen"
+          title="Speichern"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="inline-cancel-btn"
+          hidden
+          aria-label="Abbrechen"
+          title="Abbrechen"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      </div>
+    )}
+
+    <!-- Rendered content (slot) -->
+    <div class="inline-editor-rendered">
+      <slot />
+    </div>
+
+    <!-- Editing form (hidden by default) -->
+    <div class="inline-editor-editing" hidden>
+      <div class="inline-editor-field">
+        <label class="inline-editor-label">Titel</label>
+        <input type="text" class="inline-editor-title-input" value={title} />
+      </div>
+      <div class="inline-editor-field">
+        <label class="inline-editor-label">Beschreibung</label>
+        <textarea class="inline-editor-desc-input" rows="2">{description}</textarea>
+      </div>
+      <div class="inline-editor-field">
+        <label class="inline-editor-label">Inhalt (Markdown)</label>
+        <textarea class="inline-editor-textarea">{markdown}</textarea>
+      </div>
+    </div>
+
+    <!-- Regenerated preview (hidden by default) -->
+    <div class="inline-editor-preview" hidden></div>
+  </div>
+</div>
+
+<style>
+  .inline-editor-wrapper {
+    position: relative;
+  }
+
+  .inline-editor-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 12px;
+  }
+
+  .inline-editor-toolbar button {
+    padding: 6px;
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    background: #f8fafc;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s;
+  }
+
+  .inline-editor-toolbar button:hover {
+    background: #e2e8f0;
+    color: #334155;
+  }
+
+  .inline-edit-btn.active {
+    background: #3b82f6 !important;
+    color: white !important;
+    border-color: #3b82f6 !important;
+  }
+
+  .inline-apply-btn {
+    background: #dcfce7 !important;
+    color: #16a34a !important;
+    border-color: #bbf7d0 !important;
+  }
+
+  .inline-apply-btn:hover {
+    background: #bbf7d0 !important;
+  }
+
+  .inline-cancel-btn {
+    background: #fef2f2 !important;
+    color: #dc2626 !important;
+    border-color: #fecaca !important;
+  }
+
+  .inline-cancel-btn:hover {
+    background: #fecaca !important;
+  }
+
+  .inline-editor-field {
+    margin-bottom: 12px;
+  }
+
+  .inline-editor-label {
+    display: block;
+    font-size: 12px;
+    font-weight: 600;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+  }
+
+  .inline-editor-title-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #0f172a;
+    background: #fafbfc;
+    box-sizing: border-box;
+  }
+
+  .inline-editor-desc-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    font-size: 1rem;
+    color: #334155;
+    background: #fafbfc;
+    resize: vertical;
+    box-sizing: border-box;
+    font-family: inherit;
+    line-height: 1.5;
+  }
+
+  .inline-editor-textarea {
+    width: 100%;
+    min-height: 500px;
+    padding: 16px;
+    border: 2px solid #3b82f6;
+    border-radius: 8px;
+    font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    color: #1e293b;
+    background: #fafbfc;
+    resize: vertical;
+    box-sizing: border-box;
+    tab-size: 2;
+  }
+
+  .inline-editor-title-input:focus,
+  .inline-editor-desc-input:focus,
+  .inline-editor-textarea:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .loading svg {
+    animation: inline-spin 1s linear infinite;
+  }
+
+  @keyframes inline-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+</style>
+
+<script>
+  document.querySelectorAll('.inline-editor-wrapper').forEach((wrapper) => {
+    const el = wrapper as HTMLElement;
+    if (el.dataset.authenticated !== 'true') return;
+
+    const articleId = el.dataset.articleId!;
+    const editBtn = el.querySelector('.inline-edit-btn') as HTMLButtonElement;
+    const regenBtn = el.querySelector('.inline-regenerate-btn') as HTMLButtonElement;
+    const applyBtn = el.querySelector('.inline-apply-btn') as HTMLButtonElement;
+    const cancelBtn = el.querySelector('.inline-cancel-btn') as HTMLButtonElement;
+    const rendered = el.querySelector('.inline-editor-rendered') as HTMLElement;
+    const editing = el.querySelector('.inline-editor-editing') as HTMLElement;
+    const preview = el.querySelector('.inline-editor-preview') as HTMLElement;
+    const titleInput = el.querySelector('.inline-editor-title-input') as HTMLInputElement;
+    const descInput = el.querySelector('.inline-editor-desc-input') as HTMLTextAreaElement;
+    const textarea = el.querySelector('.inline-editor-textarea') as HTMLTextAreaElement;
+
+    type EditorMode = 'view' | 'edit' | 'preview';
+    let mode: EditorMode = 'view';
+    let previewData: { title?: string; description?: string; content?: string } | null = null;
+
+    const setMode = (newMode: EditorMode) => {
+      mode = newMode;
+      rendered.hidden = mode !== 'view';
+      editing.hidden = mode !== 'edit';
+      preview.hidden = mode !== 'preview';
+
+      editBtn.classList.toggle('active', mode === 'edit');
+      editBtn.hidden = mode === 'preview';
+      regenBtn.hidden = mode !== 'view';
+      applyBtn.hidden = mode === 'view';
+      cancelBtn.hidden = mode === 'view';
+    };
+
+    // Edit mode
+    editBtn.addEventListener('click', () => {
+      if (mode === 'edit') {
+        setMode('view');
+      } else {
+        setMode('edit');
+        titleInput.focus();
+      }
+    });
+
+    // Cancel
+    cancelBtn.addEventListener('click', () => {
+      setMode('view');
+      previewData = null;
+    });
+
+    // Save (from edit or preview mode)
+    applyBtn.addEventListener('click', async () => {
+      applyBtn.disabled = true;
+      applyBtn.classList.add('loading');
+
+      try {
+        const body: Record<string, string> = {};
+
+        if (mode === 'edit') {
+          body.title = titleInput.value.trim();
+          body.description = descInput.value.trim();
+          body.content = textarea.value;
+        } else if (mode === 'preview' && previewData) {
+          if (previewData.title) body.title = previewData.title;
+          if (previewData.description) body.description = previewData.description;
+          if (previewData.content) body.content = previewData.content;
+        }
+
+        const res = await fetch(`/api/articles/${articleId}/apply`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) throw new Error('Speichern fehlgeschlagen');
+        window.location.reload();
+      } catch {
+        alert('Speichern fehlgeschlagen');
+        applyBtn.disabled = false;
+        applyBtn.classList.remove('loading');
+      }
+    });
+
+    // Regenerate text
+    regenBtn.addEventListener('click', async () => {
+      regenBtn.disabled = true;
+      regenBtn.classList.add('loading');
+
+      try {
+        const res = await fetch(`/api/articles/${articleId}/regenerate-text`, {
+          method: 'POST',
+        });
+        if (!res.ok) throw new Error('Generierung fehlgeschlagen');
+
+        const data = await res.json();
+        previewData = { title: data.title, description: data.description, content: data.content };
+
+        // Show preview as raw markdown
+        preview.innerHTML = '';
+        const pre = document.createElement('pre');
+        pre.style.whiteSpace = 'pre-wrap';
+        pre.style.fontFamily = "'JetBrains Mono', ui-monospace, monospace";
+        pre.style.fontSize = '14px';
+        pre.style.lineHeight = '1.6';
+        pre.style.padding = '16px';
+        pre.style.background = '#f0fdf4';
+        pre.style.border = '2px solid #86efac';
+        pre.style.borderRadius = '8px';
+        pre.textContent = `# ${data.title}\n\n${data.description}\n\n${data.content}`;
+        preview.appendChild(pre);
+
+        setMode('preview');
+      } catch {
+        alert('Text-Generierung fehlgeschlagen');
+      } finally {
+        regenBtn.disabled = false;
+        regenBtn.classList.remove('loading');
+      }
+    });
+
+  });
+</script>

package/src/index.ts

@@ -116,6 +116,11 @@ export default function ncaAiCms(
           entrypoint: 'nca-ai-cms-astro-plugin/api/scheduler/[id].ts',
           prerender: false,
         });
+        injectRoute({
+          pattern: '/api/articles/create',
+          entrypoint: 'nca-ai-cms-astro-plugin/api/articles/create.ts',
+          prerender: false,
+        });
         injectRoute({
           pattern: '/api/articles/[id]',
           entrypoint: 'nca-ai-cms-astro-plugin/api/articles/[id].ts',

package/src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import EditorToolbar from '../components/frontend/EditorToolbar.astro';
+
 interface Props {
   title: string;
   description?: string;
@@ -1139,6 +1141,7 @@ const isAuthenticated = !!authCookie?.value;
         </div>
       </div>
     </footer>
+    <EditorToolbar isAuthenticated={isAuthenticated} currentPath={currentPath} />
     <script>
       const logoutBtn = document.querySelector('.logout-btn');
       logoutBtn?.addEventListener('click', async () => {

package/src/pages/articles/[...slug].astro

@@ -3,7 +3,7 @@ import Layout from '../../layouts/Layout.astro';
 import { renderMarkdown } from '../../utils/markdown';
 import { escapeJsonLd } from '../../utils/sanitize';
 import HeroImage from '../../components/frontend/HeroImage.astro';
-import ArticleHeader from '../../components/frontend/ArticleHeader.astro';
+import InlineEditor from '../../components/frontend/InlineEditor.astro';
 import SidebarCard from '../../components/frontend/SidebarCard.astro';
 import BackLink from '../../components/frontend/BackLink.astro';
 import { ArticleService } from '../../services/ArticleService';
@@ -28,8 +28,12 @@ if (!article) {
   return Astro.redirect('/');
 }
 
+// Fix escaped newlines and remove first H1 (already shown in header)
+const fixedContent = (article.content || '').replace(/\\n/g, '\n');
+const rawContent = fixedContent.replace(/^#\s+.+\n+/, '');
+
 // Render markdown to HTML
-const htmlContent = await renderMarkdown(article.content || '');
+const htmlContent = await renderMarkdown(rawContent);
 
 // Format the date nicely
 const formattedDate = article.date.toLocaleDateString('de-DE', {
@@ -68,18 +72,6 @@ const jsonLd = {
     set:html={escapeJsonLd(JSON.stringify(jsonLd))}
   />
   <article class="article-page">
-    <!-- Article Header -->
-    <div data-article-id={articleSlug}>
-      <ArticleHeader
-        category={article.tags[0]}
-        date={formattedDate}
-        datetime={article.date.toISOString()}
-        lede={article.description}
-        tags={article.tags}
-        animate={true}
-      />
-    </div>
-
     <!-- Hero Image -->
     {
       article.image && (
@@ -91,52 +83,37 @@ const jsonLd = {
       )
     }
 
-    <!-- Article Body -->
+    <!-- Article Content (header + body, all editable via InlineEditor) -->
     <div class="article-body">
-      <div class="content-column" data-article-id={articleSlug}>
-        {
-          isAuthenticated && (
-            <div class="content-actions">
-              <button
-                class="icon-btn regenerate-text-icon"
-                type="button"
-                aria-label="Text neu generieren"
-              >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <path d="M23 4v6h-6" />
-                  <path d="M1 20v-6h6" />
-                  <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-                </svg>
-              </button>
-              <button
-                class="apply-text-btn"
-                type="button"
-                hidden
-                aria-label="Speichern"
-              >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                >
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-              </button>
+      <div class="content-column">
+        <InlineEditor
+          articleId={articleSlug}
+          markdown={rawContent}
+          title={article.title}
+          description={article.description}
+          isAuthenticated={isAuthenticated}
+        >
+          <header class="article-header" data-animate>
+            <div class="article-meta">
+              {article.tags[0] && <span class="article-category">{article.tags[0]}</span>}
+              <time datetime={article.date.toISOString()}>
+                {formattedDate}
+              </time>
             </div>
-          )
-        }
-        <div class="article-content prose" set:html={htmlContent} />
-        <div class="content-preview prose" hidden></div>
+
+            <h1>{article.title}</h1>
+
+            <p class="article-lede">{article.description}</p>
+
+            {article.tags.length > 0 && (
+              <div class="article-tags">
+                {article.tags.map((tag: string) => <span class="tag">{tag}</span>)}
+              </div>
+            )}
+          </header>
+
+          <div class="article-content prose" set:html={htmlContent} />
+        </InlineEditor>
       </div>
 
       <!-- Sidebar -->
@@ -157,110 +134,6 @@ const jsonLd = {
 </Layout>
 
 <script>
-  const contentColumn = document.querySelector(
-    '.content-column'
-  ) as HTMLElement;
-  if (contentColumn) {
-    const articleId = contentColumn.dataset.articleId;
-    const regenerateBtn = contentColumn.querySelector(
-      '.regenerate-text-icon'
-    ) as HTMLButtonElement;
-    const contentDiv = contentColumn.querySelector(
-      '.article-content'
-    ) as HTMLElement;
-    const previewDiv = contentColumn.querySelector(
-      '.content-preview'
-    ) as HTMLElement;
-    const applyBtn = contentColumn.querySelector(
-      '.apply-text-btn'
-    ) as HTMLButtonElement;
-
-    let previewData: {
-      title: string;
-      description: string;
-      content: string;
-    } | null = null;
-
-    const buildPreviewDom = (
-      title: string,
-      description: string,
-      content: string
-    ) => {
-      const fragment = document.createDocumentFragment();
-
-      const h1 = document.createElement('h1');
-      h1.textContent = title;
-      fragment.appendChild(h1);
-
-      const p = document.createElement('p');
-      const em = document.createElement('em');
-      em.textContent = description;
-      p.appendChild(em);
-      fragment.appendChild(p);
-
-      const body = document.createElement('div');
-      body.textContent = content.replace(/^#\s+.+\n/, '');
-      body.style.whiteSpace = 'pre-wrap';
-      fragment.appendChild(body);
-
-      return fragment;
-    };
-
-    const showPreview = (fragment: DocumentFragment) => {
-      previewDiv.replaceChildren(fragment);
-      contentDiv.hidden = true;
-      previewDiv.hidden = false;
-      applyBtn.hidden = false;
-      regenerateBtn.hidden = true;
-    };
-
-    const generateText = async () => {
-      regenerateBtn.disabled = true;
-      regenerateBtn.classList.add('loading');
-      try {
-        const res = await fetch(`/api/articles/${articleId}/regenerate-text`, {
-          method: 'POST',
-        });
-        if (!res.ok) throw new Error('Generation failed');
-        const data = await res.json();
-        previewData = {
-          title: data.title,
-          description: data.description,
-          content: data.content,
-        };
-        showPreview(
-          buildPreviewDom(data.title, data.description, data.content)
-        );
-      } catch {
-        alert('Text-Generierung fehlgeschlagen');
-        regenerateBtn.disabled = false;
-        regenerateBtn.classList.remove('loading');
-      }
-    };
-
-    const applyChanges = async () => {
-      if (!previewData) return;
-      applyBtn.disabled = true;
-      applyBtn.classList.add('loading');
-      try {
-        const res = await fetch(`/api/articles/${articleId}/apply`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(previewData),
-        });
-        if (!res.ok) throw new Error('Save failed');
-        window.location.reload();
-      } catch {
-        alert('Speichern fehlgeschlagen');
-        applyBtn.disabled = false;
-        applyBtn.classList.remove('loading');
-      }
-    };
-
-    regenerateBtn?.addEventListener('click', generateText);
-    applyBtn?.addEventListener('click', applyChanges);
-  }
-
   document.querySelectorAll('.prose pre').forEach((pre) => {
     pre.setAttribute('tabindex', '0');
     pre.setAttribute('role', 'region');
@@ -279,50 +152,57 @@ const jsonLd = {
     padding: 0 var(--gutter);
   }
 
-  .article-body {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 280px;
-    gap: var(--space-16);
-    max-width: 1100px;
-  }
-
-  .content-column {
-    min-width: 0;
-    overflow: hidden;
+  .article-header {
+    margin-bottom: var(--space-8);
   }
 
-  .content-actions {
+  .article-meta {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--space-3);
     margin-bottom: var(--space-4);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
   }
 
-  .apply-text-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: var(--color-success, #4ade80);
-    border: none;
-    border-radius: var(--radius-md);
-    color: #000;
-    cursor: pointer;
-    transition: background 0.2s ease;
+  .article-category {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    color: var(--color-accent);
+  }
+
+  .article-header h1 {
+    font-size: var(--text-4xl);
+    font-weight: 800;
+    line-height: 1.15;
+    color: var(--color-text);
+    margin-bottom: var(--space-4);
   }
 
-  .apply-text-btn:hover {
-    background: #22c55e;
+  .article-lede {
+    font-size: var(--text-lg);
+    color: var(--color-text-muted);
+    line-height: 1.6;
+    margin-bottom: var(--space-6);
   }
 
-  .apply-text-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
+  .article-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
   }
 
-  .apply-text-btn.loading svg {
-    animation: spin 1s linear infinite;
+  .article-body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 280px;
+    gap: var(--space-16);
+    max-width: 1100px;
+  }
+
+  .content-column {
+    min-width: 0;
+    overflow: hidden;
   }
 
   .article-sidebar {

package/src/services/ArticleService.ts

@@ -27,6 +27,7 @@ export interface UpdateContentOptions {
   title?: string;
   description?: string;
   content?: string;
+  imageAlt?: string;
 }
 
 export class ArticleService {
@@ -147,6 +148,7 @@ export class ArticleService {
       ...data,
       ...(options.title && { title: options.title }),
       ...(options.description && { description: options.description }),
+      ...(options.imageAlt && { imageAlt: options.imageAlt }),
     };
 
     // Use new content or keep existing

package/update.md

@@ -1,3 +1,107 @@
+# v1.1.1
+
+## Enhancement: Inline editing for title + description, context-aware toolbar
+
+### InlineEditor: title and description editing
+- New `title` and `description` props (required)
+- Edit mode now shows three fields: title input, description textarea, markdown textarea
+- All three saved in one apply call to `/api/articles/{id}/apply`
+- Title field gets focus first when entering edit mode
+- Ctrl+S works from any field (not just markdown textarea)
+
+### EditorToolbar: page context awareness
+- New `currentPath` prop — detects service pages and extracts topic
+- On `/services/gleitschleifen`: shows "Kontext: Gleitschleifen" badge in panel
+- Placeholder adapts: "z.B. Gleitschleifen Kosten, Gleitschleifen Vorteile"
+- Context auto-added to generation notes when topic doesn't already include it
+- Article generated from a service page gets that service as context in the prompt
+
+### Integration update
+
+InlineEditor now requires `title` and `description`:
+```astro
+<InlineEditor
+  articleId={articleSlug}
+  markdown={rawContent}
+  title={article.title}
+  description={article.description}
+  isAuthenticated={isAuthenticated}
+>
+  <!-- header + content as slot -->
+</InlineEditor>
+```
+
+EditorToolbar now accepts `currentPath`:
+```astro
+<EditorToolbar isAuthenticated={isAuthenticated} currentPath={Astro.url.pathname} />
+```
+
+---
+
+# v1.1.0
+
+## Feature: Frontend editing — EditorToolbar, InlineEditor, create endpoint
+
+### New: `EditorToolbar.astro` component
+- Floating action button (FAB) in bottom-right corner, visible when authenticated
+- Click opens a compact panel with topic input + optional notes textarea
+- Submits to new `/api/articles/create` endpoint
+- Shows progress spinner during generation (~30-60s)
+- On success, redirects to the new article page
+- Responsive: full-width panel on mobile
+- Keyboard support: Escape to close
+
+### New: `InlineEditor.astro` component
+- Wraps article content with edit/regenerate controls when authenticated
+- Pencil button switches rendered HTML to a monospace markdown textarea
+- Regenerate button fetches new content via `/api/articles/{id}/regenerate-text` and shows preview
+- Apply button saves changes via `/api/articles/{id}/apply`
+- Cancel button reverts to rendered view
+- Keyboard support: Ctrl+S to save, Tab inserts spaces in textarea
+
+### New: `POST /api/articles/create` endpoint
+- Generates content + hero image and saves both in one call
+- Request: `{ input: string, notes?: string }`
+- Response: `{ success: true, slug: string, articleId: string, title: string }`
+- Notes are appended as "Hinweise" to the generation prompt
+- Image generation failure is non-fatal — article saves without image
+- Returns slug path for client-side redirect
+
+### Changed: `ArticleService.updateContent()` now supports `imageAlt`
+- `UpdateContentOptions` interface extended with optional `imageAlt` field
+- Frontmatter update includes imageAlt when provided
+
+### New export: `./components/frontend/*`
+- All frontend components (EditorToolbar, InlineEditor, HeroImage, etc.) are now importable
+
+### Integration in project
+
+In `Layout.astro`:
+```astro
+---
+import EditorToolbar from 'nca-ai-cms-astro-plugin/components/frontend/EditorToolbar.astro';
+const isAuthenticated = !!Astro.cookies.get('editor-auth')?.value;
+---
+<!-- before </body> -->
+<EditorToolbar isAuthenticated={isAuthenticated} />
+```
+
+In `articles/[...slug].astro`:
+```astro
+---
+import InlineEditor from 'nca-ai-cms-astro-plugin/components/frontend/InlineEditor.astro';
+import HeroImage from 'nca-ai-cms-astro-plugin/components/frontend/HeroImage.astro';
+---
+<HeroImage articleId={articleSlug} alt={article.imageAlt || article.title} isAuthenticated={isAuthenticated} />
+<InlineEditor articleId={articleSlug} markdown={rawContent} isAuthenticated={isAuthenticated}>
+  <div class="prose" set:html={htmlContent} />
+</InlineEditor>
+```
+
+Replace the custom regenerate buttons and scripts in the article page — the plugin components handle everything.
+
+---
+
 # v1.0.18
 
 ## Fix: DB upload reconnects client after file replacement