nca-ai-cms-astro-plugin 1.0.17 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nca-ai-cms-astro-plugin",
-  "version": "1.0.17",
+  "version": "1.1.0",
   "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/api/db/upload.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import * as fs from 'fs/promises';
+
+const mockClose = vi.fn();
+const mockReconnect = vi.fn();
+
+vi.mock('astro:db', () => ({
+  db: {
+    $client: {
+      close: mockClose,
+      reconnect: mockReconnect,
+    },
+  },
+}));
+
+vi.mock('fs/promises', () => ({
+  writeFile: vi.fn().mockResolvedValue(undefined),
+  copyFile: vi.fn().mockResolvedValue(undefined),
+}));
+
+// SQLite file header
+const SQLITE_HEADER = Buffer.from('SQLite format 3\0');
+
+function createSqliteBuffer(size = 4096): Buffer {
+  const buf = Buffer.alloc(size);
+  SQLITE_HEADER.copy(buf);
+  return buf;
+}
+
+function createFormDataRequest(file: Buffer, fieldName = 'database'): Request {
+  const formData = new FormData();
+  formData.append(fieldName, new Blob([file]), 'test.db');
+  return new Request('http://localhost/api/db/upload', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+function createOctetStreamRequest(file: Buffer): Request {
+  return new Request('http://localhost/api/db/upload', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/octet-stream' },
+    body: file,
+  });
+}
+
+describe('DB Upload API', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    process.env.ASTRO_DATABASE_FILE = '.astro/content.db';
+  });
+
+  it('accepts a valid SQLite file via multipart/form-data', async () => {
+    const { POST } = await import('./upload.js');
+    const request = createFormDataRequest(createSqliteBuffer());
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(data.success).toBe(true);
+    expect(data.size).toBeGreaterThan(0);
+  });
+
+  it('accepts a valid SQLite file via application/octet-stream', async () => {
+    const { POST } = await import('./upload.js');
+    const request = createOctetStreamRequest(createSqliteBuffer());
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(data.success).toBe(true);
+  });
+
+  it('rejects non-SQLite files', async () => {
+    const { POST } = await import('./upload.js');
+    const badFile = Buffer.from('not a sqlite file');
+    const request = createFormDataRequest(badFile);
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(400);
+    expect(data.error).toContain('not a SQLite database');
+  });
+
+  it('rejects missing database field', async () => {
+    const { POST } = await import('./upload.js');
+    const formData = new FormData();
+    formData.append('wrongfield', new Blob([createSqliteBuffer()]), 'test.db');
+    const request = new Request('http://localhost/api/db/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(400);
+    expect(data.error).toContain('No database file');
+  });
+
+  it('rejects invalid content type', async () => {
+    const { POST } = await import('./upload.js');
+    const request = new Request('http://localhost/api/db/upload', {
+      method: 'POST',
+      headers: { 'Content-Type': 'text/plain' },
+      body: 'hello',
+    });
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(400);
+    expect(data.error).toContain('Invalid content type');
+  });
+
+  it('creates a backup before writing', async () => {
+    const { POST } = await import('./upload.js');
+    const request = createFormDataRequest(createSqliteBuffer());
+
+    await POST({ request } as any);
+
+    expect(fs.copyFile).toHaveBeenCalled();
+  });
+
+  it('reconnects the DB client after successful upload', async () => {
+    const { POST } = await import('./upload.js');
+    const request = createFormDataRequest(createSqliteBuffer());
+
+    await POST({ request } as any);
+
+    expect(mockClose).toHaveBeenCalledOnce();
+    expect(mockReconnect).toHaveBeenCalledOnce();
+  });
+
+  it('rejects oversized file via multipart/form-data', async () => {
+    const { POST } = await import('./upload.js');
+    const oversized = createSqliteBuffer(50 * 1024 * 1024 + 1);
+    const request = createFormDataRequest(oversized);
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(413);
+    expect(data.error).toContain('too large');
+  });
+
+  it('rejects oversized file via application/octet-stream', async () => {
+    const { POST } = await import('./upload.js');
+    const oversized = createSqliteBuffer(50 * 1024 * 1024 + 1);
+    const request = createOctetStreamRequest(oversized);
+
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(413);
+    expect(data.error).toContain('too large');
+  });
+
+  it('still succeeds if reconnect is not available', async () => {
+    const { POST } = await import('./upload.js');
+    mockClose.mockImplementation(() => { throw new Error('not available'); });
+
+    const request = createFormDataRequest(createSqliteBuffer());
+    const response = await POST({ request } as any);
+    const data = await response.json();
+
+    expect(response.status).toBe(200);
+    expect(data.success).toBe(true);
+  });
+});

