canvas (#1)

El sistema ya es capaz de generar una imagen y hacer que te la descargues

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

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:18
+
+WORKDIR /app
+
+# COPY package.json and package-lock.json files
+COPY package*.json ./
+
+COPY vite.config.js ./
+
+# COPY tsconfig.json file
+COPY jsconfig.json ./
+
+# COPY
+COPY . .
+
+RUN npm install
+
+RUN npm run build
+
+EXPOSE 3000
+
+CMD [ "node", "/app/build" ]

captain-definition

@@ -0,0 +1,4 @@
+{
+	"schemaVersion": 2,
+	"dockerfilePath": "./Dockerfile"
+}

package.json

@@ -12,6 +12,7 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-node": "1.0.0-next.95",
 		"@sveltejs/kit": "next",
 		"@types/cookie": "^0.5.1",
 		"prettier": "^2.6.2",
@@ -24,6 +25,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/fira-mono": "^4.5.0",
+		"html2canvas": "^1.4.1",
 		"quill": "^1.3.7"
 	}
 }

pnpm-lock.yaml

@@ -3,8 +3,10 @@ lockfileVersion: 5.4
 specifiers:
   '@fontsource/fira-mono': ^4.5.0
   '@sveltejs/adapter-auto': next
+  '@sveltejs/adapter-node': 1.0.0-next.95
   '@sveltejs/kit': next
   '@types/cookie': ^0.5.1
+  html2canvas: ^1.4.1
   prettier: ^2.6.2
   prettier-plugin-svelte: ^2.7.0
   quill: ^1.3.7
@@ -15,10 +17,12 @@ specifiers:
 
 dependencies:
   '@fontsource/fira-mono': 4.5.9
+  html2canvas: 1.4.1
   quill: 1.3.7
 
 devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.80
+  '@sveltejs/adapter-node': 1.0.0-next.95
   '@sveltejs/kit': 1.0.0-next.503_svelte@3.50.1+vite@3.1.3
   '@types/cookie': 0.5.1
   prettier: 2.7.1
