mirror of
https://github.com/web3privacy/web
synced 2024-10-15 18:26:27 +02:00
update img gen
This commit is contained in:
parent
7949cc3c30
commit
5f07c2c7f8
9 changed files with 389 additions and 311 deletions
183
src/components/EventImageGenerator.svelte
Normal file
183
src/components/EventImageGenerator.svelte
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<script>
|
||||
|
||||
import core from '../core.json';
|
||||
import { dateFormat } from '../lib/events.js';
|
||||
import { marked } from 'marked';
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
import Square from './event-formats/square.svelte';
|
||||
import WideSquare from './event-formats/wide-square.svelte';
|
||||
import Wide from './event-formats/wide.svelte';
|
||||
import SquareSpeaker from './event-formats/square-speaker.svelte';
|
||||
import Poster from './event-formats/poster.svelte';
|
||||
import PosterSimple from './event-formats/poster-simple.svelte';
|
||||
|
||||
const topics = [
|
||||
'identity',
|
||||
'netw./event-formats/square.svelterivacy',
|
||||
'private messaging',
|
||||
'r&d: ZK, MPC, THE',
|
||||
'on-chain privacy',
|
||||
'regulation vs. privacy',
|
||||
'lunarpunk vs. solarpunk',
|
||||
'human rights daos',
|
||||
'privacy activism',
|
||||
]
|
||||
|
||||
const images = {
|
||||
meetup01: {},
|
||||
meetup02: {},
|
||||
summit01: {}
|
||||
}
|
||||
|
||||
const events = {
|
||||
m24buc: { image: 'meetup02' },
|
||||
m24ams: { image: 'meetup01' },
|
||||
s24prg: { image: 'summit01' },
|
||||
}
|
||||
|
||||
let searchParams = null
|
||||
let imageSelected = Object.keys(images)[0];
|
||||
//let eventSelected = core.events[0].id;
|
||||
const eventSelected = writable('');
|
||||
const speakerSelected = writable('alona-shevchenko');
|
||||
|
||||
onMount(() => {
|
||||
searchParams = new URL(document.location).searchParams;
|
||||
|
||||
const id = searchParams.get('id');
|
||||
if (id) {
|
||||
eventSelected.set(id);
|
||||
}
|
||||
const speaker = searchParams.get('speaker');
|
||||
if (speaker) {
|
||||
speakerSelected.set(speaker);
|
||||
}
|
||||
});
|
||||
|
||||
eventSelected.subscribe((id, next) => {
|
||||
const event = core.events.find(e => e.id === id);
|
||||
if (!event) {
|
||||
return;
|
||||
}
|
||||
if (event.speakers?.length > 0) {
|
||||
speakerSelected.set(event.speakers[0]);
|
||||
}
|
||||
return next
|
||||
})
|
||||
|
||||
function getImage(eId) {
|
||||
return `/gen-img/events/${events[eId]?.image}.png`
|
||||
}
|
||||
|
||||
$: image = getImage($eventSelected);
|
||||
$: event = core.events.find(e => e.id === $eventSelected);
|
||||
$: speaker = core.people.find(p => p.id === $speakerSelected);
|
||||
|
||||
const tools = {
|
||||
dateFormat
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="w-full p-10">
|
||||
<div>
|
||||
<div>
|
||||
Event:
|
||||
<select bind:value={$eventSelected} class="text-black">
|
||||
<option value="">---</option>
|
||||
{#each Object.keys(events).map(eId => core.events.find(e => e.id === eId)) as e}
|
||||
<option value={e.id}>[{e.id}] {e.type} {e.city} - {dateFormat(e.date)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!--div>
|
||||
Image:
|
||||
<select bind:value={imageSelected} class="text-black">
|
||||
{#each Object.keys(images) as image}
|
||||
<option value={image}>{image}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !$eventSelected}
|
||||
<div class="w-full p-10">
|
||||
Please select event.
|
||||
|
||||
<div class="mt-10 flex flex-wrap gap-4">
|
||||
{#each Object.keys(events).map(eId => core.events.find(e => e.id === eId)) as event}
|
||||
<div class="w-[380px] h-[570px] relative">
|
||||
<div class="scale-50 absolute -left-[160px] -top-[285px] bg-red-200" style="margin-left: -1rem;">
|
||||
<a href="/gen/event?id={event.id}"><PosterSimple {event} image={getImage(event.id)} {tools} /></a>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="px-10 py-4">
|
||||
<a href="/gen/event" class="underline hover:no-underline">Back to overview</a>
|
||||
</div>
|
||||
<div class="w-full flex flex-wrap gap-10 p-10">
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Square (1:1)</div>
|
||||
|
||||
<div class="w-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<Square {event} {image} {tools} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Wide-square (4:3)</div>
|
||||
|
||||
<div class="h-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<WideSquare {event} {image} {tools} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Wide (16:9)</div>
|
||||
|
||||
<Wide {event} {image} {tools} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Square (speaker) (1:1)</div>
|
||||
<div class="my-4">
|
||||
Speaker:
|
||||
<select bind:value={$speakerSelected} class="text-black">
|
||||
{#if event.speakers}
|
||||
{#each event.speakers as sp}
|
||||
<option value={sp}>{sp}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-[404px] border-2 border-green-500">
|
||||
<SquareSpeaker {speaker} {event} {image} {tools} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Poster (3:2)</div>
|
||||
|
||||
<div class="w-[764px] border-2 border-green-500">
|
||||
<Poster {topics} {event} {image} {tools} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Poster (simple) (3:2)</div>
|
||||
|
||||
<div class="w-[764px] border-2 border-green-500">
|
||||
<PosterSimple {event} {image} {tools} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -1,310 +0,0 @@
|
|||
<script>
|
||||
|
||||
import core from '../core.json';
|
||||
import { dateFormat } from '../lib/events.js';
|
||||
import { marked } from 'marked';
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
const topics = [
|
||||
'identity',
|
||||
'network states',
|
||||
'fullstack privacy',
|
||||
'private messaging',
|
||||
'r&d: ZK, MPC, THE',
|
||||
'on-chain privacy',
|
||||
'regulation vs. privacy',
|
||||
'lunarpunk vs. solarpunk',
|
||||
'human rights daos',
|
||||
'privacy activism',
|
||||
]
|
||||
|
||||
const images = {
|
||||
meetup01: {},
|
||||
meetup02: {},
|
||||
summit01: {}
|
||||
}
|
||||
|
||||
const events = {
|
||||
m24buc: { image: 'meetup02' },
|
||||
m24ams: { image: 'meetup01' },
|
||||
}
|
||||
|
||||
let searchParams = null
|
||||
let imageSelected = Object.keys(images)[0];
|
||||
//let eventSelected = core.events[0].id;
|
||||
const eventSelected = writable('');
|
||||
const speakerSelected = writable('alona-shevchenko');
|
||||
|
||||
onMount(() => {
|
||||
searchParams = new URL(document.location).searchParams;
|
||||
|
||||
const id = searchParams.get('id');
|
||||
if (id) {
|
||||
eventSelected.set(id);
|
||||
}
|
||||
const speaker = searchParams.get('speaker');
|
||||
if (speaker) {
|
||||
speakerSelected.set(speaker);
|
||||
}
|
||||
});
|
||||
|
||||
eventSelected.subscribe((id, next) => {
|
||||
const event = core.events.find(e => e.id === id);
|
||||
if (!event) {
|
||||
return;
|
||||
}
|
||||
if (event.speakers?.length > 0) {
|
||||
speakerSelected.set(event.speakers[0]);
|
||||
}
|
||||
return next
|
||||
})
|
||||
|
||||
$: image = `/gen-img/events/${events[$eventSelected]?.image}.png`;
|
||||
$: event = core.events.find(e => e.id === $eventSelected);
|
||||
$: speaker = core.people.find(p => p.id === $speakerSelected);
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="w-full p-10">
|
||||
<div>
|
||||
<div>
|
||||
Event:
|
||||
<select bind:value={$eventSelected} class="text-black">
|
||||
<option value="">---</option>
|
||||
{#each Object.keys(events).map(eId => core.events.find(e => e.id === eId)) as e}
|
||||
<option value={e.id}>[{e.id}] {e.type} {e.city} - {dateFormat(e.date)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!--div>
|
||||
Image:
|
||||
<select bind:value={imageSelected} class="text-black">
|
||||
{#each Object.keys(images) as image}
|
||||
<option value={image}>{image}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if !$eventSelected}
|
||||
<div class="w-full flex flex-wrap gap-10 p-10">
|
||||
Please select event.
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full flex flex-wrap gap-10 p-10">
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Square (1:1)</div>
|
||||
|
||||
<div class="w-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<div id="img-square" class="aspect-square w-[400px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/2 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute top-0 left-0 h-full w-1/2 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-0 -z-0" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 border-r-0 inline-block bg-black">
|
||||
{dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black">
|
||||
Meetup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Wide-square (4:3)</div>
|
||||
|
||||
<div class="h-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<div id="img-wide-square" class="aspect-[4/3] h-[400px] relative bg-black">
|
||||
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-24 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-24 -z-0 w-[28rem]" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{dateFormat(event.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black">
|
||||
Meetup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Wide (16:9)</div>
|
||||
|
||||
<div class="h-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<div id="img-wide" class="aspect-video h-[400px] relative bg-black">
|
||||
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{dateFormat(event.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black">
|
||||
Meetup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Square (speaker) (1:1)</div>
|
||||
<div class="my-4">
|
||||
Speaker:
|
||||
<select bind:value={$speakerSelected} class="text-black">
|
||||
{#if event.speakers}
|
||||
{#each event.speakers as sp}
|
||||
<option value={sp}>{sp}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="w-[404px] border-2 border-green-500">
|
||||
<div id="img-square-speaker" class="aspect-square w-[400px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-6 left-6 w-2/6 z-20" />
|
||||
|
||||
<img src={image} class="-z-10 opacity-40 blur-sm" />
|
||||
|
||||
<div class="absolute right-6 top-6 text-right uppercase text-sm">
|
||||
{dateFormat(event.date)}<br/>
|
||||
{event.type} {event.city}
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[5.5rem] w-full">
|
||||
<div class="flex justify-center items-center w-full">
|
||||
<div class="relative w-[200px]">
|
||||
<img src={speaker.imageUrl} class="w-full border-2 border-white aspect-square object-cover" />
|
||||
<div class="absolute bottom-0 left-0 text-xs">
|
||||
<div class="bg-white text-black py-1 px-2">
|
||||
@{speaker.refs?.twitter}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black uppercase">
|
||||
{speaker.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-6 text-xs w-full text-center px-6">
|
||||
{@html marked.parseInline(speaker.caption)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Poster (3:2)</div>
|
||||
|
||||
<div class="w-[764px] border-2 border-green-500">
|
||||
<div id="img-poster" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<img src={image} class="absolute top-20 left-0 -z-0" />
|
||||
<div class="absolute bottom-[18.5rem] left-0 h-36 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute bottom-80 left-10 uppercase text-3xl z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3">
|
||||
{#each topics as topic}
|
||||
<div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="absolute left-10 bottom-10 bg-white text-black text-sm uppercase py-1.5 px-3">
|
||||
summit2024.web3privacy.info
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mb-4 text-xl text-green-500">Poster (simple) (3:2)</div>
|
||||
|
||||
<div class="w-[764px] border-2 border-green-500 overflow-hidden">
|
||||
<div id="img-poster-simple" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-28 left-0 h-32 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
|
||||
<div class="absolute bottom-[7em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute bottom-10 left-10 uppercase text-3xl z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
29
src/components/event-formats/poster-simple.svelte
Normal file
29
src/components/event-formats/poster-simple.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script>
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
</script>
|
||||
|
||||
<div id="img-poster-simple" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black overflow-hidden">
|
||||
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-28 left-0 h-32 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
|
||||
<div class="absolute bottom-[7em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute bottom-10 left-10 uppercase text-3xl z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
38
src/components/event-formats/poster.svelte
Normal file
38
src/components/event-formats/poster.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
export let topics;
|
||||
</script>
|
||||
|
||||
<div id="img-poster" class="aspect-[2/3] w-[760px] h-[1140px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<img src={image} class="absolute top-20 left-0 -z-0" />
|
||||
<div class="absolute bottom-[18.5rem] left-0 h-36 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
|
||||
|
||||
<div class="absolute bottom-80 left-10 uppercase text-3xl z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-2 px-4 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-2 px-4 bg-white text-black">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3">
|
||||
{#each topics as topic}
|
||||
<div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="absolute left-10 bottom-10 bg-white text-black text-sm uppercase py-1.5 px-3">
|
||||
summit2024.web3privacy.info
|
||||
</div>
|
||||
</div>
|
||||
42
src/components/event-formats/square-speaker.svelte
Normal file
42
src/components/event-formats/square-speaker.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
import { marked } from 'marked';
|
||||
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
export let speaker;
|
||||
</script>
|
||||
|
||||
|
||||
<div id="img-square-speaker" class="aspect-square w-[400px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-6 left-6 w-2/6 z-20" />
|
||||
|
||||
<img src={image} class="-z-10 opacity-40 blur-sm" />
|
||||
|
||||
<div class="absolute right-6 top-6 text-right uppercase text-sm">
|
||||
{tools.dateFormat(event.date)}<br/>
|
||||
{event.type} {event.city}
|
||||
</div>
|
||||
|
||||
<div class="absolute top-[5.5rem] w-full">
|
||||
<div class="flex justify-center items-center w-full">
|
||||
<div class="relative w-[200px]">
|
||||
<img src={speaker.imageUrl} class="w-full border-2 border-white aspect-square object-cover" />
|
||||
<div class="absolute bottom-0 left-0 text-xs">
|
||||
<div class="bg-white text-black py-1 px-2">
|
||||
@{speaker.refs?.twitter}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black uppercase">
|
||||
{speaker.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-6 text-xs w-full text-center px-6">
|
||||
{@html marked.parseInline(speaker.caption)}
|
||||
</div>
|
||||
</div>
|
||||
30
src/components/event-formats/square.svelte
Normal file
30
src/components/event-formats/square.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<script>
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
</script>
|
||||
|
||||
|
||||
<div id="img-square" class="aspect-square w-[400px] relative bg-black">
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/2 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
|
||||
<div class="absolute top-0 left-0 h-full w-1/2 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-0 -z-0" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 border-r-0 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
|
||||
{event.type}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
src/components/event-formats/wide-square.svelte
Normal file
32
src/components/event-formats/wide-square.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
</script>
|
||||
|
||||
|
||||
<div id="img-wide-square" class="aspect-[4/3] h-[400px] relative bg-black">
|
||||
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-24 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-24 -z-0 w-[28rem]" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black">
|
||||
Meetup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
src/components/event-formats/wide.svelte
Normal file
34
src/components/event-formats/wide.svelte
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script>
|
||||
export let event;
|
||||
export let image;
|
||||
export let tools;
|
||||
</script>
|
||||
|
||||
|
||||
<div class="h-[404px] border-2 border-green-500 overflow-hidden">
|
||||
<div id="img-wide" class="aspect-video h-[400px] relative bg-black">
|
||||
|
||||
<img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
|
||||
|
||||
<div class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
||||
<img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
|
||||
|
||||
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||
<div class="flex">
|
||||
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
|
||||
{tools.dateFormat(event.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-black">
|
||||
{event.city}, {event.country}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="margin-top: -2px;">
|
||||
<div class="border-2 border-white py-1 px-2 bg-white text-black">
|
||||
Meetup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
|
||||
import ImageGenerator from '../../components/ImageGenerator.svelte';
|
||||
import ImageGenerator from '../../components/EventImageGenerator.svelte';
|
||||
|
||||
let url = Astro.url;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue