@schneiderelli/cms-runtime 0.0.1 → 0.0.2

package/dist/components/BlockRenderer.svelte

@@ -1,12 +1,78 @@
 <script lang="ts">
-	import { resolveBlockComponent } from '../resolve.js';
-	import type { Block } from '../types.js';
-
-	let { blocks } = $props<{
-		blocks: Block[];
-	}>();
+    import type {
+        Block,
+        TextBlock,
+        HeadingBlock,
+        ImageBlock,
+        MarkdownBlock,
+        QuoteBlock,
+        DividerBlock,
+        FaqBlock,
+        HowToBlock
+    } from "../types.js";
+import { marked } from "marked";
+    let { blocks } = $props<{ blocks: Block[] }>();
 </script>
 
+<div class="block-container">
 {#each blocks as block}
-	{@render resolveBlockComponent(block)(block)}
+    {#if block.type === "heading"}
+        <h1 style:margin-bottom="1rem">
+            {(block as HeadingBlock).text}
+        </h1>
+
+    {:else if block.type === "text"}
+        <p>
+            {(block as TextBlock).content}
+        </p>
+
+    {:else if block.type === "image"}
+        <img
+            src={(block as ImageBlock).src}
+            alt={(block as ImageBlock).alt ?? ""}
+            style="max-width: 100%; height: auto; margin: 1rem 0;"
+        />
+
+    {:else if block.type === "markdown"}
+        <div class="markdown">
+            {@html marked((block as MarkdownBlock).content)}
+        </div>
+
+    {:else if block.type === "quote"}
+        <blockquote style="margin: 1rem 0; font-style: italic;">
+            <p>{(block as QuoteBlock).text}</p>
+            {#if (block as QuoteBlock).author}
+                <footer>– {(block as QuoteBlock).author}</footer>
+            {/if}
+        </blockquote>
+
+    {:else if block.type === "divider"}
+        <hr style="margin: 2rem 0;" />
+
+    {:else if block.type === "faq"}
+        <div class="faq-block">
+            {#each (block as FaqBlock).items as item}
+                <details>
+                    <summary>{item.question}</summary>
+                    <div class="markdown">
+                        {@html marked(item.answer)}
+                    </div>
+                </details>
+            {/each}
+        </div>
+
+    {:else if block.type === "howto"}
+        <ol class="howto-block">
+            {#each (block as HowToBlock).steps as step}
+                <li>
+                    <strong>{step.title}</strong>
+                    <div class="markdown">
+                        {@html marked(step.description)}
+                    </div>
+                </li>
+            {/each}
+        </ol>
+
+    {/if}
 {/each}
+</div>

package/dist/components/BlockRenderer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Block } from '../types.ts';
+import type { Block } from "../types.ts";
 type $$ComponentProps = {
     blocks: Block[];
 };

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export * from "./types";
-export * from "./resolve";
-export { default as BlockRenderer } from "./components/BlockRenderer.svelte";
+export * from './types';
+export { default as BlockRenderer } from './components/BlockRenderer.svelte';

package/dist/index.js

@@ -1,4 +1,2 @@
-// Reexport your entry components here
-export * from "./types";
-export * from "./resolve";
-export { default as BlockRenderer } from "./components/BlockRenderer.svelte";
+export * from './types';
+export { default as BlockRenderer } from './components/BlockRenderer.svelte';

package/dist/types.d.ts

@@ -12,4 +12,32 @@ export interface ImageBlock {
     src: string;
     alt?: string;
 }
-export type Block = TextBlock | HeadingBlock | ImageBlock;
+export interface MarkdownBlock {
+    type: "markdown";
+    content: string;
+}
+export interface QuoteBlock {
+    type: "quote";
+    text: string;
+    author?: string;
+}
+export interface DividerBlock {
+    type: "divider";
+}
+export interface FaqEntry {
+    question: string;
+    answer: string;
+}
+export interface FaqBlock {
+    type: "faq";
+    items: FaqEntry[];
+}
+export interface HowToStep {
+    title: string;
+    description: string;
+}
+export interface HowToBlock {
+    type: "howto";
+    steps: HowToStep[];
+}
+export type Block = TextBlock | HeadingBlock | ImageBlock | MarkdownBlock | QuoteBlock | DividerBlock | FaqBlock | HowToBlock;

package/dist/types.js

@@ -1,4 +1,4 @@
-//
-// Basic shared types for the runtime system
-//
+// ---------------------------------------------
+// ALTE BLOCKS
+// ---------------------------------------------
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@schneiderelli/cms-runtime",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -69,5 +69,8 @@
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"dependencies": {
+		"marked": "^17.0.1"
+	}
 }