@@ -119,6 +123,58 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rollup/plugin-commonjs/22.0.2_rollup@2.78.1:
+    resolution: {integrity: sha512-//NdP6iIwPbMTcazYsiBMbJW7gfmpHom33u1beiIoHDEM0Q9clvtQB1T0efvMqHeKsGohiHo97BCPCkBXdscwg==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      rollup: ^2.68.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
+      commondir: 1.0.1
+      estree-walker: 2.0.2
+      glob: 7.2.3
+      is-reference: 1.2.1
+      magic-string: 0.25.9
+      resolve: 1.22.1
+      rollup: 2.78.1
+    dev: true
+
+  /@rollup/plugin-json/4.1.0_rollup@2.78.1:
+    resolution: {integrity: sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==}
+    peerDependencies:
+      rollup: ^1.20.0 || ^2.0.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
+      rollup: 2.78.1
+    dev: true
+
+  /@rollup/plugin-node-resolve/14.1.0_rollup@2.78.1:
+    resolution: {integrity: sha512-5G2niJroNCz/1zqwXtk0t9+twOSDlG00k1Wfd7bkbbXmwg8H8dvgHdIWAun53Ps/rckfvOC7scDBjuGFg5OaWw==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      rollup: ^2.78.0
+    dependencies:
+      '@rollup/pluginutils': 3.1.0_rollup@2.78.1
+      '@types/resolve': 1.17.1
+      deepmerge: 4.2.2
+      is-builtin-module: 3.2.0
+      is-module: 1.0.0
+      resolve: 1.22.1
+      rollup: 2.78.1
+    dev: true
+
+  /@rollup/pluginutils/3.1.0_rollup@2.78.1:
+    resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
+    engines: {node: '>= 8.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0
+    dependencies:
+      '@types/estree': 0.0.39
+      estree-walker: 1.0.1
+      picomatch: 2.3.1
+      rollup: 2.78.1
+    dev: true
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -154,6 +210,15 @@ packages:
       set-cookie-parser: 2.5.1
     dev: true
 
+  /@sveltejs/adapter-node/1.0.0-next.95:
+    resolution: {integrity: sha512-RrAsFjb8qG9Q0yWusGLBB5OhejR6RfRG3X7b/V65fcIB4t3IP7hkwgNOyuXQd5jQ24lbt+Tyx3fguEfQvhMrhw==}
+    dependencies:
+      '@rollup/plugin-commonjs': 22.0.2_rollup@2.78.1
+      '@rollup/plugin-json': 4.1.0_rollup@2.78.1
+      '@rollup/plugin-node-resolve': 14.1.0_rollup@2.78.1
+      rollup: 2.78.1
+    dev: true
+
   /@sveltejs/adapter-vercel/1.0.0-next.77:
     resolution: {integrity: sha512-r4MqtP+lzx83HfcvI8PU0Yxzmxt6WQq9nzZETLboJouJzhSBUFIN5RmNZfEn6nNIlUwZbGQUEK/FxsRnnxI/Ig==}
     dependencies:
@@ -220,6 +285,14 @@ packages:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
     dev: true
 
+  /@types/estree/0.0.39:
+    resolution: {integrity: sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==}
+    dev: true
+
+  /@types/estree/1.0.0:
+    resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
+    dev: true
+
   /@types/node/18.7.18:
     resolution: {integrity: sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==}
     dev: true
@@ -228,6 +301,12 @@ packages:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
 
+  /@types/resolve/1.17.1:
+    resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
+    dependencies:
+      '@types/node': 18.7.18
+    dev: true
+
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
@@ -306,6 +385,11 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /base64-arraybuffer/1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -335,6 +419,11 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
+  /builtin-modules/3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /call-bind/1.0.2:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -377,6 +466,10 @@ packages:
     hasBin: true
     dev: true
 
+  /commondir/1.0.1:
+    resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==}
+    dev: true
+
   /concat-map/0.0.1:
     resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
     dev: true
@@ -390,6 +483,12 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /css-line-break/2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /data-uri-to-buffer/4.0.0:
     resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
     engines: {node: '>= 12'}
@@ -671,6 +770,10 @@ packages:
     resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
     dev: true
 
+  /estree-walker/1.0.1:
+    resolution: {integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==}
+    dev: true
+
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
     dev: true
@@ -837,6 +940,14 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /html2canvas/1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    dev: false
+
   /https-proxy-agent/5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -881,6 +992,13 @@ packages:
       binary-extensions: 2.2.0
     dev: true
 
+  /is-builtin-module/3.2.0:
+    resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
   /is-core-module/2.10.0:
     resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
     dependencies:
@@ -911,11 +1029,21 @@ packages:
       is-extglob: 2.1.1
     dev: true
 
+  /is-module/1.0.0:
+    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}
+    dev: true
+
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /is-reference/1.2.1:
+    resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
+    dependencies:
+      '@types/estree': 1.0.0
+    dev: true
+
   /is-regex/1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -1493,6 +1621,12 @@ packages:
       yallist: 4.0.0
     dev: true
 
+  /text-segmentation/1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /tiny-glob/0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
     dependencies:
@@ -1531,6 +1665,12 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /utrie/1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
   /vite/3.1.3:
     resolution: {integrity: sha512-/3XWiktaopByM5bd8dqvHxRt5EEgRikevnnrpND0gRfNkrMrPaGGexhtLCzv15RcCMtV2CLw+BPas8YFeSG0KA==}
     engines: {node: ^14.18.0 || >=16.0.0}

src/lib/form/Form.svelte

@@ -1,9 +1,9 @@
 <script>
 	import { onMount } from 'svelte';
-	import { title, heading, subtitle, content, date, address } from '$lib/stores/store';
+	import html2canvas from 'html2canvas';
+	import { title, heading, subtitle, content, date, address, canvas } from '$lib/stores/store';
 
 	/** @type {HTMLDivElement} */ let editor;
-	let innerHTML;
 
 	const handleSubmit = async () => {
 		console.log('submit');
@@ -17,6 +17,17 @@
 		$content = editor.firstChild.innerHTML;
 	};
 
+	const downloadCanvas = async () => {
+		if ($canvas !== undefined) {
+			const res = await html2canvas($canvas);
+			const image = await res.toDataURL('image/png');
+			const link = document.createElement('a');
+			link.download = 'cartel.png';
+			link.href = image;
+			link.click();
+		}
+	};
+
 	const quillOptions = {
 		modules: {
 			toolbar: [['bold', 'italic']]
@@ -70,6 +81,7 @@
 		</div>
 	</div>
 </form>
+<button on:click|preventDefault={downloadCanvas}>Descargar</button>
 
 <style>
 	.form-group {
@@ -99,4 +111,11 @@
 	#editor {
 		background-color: white;
 	}
+
+	button {
+		margin: 0 1rem;
+		padding: 0.5rem;
+		font-size: 1.1rem;
+		cursor: pointer;
+	}
 </style>

src/lib/preview/Preview.svelte

@@ -1,32 +1,33 @@
 <script>
+	import html2canvas from 'html2canvas';
+	import { title, subtitle, date, address, content, heading, canvas } from '$lib/stores/store';
 
-    import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
+	let newdate = '';
-
-    let newdate = "";
 
 	const convertDateTime = (datetime) => {
 		if (datetime == undefined) {
 			return {
-		date: "",
+				date: '',
-		time: ""
+				time: ''
-	    };
 			};
-	const year = datetime.split("-")[0];
+		}
-	const month = datetime.split("-")[1];
+		const year = datetime.split('-')[0];
-	const day = datetime.split("-")[2].split("T")[0];
+		const month = datetime.split('-')[1];
-	const time = datetime.split("T")[1];
+		const day = datetime.split('-')[2].split('T')[0];
+		const time = datetime.split('T')[1];
 		return {
 			date: `${day}/${month}`,
-	    time: time,
+			time: time
-	}
+		};
-    }
+	};
-
-    $: if ($date !== "") {newdate = convertDateTime($date)};
 
