ahora ya funciona componentizado, creo, habrá que añadir una segunda plantilla y que el index se genere solo
parent
560a5a3e26
commit
2591b7f740
@ -0,0 +1,37 @@
|
||||
<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};
|
||||
"
|
||||
>
|
||||
{$address}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.address {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
<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};
|
||||
"
|
||||
>
|
||||
{@html $content}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.content {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,89 @@
|
||||
<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};
|
||||
"
|
||||
>
|
||||
{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};
|
||||
"
|
||||
>
|
||||
{newdate.time}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.date {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,35 @@
|
||||
<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};
|
||||
"
|
||||
>
|
||||
{$subtitle}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.subtitle {
|
||||
position: absolute;
|
||||
font-variant: small-caps;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
<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};
|
||||
"
|
||||
>
|
||||
{$weekday}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.weekday {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -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>
|
||||
@ -1,12 +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|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
|
||||
|
||||
/** @type {number} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
|
||||
/** @type {string} */ const templateImage = templates[templateIndex].image;
|
||||
if (templateIndex !== -1) {
|
||||
return {
|
||||
slug
|
||||
slug,
|
||||
templateIndex,
|
||||
templateImage
|
||||
}
|
||||
}
|
||||
|
||||
throw error(404, "Not found");
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue