pruebas locas

src/lib/preview/Preview.svelte

@@ -1,5 +1,7 @@
 <script>
-	import './verde.css';
+	// import './verde.css';
+	import { templates } from '$lib/templates/templates';
+	import Heading from '$lib/templates/Heading.svelte';
 	import {
 		title,
 		subtitle,
@@ -41,6 +43,7 @@
 <div class="preview">
 	<div class="result" bind:this={$canvas}>
 		<div class="heading">{$heading}</div>
+		<Heading template={'verde'} />
 		<div class="title">{$title}</div>
 		<div class="subtitle">{$subtitle}</div>
 		<div class="content">{@html $content}</div>

src/lib/templates/heading.svelte

@@ -0,0 +1,15 @@
+<script>
+  import {templates} from '$lib/templates/templates'
+  export let template;
+</script>
+
+<div class="heading" style=`top: ${templates[template].heading.top}`>
+	<input type="text" placeholder="Ej. Charla, taller, coloquio" />
+</div>
+
+
+<style>
+  .heading {
+    position: absolute;
+  }
+</style>

src/lib/templates/templates.js

@@ -1,6 +1,18 @@
 import { verde } from '$lib/templates/verde';
+
 /**
-* @type {Array<Object>} 
-*/
+ * @typedef {{
+  * name: string;
+  * heading: Object;
+  * title: string;
+  * subtitle: string;
+  * datetime: string;
+  * weekday: string;
+  * content: string;
+  * address: string;
+ * }} Template
+ */
+
+/** @type Array<Template> */
 export const templates = [];
 templates.push(verde);

src/lib/templates/verde.js

@@ -1,3 +1,14 @@
+/**
+* @typedef {Object}  Template
+* @property name {string}
+* @property heading {Object}
+* @property title {string}
+* @property subtitle {string}
+* @property content {string}
+* @property datetime {string}
+* @property weekday {string}
+* @property address {string}
+*/
 export const verde = {
   name: "verde",
   heading: {