brobert
/
carteles
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Labels Milestones

New Pull Request

canvas #1

Merged
brobert merged 10 commits from canvas into main 2 years ago
Conversation 0 Commits 10 Files Changed 8
8 changed files with 328 additions and 130 deletions
Show Stats Download Patch File Download Diff File

22
Dockerfile
Unescape Escape View File

@ -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" ]

4
captain-definition
Unescape Escape View File

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

2
package.json
Unescape Escape View File

@ -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"
}
}

140
pnpm-lock.yaml
Unescape Escape View File

@ -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}

23
src/lib/form/Form.svelte
Unescape Escape View File

@ -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>

48
src/lib/preview/Preview.svelte
Unescape Escape View File

@ -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: "",
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,
}
}
$: if ($date !== "") {newdate = convertDateTime($date)};
time: time
};
};
$: 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,7 +53,7 @@
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;
@ -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 {
@ -135,7 +145,7 @@
position: absolute;
top: 650px;
left: 2rem;
right: 15rem;
right: 17rem;
font-size: 1.15rem;
font-family: serif;
color: firebrick;

1
src/lib/stores/store.js
Unescape Escape View File

@ -6,3 +6,4 @@ export const subtitle = writable("");
export const content = writable("");
export const date = writable("");
export const address = writable("");
export const canvas = writable();

2
svelte.config.js
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save