templates (#7)

Ya funciona lo de incluir plantillas y hay dos

Co-authored-by: Borja Robert <borja@brobert.net>
Reviewed-on: #7

src/lib/header/Header.svelte

@@ -1,5 +1,5 @@
 <header>
-	<h1>Carteles dmd</h1>
+	<h1><a href="/">Carteles dmd</a></h1>
 </header>
 
 <style>
@@ -17,4 +17,9 @@
 		/* font-family: 'Gill Sans', sans-serif; */
 		/* font-variant: small-caps; */
 	}
+	a {
+		color: inherit;
+		text-decoration: none;
+		cursor: pointer;
+	}
 </style>

src/lib/preview/Preview.svelte

@@ -1,18 +1,15 @@
 <script>
-	import './verde.css';
+	/** @type {number} */ export let templateIndex;
-	import {
+	/** @type {string} */ export let templateImage;
-		title,
+	import Heading from '$lib/templates/Heading.svelte';
-		subtitle,
+	import Title from '$lib/templates/Title.svelte';
-		date,
+	import Subtitle from '$lib/templates/Subtitle.svelte';
-		weekday,
+	import Content from '$lib/templates/Content.svelte';
-		address,
+	import { date, weekday, address, organizedBy, colabs, canvas } from '$lib/stores/store';
-		content,
-		heading,
-		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,21 +36,23 @@
 </script>
 
 <div class="preview">
-	<div class="result" bind:this={$canvas}>
+	<div class="result" bind:this={$canvas} style="background-image: url('/{templateImage}');">
-		<div class="heading">{$heading}</div>
+		{#if templateIndex >= 0}
-		<div class="title">{$title}</div>
+			<Heading {templateIndex} />
-		<div class="subtitle">{$subtitle}</div>
+			<Title {templateIndex} />
-		<div class="content">{@html $content}</div>
+			<Subtitle {templateIndex} />
-		<div class="weekday">{$weekday}</div>
+			<Content {templateIndex} />
-		{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
+			<Weekday {templateIndex} />
-		{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
+			<Date {templateIndex} />
-		<div class="address">{$address}</div>
+			<Address {templateIndex} />
+			<!-- <div class="address">{$address}</div> -->
+		{/if}
 		{#if $organizedBy[0] && $colabs[0]}
 			<div class="orgcolab">
 				<div class="org">Organiza:</div>
 				<div class="colab">Colabora:</div>
 				<div class="orgmixed">
-					{#each $organizedBy as organization, i}
+					{#each $organizedBy as organization}
 						<div class="organization">
 							<img src={organization.image} alt={organization.text} />
 							<div class="caption">{organization.text}</div>
@@ -61,7 +60,7 @@
 					{/each}
 				</div>
 				<div class="colabmixed">
-					{#each $colabs as organization, i}
+					{#each $colabs as organization}
 						<div class="organization">
 							<img src={organization.image} alt={organization.text} />
 							<div class="caption">{organization.text}</div>
@@ -73,7 +72,7 @@
 		{#if $organizedBy[0] && !$colabs[0]}
 			<div class="imagetitle">Organiza:</div>
 			<div class="organized-by">
-				{#each $organizedBy as organization, i}
+				{#each $organizedBy as organization}
 					<div class="organization">
 						<img src={organization.image} alt={organization.text} />
 						<div class="caption">{organization.text}</div>
@@ -84,7 +83,7 @@
 		{#if $colabs[0] && !$organizedBy[0]}
 			<div class="imagetitle">Colabora:</div>
 			<div class="organized-by">
-				{#each $colabs as organization, i}
+				{#each $colabs as organization}
 					<div class="organization">
 						<img src={organization.image} alt={organization.text} />
 						<div class="caption">{organization.text}</div>
@@ -96,5 +95,104 @@
 </div>
 
 <style>
-	/* @import url(`'${template}.css'`); */
+	.preview {
+		padding: 0.5rem;
+		display: grid;
+		justify-content: center;
+		grid-template-columns: 1fr;
+		align-items: start;
+	}
+
+	.result {
+		display: block;
+		aspect-ratio: 1/1.4142;
+		min-height: 842px;
+		align-self: center;
+		width: auto;
+		background-size: contain;
+		position: relative;
+		padding: 1rem;
+	}
+
+	.imagetitle {
+		position: absolute;
+		top: 720px;
+		font-size: 0.8rem;
+		color: #444;
+	}
+
+	.organized-by {
+		position: absolute;
+		top: 740px;
+		left: 1rem;
+		right: 1rem;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(64px, 100%/5)), 1fr));
+		grid-template-rows: min-content;
+		grid-auto-rows: auto;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.organization {
+		margin: 0 1rem;
+		display: flex;
+		flex-direction: column;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.organization img {
+		max-height: 48px;
+		max-width: 100px;
+		margin: 0 auto;
+		opacity: 75%;
+	}
+
+	.caption {
+		margin: 0.5rem 0;
+		font-size: 0.7rem;
+		font-family: sans-serif;
+		text-transform: uppercase;
+		color: #666;
+	}
+
+	.orgcolab {
+		position: absolute;
+		top: 720px;
+		height: 7rem;
+		overflow: hidden;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: min-content 1fr;
+		grid-gap: 0.25rem;
+		justify-content: start;
+		align-items: center;
+		width: 100%;
+	}
+
+	.org {
+		grid-row: 1/2;
+		grid-column: 1/2;
+		font-size: 0.8rem;
+	}
+
+	.colab {
+		font-size: 0.8rem;
+		grid-row: 1/2;
+		grid-column: 2/3;
+	}
+
+	.orgmixed {
+		grid-row: 2/3;
+		grid-column: 1/2;
+		display: flex;
+	}
+
+	.colabmixed {
+		grid-row: 2/3;
+		grid-column: 2/3;
+		display: flex;
+	}
 </style>

src/lib/templates/Address.svelte

@@ -0,0 +1,38 @@
+<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};
+		text-align: {templates[templateIndex].address.textAlign};
+		font-weight: {templates[templateIndex].address.fontWeight};
+		line-height: {templates[templateIndex].address.lineHeight}rem;
+    "
+	>
+		{$address}
+	</div>
+{/if}
+
+<style>
+	.address {
+		position: absolute;
+		display: grid;
+		overflow: hidden;
+		white-space: pre-wrap;
+		align-items: center;
+		justify-content: center;
+	}
+</style>

src/lib/templates/Content.svelte

@@ -0,0 +1,36 @@
+<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};
+		text-align: {templates[templateIndex].content.textAlign};
+		font-weight: {templates[templateIndex].content.fontWeight};
+		line-height: {templates[templateIndex].content.lineHeight}rem;
+    "
+	>
+		{@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,90 @@
+<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};
+		text-align: {templates[templateIndex].date.textAlign};
+		font-weight: {templates[templateIndex].date.fontWeight};
+		line-height: {templates[templateIndex].date.lineHeight}rem;
+    "
+	>
+		{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};
+		text-align: {templates[templateIndex].time.textAlign};
+		font-weight: {templates[templateIndex].time.fontWeight};
+		line-height: {templates[templateIndex].time.lineHeight}rem;
+    "
+	>
+		{newdate.time}
+	</div>
+{/if}
+
+<style>
+	.date {
+		position: absolute;
+		text-transform: uppercase;
+		overflow: hidden;
+		display: block;
+	}
+
+	.time {
+		position: absolute;
+		overflow: hidden;
+	}
+</style>

src/lib/templates/Subtitle.svelte

@@ -0,0 +1,37 @@
+<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};
+		text-align: {templates[templateIndex].subtitle.textAlign};
+		font-weight: {templates[templateIndex].subtitle.fontWeight};
+		line-height: {templates[templateIndex].subtitle.lineHeight}rem;
+    "
+	>
+		{$subtitle}
+	</div>
+{/if}
+
+<style>
+	.subtitle {
+		position: absolute;
+		font-variant: small-caps;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: start;
+	}
+</style>

src/lib/templates/Template.svelte

@@ -1,2 +0,0 @@
-<script>
-</script>

src/lib/templates/Title.svelte

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

src/lib/templates/Weekday.svelte

@@ -0,0 +1,34 @@
+<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};
+		text-align: {templates[templateIndex].weekday.textAlign};
+		font-weight: {templates[templateIndex].weekday.fontWeight};
+		line-height: {templates[templateIndex].weekday.lineHeight}rem;
+    "
+	>
+		{$weekday}
+	</div>
+{/if}
+
+<style>
+	.weekday {
+		position: absolute;
+		text-transform: uppercase;
+		overflow: hidden;
+	}
+</style>

src/lib/templates/azul.js

@@ -0,0 +1,104 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const azul = {
+  name: "azul",
+  image: "azul.png",
+  heading: {
+    top: 440,
+    height: 2,
+    left: 10,
+    right: 1,
+    fontSize: 2,
+    color: "white",
+    fontFamily: "sans-serif",
+    lineHeight: 2,
+    textAlign: "right",
+    fontWeight: 700
+  },
+  title: {
+    top: 487,
+    height: 7.5,
+    left: 1,
+    right: 1,
+    fontSize: 3,
+    color: "firebrick",
+    fontFamily: "sans-serif",
+    lineHeight: 2.4,
+    textAlign: "right",
+    fontWeight: 700
+
+  },
+  subtitle: {
+    top: 620,
+    height: 1.4,
+    left: 1,
+    right: 2,
+    fontSize: 1.6,
+    color: "white",
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 400
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  date: {
+    top: 25,
+    height: 4,
+    left: 5,
+    right: 1,
+    fontSize: 1.1,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1,
+    textAlign: "right",
+    fontWeight: 700
+  },
+  time: {
+    top: 65,
+    height: 2,
+    left: 18.5,
+    right: 1,
+    fontSize: 1.8,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 2,
+    textAlign: "right",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 25,
+    height: 1.5,
+    left: 1,
+    right: 10,
+    fontSize: 1.3,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 700
+  },
+  address: {
+    top: 660,
+    height: 5.5,
+    left: 2,
+    right: 2,
+    fontSize: 1.2,
+    color: "white",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "left",
+    fontWeight: 400
+  },
+}

src/lib/templates/heading.svelte

@@ -0,0 +1,34 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+
+	/** @type number */ export let templateIndex;
+	import { heading } from '$lib/stores/store';
+</script>
+
+{#if $heading && templates[templateIndex].heading}
+	<div
+		class="heading"
+		style="
+  top: {templates[templateIndex].heading.top}px;
+  height: {templates[templateIndex].heading.height}rem;
+  left: {templates[templateIndex].heading.left}rem;
+  right: {templates[templateIndex].heading.right}rem;
+  color: {templates[templateIndex].heading.color};
+  font-size: {templates[templateIndex].heading.fontSize}rem;
+  font-family: {templates[templateIndex].heading.fontFamily};
+	text-align: {templates[templateIndex].heading.textAlign};
+	font-weight: {templates[templateIndex].heading.fontWeight};
+	line-height: {templates[templateIndex].heading.lineHeight}rem;
+  "
+	>
+		{$heading}
+	</div>
+{/if}
+
+<style>
+	.heading {
+		position: absolute;
+		font-variant: small-caps;
+		overflow: hidden;
+	}
+</style>

src/lib/templates/templates.js

@@ -0,0 +1,36 @@
+import { verde } from '$lib/templates/verde';
+import { azul } from '$lib/templates/azul';
+/** 
+* @typedef {{
+* top: number;
+* height: number;
+* right: number;
+* left: number;
+* color: string;
+* fontSize: number;
+* fontFamily: string;
+* lineHeight: number;
+* textAlign: string;
+* fontWeight: number;
+* }} Element
+*/
+
+/**
+* @typedef {{
+* name: string;
+* image: string;
+* heading: Element;
+* title: Element;
+* subtitle: Element;
+* date: Element;
+* time: Element;
+* weekday: Element;
+* content: Element;
+* address: Element;
+* }} Template
+*/
+
+/** @type Array<Template> */
+export const templates = [];
+templates.push(verde);
+templates.push(azul);

src/lib/templates/verde.js

@@ -0,0 +1,103 @@
+import '$lib/templates/templates'
+
+/** @type {import('$lib/templates/templates').Template} */
+export const verde = {
+  name: "verde",
+  image: "imagen01.png",
+  heading: {
+    top: 300,
+    height: 1.2,
+    left: 1,
+    right: 1,
+    fontSize: 1,
+    color: "grey",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  title: {
+    top: 320,
+    height: 6,
+    left: 1,
+    right: 1,
+    fontSize: 2.9,
+    color: "firebrick",
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 2.1,
+    textAlign: "center",
+    fontWeight: 400
+  },
+  subtitle: {
+    top: 420,
+    height: 3,
+    left: 1,
+    right: 2,
+    fontSize: 1.4,
+    color: "#787",
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 400
+  },
+  content: {
+    top: 480,
+    height: 8.5,
+    left: 1.5,
+    right: 17,
+    fontSize: 0.8,
+    color: "#222",
+    fontFamily: "sans-serif",
+    lineHeight: 1.1,
+    textAlign: "left",
+    fontWeight: 400
+  },
+  date: {
+    top: 625,
+    height: 1,
+    left: 18.5,
+    right: 4,
+    fontSize: 1.1,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1,
+    textAlign: "center",
+    fontWeight: 700
+  },
+  time: {
+    top: 647,
+    height: 2,
+    left: 18.5,
+    right: 5,
+    fontSize: 1.8,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 700
+  },
+  weekday: {
+    top: 600,
+    height: 1.5,
+    left: 18.5,
+    right: 5,
+    fontSize: 1.3,
+    color: "#fff",
+    fontFamily: "sans-serif",
+    lineHeight: 1.8,
+    textAlign: "center",
+    fontWeight: 700
+  },
+  address: {
+    top: 625,
+    height: 4.5,
+    left: 2,
+    right: 20,
+    fontSize: 1,
+    color: "firebrick",
+    fontFamily: "sans-serif",
+    lineHeight: 1.5,
+    textAlign: "center",
+    fontWeight: 700
+  },
+}

src/routes/+page.svelte

@@ -1,8 +1,5 @@
 <script>
-	import Form from '$lib/form/Form.svelte';
+	import { templates } from '$lib/templates/templates';
-	import Preview from '$lib/preview/Preview.svelte';
-
-	let template = 'verde';
 </script>
 
 <svelte:head>
@@ -12,28 +9,57 @@
 		content="Aplicación para la generación automática de carteles de actividades de DMD"
 	/>
 </svelte:head>
-
+<main>
+	<p>Elige la plantilla que quieras usar para tu diseño</p>
 	<div class="main">
-	<section class="form"><Form /></section>
+		<ul>
-	<section class="preview"><Preview /></section>
+			{#each templates as template}
+				<li>
+					<a href="/{template.name}"
+						><img src="/{template.image}" alt="Plantilla en blanco estilo {template.name}" />
+						<div class="caption">{template.name}</div></a
+					>
+				</li>
+			{/each}
+		</ul>
 	</div>
+</main>
 
 <style>
+	main {
+		max-width: 800px;
+		margin: 0 auto;
+	}
 	.main {
 		display: grid;
-		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
+		grid-auto-columns: 1fr;
-		grid-gap: 0.5rem;
+		grid-auto-rows: 1fr;
-		min-height: calc(100vh - 5rem);
+		grid-gap: 1rem;
+		padding: 1rem 0;
 	}
-
+	p {
-	.form {
+		font-size: 1.5rem;
-		grid-column: 1/2;
-		background-color: rgb(230, 240, 240);
 	}
-
+	ul {
-	.preview {
+		list-style: none;
-		grid-column: 2/3;
+	}
-		min-height: 200px;
+	li {
-		background-color: rgb(240, 238, 240);
+		line-height: 2rem;
+		display: inline-block;
+		padding: 0.5rem;
+		background-color: rgb(80, 80, 80);
+		margin: 0 0.5rem;
+	}
+	a {
+		text-transform: capitalize;
+		cursor: pointer;
+		color: white;
+		text-decoration: none;
+		text-align: center;
+		font-weight: 700;
+		font-size: 1.2rem;
+	}
+	img {
+		max-height: 200px;
 	}
 </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

@@ -0,0 +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} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+  /** @type {string} */ const templateImage = templates[templateIndex].image;
+  if (templateIndex !== -1) {
+    return {
+      slug,
+      templateIndex,
+      templateImage
+    }
+  }
+
+  throw error(404, "Not found");
+}

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

@@ -0,0 +1,53 @@
+<script>
+	import { templates } from '$lib/templates/templates';
+	/**
+	 * @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;
+	const templateIndex = data.templateIndex;
+	const templateImage = data.templateImage;
+</script>
+
+<svelte:head>
+	<title>Carteles DMD - Plantilla {data.slug}</title>
+</svelte:head>
+
+<div class="main">
+	<section class="form"><Form /></section>
+
+	{#if templateIndex !== undefined}
+		<section class="preview">
+			<Preview {templateIndex} {templateImage} />
+		</section>
+	{/if}
+</div>
+
+<style>
+	.main {
+		display: grid;
+		grid-template-columns: minmax(200px, 1fr) minmax(480px, min-content);
+		grid-gap: 0.5rem;
+		min-height: calc(100vh - 5rem);
+	}
+
+	.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>