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

package/package.json

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

package/src/components/frontend/EditorToolbar.astro

@@ -1,13 +1,24 @@
 ---
 interface Props {
   isAuthenticated?: boolean;
+  currentPath?: string;
 }
 
-const { isAuthenticated } = Astro.props;
+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">
+  <div id="editor-toolbar" data-page-context={pageContext}>
     <!-- FAB Button -->
     <button
       id="editor-fab"
@@ -33,13 +44,23 @@ const { isAuthenticated } = Astro.props;
         </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="z.B. Laserreinigung"
+          placeholder={pageContext ? `z.B. ${pageContext} Kosten, ${pageContext} Vorteile` : 'z.B. Laserreinigung'}
           required
           autocomplete="off"
         />
@@ -149,6 +170,20 @@ const { isAuthenticated } = Astro.props;
     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;
   }
@@ -283,6 +318,7 @@ const { isAuthenticated } = Astro.props;
 </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;
@@ -294,7 +330,9 @@ const { isAuthenticated } = Astro.props;
   const topicInput = document.getElementById('editor-input-topic') as HTMLInputElement;
   const notesInput = document.getElementById('editor-input-notes') as HTMLTextAreaElement;
 
-  if (fab && panel) {
+  if (fab && panel && toolbar) {
+    const pageContext = toolbar.dataset.pageContext || '';
+
     const togglePanel = () => {
       const isOpen = !panel.hidden;
       panel.hidden = isOpen;
@@ -307,12 +345,6 @@ const { isAuthenticated } = Astro.props;
     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();
@@ -325,12 +357,20 @@ const { isAuthenticated } = Astro.props;
       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: notesInput?.value.trim() || undefined,
+            notes: notes || undefined,
           }),
         });
 

package/src/components/frontend/InlineEditor.astro

@@ -2,10 +2,12 @@
 interface Props {
   articleId: string;
   markdown: string;
+  title: string;
+  description: string;
   isAuthenticated?: boolean;
 }
 
-const { articleId, markdown, isAuthenticated } = Astro.props;
+const { articleId, markdown, title, description, isAuthenticated } = Astro.props;
 ---
 
 <div class="inline-editor-wrapper" data-article-id={articleId} data-authenticated={isAuthenticated ? 'true' : 'false'}>
@@ -66,9 +68,20 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
       <slot />
     </div>
 
-    <!-- Markdown editor (hidden by default) -->
+    <!-- Editing form (hidden by default) -->
     <div class="inline-editor-editing" hidden>
-      <textarea class="inline-editor-textarea">{markdown}</textarea>
+      <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) -->
@@ -132,6 +145,46 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
     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;
@@ -148,6 +201,8 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
     tab-size: 2;
   }
 
+  .inline-editor-title-input:focus,
+  .inline-editor-desc-input:focus,
   .inline-editor-textarea:focus {
     outline: none;
     border-color: #2563eb;
@@ -180,6 +235,8 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
     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';
@@ -205,7 +262,7 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
         setMode('view');
       } else {
         setMode('edit');
-        textarea.focus();
+        titleInput.focus();
       }
     });
 
@@ -224,6 +281,8 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
         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;
@@ -283,25 +342,5 @@ const { articleId, markdown, isAuthenticated } = Astro.props;
       }
     });
 
-    // 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/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/update.md

@@ -1,3 +1,43 @@
+# 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