añado cosas

Dockerfile

@@ -0,0 +1,24 @@
+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
+
+RUN [ "chmod", "+x", "/app/start.sh"]
+
+EXPOSE 3000
+
+CMD [ "/app/start.sh" ]

captain-definition

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

src/lib/preview/Preview.svelte

@@ -1,32 +1,43 @@
 <script>
+	import html2canvas from 'html2canvas';
+	import { title, subtitle, date, address, content, heading } from '$lib/stores/store';
 
-    import {title, subtitle, date, address, content, heading} from '$lib/stores/store'
-
-    let newdate = "";
+	let newdate = '';
+	let inner;
 
 	const convertDateTime = (datetime) => {
 		if (datetime == undefined) {
 			return {
-		date: "",
-		time: ""
-	    };
+				date: '',
+				time: ''
 			};
-	const year = datetime.split("-")[0];
-	const month = datetime.split("-")[1];
-	const day = datetime.split("-")[2].split("T")[0];
-	const time = datetime.split("T")[1];
+		}
+		const year = datetime.split('-')[0];
+		const month = datetime.split('-')[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);
+	}
 
+	const takeScreenshot = async () => {
+		const res = await html2canvas(inner);
+		const image = await res.toDataURL('image/png');
+		const link = document.createElement('a');
+		link.download = 'cartel.png';
+		link.href = image;
+		link.click();
+	};
 </script>
 
 <div class="preview">
-    <div class="result">
+	<div class="result" bind:this={inner}>
 		<div class="heading">{$heading}</div>
 		<div class="title">{$title}</div>
 		<div class="subtitle">{$subtitle}</div>
@@ -35,6 +46,7 @@
 		{#if newdate}<div class="time">{newdate.time}</div>{/if}
 		<div class="address">{$address}</div>
 	</div>
+	<button on:click|preventDefault={takeScreenshot}>Descargar</button>
 </div>
 
 <style>
@@ -56,7 +68,7 @@
 		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;
 	}
 
@@ -126,7 +138,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;
 	}