From d4cdca6e70c7c71248a925fb2c501a972b7fc2e7 Mon Sep 17 00:00:00 2001
From: Borja Robert <borja@brobert.net>
Date: Sun, 2 Oct 2022 12:01:04 +0200
Subject: [PATCH] =?UTF-8?q?no=20s=C3=A9=20por=20d=C3=B3nde=20voy=20pero=20?=
 =?UTF-8?q?voy=20a=20usar=20hx=20un=20rato?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/preview/Preview.svelte   | 50 ++++++++-----------------
 src/lib/templates/Title.svelte   | 38 +++++++++++++++++++
 src/lib/templates/heading.svelte | 30 ++++++++-------
 src/lib/templates/templates.js   |  1 +
 src/lib/templates/verde.js       | 64 ++++++++++++++++++++++----------
 src/routes/[slug]/+page.js       |  9 ++++-
 src/routes/[slug]/+page.svelte   |  2 +-
 7 files changed, 123 insertions(+), 71 deletions(-)

diff --git a/src/lib/preview/Preview.svelte b/src/lib/preview/Preview.svelte
index 62c9748..cdaef96 100644
--- a/src/lib/preview/Preview.svelte
+++ b/src/lib/preview/Preview.svelte
@@ -1,8 +1,8 @@
 <script>
-	export let templateIndex;
+	/** @type {number} */ export let templateIndex;
 	import Heading from '$lib/templates/Heading.svelte';