+	$: if ($date !== '') {
+		newdate = convertDateTime($date);
+	}
 </script>
 
 <div class="preview">
-    <div class="result">
+	<div class="result" bind:this={$canvas}>
 		<div class="heading">{$heading}</div>
 		<div class="title">{$title}</div>
 		<div class="subtitle">{$subtitle}</div>
@@ -52,11 +53,11 @@
 		align-self: center;
 		background-color: lightblue;
 		width: auto;
-	background-image: url('imagen01.png');
+		background-image: url('/imagen01.png');
 		background-size: contain;
 		position: relative;
 		padding: 1rem;
-	box-shadow: 0 0 16px 0 rgba(0,0,0,0.3);
+		box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
 		border-radius: 0.5rem;
 	}
 
@@ -68,6 +69,8 @@
 		font-size: 1rem;
 		color: grey;
 		font-variant: small-caps;
+		height: 1.2rem;
+		overflow: hidden;
 	}
 
 	.title {
@@ -75,7 +78,6 @@
 		top: 320px;
 		left: 1rem;
 		right: 1rem;
-	align-self: center;
 		font-family: 'Gill Sans', sans-serif;
 		font-size: 2.5rem;
 		font-variant: small-caps;
@@ -84,9 +86,14 @@
 		font-weight: 600;
 		height: 5rem;
 		overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 	}
 	.subtitle {
 		position: absolute;
+		display: flex;
 		top: 415px;
 		left: 1rem;
 		right: 2rem;
@@ -94,6 +101,9 @@
 		color: #575;
 		height: 2.6rem;
 		overflow: hidden;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.content {
@@ -126,7 +136,7 @@
 		right: 6rem;
 		font-size: 1.8rem;
 		color: white;
-	text-shadow: 0 0 16px rgba(0,0,0,0.4);
+		text-shadow: 0 0 16px rgba(0, 0, 0, 0.4);
 		max-height: 2rem;
 		overflow: hidden;
 	}
@@ -135,7 +145,7 @@
 		position: absolute;
 		top: 650px;
 		left: 2rem;
-	right: 15rem;
+		right: 17rem;
 		font-size: 1.15rem;
 		font-family: serif;
 		color: firebrick;

src/lib/stores/store.js

@@ -1,4 +1,4 @@
-import {writable} from 'svelte/store'
+import { writable } from 'svelte/store'
 
 export const title = writable("");
 export const heading = writable("");
@@ -6,3 +6,4 @@ export const subtitle = writable("");
 export const content = writable("");
 export const date = writable("");
 export const address = writable("");
+export const canvas = writable();

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {