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

package/package.json

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

package/src/components/editor/SettingsTab.tsx

@@ -14,7 +14,9 @@ const SETTINGS_TABS: SettingsSubTab[] = ['homepage', 'website'];
 
 const SETTINGS_FIELDS: Record<string, { key: string; label: string; type: 'input' | 'textarea' }[]> = {
   homepage: [
+    { key: 'hero_kicker', label: 'Hero Kicker', type: 'input' },
     { key: 'hero_headline', label: 'Hero Ueberschrift', type: 'input' },
+    { key: 'hero_title_accent', label: 'Hero Akzent-Text', type: 'input' },
     { key: 'hero_text', label: 'Hero Text', type: 'textarea' },
     { key: 'target_audience', label: 'Zielgruppe', type: 'input' },
     { key: 'tone', label: 'Tonalitaet', type: 'input' },

package/src/components/frontend/ArticleHeader.astro

@@ -0,0 +1,75 @@
+---
+import MetaDisplay from './MetaDisplay.astro';
+import TagList from './TagList.astro';
+
+interface Props {
+  title?: string;
+  category?: string;
+  date: string;
+  datetime?: string;
+  lede?: string;
+  tags?: string[];
+  animate?: boolean;
+}
+
+const {
+  category,
+  date,
+  datetime,
+  lede,
+  tags = [],
+  animate = false,
+} = Astro.props;
+---
+
+<header class="article-header">
+  <div class:list={['article-header-content', { 'animate-fadeInUp': animate }]}>
+    <MetaDisplay category={category} date={date} datetime={datetime} />
+    {lede && <p class="article-lede">{lede}</p>}
+    {tags.length > 1 && <TagList tags={tags.slice(1)} />}
+  </div>
+</header>
+
+<style>
+  .article-header {
+    padding: var(--space-16) 0 var(--space-12);
+    max-width: 900px;
+  }
+
+  .article-header-content {
+    opacity: 1;
+  }
+
+  .article-header-content.animate-fadeInUp {
+    opacity: 0;
+  }
+
+  .article-lede {
+    font-family: var(--font-body);
+    font-size: var(--text-xl);
+    color: var(--color-text);
+    line-height: var(--leading-relaxed);
+    max-width: 720px;
+    margin-bottom: var(--space-6);
+  }
+
+  @media (max-width: 768px) {
+    .article-header {
+      padding: var(--space-10) 0 var(--space-8);
+    }
+
+    .article-lede {
+      font-size: var(--text-lg);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .article-header {
+      padding: var(--space-8) 0 var(--space-6);
+    }
+
+    .article-lede {
+      font-size: var(--text-base);
+    }
+  }
+</style>

package/src/components/frontend/BackLink.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  href: string;
+  text: string;
+}
+
+const { href, text } = Astro.props;
+---
+
+<a href={href} class="back-link">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="19" y1="12" x2="5" y2="12"></line>
+    <polyline points="12 19 5 12 12 5"></polyline>
+  </svg>
+  <span>{text}</span>
+</a>

package/src/components/frontend/DeleteAction.astro

@@ -0,0 +1,143 @@
+---
+interface Props {
+  articleId: string;
+}
+const { articleId } = Astro.props;
+---
+
+<div class="delete-action" data-article-id={articleId}>
+  <button class="delete-icon" aria-label="Artikel löschen" type="button">
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <polyline points="3 6 5 6 21 6"></polyline>
+      <path
+        d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+      ></path>
+      <line x1="10" y1="11" x2="10" y2="17"></line>
+      <line x1="14" y1="11" x2="14" y2="17"></line>
+    </svg>
+  </button>
+  <button class="confirm-yes" type="button" hidden>Ja</button>
+</div>
+
+<script>
+  document.querySelectorAll('.delete-action').forEach((container) => {
+    const articleId = (container as HTMLElement).dataset.articleId;
+    const icon = container.querySelector('.delete-icon') as HTMLButtonElement;
+    const confirmBtn = container.querySelector(
+      '.confirm-yes'
+    ) as HTMLButtonElement;
+
+    const showConfirm = () => {
+      icon.hidden = true;
+      confirmBtn.hidden = false;
+    };
+
+    const resetState = () => {
+      confirmBtn.hidden = true;
+      confirmBtn.disabled = false;
+      confirmBtn.textContent = 'Ja';
+      icon.hidden = false;
+    };
+
+    const removeCard = () => {
+      const card = container.closest('.article-card, .featured-card');
+      card ? card.remove() : window.location.reload();
+    };
+
+    const deleteArticle = async () => {
+      confirmBtn.disabled = true;
+      confirmBtn.textContent = '...';
+
+      try {
+        const response = await fetch(`/api/articles/${articleId}`, {
+          method: 'DELETE',
+        });
+        response.ok
+          ? removeCard()
+          : (alert('Löschen fehlgeschlagen'), resetState());
+      } catch {
+        alert('Löschen fehlgeschlagen');
+        resetState();
+      }
+    };
+
+    icon?.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      showConfirm();
+    });
+
+    confirmBtn?.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      deleteArticle();
+    });
+  });
+</script>
+
+<style>
+  .delete-action {
+    position: absolute;
+    top: var(--space-3, 0.75rem);
+    right: var(--space-3, 0.75rem);
+    z-index: 10;
+  }
+
+  .delete-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+      color 0.2s ease,
+      background 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  .delete-icon:hover {
+    color: var(--color-error);
+    background: var(--color-error-muted);
+    border-color: var(--color-error);
+  }
+
+  .delete-icon:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .confirm-yes {
+    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
+    font-family: var(--font-ui);
+    font-size: var(--text-sm, 0.875rem);
+    font-weight: 600;
+    border: none;
+    border-radius: var(--radius-sm, 4px);
+    cursor: pointer;
+    background: var(--color-error, #f87171);
+    color: white;
+  }
+
+  .confirm-yes:hover {
+    background: #ef4444;
+  }
+
+  .confirm-yes:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+</style>

package/src/components/frontend/HeroImage.astro

@@ -0,0 +1,226 @@
+---
+import { Image } from 'astro:assets';
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+interface Props {
+  articleId: string;
+  alt: string;
+  isAuthenticated?: boolean;
+}
+
+const { articleId, alt, isAuthenticated } = Astro.props;
+const slug = articleId.split('/').pop() || articleId;
+
+// Get file mtime for cache busting
+let mtime = '';
+try {
+  const heroPath = path.join(
+    process.cwd(),
+    'nca-ai-cms-content',
+    articleId,
+    'hero.webp'
+  );
+  const stats = await fs.stat(heroPath);
+  mtime = stats.mtimeMs.toString(36);
+} catch {}
+
+const imageSrc = `/api/article-image/${articleId}/hero.webp${mtime ? `?v=${mtime}` : ''}`;
+---
+
+<figure class="article-hero" data-article-id={slug} data-image-src={imageSrc}>
+  <div class="article-hero-image">
+    <Image
+      src={imageSrc}
+      alt={alt}
+      width={1200}
+      height={675}
+      loading="eager"
+      class="hero-img"
+    />
+    {
+      isAuthenticated && (
+        <>
+          <button
+            class="regenerate-btn"
+            type="button"
+            aria-label="Bild neu generieren"
+          >
+            <svg
+              width="20"
+              height="20"
+              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="confirm-btn"
+            type="button"
+            hidden
+            aria-label="Speichern"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="3"
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </button>
+        </>
+      )
+    }
+  </div>
+  {alt && <figcaption class="hero-caption">{alt}</figcaption>}
+</figure>
+
+<script>
+  const container = document.querySelector('.article-hero') as HTMLElement;
+  if (container) {
+    const articleId = container.dataset.articleId;
+    const img = container.querySelector('.hero-img') as HTMLImageElement;
+    const regenerateBtn = container.querySelector(
+      '.regenerate-btn'
+    ) as HTMLButtonElement;
+    const confirmBtn = container.querySelector(
+      '.confirm-btn'
+    ) as HTMLButtonElement;
+
+    let pendingImage: { url: string; alt: string } | null = null;
+
+    regenerateBtn?.addEventListener('click', async () => {
+      regenerateBtn.disabled = true;
+      regenerateBtn.classList.add('loading');
+
+      try {
+        const res = await fetch(`/api/articles/${articleId}/regenerate-image`, {
+          method: 'POST',
+        });
+        if (!res.ok) throw new Error('Failed');
+
+        const data = await res.json();
+        pendingImage = { url: data.url, alt: data.alt };
+
+        // Show preview
+        img.src = data.url;
+        regenerateBtn.hidden = true;
+        confirmBtn.hidden = false;
+      } catch {
+        alert('Bild-Generierung fehlgeschlagen');
+        regenerateBtn.disabled = false;
+        regenerateBtn.classList.remove('loading');
+      }
+    });
+
+    confirmBtn?.addEventListener('click', async () => {
+      if (!pendingImage) return;
+      confirmBtn.disabled = true;
+      confirmBtn.classList.add('loading');
+
+      try {
+        const res = await fetch(`/api/articles/${articleId}/apply`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            imageUrl: pendingImage.url,
+            imageAlt: pendingImage.alt,
+          }),
+        });
+        if (!res.ok) throw new Error('Failed');
+
+        // Hard reload
+        window.location.reload();
+      } catch {
+        alert('Speichern fehlgeschlagen');
+        confirmBtn.disabled = false;
+        confirmBtn.classList.remove('loading');
+      }
+    });
+  }
+</script>
+
+<style>
+  .article-hero {
+    margin: 0 0 var(--space-12, 3rem);
+    width: 100%;
+  }
+
+  .article-hero-image {
+    position: relative;
+  }
+
+  .article-hero-image img {
+    width: 100%;
+    max-height: 520px;
+    object-fit: cover;
+    display: block;
+  }
+
+  .regenerate-btn,
+  .confirm-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .regenerate-btn {
+    background: rgba(20, 20, 22, 0.9);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+  }
+
+  .regenerate-btn:hover {
+    color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .confirm-btn {
+    background: var(--color-success);
+    border: none;
+    color: #000;
+  }
+
+  .confirm-btn:hover {
+    background: #22c55e;
+  }
+
+  .regenerate-btn:disabled,
+  .confirm-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .loading svg {
+    animation: spin 1s linear infinite;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .hero-caption {
+    max-width: 720px;
+    margin: 1rem auto 0;
+    padding: 0 1rem;
+    font-style: italic;
+    color: var(--color-text);
+    font-size: var(--text-base, 1rem);
+  }
+</style>

package/src/components/frontend/MetaDisplay.astro

@@ -0,0 +1,66 @@
+---
+interface Props {
+  category?: string;
+  date: string;
+  datetime?: string;
+}
+
+const { category, date, datetime } = Astro.props;
+---
+
+<div class="article-meta">
+  {category && <span class="article-category">{category}</span>}
+  <span class="article-meta-divider" aria-hidden="true"></span>
+  {
+    datetime ? (
+      <time datetime={datetime} class="article-date">
+        {date}
+      </time>
+    ) : (
+      <span class="article-date">{date}</span>
+    )
+  }
+</div>
+
+<style>
+  .article-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+    margin-bottom: var(--space-6);
+  }
+
+  .article-category {
+    font-family: var(--font-ui);
+    font-size: var(--text-base);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-widest);
+    color: var(--color-text);
+    padding: var(--space-1) var(--space-3);
+    background: var(--color-primary-muted);
+    border-radius: var(--radius-sm);
+  }
+
+  .article-meta-divider {
+    width: 32px;
+    height: 1px;
+    background: var(--color-border-accent);
+  }
+
+  .article-date {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-text);
+  }
+
+  @media (max-width: 480px) {
+    .article-meta {
+      gap: var(--space-2);
+    }
+
+    .article-meta-divider {
+      width: 16px;
+    }
+  }
+</style>

