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

package/README.md

@@ -88,6 +88,58 @@ ncaAiCms({
 
 All `/api/*` and `/editor` routes are protected by cookie-based authentication.
 
+## Settings Best Practice
+
+The editor has a **Settings** tab with two groups of fields (Homepage and Website) that control how AI generates content. It also has three prompt categories (Content-KI, Analyse-KI, Bild-KI) where you create reusable prompts. Filling these in with values tailored to your business dramatically improves output quality.
+
+### Settings fields
+
+| Tab | Field | Key | Description |
+|---|---|---|---|
+| Homepage | Hero Ueberschrift | `hero_headline` | Main headline shown on your homepage |
+| Homepage | Hero Text | `hero_text` | Supporting text below the hero headline |
+| Homepage | Zielgruppe | `target_audience` | Who your content is for (e.g. "CTOs at mid-size SaaS companies") |
+| Homepage | Tonalitaet | `tone` | Voice and tone for generated content (e.g. "professional but approachable") |
+| Homepage | Kernbotschaft | `core_message` | The one key message your site should communicate |
+| Website | CTA Link | `cta_url` | Default call-to-action URL (e.g. "/contact" or "/demo") |
+| Website | CTA Stil | `cta_style` | Style or label for the CTA button (e.g. "Jetzt starten") |
+| Website | CTA Prompt | `cta_prompt` | Prompt text used to generate CTA copy |
+| Website | Core Tags | `core_tags` | Comma-separated keywords for your site (e.g. "AI, CMS, Astro, Open Source") |
+| Website | Markenrichtlinien | `brand_guidelines` | Brand rules the AI should follow (colors, dos/don'ts, terminology) |
+
+### Get values for your business with one AI prompt
+
+Copy the prompt below into any AI chat (ChatGPT, Claude, Gemini) and replace the placeholder with a description of your business. You will get ready-to-paste values for every field.
+
+```text
+I run the following business/website:
+[Describe your business in 1-2 sentences, e.g. "An open-source community that organizes charity coding events for nonprofits in Germany."]
+
+Please generate values for each of the following content management settings.
+Return them as a simple list so I can copy-paste each value into the corresponding field.
+
+1. hero_headline — A compelling hero headline (max ~10 words)
+2. hero_text — Supporting hero text (2-3 sentences)
+3. target_audience — Target audience description (one sentence)
+4. tone — Tone of voice for all generated content (2-4 descriptive words)
+5. core_message — Core message / value proposition (1-2 sentences)
+6. cta_url — Suggested CTA link path (e.g. /contact)
+7. cta_style — CTA button label text (2-4 words)
+8. cta_prompt — Short prompt the AI uses to generate CTA copy (one sentence)
+9. core_tags — 5-8 comma-separated keywords/tags for the site
+10. brand_guidelines — Brand guidelines for AI-generated content (3-5 bullet points covering tone, terminology, and things to avoid)
+```
+
+### Prompt categories
+
+The three prompt tabs let you create reusable prompts that the AI uses when generating or analysing content.
+
+| Category | Purpose | Tips for good prompts |
+|---|---|---|
+| **Content-KI** | Controls how the AI writes blog articles and text | Define word count, structure (intro/sections/CTA), target keywords, and writing style. The more specific, the better. |
+| **Analyse-KI** | Controls how the AI analyses existing text | Specify what to check — SEO, readability, accessibility, keyword density — and ask for concrete improvement suggestions. |
+| **Bild-KI** | Controls how the AI generates images | Describe the visual style, color palette, composition, and aspect ratio. Mention what should *not* appear in the image. |
+
 ## Development
 
 ```bash

package/package.json

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

package/src/components/editor/SettingsTab.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import type { Prompt, SettingsSubTab } from './types';
+import type { Prompt, Setting, SettingsSubTab } from './types';
 import { styles } from './styles';
 
 const SUB_TABS: { key: SettingsSubTab; label: string }[] = [
@@ -10,11 +10,30 @@ const SUB_TABS: { key: SettingsSubTab; label: string }[] = [
   { key: 'website', label: 'Website' },
 ];
 
+const SETTINGS_TABS: SettingsSubTab[] = ['homepage', 'website'];
+
+const SETTINGS_FIELDS: Record<string, { key: string; label: string; type: 'input' | 'textarea' }[]> = {
+  homepage: [
+    { key: 'hero_headline', label: 'Hero Ueberschrift', type: 'input' },
+    { key: 'hero_text', label: 'Hero Text', type: 'textarea' },
+    { key: 'target_audience', label: 'Zielgruppe', type: 'input' },
+    { key: 'tone', label: 'Tonalitaet', type: 'input' },
+    { key: 'core_message', label: 'Kernbotschaft', type: 'textarea' },
+  ],
+  website: [
+    { key: 'cta_url', label: 'CTA Link', type: 'input' },
+    { key: 'cta_style', label: 'CTA Stil', type: 'input' },
+    { key: 'cta_prompt', label: 'CTA Prompt', type: 'textarea' },
+    { key: 'core_tags', label: 'Core Tags (kommagetrennt)', type: 'input' },
+    { key: 'brand_guidelines', label: 'Markenrichtlinien', type: 'textarea' },
+  ],
+};
+
 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."',
+    description: 'Konfiguriere hier die zentralen Inhalte deiner Startseite: Hero-Text, Zielgruppe, Tonalitaet und Kernbotschaft.',
+    example: '',
   },
   'content-ai': {
     title: 'Content-KI Prompts',
@@ -33,11 +52,15 @@ const CATEGORY_GUIDES: Record<SettingsSubTab, { title: string; description: stri
   },
   '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."',
+    description: 'Allgemeine Einstellungen fuer deine Website: CTA-Texte, Standard-Tags und Markenrichtlinien.',
+    example: '',
   },
 };
 
+function isSettingsTab(tab: SettingsSubTab): boolean {
+  return SETTINGS_TABS.includes(tab);
+}
+
 interface EditState {
   id: string;
   value: string;
@@ -52,6 +75,9 @@ export function SettingsTab() {
   const [activeSubTab, setActiveSubTab] =
     useState<SettingsSubTab>('homepage');
   const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [_settings, setSettings] = useState<Setting[]>([]);
+  const [settingsForm, setSettingsForm] = useState<Record<string, string>>({});
+  const [settingsSaved, setSettingsSaved] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<EditState | null>(null);
@@ -60,7 +86,7 @@ export function SettingsTab() {
   const [addForm, setAddForm] = useState<AddFormState>({ name: '', promptText: '' });
   const [deleting, setDeleting] = useState<string | null>(null);
 
-  const loadPrompts = useCallback(async () => {
+  const loadData = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -68,6 +94,13 @@ export function SettingsTab() {
       if (!res.ok) throw new Error('Fehler beim Laden der Einstellungen');
       const data = await res.json();
       setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
+      const loadedSettings: Setting[] = Array.isArray(data.settings) ? data.settings : [];
+      setSettings(loadedSettings);
+      const formValues: Record<string, string> = {};
+      for (const s of loadedSettings) {
+        formValues[s.key] = s.value;
+      }
+      setSettingsForm(formValues);
     } catch (err) {
       setError(
         err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten',
@@ -78,8 +111,8 @@ export function SettingsTab() {
   }, []);
 
   useEffect(() => {
-    loadPrompts();
-  }, [loadPrompts]);
+    loadData();
+  }, [loadData]);
 
   const filteredPrompts = prompts.filter(
     (p) => p.category === activeSubTab,
@@ -122,6 +155,32 @@ export function SettingsTab() {
     }
   };
 
+  const handleSettingsSave = async () => {
+    setSaving(true);
+    setError(null);
+    setSettingsSaved(false);
+    try {
+      const fields = SETTINGS_FIELDS[activeSubTab] ?? [];
+      for (const field of fields) {
+        const value = settingsForm[field.key] ?? '';
+        const res = await fetch('/api/prompts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'setting', key: field.key, value }),
+        });
+        if (!res.ok) throw new Error(`Fehler beim Speichern von "${field.label}"`);
+      }
+      setSettingsSaved(true);
+      setTimeout(() => setSettingsSaved(false), 3000);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Fehler beim Speichern',
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const handleAdd = async () => {
     if (!addForm.name.trim() || !addForm.promptText.trim()) return;
     setSaving(true);
@@ -140,7 +199,7 @@ export function SettingsTab() {
       if (!res.ok) throw new Error('Fehler beim Erstellen');
       setAddForm({ name: '', promptText: '' });
       setShowAddForm(false);
-      await loadPrompts();
+      await loadData();
     } catch (err) {
       setError(
         err instanceof Error ? err.message : 'Fehler beim Erstellen',
@@ -191,6 +250,7 @@ export function SettingsTab() {
               setActiveSubTab(tab.key);
               setEditing(null);
               setShowAddForm(false);
+              setSettingsSaved(false);
             }}
           >
             {tab.label}
@@ -204,136 +264,189 @@ export function SettingsTab() {
 
       {error && <div style={styles.error}>{error}</div>}
 
-      {!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>
-      )}
-
-      {!loading && filteredPrompts.length > 0 && (
-        <div style={styles.cardGrid}>
-          {filteredPrompts.map((prompt) => (
-            <div key={prompt.id} style={styles.settingsCard}>
-              <div style={styles.settingsCardHeader}>
-                <div style={styles.settingsItemLabel}>{prompt.name}</div>
-                <div style={styles.settingsItemCategory}>
-                  {prompt.category}
-                </div>
-              </div>
-
-              {editing?.id === prompt.id ? (
-                <div style={styles.editArea}>
-                  <textarea
-                    style={styles.textarea}
-                    value={editing.value}
-                    onChange={(e) =>
-                      setEditing({ ...editing, value: e.target.value })
-                    }
-                  />
-                  <div style={styles.editButtons}>
-                    <button
-                      type="button"
-                      style={styles.saveButton}
-                      onClick={handleSave}
-                      disabled={saving}
-                    >
-                      {saving ? 'Speichere...' : 'Speichern'}
-                    </button>
-                    <button
-                      type="button"
-                      style={styles.cancelButton}
-                      onClick={handleCancel}
-                    >
-                      Abbrechen
-                    </button>
-                  </div>
-                </div>
+      {/* Settings tabs: Homepage, Website — key-value form */}
+      {!loading && isSettingsTab(activeSubTab) && (
+        <div style={styles.addForm}>
+          <div style={styles.addFormTitle}>{guide.title}</div>
+          <div style={{ ...styles.emptyGuideText, marginBottom: '1rem' }}>{guide.description}</div>
+          {(SETTINGS_FIELDS[activeSubTab] ?? []).map((field) => (
+            <div key={field.key} style={styles.addFormField}>
+              <label style={styles.addFormLabel}>{field.label}</label>
+              {field.type === 'textarea' ? (
+                <textarea
+                  style={styles.textarea}
+                  value={settingsForm[field.key] ?? ''}
+                  onChange={(e) =>
+                    setSettingsForm({ ...settingsForm, [field.key]: e.target.value })
+                  }
+                />
               ) : (
-                <>
-                  <div style={styles.settingsItemValue}>
-                    {prompt.promptText}
-                  </div>
-                  <div style={{ padding: '0 1rem 1rem', display: 'flex', gap: '0.5rem' }}>
-                    <button
-                      type="button"
-                      style={styles.editButton}
-                      onClick={() => handleEdit(prompt)}
-                    >
-                      Bearbeiten
-                    </button>
-                    <button
-                      type="button"
-                      style={styles.deleteButton}
-                      onClick={() => handleDelete(prompt.id)}
-                      disabled={deleting === prompt.id}
-                    >
-                      {deleting === prompt.id ? 'Loesche...' : 'Loeschen'}
-                    </button>
-                  </div>
-                </>
+                <input
+                  style={styles.addFormInput}
+                  type="text"
+                  value={settingsForm[field.key] ?? ''}
+                  onChange={(e) =>
+                    setSettingsForm({ ...settingsForm, [field.key]: e.target.value })
+                  }
+                />
               )}
             </div>
           ))}
-        </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: '' });
-              }}
+              onClick={handleSettingsSave}
+              disabled={saving}
             >
-              Abbrechen
+              {saving ? 'Speichere...' : 'Einstellungen speichern'}
             </button>
+            {settingsSaved && (
+              <span style={{ color: '#4ade80', fontSize: '0.85rem', alignSelf: 'center' }}>
+                Gespeichert
+              </span>
+            )}
           </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>
+      {/* Prompt tabs: Content-KI, Analyse-KI, Bild-KI — prompt cards */}
+      {!loading && !isSettingsTab(activeSubTab) && (
+        <>
+          {filteredPrompts.length === 0 && !showAddForm && (
+            <div style={styles.emptyGuide}>
+              <div style={styles.emptyGuideTitle}>{guide.title}</div>
+              <div style={styles.emptyGuideText}>{guide.description}</div>
+              {guide.example && (
+                <div style={styles.emptyGuideExample}>{guide.example}</div>
+              )}
+            </div>
+          )}
+
+          {filteredPrompts.length > 0 && (
+            <div style={styles.cardGrid}>
+              {filteredPrompts.map((prompt) => (
+                <div key={prompt.id} style={styles.settingsCard}>
+                  <div style={styles.settingsCardHeader}>
+                    <div style={styles.settingsItemLabel}>{prompt.name}</div>
+                    <div style={styles.settingsItemCategory}>
+                      {prompt.category}
+                    </div>
+                  </div>
+
+                  {editing?.id === prompt.id ? (
+                    <div style={styles.editArea}>
+                      <textarea
+                        style={styles.textarea}
+                        value={editing.value}
+                        onChange={(e) =>
+                          setEditing({ ...editing, value: e.target.value })
+                        }
+                      />
+                      <div style={styles.editButtons}>
+                        <button
+                          type="button"
+                          style={styles.saveButton}
+                          onClick={handleSave}
+                          disabled={saving}
+                        >
+                          {saving ? 'Speichere...' : 'Speichern'}
+                        </button>
+                        <button
+                          type="button"
+                          style={styles.cancelButton}
+                          onClick={handleCancel}
+                        >
+                          Abbrechen
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <div style={styles.settingsItemValue}>
+                        {prompt.promptText}
+                      </div>
+                      <div style={{ padding: '0 1rem 1rem', display: 'flex', gap: '0.5rem' }}>
+                        <button
+                          type="button"
+                          style={styles.editButton}
+                          onClick={() => handleEdit(prompt)}
+                        >
+                          Bearbeiten
+                        </button>
+                        <button
+                          type="button"
+                          style={styles.deleteButton}
+                          onClick={() => handleDelete(prompt.id)}
+                          disabled={deleting === prompt.id}
+                        >
+                          {deleting === prompt.id ? 'Loesche...' : 'Loeschen'}
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {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>
+          )}
+
+          {!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/services/ContentGenerator.ts

@@ -32,21 +32,21 @@ interface SourceAnalysis {
 
 // Fallback values when database is not available
 const DEFAULT_CONTACT_URL =
-  'https://nevercodealone.de/de/landingpages/barrierefreies-webdesign';
+  'https://nevercodealone.de/de/kontakt';
 
-const DEFAULT_CORE_TAGS = ['Semantik', 'HTML', 'Barrierefrei'];
+const DEFAULT_CORE_TAGS = ['Web-Entwicklung', 'Best Practices'];
 
 const DEFAULT_SYSTEM_PROMPT = `Du bist ein erfahrener technischer Content-Writer für Web-Entwicklung.
 Deine Aufgabe ist es, hochwertige deutsche Fachartikel zu erstellen.
 
-Zielgruppe: Content-Marketing-Professionals und Frontend-Entwickler
+Zielgruppe: Content-Marketing-Professionals und Entwickler
 Tonalität: Professionell, aber zugänglich. Technisch korrekt, nicht übermäßig akademisch.
 
 KRITISCH - 100% Originalität:
 - Schreibe einen KOMPLETT EIGENSTÄNDIGEN Artikel
 - KEINE Sätze, Formulierungen oder Strukturen aus externen Quellen übernehmen
 - KEINE Hinweise auf Quellen, Referenzen oder Inspiration im Text
-- Nutze ausschließlich DEIN Expertenwissen zur Barrierefreiheit
+- Nutze ausschließlich DEIN Expertenwissen zum jeweiligen Thema
 - Jeder Satz muss NEU formuliert sein - wie von einem Experten geschrieben
 - Der Artikel muss wirken als käme er aus eigener Fachkenntnis
 
@@ -57,7 +57,6 @@ Regeln:
 - WICHTIG: Content MUSS mit einer H1-Überschrift (# Titel) beginnen
 - Danach H2 (##) und H3 (###) Hierarchie ohne Sprünge
 - WICHTIG: Nur Markdown, KEINE HTML-Tags wie <p>, <div>, <span> etc.
-- WICHTIG: Integriere die Keywords "Semantik", "HTML" und "Barrierefrei" natürlich in den Text
 
 Titel-Regeln:
 - Das Hauptthema/Keyword MUSS im Titel vorkommen
@@ -148,8 +147,10 @@ export class ContentGenerator {
   private async analyzeSource(
     fetched: FetchedContent
   ): Promise<SourceAnalysis> {
+    const systemPrompt = await this.buildSystemPrompt();
     const model = this.client.getGenerativeModel({
       model: this.model,
+      systemInstruction: systemPrompt,
       generationConfig: {
         responseMimeType: 'application/json',
         responseSchema: buildSourceAnalysisSchema(),
@@ -165,7 +166,7 @@ Inhalt:
 ${fetched.content.slice(0, 12000)}
 
 Identifiziere:
-1. Das Hauptthema (fokussiert auf Web-Entwicklung/Barrierefreiheit)
+1. Das Hauptthema
 2. Die wichtigsten Kernaussagen
 3. Besondere Erkenntnisse oder einzigartige Tipps
 4. Relevante Code-Beispiele oder Patterns`;
@@ -180,23 +181,23 @@ Identifiziere:
   }
 
   private async researchKeywords(keywords: string): Promise<SourceAnalysis> {
+    const systemPrompt = await this.buildSystemPrompt();
     const model = this.client.getGenerativeModel({
       model: this.model,
+      systemInstruction: systemPrompt,
       generationConfig: {
         responseMimeType: 'application/json',
         responseSchema: buildSourceAnalysisSchema(),
       },
     });
 
-    const prompt = `Du bist ein Experte für Web-Accessibility und barrierefreie Webentwicklung.
-
-Recherchiere zum Thema: "${keywords}"
+    const prompt = `Recherchiere zum Thema: "${keywords}"
 
 Nutze dein Fachwissen um:
-1. Das Hauptthema klar zu definieren (Bezug zu Barrierefreiheit/Web-Accessibility)
-2. Die wichtigsten Fakten, Best Practices und WCAG-Richtlinien zusammenzufassen
+1. Das Hauptthema klar zu definieren
+2. Die wichtigsten Fakten, Best Practices und Standards zusammenzufassen
 3. Weniger bekannte aber wichtige Tipps und Erkenntnisse zu identifizieren
-4. Praktische Code-Beispiele oder Patterns vorzuschlagen
+4. Praktische Beispiele oder Patterns vorzuschlagen
 
 Fokussiere auf aktuelle Standards und praktische Anwendbarkeit.`;
 
@@ -296,13 +297,13 @@ Fokussiere auf aktuelle Standards und praktische Anwendbarkeit.`;
   }
 
   private buildUserPrompt(analysis: SourceAnalysis): string {
-    return `Schreibe als Accessibility-Experte einen deutschen Fachartikel zum Thema: ${analysis.topic}
+    return `Schreibe einen deutschen Fachartikel zum Thema: ${analysis.topic}
 
 Behandle diese Aspekte aus deinem Fachwissen:
 ${analysis.keyPoints.map((p) => `- ${p}`).join('\n')}
 ${analysis.uniqueInsights.map((p) => `- ${p}`).join('\n')}
 
-${analysis.codeExamples.length > 0 ? `Zeige praktische Code-Beispiele für:\n${analysis.codeExamples.map((c) => `- ${c}`).join('\n')}` : ''}
+${analysis.codeExamples.length > 0 ? `Zeige praktische Beispiele für:\n${analysis.codeExamples.map((c) => `- ${c}`).join('\n')}` : ''}
 
 Wichtig: Schreibe komplett eigenständig aus deiner Expertise heraus.`;
   }

package/src/services/PromptService.ts

@@ -58,10 +58,24 @@ export class PromptService {
   }
 
   async updateSetting(key: string, value: string): Promise<void> {
-    await db
-      .update(SiteSettings)
-      .set({ value, updatedAt: new Date() })
-      .where(eq(SiteSettings.key, key));
+    const existing = await db
+      .select()
+      .from(SiteSettings)
+      .where(eq(SiteSettings.key, key))
+      .get();
+
+    if (existing) {
+      await db
+        .update(SiteSettings)
+        .set({ value, updatedAt: new Date() })
+        .where(eq(SiteSettings.key, key));
+    } else {
+      await db.insert(SiteSettings).values({
+        key,
+        value,
+        updatedAt: new Date(),
+      });
+    }
   }
 
   async getAllSettings(): Promise<Array<{ key: string; value: string }>> {
@@ -88,11 +102,11 @@ export class PromptService {
 
   async getCoreTags(): Promise<string[]> {
     const tags = await this.getSetting('core_tags');
-    if (!tags) return ['Semantik', 'HTML', 'Barrierefrei'];
+    if (!tags) return ['Web-Entwicklung', 'Best Practices'];
     try {
       return JSON.parse(tags);
     } catch {
-      return ['Semantik', 'HTML', 'Barrierefrei'];
+      return ['Web-Entwicklung', 'Best Practices'];
     }
   }
 }

package/task.md

@@ -13,7 +13,80 @@ Line 33-34: API `/api/prompts` returns `{ prompts, settings }` but the component
 + setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
 ```
 
-## 2. Auto-register dependencies in index.ts
+## 2. Separate Settings from Prompts in SettingsTab
+
+**File:** `src/components/editor/SettingsTab.tsx`
+
+The SettingsTab currently treats all 5 sub-tabs identically, showing the "Neuen Prompt hinzufuegen" (prompt CRUD) UI for every tab. But **Homepage** and **Website** are **site settings** (key-value pairs in `SiteSettings` table), not AI prompts. Only **Content-KI**, **Analyse-KI**, and **Bild-KI** should show the prompt CRUD interface.
+
+### Changes required:
+
+1. **Import `Setting` type** from `./types` (already defined there)
+
+2. **Add constants** at the top of the file:
+
+```ts
+const SETTINGS_TABS: SettingsSubTab[] = ['homepage', 'website'];
+
+const SETTINGS_FIELDS: Record<string, { key: string; label: string; type: 'input' | 'textarea' }[]> = {
+  homepage: [
+    { key: 'hero_headline', label: 'Hero Ueberschrift', type: 'input' },
+    { key: 'hero_text', label: 'Hero Text', type: 'textarea' },
+    { key: 'target_audience', label: 'Zielgruppe', type: 'input' },
+    { key: 'tone', label: 'Tonalitaet', type: 'input' },
+    { key: 'core_message', label: 'Kernbotschaft', type: 'textarea' },
+  ],
+  website: [
+    { key: 'cta_url', label: 'CTA Link', type: 'input' },
+    { key: 'cta_style', label: 'CTA Stil', type: 'input' },
+    { key: 'cta_prompt', label: 'CTA Prompt', type: 'textarea' },
+    { key: 'core_tags', label: 'Core Tags (kommagetrennt)', type: 'input' },
+    { key: 'brand_guidelines', label: 'Markenrichtlinien', type: 'textarea' },
+  ],
+};
+```
+
+3. **Add helper function:**
+
+```ts
+function isSettingsTab(tab: SettingsSubTab): boolean {
+  return SETTINGS_TABS.includes(tab);
+}
+```
+
+4. **Add new state** in the component:
+
+```ts
+const [settings, setSettings] = useState<Setting[]>([]);
+const [settingsForm, setSettingsForm] = useState<Record<string, string>>({});
+const [settingsSaved, setSettingsSaved] = useState(false);
+```
+
+5. **Update `loadPrompts`** to also load settings:
+
+```ts
+const loadedSettings: Setting[] = Array.isArray(data.settings) ? data.settings : [];
+setSettings(loadedSettings);
+const formValues: Record<string, string> = {};
+for (const s of loadedSettings) {
+  formValues[s.key] = s.value;
+}
+setSettingsForm(formValues);
+```
+
+6. **Add `handleSettingsSave`** function that POSTs each field with `{ type: 'setting', key, value }` to `/api/prompts`
+
+7. **Update the render/return** to branch on `isSettingsTab(activeSubTab)`:
+   - **Settings tabs** (homepage, website): render a key-value form with text inputs/textareas for each field defined in `SETTINGS_FIELDS`, plus a "Einstellungen speichern" button
+   - **Prompt tabs** (content-ai, analysis-ai, image-ai): keep existing prompt card grid + "Neuen Prompt hinzufuegen" button (unchanged)
+
+8. **Update `CATEGORY_GUIDES`** for homepage and website — change descriptions to reflect settings (not prompts), remove example text
+
+### API usage for settings
+- Read: from `data.settings` array returned by `GET /api/prompts`, find by `key`
+- Write: `POST /api/prompts` with `{ type: 'setting', key, value }`
+
+## 3. Auto-register dependencies in index.ts
 
 **File:** `src/index.ts`
 
@@ -45,13 +118,13 @@ The consumer currently must manually add `react()`, `db()`, `output: 'server'`,
 }
 ```
 
-## 3. Bump version to 1.0.5
+## 4. 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
+## 5. Update README with simplified setup
 
 **File:** `README.md`
 
@@ -74,4 +147,8 @@ Note that `prerender: false` is already present on all 18 `injectRoute()` calls
 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
+4. Log in, open `/editor` → Settings tab → Homepage: should show key-value form fields, no "Neuen Prompt hinzufuegen"
+5. Homepage tab → edit hero text → save → reload → value persists
+6. Website tab → edit CTA URL, core tags → save → reload → values persist
+7. Content-KI tab → still shows prompt cards with create/edit/delete
+8. Analyse-KI and Bild-KI → same prompt UI as before

package/update.md

@@ -1,8 +1,31 @@
+# v1.0.8
+
+## Generalize content generator for any topic
+- Removed hardcoded accessibility/Barrierefreiheit references from all prompts
+- `analyzeSource` now uses `systemInstruction` consistently with `researchKeywords` and `generateContent`
+- Default system prompt uses topic-agnostic language ("zum jeweiligen Thema" instead of "zur Barrierefreiheit")
+- Removed hardcoded keyword integration rule from default system prompt
+- Default core tags changed from accessibility-specific to general (`Web-Entwicklung`, `Best Practices`)
+- Default contact URL updated to generic contact page
+- Domain specialization now lives entirely in configurable database prompts
+
+## Fix: updateSetting upsert
+- `PromptService.updateSetting()` now inserts if key doesn't exist instead of silently doing nothing
+- Enables creating new settings through the settings UI without pre-seeding the database
+
+---
+
 # 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
+## Separate settings from prompts in SettingsTab
+- Homepage and Website tabs now show key-value settings forms (hero text, zielgruppe, CTA, core tags, etc.)
+- Content-KI, Analyse-KI, and Bild-KI tabs show prompt card UI with create/edit/delete
+- Settings are saved via `POST /api/prompts` with `type: setting`
+- Each settings tab has defined fields: homepage (hero, zielgruppe, ton, kernbotschaft), website (CTA, tags, markenrichtlinien)
+
+## Category guides and custom prompts
+- Empty prompt categories show content marketing guidance with concrete examples
+- New "+ Neuen Prompt hinzufuegen" button to create custom prompts
 - 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