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

no sé por dónde voy pero voy a usar hx un rato

Browse Source
pull/7/head
Borja Robert 2 years ago
parent 57dc4d50fd
commit d4cdca6e70
7 changed files with 123 additions and 71 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,8 +1,8 @@
<script> <script>
export let templateIndex; /** @type {number} */ export let templateIndex;
import Heading from '$lib/templates/Heading.svelte'; import Heading from '$lib/templates/Heading.svelte';
import Title from '$lib/templates/Title.svelte';
import { import {
title,
subtitle, subtitle,
date, date,
weekday, weekday,
@ -40,21 +40,22 @@
<div class="preview"> <div class="preview">
<div class="result" bind:this={$canvas}> <div class="result" bind:this={$canvas}>
<!-- <div class="heading">{$heading}</div> --> {#if templateIndex >= 0}
<Heading {templateIndex} /> <Heading {templateIndex} />
<div class="title">{$title}</div> <Title {templateIndex} />
<div class="subtitle">{$subtitle}</div> <div class="subtitle">{$subtitle}</div>
<div class="content">{@html $content}</div> <div class="content">{@html $content}</div>
<div class="weekday">{$weekday}</div> <div class="weekday">{$weekday}</div>
{#if newdate.date}<div class="date">{newdate.date}</div>{/if} {#if newdate.date}<div class="date">{newdate.date}</div>{/if}
{#if newdate.time}<div class="time">{newdate.time}</div>{/if} {#if newdate.time}<div class="time">{newdate.time}</div>{/if}
<div class="address">{$address}</div> <div class="address">{$address}</div>
{/if}
{#if $organizedBy[0] && $colabs[0]} {#if $organizedBy[0] && $colabs[0]}
<div class="orgcolab"> <div class="orgcolab">
<div class="org">Organiza:</div> <div class="org">Organiza:</div>
<div class="colab">Colabora:</div> <div class="colab">Colabora:</div>
<div class="orgmixed"> <div class="orgmixed">
{#each $organizedBy as organization, i} {#each $organizedBy as organization}
<div class="organization"> <div class="organization">
<img src={organization.image} alt={organization.text} /> <img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div> <div class="caption">{organization.text}</div>
@ -62,7 +63,7 @@
{/each} {/each}
</div> </div>
<div class="colabmixed"> <div class="colabmixed">
{#each $colabs as organization, i} {#each $colabs as organization}
<div class="organization"> <div class="organization">
<img src={organization.image} alt={organization.text} /> <img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div> <div class="caption">{organization.text}</div>
@ -74,7 +75,7 @@
{#if $organizedBy[0] && !$colabs[0]} {#if $organizedBy[0] && !$colabs[0]}
<div class="imagetitle">Organiza:</div> <div class="imagetitle">Organiza:</div>
<div class="organized-by"> <div class="organized-by">
{#each $organizedBy as organization, i} {#each $organizedBy as organization}
<div class="organization"> <div class="organization">
<img src={organization.image} alt={organization.text} /> <img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div> <div class="caption">{organization.text}</div>
@ -85,7 +86,7 @@
{#if $colabs[0] && !$organizedBy[0]} {#if $colabs[0] && !$organizedBy[0]}
<div class="imagetitle">Colabora:</div> <div class="imagetitle">Colabora:</div>
<div class="organized-by"> <div class="organized-by">
{#each $colabs as organization, i} {#each $colabs as organization}
<div class="organization"> <div class="organization">
<img src={organization.image} alt={organization.text} /> <img src={organization.image} alt={organization.text} />
<div class="caption">{organization.text}</div> <div class="caption">{organization.text}</div>
@ -119,25 +120,6 @@
/* border-radius: 0.5rem; */ /* 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 { .subtitle {
position: absolute; position: absolute;
display: flex; display: flex;

38
src/lib/templates/Title.svelte
Unescape Escape View File

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

2
src/lib/templates/heading.svelte
Unescape Escape View File

@ -6,6 +6,7 @@
import { heading } from '$lib/stores/store'; import { heading } from '$lib/stores/store';
</script> </script>
{#if $heading && templates[templateIndex].heading}
<div <div
class="heading" class="heading"
style=" style="
@ -20,6 +21,7 @@
> >
{$heading} {$heading}
</div> </div>
{/if}
<style> <style>
.heading { .heading {

1
src/lib/templates/templates.js
Unescape Escape View File

@ -8,6 +8,7 @@ import { verde } from '$lib/templates/verde';
* color: string; * color: string;
* fontSize: number; * fontSize: number;
* fontFamily: string; * fontFamily: string;
* lineHeight: number;
}} Element }} Element
*/ */

64
src/lib/templates/verde.js
Unescape Escape View File

@ -1,14 +1,30 @@
/** /**
* @typedef {Object} Template * @typedef {{
* @property name {string} * top: number;
* @property heading {Object} * height: number;
* @property title {string} * right: number;
* @property subtitle {string} * left: number;
* @property content {string} * color: string;
* @property datetime {string} * fontSize: number;
* @property weekday {string} * fontFamily: string;
* @property address {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 = { export const verde = {
name: "verde", name: "verde",
heading: { heading: {
@ -18,16 +34,19 @@ export const verde = {
right: 1, right: 1,
fontSize: 1, fontSize: 1,
color: "grey", color: "grey",
fontFamily: "sans-serif" fontFamily: "sans-serif",
lineHeight: 1.1
}, },
title: { title: {
top: 100, top: 320,
height: 6, height: 6,
left: 2, left: 1,
right: 2, right: 1,
fontSize: 1.8, fontSize: 2.9,
color: "firebrick", color: "firebrick",
fontFamily: "Gill Sans, sans-serif" fontFamily: "Gill Sans, sans-serif",
lineHeight: 2.5
}, },
subtitle: { subtitle: {
top: 100, top: 100,
@ -36,7 +55,8 @@ export const verde = {
right: 2, right: 2,
fontSize: 1.8, fontSize: 1.8,
color: "firebrick", color: "firebrick",
fontFamily: "Gill Sans, sans-serif" fontFamily: "Gill Sans, sans-serif",
lineHeight: 2
}, },
content: { content: {
top: 100, top: 100,
@ -45,7 +65,8 @@ export const verde = {
right: 2, right: 2,
fontSize: 1.8, fontSize: 1.8,
color: "firebrick", color: "firebrick",
fontFamily: "Gill Sans, sans-serif" fontFamily: "Gill Sans, sans-serif",
lineHeight: 1
}, },
datetime: { datetime: {
top: 400, top: 400,
@ -54,7 +75,8 @@ export const verde = {
right: 2, right: 2,
fontSize: 1, fontSize: 1,
color: "firebrick", color: "firebrick",
fontFamily: "sans-serif" fontFamily: "sans-serif",
lineHeight: 1
}, },
weekday: { weekday: {
top: 500, top: 500,
@ -63,7 +85,8 @@ export const verde = {
right: 2, right: 2,
fontSize: 1, fontSize: 1,
color: "#333", color: "#333",
fontFamily: "sans-serif" fontFamily: "sans-serif",
lineHeight: 1
}, },
address: { address: {
top: 500, top: 500,
@ -72,6 +95,7 @@ export const verde = {
right: 2, right: 2,
fontSize: 1, fontSize: 1,
color: "#333", color: "#333",
fontFamily: "sans-serif" fontFamily: "sans-serif",
lineHeight: 1
}, },
} }

5
src/routes/[slug]/+page.js
Unescape Escape View File

@ -1,7 +1,12 @@
import { templates } from '$lib/templates/templates';
/** @type {import('./$types').PageLoad} */ /** @type {import('./$types').PageLoad} */
export function load(event) { export function load(event) {
const slug = event.params.slug; const slug = event.params.slug;
/** @type {number|undefined} */ const templateIndex = templates.map((e) => e.name).indexOf(slug);
if (templateIndex !== -1) {
return { return {
slug slug
} }
} }
}

2
src/routes/[slug]/+page.svelte
Unescape Escape View File

@ -5,7 +5,7 @@
import Preview from '$lib/preview/Preview.svelte'; import Preview from '$lib/preview/Preview.svelte';
const slug = data.slug; 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> </script>
<svelte:head> <svelte:head>

Write Preview
Loading…
Cancel
Save