ahora ya funciona componentizado, creo, habrá que añadir una segunda plantilla y que el index se genere solo

src/lib/preview/Preview.svelte

@@ -1,18 +1,15 @@
 <script>
 	/** @type {number} */ export let templateIndex;
+	/** @type {string} */ export let templateImage;
 	import Heading from '$lib/templates/Heading.svelte';
 	import Title from '$lib/templates/Title.svelte';
-	import {
+	import Subtitle from '$lib/templates/Subtitle.svelte';
-		subtitle,
+	import Content from '$lib/templates/Content.svelte';
-		date,
+	import { date, weekday, address, organizedBy, colabs, canvas } from '$lib/stores/store';
-		weekday,
-		address,
-		content,
-		organizedBy,
-		colabs,
-		canvas
-	} from '$lib/stores/store';
 	import { getMonthName } from '$lib/monthName';
+	import Date from '$lib/templates/Date.svelte';
+	import Weekday from '$lib/templates/Weekday.svelte';
+	import Address from '$lib/templates/Address.svelte';
 
 	/** @type {Object<string,string>} */ let newdate = {};
 
@@ -39,16 +36,16 @@
 </script>
 
 <div class="preview">
-	<div class="result" bind:this={$canvas}>
+	<div class="result" bind:this={$canvas} style="background-image: url('/{templateImage}');">
 		{#if templateIndex >= 0}
 			<Heading {templateIndex} />
 			<Title {templateIndex} />
-			<div class="subtitle">{$subtitle}</div>
+			<Subtitle {templateIndex} />
-			<div class="content">{@html $content}</div>
+			<Content {templateIndex} />
-			<div class="weekday">{$weekday}</div>
+			<Weekday {templateIndex} />
-			{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
+			<Date {templateIndex} />
-			{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
+			<Address {templateIndex} />
-			<div class="address">{$address}</div>
+			<!-- <div class="address">{$address}</div> -->
 		{/if}
 		{#if $organizedBy[0] && $colabs[0]}
 			<div class="orgcolab">
@@ -111,47 +108,14 @@
 		aspect-ratio: 1/1.4142;
 		min-height: 842px;
 		align-self: center;
-		/* background-color: rebeccapurple; */
 		width: auto;
-		background-image: url('/imagen01.png');
+		/* background-image: url('/imagen01.png'); */
 		background-size: contain;
 		position: relative;
 		padding: 1rem;
-		/* border-radius: 0.5rem; */
 	}
 
-	.subtitle {
+	/* .weekday {
-		position: absolute;
-		display: flex;
-		top: 410px;
-		left: 1rem;
-		right: 2rem;
-		font-size: 1.2rem;
-		color: #787;
-		text-transform: uppercase;
-		height: 3rem;
-		overflow: hidden;
-		text-align: center;
-		align-items: start;
-		justify-content: center;
-	}
-
-	.content {
-		position: absolute;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		top: 480px;
-		left: 1.5rem;
-		right: 17rem;
-		height: 8.5rem;
-		font-size: 0.8rem;
-		color: #222;
-		line-height: 1rem;
-		overflow: hidden;
-	}
-
-	.weekday {
 		position: absolute;
 		text-transform: uppercase;
 		top: 600px;
@@ -163,9 +127,9 @@
 		font-weight: 700;
 		overflow: hidden;
 		text-align: center;
-	}
+	} */
 
-	.date {
+	/* .date {
 		position: absolute;
 		text-transform: uppercase;
 		top: 625px;
@@ -177,8 +141,8 @@
 		max-height: 2rem;
 		overflow: hidden;
 		text-align: center;
-	}
+	} */
-
+	/* 
 	.time {
 		position: absolute;
 		top: 645px;
@@ -190,9 +154,9 @@
 		overflow: hidden;
 		text-align: center;
 		font-weight: 700;
-	}
+	} */
 
-	.address {
+	/* .address {
 		position: absolute;
 		display: grid;
 		top: 620px;
@@ -209,7 +173,7 @@
 		white-space: pre-wrap;
 		align-items: center;
 		justify-content: center;
-	}
+	} */
 
 	.imagetitle {
 		position: absolute;
@@ -292,5 +256,4 @@
 		grid-column: 2/3;
 		display: flex;
 	}
-	/* @import url(`'${template}.css'`); */
 </style>

src/lib/templates/Address.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { address } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $address}
+	<div
+		class="address"
+		style="
+    top: {templates[templateIndex].address.top}px;
+    height: {templates[templateIndex].address.height}rem;
+    left: {templates[templateIndex].address.left}rem;
+    right: {templates[templateIndex].address.right}rem;
+    color: {templates[templateIndex].address.color};
+    font-size: {templates[templateIndex].address.fontSize}rem;
+    font-family: {templates[templateIndex].address.fontFamily};
+    line-height: {templates[templateIndex].address.lineHeight};
+    "
+	>
+		{$address}
+	</div>
+{/if}
+
+<style>
+	.address {
+		position: absolute;
+		display: grid;
+		text-align: center;
+		font-weight: 700;
+		overflow: hidden;
+		white-space: pre-wrap;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

src/lib/templates/Content.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { content } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $content}
+	<div
+		class="content"
+		style="
+    top: {templates[templateIndex].content.top}px;
+    height: {templates[templateIndex].content.height}rem;
+    left: {templates[templateIndex].content.left}rem;
+    right: {templates[templateIndex].content.right}rem;
+    color: {templates[templateIndex].content.color};
+    font-size: {templates[templateIndex].content.fontSize}rem;
+    font-family: {templates[templateIndex].content.fontFamily};
+    "
+	>
+		{@html $content}
+	</div>
+{/if}
+
+<style>
+	.content {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		justify-content: center;
+	}
+</style>

src/lib/templates/Date.svelte

@@ -0,0 +1,89 @@
+<script>
+	import { getMonthName } from '$lib/monthName';
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { date } from '$lib/stores/store';
+
+	/** @typedef
+	 * {{
+	 * date: string;
+	 * time: string;
+	 * }} Newdate
+	 */
+
+	/** @type {Newdate} */ let newdate = { date: '', time: '' };
+
+	const convertDateTime = (/** @type {(string | undefined)} */ datetime) => {
+		if (datetime == undefined) {
+			return {
+				date: '',
+				time: ''
+			};
+		}
+		const monthNumber = datetime.split('-')[1];
+		const day = datetime.split('-')[2].split('T')[0];
+		const time = datetime.split('T')[1];
+		const month = getMonthName(monthNumber);
+		return {
+			date: `${day} de ${month}`,
+			time: time
+		};
+	};
+
+	$: if ($date !== '') {
+		newdate = convertDateTime($date);
+	}
+</script>
+
+{#if templates[templateIndex] && newdate.date}
+	<div
+		class="date"
+		style="
+    top: {templates[templateIndex].date.top}px;
+    height: {templates[templateIndex].date.height}rem;
+    left: {templates[templateIndex].date.left}rem;
+    right: {templates[templateIndex].date.right}rem;
+    color: {templates[templateIndex].date.color};
+    font-size: {templates[templateIndex].date.fontSize}rem;
+    font-family: {templates[templateIndex].date.fontFamily};
+    "
+	>
+		{newdate.date}
+	</div>
+{/if}
+{#if templates[templateIndex] && newdate.time}
+	<div
+		class="time"
+		style="
+    top: {templates[templateIndex].time.top}px;
+    height: {templates[templateIndex].time.height}rem;
+    left: {templates[templateIndex].time.left}rem;
+    right: {templates[templateIndex].time.right}rem;
+    color: {templates[templateIndex].time.color};
+    font-size: {templates[templateIndex].time.fontSize}rem;
+    font-family: {templates[templateIndex].time.fontFamily};
+    "
+	>
+		{newdate.time}
+	</div>
+{/if}
+
+<style>
+	.date {
+		position: absolute;
+		text-transform: uppercase;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: start;
+		text-align: center;
+	}
+
+	.time {
+		position: absolute;
+		overflow: hidden;
+		text-align: center;
+		font-weight: 700;
+	}
+</style>

src/lib/templates/Subtitle.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { subtitle } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $subtitle}
+	<div
+		class="subtitle"
+		style="
+    top: {templates[templateIndex].subtitle.top}px;
+    height: {templates[templateIndex].subtitle.height}rem;
+    left: {templates[templateIndex].subtitle.left}rem;
+    right: {templates[templateIndex].subtitle.right}rem;
+    color: {templates[templateIndex].subtitle.color};
+    font-size: {templates[templateIndex].subtitle.fontSize}rem;
+    font-family: {templates[templateIndex].subtitle.fontFamily};
+    "
+	>
+		{$subtitle}
+	</div>
+{/if}
+
+<style>
+	.subtitle {
+		position: absolute;
+		font-variant: small-caps;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: start;
+		text-align: center;
+	}
+</style>

src/lib/templates/Weekday.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { weekday } from '$lib/stores/store';
+</script>
+
+{#if templates[templateIndex] && $weekday}
+	<div
+		class="weekday"
+		style="
+    top: {templates[templateIndex].weekday.top}px;
+    height: {templates[templateIndex].weekday.height}rem;
+    left: {templates[templateIndex].weekday.left}rem;
+    right: {templates[templateIndex].weekday.right}rem;
+    color: {templates[templateIndex].weekday.color};
+    font-size: {templates[templateIndex].weekday.fontSize}rem;
+    font-family: {templates[templateIndex].weekday.fontFamily};
+    "
+	>
+		{$weekday}
+	</div>
+{/if}
+
+<style>
+	.weekday {
+		position: absolute;
+		text-transform: uppercase;
+		font-weight: 700;
+		overflow: hidden;
+		text-align: center;
+	}
+</style>

src/lib/templates/templates.js

@@ -15,10 +15,12 @@ import { verde } from '$lib/templates/verde';
 /**
  * @typedef {{
   * name: string;
+  * image: string;
   * heading: Element;
   * title: Element;
   * subtitle: Element;
-  * datetime: Element;
+  * date: Element;
+  * time: Element;
   * weekday: Element;
   * content: Element;
   * address: Element;

src/lib/templates/verde.js

@@ -1,5 +1,6 @@
 
-/** @typedef {{
+/** 
+* @typedef {{
 * top: number;
 * height: number;
 * right: number;
@@ -14,10 +15,12 @@
 /**
 * @typedef {{
 * name: string;
+* image: string;
 * heading: Element;
 * title: Element;
 * subtitle: Element;
-* datetime: Element;
+* date: Element;
+* time: Element;
 * weekday: Element;
 * content: Element;
 * address: Element;
@@ -27,6 +30,7 @@
 /** @type {Template} */
 export const verde = {
   name: "verde",
+  image: "imagen01.png",
   heading: {
     top: 300,
     height: 1.2,
@@ -49,53 +53,63 @@ export const verde = {
 
   },
   subtitle: {
-    top: 100,
+    top: 420,
-    height: 6,
+    height: 3,
-    left: 2,
+    left: 1,
     right: 2,
-    fontSize: 1.8,
+    fontSize: 1.2,
-    color: "firebrick",
+    color: "#787",
     fontFamily: "Gill Sans, sans-serif",
-    lineHeight: 2
+    lineHeight: 1.5
   },
   content: {
-    top: 100,
+    top: 480,
-    height: 6,
+    height: 8.5,
-    left: 2,
+    left: 1.5,
-    right: 2,
+    right: 17,
-    fontSize: 1.8,
+    fontSize: 0.8,
-    color: "firebrick",
+    color: "#222",
-    fontFamily: "Gill Sans, sans-serif",
+    fontFamily: "sans-serif",
-    lineHeight: 1
+    lineHeight: 1.1
   },
-  datetime: {
+  date: {
-    top: 400,
+    top: 625,
     height: 4,
-    left: 2,
+    left: 18.5,
-    right: 2,
+    right: 4,
-    fontSize: 1,
+    fontSize: 1.1,
-    color: "firebrick",
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1
+  },
+  time: {
+    top: 645,
+    height: 2,
+    left: 18.5,
+    right: 5,
+    fontSize: 1.8,
+    color: "#fff",
     fontFamily: "sans-serif",
     lineHeight: 1
   },
   weekday: {
-    top: 500,
+    top: 600,
     height: 1.5,
-    left: 2,
+    left: 18.5,
-    right: 2,
+    right: 5,
-    fontSize: 1,
+    fontSize: 1.3,
-    color: "#333",
+    color: "#fff",
     fontFamily: "sans-serif",
-    lineHeight: 1
+    lineHeight: 1.8
   },
   address: {
-    top: 500,
+    top: 625,
-    height: 1.5,
+    height: 4.5,
     left: 2,
-    right: 2,
+    right: 20,
     fontSize: 1,
-    color: "#333",
+    color: "firebrick",
     fontFamily: "sans-serif",
-    lineHeight: 1
+    lineHeight: 1.5
   },
 }

src/routes/+page.svelte

@@ -1,8 +1,4 @@
 <script>
-	import Form from '$lib/form/Form.svelte';
-	import Preview from '$lib/preview/Preview.svelte';
-
-	let template = 'verde';
 </script>
 
 <svelte:head>
@@ -14,26 +10,18 @@
 </svelte:head>
 
 <div class="main">
-	<section class="form"><Form /></section>
+	<ul>
-	<section class="preview"><Preview /></section>
+		<li><a href="/verde">Plantilla Verde</a></li>
+	</ul>
 </div>
 
 <style>
 	.main {
 		display: grid;
-		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
+		grid-template-columns: repeat(4, min-content);
-		grid-gap: 0.5rem;
+		max-width: 900px;
-		min-height: calc(100vh - 5rem);
+		margin: 0 auto;
-	}
+		border: 1px solid blue;
-
+		padding: 1rem;
-	.form {
-		grid-column: 1/2;
-		background-color: rgb(230, 240, 240);
-	}
-
-	.preview {
-		grid-column: 2/3;
-		min-height: 200px;
-		background-color: rgb(240, 238, 240);
 	}
 </style>

src/routes/[slug]/+error.svelte

@@ -0,0 +1,14 @@
+<script>
+	import { page } from '$app/stores';
+</script>
+
+{#if $page.error}
+	<div class="error-message"><h1>{$page.status}: {$page.error.message}</h1></div>
+{/if}
+
+<style>
+	.error-message {
+		max-width: 480px;
+		margin: 0 auto;
+	}
+</style>

src/routes/[slug]/+page.js

@@ -1,12 +1,21 @@
+import { error } from '@sveltejs/kit';
 import { templates } from '$lib/templates/templates';
 
 /** @type {import('./$types').PageLoad} */
 export function load(event) {
+
+  /** @type {string} */
   const slug = event.params.slug;
-	/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+
+	/** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+  /** @type {string} */ const templateImage = templates[templateIndex].image;
   if (templateIndex !== -1) {
     return {
-      slug
+      slug,
+      templateIndex,
+      templateImage
     }
   }
+
+  throw error(404, "Not found");
 }

src/routes/[slug]/+page.svelte

@@ -1,26 +1,33 @@
 <script>
 	import { templates } from '$lib/templates/templates';
-	export let data;
+	/**
+	 * @typedef {{
+	 * slug: string;
+	 * templateIndex: number;
+	 * templateImage: string;
+	 * }}
+	 * LoadFunctionData
+	 */
+
+	/** @type LoadFunctionData */ export let data;
 	import Form from '$lib/form/Form.svelte';
 	import Preview from '$lib/preview/Preview.svelte';
 
 	const slug = data.slug;
-	/** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+	const templateIndex = data.templateIndex;
+	const templateImage = data.templateImage;
 </script>
 
 <svelte:head>
-	<title>Carteles DMD</title>
+	<title>Carteles DMD - Plantilla {data.slug}</title>
-	<meta
-		name="description"
-		content="Aplicación para la generación automática de carteles de actividades de DMD"
-	/>
 </svelte:head>
 
 <div class="main">
 	<section class="form"><Form /></section>
+
 	{#if templateIndex !== undefined}
 		<section class="preview">
-			<Preview {templateIndex} />
+			<Preview {templateIndex} {templateImage} />
 		</section>
 	{/if}
 </div>