package/src/components/frontend/SidebarCard.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<div class="sidebar-card">
+  <h4 class="sidebar-title">{title}</h4>
+  <slot />
+</div>

package/src/components/frontend/TagList.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  tags: string[];
+}
+
+const { tags } = Astro.props;
+---
+
+{
+  tags.length > 0 && (
+    <div class="tag-list">
+      {tags.map((tag: string) => (
+        <span class="tag">{tag}</span>
+      ))}
+    </div>
+  )
+}
+
+<style>
+  .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+</style>

package/src/index.ts

@@ -153,7 +153,17 @@ export default function ncaAiCms(
           prerender: false,
         });
 
-        // Inject pages
+        // Inject frontend pages
+        injectRoute({
+          pattern: '/',
+          entrypoint: 'nca-ai-cms-astro-plugin/pages/index.astro',
+          prerender: false,
+        });
+        injectRoute({
+          pattern: '/articles/[...slug]',
+          entrypoint: 'nca-ai-cms-astro-plugin/pages/articles/[...slug].astro',
+          prerender: false,
+        });
         injectRoute({
           pattern: '/login',
           entrypoint: 'nca-ai-cms-astro-plugin/pages/login.astro',
@@ -164,6 +174,25 @@ export default function ncaAiCms(
           entrypoint: 'nca-ai-cms-astro-plugin/pages/editor.astro',
           prerender: false,
         });
+
+        // Inject article image serving
+        injectRoute({
+          pattern: '/api/article-image/[...path]',
+          entrypoint: 'nca-ai-cms-astro-plugin/pages/api/article-image/[...path].ts',
+          prerender: false,
+        });
+
+        // Inject SEO routes
+        injectRoute({
+          pattern: '/robots.txt',
+          entrypoint: 'nca-ai-cms-astro-plugin/pages/robots.txt.ts',
+          prerender: false,
+        });
+        injectRoute({
+          pattern: '/sitemap.xml',
+          entrypoint: 'nca-ai-cms-astro-plugin/pages/sitemap.xml.ts',
+          prerender: false,
+        });
       },
 
       'astro:server:start'() {