@schneiderelli/cms-runtime 0.0.3 → 0.0.4

package/dist/registry.js

@@ -0,0 +1,374 @@
+// =============================================================================
+// CSM-RUNTIME REGISTRY
+// =============================================================================
+// Block-Metadaten für den Editor
+// Beschreibt welche Blocks verfügbar sind und wie sie konfiguriert werden
+// =============================================================================
+// -----------------------------------------------------------------------------
+// BLOCK REGISTRY - Alle verfügbaren Blocks
+// -----------------------------------------------------------------------------
+export const blockRegistry = [
+    // =========================================================================
+    // CONTENT BLOCKS
+    // =========================================================================
+    {
+        type: 'markdown',
+        label: 'Markdown',
+        icon: '📝',
+        description: 'Freier Text mit Markdown-Formatierung',
+        category: 'content',
+        defaults: { content: '' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Inhalt',
+                type: 'markdown',
+                required: true,
+                placeholder: 'Schreibe hier deinen Text...'
+            }
+        ]
+    },
+    {
+        type: 'heading',
+        label: 'Überschrift',
+        icon: '🔤',
+        description: 'Überschrift H1-H6',
+        category: 'content',
+        defaults: { text: '', level: 2 },
+        fields: [
+            {
+                name: 'text',
+                label: 'Text',
+                type: 'text',
+                required: true,
+                placeholder: 'Überschrift eingeben...'
+            },
+            {
+                name: 'level',
+                label: 'Level',
+                type: 'select',
+                options: [
+                    { value: '1', label: 'H1 - Hauptüberschrift' },
+                    { value: '2', label: 'H2 - Abschnitt' },
+                    { value: '3', label: 'H3 - Unterabschnitt' },
+                    { value: '4', label: 'H4' },
+                    { value: '5', label: 'H5' },
+                    { value: '6', label: 'H6' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'quote',
+        label: 'Zitat',
+        icon: '💬',
+        description: 'Zitat mit optionaler Quellenangabe',
+        category: 'content',
+        defaults: { content: '', source: '' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Zitat',
+                type: 'textarea',
+                required: true,
+                placeholder: 'Zitat eingeben...'
+            },
+            {
+                name: 'source',
+                label: 'Quelle',
+                type: 'text',
+                placeholder: 'Autor oder Quelle...'
+            }
+        ]
+    },
+    {
+        type: 'note',
+        label: 'Hinweis',
+        icon: '💡',
+        description: 'Info-Box, Warnung, Tipp oder Fehler',
+        category: 'content',
+        defaults: { content: '', variant: 'info' },
+        fields: [
+            {
+                name: 'content',
+                label: 'Inhalt',
+                type: 'markdown',
+                required: true,
+                placeholder: 'Hinweis-Text...'
+            },
+            {
+                name: 'variant',
+                label: 'Typ',
+                type: 'select',
+                options: [
+                    { value: 'info', label: '💙 Info' },
+                    { value: 'tip', label: '💚 Tipp' },
+                    { value: 'warning', label: '💛 Warnung' },
+                    { value: 'danger', label: '❤️ Achtung' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'faq',
+        label: 'FAQ',
+        icon: '❓',
+        description: 'Häufig gestellte Fragen',
+        category: 'content',
+        defaults: { title: '', items: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'Häufige Fragen'
+            },
+            {
+                name: 'items',
+                label: 'Fragen',
+                type: 'list',
+                listFields: [
+                    { name: 'q', label: 'Frage', type: 'text', required: true },
+                    { name: 'a', label: 'Antwort', type: 'markdown', required: true }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'howto',
+        label: 'Anleitung',
+        icon: '📋',
+        description: 'Schritt-für-Schritt-Anleitung',
+        category: 'content',
+        defaults: { title: '', steps: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'So gehts...'
+            },
+            {
+                name: 'steps',
+                label: 'Schritte',
+                type: 'list',
+                listFields: [
+                    { name: 'title', label: 'Schritt-Titel', type: 'text', required: true },
+                    { name: 'description', label: 'Beschreibung', type: 'markdown', required: true }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'hero',
+        label: 'Hero',
+        icon: '🦸',
+        description: 'Großer Titel-Bereich',
+        category: 'content',
+        defaults: { title: '', subtitle: '' },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel',
+                type: 'text',
+                required: true,
+                placeholder: 'Haupttitel'
+            },
+            {
+                name: 'subtitle',
+                label: 'Untertitel',
+                type: 'textarea',
+                placeholder: 'Kurze Beschreibung...'
+            }
+        ]
+    },
+    {
+        type: 'divider',
+        label: 'Trennlinie',
+        icon: '➖',
+        description: 'Horizontale Trennlinie',
+        category: 'content',
+        defaults: {},
+        fields: []
+    },
+    // =========================================================================
+    // MEDIA BLOCKS
+    // =========================================================================
+    {
+        type: 'image',
+        label: 'Bild',
+        icon: '🖼️',
+        description: 'Bild mit optionaler Beschriftung',
+        category: 'media',
+        defaults: { src: '', alt: '', caption: '' },
+        fields: [
+            {
+                name: 'src',
+                label: 'Bild',
+                type: 'image',
+                required: true
+            },
+            {
+                name: 'alt',
+                label: 'Alt-Text',
+                type: 'text',
+                placeholder: 'Beschreibung für Screenreader...'
+            },
+            {
+                name: 'caption',
+                label: 'Bildunterschrift',
+                type: 'text',
+                placeholder: 'Optionale Bildunterschrift...'
+            }
+        ]
+    },
+    // =========================================================================
+    // LAYOUT BLOCKS
+    // =========================================================================
+    {
+        type: 'children',
+        label: 'Unterseiten',
+        icon: '📂',
+        description: 'Zeigt Kind-Seiten als Grid',
+        category: 'layout',
+        defaults: { title: '', columns: 3 },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text',
+                placeholder: 'Alle Themen'
+            },
+            {
+                name: 'columns',
+                label: 'Spalten',
+                type: 'select',
+                options: [
+                    { value: '2', label: '2 Spalten' },
+                    { value: '3', label: '3 Spalten' },
+                    { value: '4', label: '4 Spalten' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'links',
+        label: 'Link-Liste',
+        icon: '🔗',
+        description: 'Liste von Links',
+        category: 'layout',
+        defaults: { title: '', items: [] },
+        fields: [
+            {
+                name: 'title',
+                label: 'Titel (optional)',
+                type: 'text'
+            },
+            {
+                name: 'items',
+                label: 'Links',
+                type: 'list',
+                listFields: [
+                    { name: 'label', label: 'Text', type: 'text', required: true },
+                    { name: 'href', label: 'URL', type: 'text', required: true },
+                    { name: 'icon', label: 'Icon', type: 'text' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'breadcrumb',
+        label: 'Breadcrumb',
+        icon: '🧭',
+        description: 'Navigationspfad',
+        category: 'layout',
+        defaults: {},
+        fields: []
+    },
+    // =========================================================================
+    // MONETIZATION BLOCKS
+    // =========================================================================
+    {
+        type: 'affiliate',
+        label: 'Affiliate',
+        icon: '🛒',
+        description: 'Affiliate-Produkt-Empfehlung',
+        category: 'monetization',
+        defaults: { ref: '', variant: 'box' },
+        fields: [
+            {
+                name: 'ref',
+                label: 'Referenz',
+                type: 'text',
+                placeholder: 'z.B. dyson/v11'
+            },
+            {
+                name: 'variant',
+                label: 'Darstellung',
+                type: 'select',
+                options: [
+                    { value: 'inline', label: 'Inline' },
+                    { value: 'box', label: 'Box' },
+                    { value: 'sticky', label: 'Sticky (Mobile)' },
+                    { value: 'floating', label: 'Floating (Desktop)' }
+                ]
+            }
+        ]
+    },
+    {
+        type: 'ad',
+        label: 'Werbung',
+        icon: '📢',
+        description: 'Werbeplatz',
+        category: 'monetization',
+        defaults: { slot: '', variant: 'inline' },
+        fields: [
+            {
+                name: 'slot',
+                label: 'Slot-ID',
+                type: 'text'
+            },
+            {
+                name: 'variant',
+                label: 'Darstellung',
+                type: 'select',
+                options: [
+                    { value: 'inline', label: 'Inline' },
+                    { value: 'banner', label: 'Banner' },
+                    { value: 'sidebar', label: 'Sidebar' }
+                ]
+            }
+        ]
+    }
+];
+// -----------------------------------------------------------------------------
+// HELPER FUNCTIONS
+// -----------------------------------------------------------------------------
+/** Holt Block-Definition by Type */
+export function getBlockDefinition(type) {
+    return blockRegistry.find(b => b.type === type);
+}
+/** Gruppiert Blocks nach Kategorie */
+export function getBlocksByCategory() {
+    const categories = {
+        content: [],
+        media: [],
+        layout: [],
+        monetization: []
+    };
+    for (const block of blockRegistry) {
+        categories[block.category].push(block);
+    }
+    return categories;
+}
+/** Erstellt einen neuen Block mit Default-Werten */
+export function createBlockFromDefinition(type) {
+    const def = getBlockDefinition(type);
+    if (!def)
+        return undefined;
+    return {
+        id: `block-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        type,
+        ...def.defaults
+    };
+}

package/dist/types.d.ts

@@ -1,47 +1,161 @@
+export interface Page {
+    /** Eindeutige ID (für D1 Storage) */
+    id: string;
+    /** URL-Slug */
+    slug: string;
+    /** Seitentitel (H1 und <title>) */
+    title: string;
+    /** Meta Description für SEO */
+    description?: string;
+    /** Parent-Slug für Hierarchie */
+    parent?: string;
+    /** Icon (Emoji) für Navigation */
+    icon?: string;
+    /** Reihenfolge in Navigation */
+    order?: number;
+    /** In Navigation anzeigen? */
+    showInNav?: boolean;
+    /** Kurzname für Navigation */
+    navTitle?: string;
+    /** Die Inhalte */
+    blocks: Block[];
+    /** Metadata */
+    createdAt?: string;
+    updatedAt?: string;
+}
 export interface BaseBlock {
+    /** Eindeutige Block-ID */
     id: string;
+    /** Block-Typ */
     type: string;
 }
-export interface TextBlock extends BaseBlock {
-    type: "text";
+/** Markdown Block - Der wichtigste Block */
+export interface MarkdownBlock extends BaseBlock {
+    type: 'markdown';
+    /** Markdown Content */
     content: string;
 }
+/** Heading Block */
 export interface HeadingBlock extends BaseBlock {
-    type: "heading";
-    level: number;
+    type: 'heading';
+    /** Überschrift-Text */
     text: string;
+    /** Level: 1-6 */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
 }
+/** Image Block */
 export interface ImageBlock extends BaseBlock {
-    type: "image";
+    type: 'image';
+    /** Bild-URL (R2 oder extern) */
     src: string;
+    /** Alt-Text */
     alt?: string;
+    /** Bildunterschrift */
+    caption?: string;
 }
-export interface MarkdownBlock extends BaseBlock {
-    type: "markdown";
-    content: string;
-}
+/** Quote Block */
 export interface QuoteBlock extends BaseBlock {
-    type: "quote";
-    text: string;
-    author?: string;
+    type: 'quote';
+    /** Zitat-Text (kann Markdown sein) */
+    content: string;
+    /** Quelle/Autor */
+    source?: string;
 }
+/** Divider Block */
 export interface DividerBlock extends BaseBlock {
-    type: "divider";
+    type: 'divider';
 }
-export interface FaqEntry extends BaseBlock {
-    question: string;
-    answer: string;
+/** Note/Callout Block */
+export interface NoteBlock extends BaseBlock {
+    type: 'note';
+    /** Inhalt (kann Markdown sein) */
+    content: string;
+    /** Variante */
+    variant: 'info' | 'warning' | 'tip' | 'danger';
 }
+/** FAQ Block */
 export interface FaqBlock extends BaseBlock {
-    type: "faq";
-    items: FaqEntry[];
+    type: 'faq';
+    /** Optionaler Titel */
+    title?: string;
+    /** FAQ-Einträge */
+    items: FaqItem[];
 }
-export interface HowToStep extends BaseBlock {
-    title: string;
-    description: string;
+export interface FaqItem {
+    /** Frage */
+    q: string;
+    /** Antwort (Markdown) */
+    a: string;
 }
+/** HowTo/Steps Block */
 export interface HowToBlock extends BaseBlock {
-    type: "howto";
+    type: 'howto';
+    /** Optionaler Titel */
+    title?: string;
+    /** Schritte */
     steps: HowToStep[];
 }
-export type Block = TextBlock | HeadingBlock | ImageBlock | MarkdownBlock | QuoteBlock | DividerBlock | FaqBlock | HowToBlock;
+export interface HowToStep {
+    /** Schritt-Titel */
+    title: string;
+    /** Beschreibung (Markdown) */
+    description: string;
+}
+/** Hero Block */
+export interface HeroBlock extends BaseBlock {
+    type: 'hero';
+    /** Haupttitel */
+    title: string;
+    /** Untertitel */
+    subtitle?: string;
+}
+/** Children Block - Zeigt Kind-Seiten */
+export interface ChildrenBlock extends BaseBlock {
+    type: 'children';
+    /** Optionaler Titel */
+    title?: string;
+    /** Anzahl Spalten */
+    columns?: 2 | 3 | 4;
+}
+/** Link List Block */
+export interface LinksBlock extends BaseBlock {
+    type: 'links';
+    /** Optionaler Titel */
+    title?: string;
+    /** Links */
+    items: LinkItem[];
+}
+export interface LinkItem {
+    /** Link-Text */
+    label: string;
+    /** URL */
+    href: string;
+    /** Icon (Emoji) */
+    icon?: string;
+}
+/** Breadcrumb Block */
+export interface BreadcrumbBlock extends BaseBlock {
+    type: 'breadcrumb';
+}
+/** Affiliate Block */
+export interface AffiliateBlock extends BaseBlock {
+    type: 'affiliate';
+    /** Referenz zum Affiliate */
+    ref?: string;
+    /** Darstellung */
+    variant?: 'inline' | 'box' | 'sticky' | 'floating';
+}
+/** Ad Block */
+export interface AdBlock extends BaseBlock {
+    type: 'ad';
+    /** Slot-ID */
+    slot?: string;
+    /** Darstellung */
+    variant?: 'inline' | 'banner' | 'sidebar';
+}
+export type Block = MarkdownBlock | HeadingBlock | ImageBlock | QuoteBlock | DividerBlock | NoteBlock | FaqBlock | HowToBlock | HeroBlock | ChildrenBlock | LinksBlock | BreadcrumbBlock | AffiliateBlock | AdBlock;
+export type BlockType = Block['type'];
+export declare function createBlock<T extends Block>(type: T['type'], data: Omit<T, 'id' | 'type'>): T;
+export declare function createPage(data: Omit<Page, 'id' | 'blocks' | 'createdAt' | 'updatedAt'> & {
+    blocks?: Block[];
+}): Page;

package/dist/types.js

@@ -1 +1,30 @@
-export {};
+// =============================================================================
+// CSM-RUNTIME TYPES
+// =============================================================================
+// Zentrale Type-Definitionen für Content Blocks
+// Wird von Editor UND Website-Framework genutzt
+// =============================================================================
+// -----------------------------------------------------------------------------
+// HELPER: Block erstellen mit Auto-ID
+// -----------------------------------------------------------------------------
+let blockIdCounter = 0;
+export function createBlock(type, data) {
+    return {
+        id: `block-${Date.now()}-${++blockIdCounter}`,
+        type,
+        ...data
+    };
+}
+// -----------------------------------------------------------------------------
+// HELPER: Page erstellen
+// -----------------------------------------------------------------------------
+export function createPage(data) {
+    const now = new Date().toISOString();
+    return {
+        id: `page-${Date.now()}`,
+        blocks: [],
+        createdAt: now,
+        updatedAt: now,
+        ...data
+    };
+}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@schneiderelli/cms-runtime",
-	"version": "0.0.3",
+	"version": "0.0.4",
+	"description": "Content System Manager Runtime - Shared types and components for CMS editor and website framework",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/blocks/TextBlock.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import type { TextBlock } from '../../types.js';
-	let { block } = $props<{ block: TextBlock }>();
-</script>
-
-<p class="prose whitespace-pre-line">
-	{@html block.content}
-</p>

package/dist/components/blocks/TextBlock.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { TextBlock } from '../../types.ts';
-type $$ComponentProps = {
-    block: TextBlock;
-};
-declare const TextBlock: import("svelte").Component<$$ComponentProps, {}, "">;
-type TextBlock = ReturnType<typeof TextBlock>;
-export default TextBlock;

package/dist/resolve.d.ts

@@ -1,15 +0,0 @@
-import TextBlock from "./components/blocks/TextBlock.svelte";
-import HeadingBlock from "./components/blocks/HeadingBlock.svelte";
-import ImageBlock from "./components/blocks/ImageBlock.svelte";
-export declare const BlockRegistry: {
-    text: import("svelte").Component<{
-        block: TextBlock;
-    }, {}, "">;
-    heading: import("svelte").Component<{
-        block: HeadingBlock;
-    }, {}, "">;
-    image: import("svelte").Component<{
-        block: ImageBlock;
-    }, {}, "">;
-};
-export declare const resolveBlockComponent: (block: any) => any;

package/dist/resolve.js

@@ -1,15 +0,0 @@
-import TextBlock from "./components/blocks/TextBlock.svelte";
-import HeadingBlock from "./components/blocks/HeadingBlock.svelte";
-import ImageBlock from "./components/blocks/ImageBlock.svelte";
-export const BlockRegistry = {
-    text: TextBlock,
-    heading: HeadingBlock,
-    image: ImageBlock
-};
-export const resolveBlockComponent = (block) => {
-    const Component = BlockRegistry[block.type];
-    if (!Component) {
-        throw new Error(`Unknown block type: ${block.type}`);
-    }
-    return Component;
-};