+	import Title from '$lib/templates/Title.svelte';
 	import {
-		title,
 		subtitle,
 		date,
 		weekday,
@@ -40,21 +40,22 @@
 
 <div class="preview">
 	<div class="result" bind:this={$canvas}>
-		<!-- <div class="heading">{$heading}</div> -->
-		<Heading {templateIndex} />
-		<div class="title">{$title}</div>
-		<div class="subtitle">{$subtitle}</div>
-		<div class="content">{@html $content}</div>
-		<div class="weekday">{$weekday}</div>
-		{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
-		{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
-		<div class="address">{$address}</div>
+		{#if templateIndex >= 0}
+			<Heading {templateIndex} />
+			<Title {templateIndex} />
+			<div class="subtitle">{$subtitle}</div>
+			<div class="content">{@html $content}</div>
+			<div class="weekday">{$weekday}</div>
+			{#if newdate.date}<div class="date">{newdate.date}</div>{/if}
+			{#if newdate.time}<div class="time">{newdate.time}</div>{/if}
+			<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>
@@ -62,7 +63,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>
@@ -74,7 +75,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>
@@ -85,7 +86,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>
@@ -119,25 +120,6 @@
 		/* border-radius: 0.5rem; */
 	}
 
-	.title {
-		position: absolute;
-		top: 320px;
-		left: 1rem;
-		right: 1rem;
-		font-family: 'Gill Sans', sans-serif;
-		font-size: 2.9rem;
-		font-variant: small-caps;
-		line-height: 2.5rem;
-		color: firebrick;
-		font-weight: 600;
-		height: 5rem;
-		overflow: hidden;
-		display: flex;
-		justify-content: center;
-		align-items: end;
-		text-align: center;
-	}
-
 	.subtitle {
 		position: absolute;
 		display: flex;
diff --git a/src/lib/templates/Title.svelte b/src/lib/templates/Title.svelte
index e69de29..a905567 100644
--- a/src/lib/templates/Title.svelte
+++ b/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};
+    "
+	>
+		{$title}
+	</div>
+{/if}
+
+<style>
+	.title {
+		position: absolute;
+		font-variant: small-caps;
+		line-height: 2.5rem;
+		color: firebrick;
+		font-weight: 600;
+		height: 5rem;
+		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: end;
+		text-align: center;
+	}
+</style>
diff --git a/src/lib/templates/heading.svelte b/src/lib/templates/heading.svelte
index 9ce4ef7..4665b4a 100644
--- a/src/lib/templates/heading.svelte
+++ b/src/lib/templates/heading.svelte
@@ -6,20 +6,22 @@
 	import { heading } from '$lib/stores/store';
 </script>
 
-<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};
-    "
->
-	{$heading}
-</div>
+{#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};
+  "
+	>
+		{$heading}
+	</div>
+{/if}
 
 <style>
 	.heading {
diff --git a/src/lib/templates/templates.js b/src/lib/templates/templates.js
index a9a8dcb..338dac5 100644
--- a/src/lib/templates/templates.js
+++ b/src/lib/templates/templates.js
@@ -8,6 +8,7 @@ import { verde } from '$lib/templates/verde';
 * color: string;
 * fontSize: number;
 * fontFamily: string;
+* lineHeight: number;
 }} Element
 */
 
diff --git a/src/lib/templates/verde.js b/src/lib/templates/verde.js
index bf6982c..23d5e6a 100644
--- a/src/lib/templates/verde.js
+++ b/src/lib/templates/verde.js
@@ -1,14 +1,30 @@
 /**
-* @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}
+* @typedef {{
+* top: number;
+* height: number;
+* right: number;
+* left: number;
+* color: string;
+* fontSize: number;
+* fontFamily: string;
+* lineHeight: number;
+}} Element
 */
+
+/**
+ * @typedef {{
+  * name: string;
+  * heading: Element;
+  * title: Element;
+  * subtitle: Element;
+  * datetime: Element;
+  * weekday: Element;
+  * content: Element;
+  * address: Element;
+ * }} Template
+ */
+
+/** @type {Template} */
 export const verde = {
   name: "verde",
   heading: {
@@ -18,16 +34,19 @@ export const verde = {
     right: 1,
     fontSize: 1,
     color: "grey",
-    fontFamily: "sans-serif"
+    fontFamily: "sans-serif",
+    lineHeight: 1.1
   },
   title: {
-    top: 100,
+    top: 320,
     height: 6,
-    left: 2,
-    right: 2,
-    fontSize: 1.8,
+    left: 1,
+    right: 1,
+    fontSize: 2.9,
     color: "firebrick",
-    fontFamily: "Gill Sans, sans-serif"
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 2.5
+
   },
   subtitle: {
     top: 100,
@@ -36,7 +55,8 @@ export const verde = {
     right: 2,
     fontSize: 1.8,
     color: "firebrick",
-    fontFamily: "Gill Sans, sans-serif"
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 2
   },
   content: {
     top: 100,
@@ -45,7 +65,8 @@ export const verde = {
     right: 2,
     fontSize: 1.8,
     color: "firebrick",
-    fontFamily: "Gill Sans, sans-serif"
+    fontFamily: "Gill Sans, sans-serif",
+    lineHeight: 1
   },
   datetime: {
     top: 400,
@@ -54,7 +75,8 @@ export const verde = {
     right: 2,
     fontSize: 1,
     color: "firebrick",
-    fontFamily: "sans-serif"
+    fontFamily: "sans-serif",
+    lineHeight: 1
   },
   weekday: {
     top: 500,
@@ -63,7 +85,8 @@ export const verde = {
     right: 2,
     fontSize: 1,
     color: "#333",
-    fontFamily: "sans-serif"
+    fontFamily: "sans-serif",
+    lineHeight: 1
   },
   address: {
     top: 500,
@@ -72,6 +95,7 @@ export const verde = {
     right: 2,
     fontSize: 1,
     color: "#333",
-    fontFamily: "sans-serif"
+    fontFamily: "sans-serif",
+    lineHeight: 1
   },
 }
diff --git a/src/routes/[slug]/+page.js b/src/routes/[slug]/+page.js
index cd69885..1a2d908 100644
--- a/src/routes/[slug]/+page.js
+++ b/src/routes/[slug]/+page.js
@@ -1,7 +1,12 @@
+import { templates } from '$lib/templates/templates';
+
 /** @type {import('./$types').PageLoad} */
 export function load(event) {
   const slug = event.params.slug;
-  return {
-    slug
+	/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+  if (templateIndex !== -1) {
+    return {
+      slug
+    }
   }
 }
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 1762b09..38f1510 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -5,7 +5,7 @@
 	import Preview from '$lib/preview/Preview.svelte';
 
 	const slug = data.slug;
-	/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
+	/** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
 </script>
 
 <svelte:head>