nca-ai-cms-astro-plugin 1.0.4 → 1.0.6

package/README.md

@@ -16,13 +16,14 @@ An Astro plugin that adds an AI-powered content editor to your site. Generate ar
 ### 1. Install
 
 ```bash
-npm install nca-ai-cms-astro-plugin
+npm install nca-ai-cms-astro-plugin @astrojs/node @astrojs/react @astrojs/db react react-dom @google/genai @google/generative-ai gray-matter marked sanitize-html sharp turndown zod
 ```
 
 ### 2. Add to your Astro config
 
-```ts
+```js
 // astro.config.mjs
+import { defineConfig } from 'astro/config';
 import ncaAiCms from 'nca-ai-cms-astro-plugin';
 
 export default defineConfig({
@@ -30,24 +31,36 @@ export default defineConfig({
 });
 ```
 
-### 3. Environment variables
+The plugin auto-registers `react()`, `db()`, `output: 'server'`, and the `@astrojs/node` adapter. You can still set them manually if you need custom options.
+
+### 3. Create `.env.local`
 
 ```env
+EDITOR_ADMIN=admin
+EDITOR_PASSWORD=your-secure-password
 GOOGLE_GEMINI_API_KEY=your-gemini-api-key
-EDITOR_ADMIN=your-username
-EDITOR_PASSWORD=your-password
 ```
 
-| Variable | Required | Description |
+| Variable | Required | Purpose |
 |---|---|---|
+| `EDITOR_ADMIN` | Yes | Login username for the editor |
+| `EDITOR_PASSWORD` | Yes | Login password for the editor |
 | `GOOGLE_GEMINI_API_KEY` | Yes | Google Gemini API key for content and image generation |
-| `EDITOR_ADMIN` | Yes | Username for editor login |
-| `EDITOR_PASSWORD` | Yes | Password for editor login |
 
-### 4. Requirements
+Add `.env.local` to your `.gitignore` — never commit secrets.
+
+### 4. Start the dev server
+
+```bash
+npx astro dev
+```
+
+- Login: http://localhost:4321/login
+- Editor: http://localhost:4321/editor (redirects to login if not authenticated)
+
+### Requirements
 
 - Astro 5+
-- `@astrojs/db` and `@astrojs/react` integrations
 - Node.js 18+
 
 ## Options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nca-ai-cms-astro-plugin",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",

package/src/api/prompts.ts

@@ -22,24 +22,50 @@ export const GET: APIRoute = async () => {
   }
 };
 
-// POST /api/prompts - Update a prompt or setting
+// POST /api/prompts - Create or update a prompt or setting
 export const POST: APIRoute = async ({ request }) => {
   try {
     const data = await request.json();
 
+    // Create a new prompt
+    if (data.action === 'create' && data.name && data.category && data.promptText) {
+      const id = `${data.category}_${Date.now()}`;
+      await service.createPrompt(id, data.name, data.category, data.promptText);
+      return jsonResponse({ success: true, type: 'prompt', id });
+    }
+
+    // Update an existing prompt
     if (data.type === 'prompt' && data.id && data.promptText !== undefined) {
       await service.updatePrompt(data.id, data.promptText);
       return jsonResponse({ success: true, type: 'prompt', id: data.id });
     }
 
+    // Update a setting
     if (data.type === 'setting' && data.key && data.value !== undefined) {
       await service.updateSetting(data.key, data.value);
       return jsonResponse({ success: true, type: 'setting', key: data.key });
     }
 
-    return jsonError('Invalid request: missing type, id/key, or value', 400);
+    return jsonError('Invalid request: missing required fields', 400);
   } catch (error) {
     console.error('Update prompt error:', error);
     return jsonError(error);
   }
 };
+
+// DELETE /api/prompts - Delete a prompt
+export const DELETE: APIRoute = async ({ request }) => {
+  try {
+    const data = await request.json();
+
+    if (!data.id) {
+      return jsonError('Missing prompt id', 400);
+    }
+
+    await service.deletePrompt(data.id);
+    return jsonResponse({ success: true, id: data.id });
+  } catch (error) {
+    console.error('Delete prompt error:', error);
+    return jsonError(error);
+  }
+};

package/src/components/editor/SettingsTab.tsx

@@ -10,11 +10,44 @@ const SUB_TABS: { key: SettingsSubTab; label: string }[] = [
   { key: 'website', label: 'Website' },
 ];
 
+const CATEGORY_GUIDES: Record<SettingsSubTab, { title: string; description: string; example: string }> = {
+  'homepage': {
+    title: 'Homepage-Einstellungen',
+    description: 'Definiere hier Prompts, die das Erscheinungsbild und den Inhalt deiner Startseite steuern. Gute Prompts beschreiben Zielgruppe, Tonalitaet und zentrale Botschaft.',
+    example: 'Beispiel: "Schreibe einen Hero-Text fuer eine Webdesign-Agentur. Zielgruppe: KMU in Deutschland. Ton: professionell, nahbar. Kernbotschaft: Barrierefreies Webdesign als Wettbewerbsvorteil."',
+  },
+  'content-ai': {
+    title: 'Content-KI Prompts',
+    description: 'Steuere hier, wie die KI Blogartikel und Texte generiert. Je praeziser der Prompt, desto besser das Ergebnis. Definiere Schreibstil, SEO-Keywords und inhaltliche Schwerpunkte.',
+    example: 'Beispiel: "Schreibe einen Fachartikel mit 800-1200 Woertern. Verwende die Keywords [KEYWORD] natuerlich im Text. Struktur: Einleitung mit Hook, 3-4 Abschnitte mit H2, Fazit mit CTA. Ton: fachlich aber verstaendlich."',
+  },
+  'analysis-ai': {
+    title: 'Analyse-KI Prompts',
+    description: 'Konfiguriere Prompts fuer die inhaltliche Analyse bestehender Texte. Die KI kann Texte auf SEO, Lesbarkeit, Barrierefreiheit und Content-Qualitaet pruefen.',
+    example: 'Beispiel: "Analysiere den Text auf SEO-Optimierung. Pruefe: Keyword-Dichte, Meta-Beschreibung, Ueberschriften-Hierarchie, interne Verlinkung. Gib konkrete Verbesserungsvorschlaege."',
+  },
+  'image-ai': {
+    title: 'Bild-KI Prompts',
+    description: 'Definiere Prompts fuer die KI-Bildgenerierung. Beschreibe Stil, Farbpalette und Bildkomposition fuer konsistente visuelle Inhalte.',
+    example: 'Beispiel: "Erstelle ein Blog-Header-Bild im minimalistischen Flat-Design. Farbpalette: Dunkelblau (#1a365d), Weiss, Akzent-Rot (#e63946). Kein Text im Bild. Seitenverhaeltnis 16:9."',
+  },
+  'website': {
+    title: 'Website-Einstellungen',
+    description: 'Allgemeine Einstellungen fuer deine Website: CTA-Texte, Standard-Tags, Markenrichtlinien und wiederkehrende Textbausteine.',
+    example: 'Beispiel: "Standard-CTA: Jetzt kostenlos beraten lassen. Core-Tags: Barrierefreiheit, Webdesign, SEO, WCAG. Markensprache: Sie-Anrede, professionell, loesungsorientiert."',
+  },
+};
+
 interface EditState {
   id: string;
   value: string;
 }
 
+interface AddFormState {
+  name: string;
+  promptText: string;
+}
+
 export function SettingsTab() {
   const [activeSubTab, setActiveSubTab] =
     useState<SettingsSubTab>('homepage');
@@ -23,6 +56,9 @@ export function SettingsTab() {
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<EditState | null>(null);
   const [saving, setSaving] = useState(false);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [addForm, setAddForm] = useState<AddFormState>({ name: '', promptText: '' });
+  const [deleting, setDeleting] = useState<string | null>(null);
 
   const loadPrompts = useCallback(async () => {
     setLoading(true);
@@ -30,8 +66,8 @@ export function SettingsTab() {
     try {
       const res = await fetch('/api/prompts');
       if (!res.ok) throw new Error('Fehler beim Laden der Einstellungen');
-      const data = (await res.json()) as Prompt[];
-      setPrompts(data);
+      const data = await res.json();
+      setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
     } catch (err) {
       setError(
         err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten',
@@ -86,6 +122,57 @@ export function SettingsTab() {
     }
   };
 
+  const handleAdd = async () => {
+    if (!addForm.name.trim() || !addForm.promptText.trim()) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/prompts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          action: 'create',
+          name: addForm.name,
+          category: activeSubTab,
+          promptText: addForm.promptText,
+        }),
+      });
+      if (!res.ok) throw new Error('Fehler beim Erstellen');
+      setAddForm({ name: '', promptText: '' });
+      setShowAddForm(false);
+      await loadPrompts();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Fehler beim Erstellen',
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    setDeleting(id);
+    setError(null);
+    try {
+      const res = await fetch('/api/prompts', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id }),
+      });
+      if (!res.ok) throw new Error('Fehler beim Loeschen');
+      setPrompts((prev) => prev.filter((p) => p.id !== id));
+      if (editing?.id === id) setEditing(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Fehler beim Loeschen',
+      );
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  const guide = CATEGORY_GUIDES[activeSubTab];
+
   return (
     <div style={styles.settingsContent}>
       <div style={styles.subTabNav} role="tablist">
@@ -103,6 +190,7 @@ export function SettingsTab() {
             onClick={() => {
               setActiveSubTab(tab.key);
               setEditing(null);
+              setShowAddForm(false);
             }}
           >
             {tab.label}
@@ -116,9 +204,11 @@ export function SettingsTab() {
 
       {error && <div style={styles.error}>{error}</div>}
 
-      {!loading && filteredPrompts.length === 0 && (
-        <div style={styles.emptyState}>
-          Keine Einstellungen in dieser Kategorie.
+      {!loading && filteredPrompts.length === 0 && !showAddForm && (
+        <div style={styles.emptyGuide}>
+          <div style={styles.emptyGuideTitle}>{guide.title}</div>
+          <div style={styles.emptyGuideText}>{guide.description}</div>
+          <div style={styles.emptyGuideExample}>{guide.example}</div>
         </div>
       )}
 
@@ -165,7 +255,7 @@ export function SettingsTab() {
                   <div style={styles.settingsItemValue}>
                     {prompt.promptText}
                   </div>
-                  <div style={{ padding: '0 1rem 1rem' }}>
+                  <div style={{ padding: '0 1rem 1rem', display: 'flex', gap: '0.5rem' }}>
                     <button
                       type="button"
                       style={styles.editButton}
@@ -173,6 +263,14 @@ export function SettingsTab() {
                     >
                       Bearbeiten
                     </button>
+                    <button
+                      type="button"
+                      style={styles.deleteButton}
+                      onClick={() => handleDelete(prompt.id)}
+                      disabled={deleting === prompt.id}
+                    >
+                      {deleting === prompt.id ? 'Loesche...' : 'Loeschen'}
+                    </button>
                   </div>
                 </>
               )}
@@ -180,6 +278,63 @@ export function SettingsTab() {
           ))}
         </div>
       )}
+
+      {!loading && showAddForm && (
+        <div style={styles.addForm}>
+          <div style={styles.addFormTitle}>Neuen Prompt hinzufuegen ({guide.title})</div>
+          <div style={styles.addFormField}>
+            <label style={styles.addFormLabel}>Name</label>
+            <input
+              style={styles.addFormInput}
+              type="text"
+              placeholder="z.B. Blog-Artikel Prompt, SEO-Analyse, Hero-Text"
+              value={addForm.name}
+              onChange={(e) => setAddForm({ ...addForm, name: e.target.value })}
+            />
+          </div>
+          <div style={styles.addFormField}>
+            <label style={styles.addFormLabel}>Prompt-Text</label>
+            <textarea
+              style={styles.textarea}
+              placeholder={guide.example}
+              value={addForm.promptText}
+              onChange={(e) => setAddForm({ ...addForm, promptText: e.target.value })}
+            />
+          </div>
+          <div style={styles.editButtons}>
+            <button
+              type="button"
+              style={styles.addButton}
+              onClick={handleAdd}
+              disabled={saving || !addForm.name.trim() || !addForm.promptText.trim()}
+            >
+              {saving ? 'Erstelle...' : 'Erstellen'}
+            </button>
+            <button
+              type="button"
+              style={styles.cancelButton}
+              onClick={() => {
+                setShowAddForm(false);
+                setAddForm({ name: '', promptText: '' });
+              }}
+            >
+              Abbrechen
+            </button>
+          </div>
+        </div>
+      )}
+
+      {!loading && !showAddForm && (
+        <div style={{ textAlign: 'center' as const, padding: '1rem 0' }}>
+          <button
+            type="button"
+            style={styles.addButton}
+            onClick={() => setShowAddForm(true)}
+          >
+            + Neuen Prompt hinzufuegen
+          </button>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/editor/styles.ts

@@ -594,4 +594,88 @@ export const styles: Record<string, React.CSSProperties> = {
     color: textMuted,
     fontSize: '0.95rem',
   },
+  emptyGuide: {
+    padding: '2rem',
+    background: surfaceElevated,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+    marginBottom: '1.5rem',
+  },
+  emptyGuideTitle: {
+    fontSize: '1.1rem',
+    fontWeight: 600,
+    color: text,
+    marginBottom: '0.75rem',
+    fontFamily: fontDisplay,
+  },
+  emptyGuideText: {
+    fontSize: '0.9rem',
+    color: textMuted,
+    lineHeight: 1.6,
+    marginBottom: '0.5rem',
+  },
+  emptyGuideExample: {
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: '8px',
+    padding: '0.75rem 1rem',
+    marginTop: '0.75rem',
+    fontSize: '0.85rem',
+    fontFamily: fontMono,
+    color: textAccent,
+    lineHeight: 1.5,
+  },
+  addForm: {
+    padding: '1.5rem',
+    background: surface,
+    border: `1px solid ${border}`,
+    borderRadius: '12px',
+  },
+  addFormTitle: {
+    fontSize: '1rem',
+    fontWeight: 600,
+    color: text,
+    marginBottom: '1rem',
+  },
+  addFormField: {
+    marginBottom: '0.75rem',
+  },
+  addFormLabel: {
+    display: 'block',
+    fontSize: '0.8rem',
+    color: textMuted,
+    marginBottom: '0.25rem',
+    fontWeight: 500,
+  },
+  addFormInput: {
+    width: '100%',
+    background: bg,
+    border: `1px solid ${border}`,
+    borderRadius: '8px',
+    padding: '0.5rem 0.75rem',
+    color: text,
+    fontSize: '0.85rem',
+    outline: 'none',
+    boxSizing: 'border-box' as const,
+  },
+  deleteButton: {
+    background: 'transparent',
+    border: `1px solid ${error}`,
+    color: error,
+    padding: '0.4rem 0.8rem',
+    borderRadius: '6px',
+    fontSize: '0.8rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+  },
+  addButton: {
+    background: primary,
+    border: 'none',
+    color: '#fff',
+    padding: '0.5rem 1rem',
+    borderRadius: '8px',
+    fontSize: '0.85rem',
+    fontWeight: 600,
+    cursor: 'pointer',
+  },
 };

package/src/index.ts

@@ -1,4 +1,7 @@
 import type { AstroIntegration } from 'astro';
+import react from '@astrojs/react';
+import db from '@astrojs/db';
+import node from '@astrojs/node';
 
 export interface NcaAiCmsPluginOptions {
   contentPath?: string;
@@ -20,12 +23,29 @@ export default function ncaAiCms(
         });
       },
 
-      'astro:config:setup'({ injectRoute, updateConfig, addMiddleware }) {
+      'astro:config:setup'({ injectRoute, updateConfig, addMiddleware, config }) {
         addMiddleware({
           entrypoint: 'nca-ai-cms-astro-plugin/middleware.ts',
           order: 'pre',
         });
 
+        // Auto-register react and db integrations if not already present
+        const hasReact = config.integrations.some((i) => i.name === '@astrojs/react');
+        if (!hasReact) {
+          config.integrations.push(react());
+        }
+
+        const hasDb = config.integrations.some((i) => i.name === '@astrojs/db');
+        if (!hasDb) {
+          config.integrations.push(...(db() as unknown as AstroIntegration[]));
+        }
+
+        // Auto-configure server output and node adapter
+        updateConfig({
+          output: 'server' as const,
+          adapter: node({ mode: 'standalone' }),
+        });
+
         // Virtual module for config sharing
         updateConfig({
           vite: {

package/src/services/PromptService.ts

@@ -16,6 +16,20 @@ export class PromptService {
     return result?.promptText ?? null;
   }
 
+  async createPrompt(id: string, name: string, category: string, promptText: string): Promise<void> {
+    await db.insert(Prompts).values({
+      id,
+      name,
+      category,
+      promptText,
+      updatedAt: new Date(),
+    });
+  }
+
+  async deletePrompt(id: string): Promise<void> {
+    await db.delete(Prompts).where(eq(Prompts.id, id));
+  }
+
   async updatePrompt(id: string, text: string): Promise<void> {
     await db
       .update(Prompts)

package/task.md

@@ -0,0 +1,77 @@
+# Fix nca-ai-cms-astro-plugin v1.0.5
+
+## 1. Fix SettingsTab.tsx response parsing
+
+**File:** `src/components/editor/SettingsTab.tsx`
+
+Line 33-34: API `/api/prompts` returns `{ prompts, settings }` but the component casts the entire response as `Prompt[]`, causing a crash.
+
+```diff
+- const data = (await res.json()) as Prompt[];
+- setPrompts(data);
++ const data = await res.json();
++ setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
+```
+
+## 2. Auto-register dependencies in index.ts
+
+**File:** `src/index.ts`
+
+The consumer currently must manually add `react()`, `db()`, `output: 'server'`, and the node adapter. The plugin should handle this automatically in `astro:config:setup`.
+
+- Import `@astrojs/react`, `@astrojs/db`, `@astrojs/node` at the top
+- Add `addIntegration` and `config` to the hook destructuring
+- Check `config.integrations` for existing react/db before adding
+- Call `updateConfig()` with `output: 'server'` and `adapter: node({ mode: 'standalone' })`
+
+```ts
+'astro:config:setup'({ injectRoute, updateConfig, addMiddleware, addIntegration, config }) {
+  const hasReact = config.integrations.some((i) => i.name === '@astrojs/react');
+  if (!hasReact) {
+    addIntegration(react());
+  }
+
+  const hasDb = config.integrations.some((i) => i.name === '@astrojs/db');
+  if (!hasDb) {
+    addIntegration(db());
+  }
+
+  updateConfig({
+    output: 'server' as const,
+    adapter: node({ mode: 'standalone' }),
+  });
+
+  // ... rest of hook unchanged
+}
+```
+
+## 3. Bump version to 1.0.5
+
+**File:** `package.json`
+
+Change `"version": "1.0.4"` to `"version": "1.0.5"`.
+
+## 4. Update README with simplified setup
+
+**File:** `README.md`
+
+Update setup instructions to reflect that the consumer only needs:
+
+```ts
+import ncaAiCms from 'nca-ai-cms-astro-plugin';
+
+export default defineConfig({
+  integrations: [ncaAiCms()],
+});
+```
+
+Add `.env.local` step with `GOOGLE_GEMINI_API_KEY`, `EDITOR_ADMIN`, `EDITOR_PASSWORD`.
+
+Note that `prerender: false` is already present on all 18 `injectRoute()` calls — no changes needed there.
+
+## Verification
+
+1. In a test project, use only `integrations: [ncaAiCms()]` in astro config
+2. Run `npx astro dev`
+3. Open `/login` — should render without errors
+4. Log in, open `/editor` — settings tab should load without crash

package/update.md

@@ -1,3 +1,32 @@
+# v1.0.6
+
+## SettingsTab: category guides and custom prompts
+- Empty categories now show content marketing guidance with concrete examples per tab (Homepage, Content-KI, Analyse-KI, Bild-KI, Website)
+- New "+ Neuen Prompt hinzufuegen" button to create custom prompts directly in the UI
+- Each prompt card now has a delete button
+- API: added POST with `action: create` and DELETE endpoint for prompts
+- PromptService: added `createPrompt()` and `deletePrompt()` methods
+
+---
+
+# v1.0.5
+
+## Fix: SettingsTab crash on prompts response
+- `/api/prompts` returns `{ prompts, settings }` but SettingsTab cast the entire response as `Prompt[]`
+- Fixed to extract `data.prompts` from the response object
+
+## Auto-register dependencies
+- Plugin now auto-configures `output: 'server'`, `@astrojs/node` adapter, `react()`, and `db()` via `updateConfig()`
+- Consumer config is now just `integrations: [ncaAiCms()]`
+- Existing manual config is respected — auto-registration only kicks in when not already set
+
+## Setup guide in README
+- Full install command with all peer dependencies
+- `.env.local` setup with variable reference table
+- Minimal `astro.config.mjs` example
+
+---
+
 # v1.0.4
 
 ## Fix: Environment variables and route prerendering