package/src/api/db/upload.ts

@@ -2,6 +2,8 @@ import type { APIRoute } from 'astro';
 import * as fs from 'fs/promises';
 import * as path from 'path';
 import { jsonResponse, jsonError } from '../_utils';
+// @ts-ignore - resolved by Astro build pipeline
+import { db } from 'astro:db';
 
 const MAX_DB_SIZE = 50 * 1024 * 1024; // 50 MB
 
@@ -64,6 +66,17 @@ export const POST: APIRoute = async ({ request }) => {
 
     await fs.writeFile(dbPath, dbBuffer);
 
+    // Reconnect DB client to pick up the new file
+    try {
+      const client = (db as any).$client;
+      if (client?.close && client?.reconnect) {
+        await client.close();
+        await client.reconnect();
+      }
+    } catch {
+      // Reconnect not available — manual restart needed
+    }
+
     return jsonResponse({
       success: true,
       size: dbBuffer.length,

package/src/components/frontend/EditorToolbar.astro

@@ -0,0 +1,353 @@
+---
+interface Props {
+  isAuthenticated?: boolean;
+}
+
+const { isAuthenticated } = Astro.props;
+---
+
+{isAuthenticated && (
+  <div id="editor-toolbar">
+    <!-- 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>
+
+      <form id="editor-create-form">
+        <label for="editor-input-topic">Thema oder Keyword</label>
+        <input
+          type="text"
+          id="editor-input-topic"
+          name="input"
+          placeholder="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-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 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) {
+    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);
+
+    // Close on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && !panel.hidden) {
+        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 {
+        const res = await fetch('/api/articles/create', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            input,
+            notes: notesInput?.value.trim() || 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,307 @@
+---
+interface Props {
+  articleId: string;
+  markdown: string;
+  isAuthenticated?: boolean;
+}
+
+const { articleId, markdown, 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>
+
+    <!-- Markdown editor (hidden by default) -->
+    <div class="inline-editor-editing" hidden>
+      <textarea class="inline-editor-textarea">{markdown}</textarea>
+    </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-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-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 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');
+        textarea.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.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');
+      }
+    });
+
+    // Tab key inserts spaces in textarea
+    textarea.addEventListener('keydown', (e) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        textarea.value = textarea.value.substring(0, start) + '  ' + textarea.value.substring(end);
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }
+    });
+
+    // Ctrl+S to save in edit mode
+    textarea.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        if (mode === 'edit') {
+          applyBtn.click();
+        }
+      }
+    });
+  });
+</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/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,82 @@
+# 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
+- After writing the new SQLite file, the libsql client is closed and reconnected via `db.$client.close()` / `db.$client.reconnect()`
+- Close and reconnect calls are now properly awaited to prevent race conditions with async DB operations
+- Changes from uploaded database are immediately visible without node restart
+- Graceful fallback: if reconnect is not available, upload still succeeds (manual restart needed)
+
+## Tests: DB upload endpoint coverage
+- 10 tests covering upload endpoint — validation, backup, reconnect behavior, size limits
+- Added size limit rejection tests for both `multipart/form-data` and `application/octet-stream` content types
+- Tests verify 50 MB max file size is enforced with proper 413 status response
+
+---
+
 # v1.0.17
 
 ## Feature: Database download/upload via Editor UI