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
97baee774b
commit
6dd51fe7e1
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;
|
let url = Astro.url;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue