web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

speaker gen image

Browse source
This commit is contained in:
tree🌴 2024-03-06 18:51:29 +01:00
parent d2d036ea73
commit 69b9559dfe
1 changed files with 53 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/ImageGenerator.svelte
View file

@ -2,6 +2,7 @@
import core from '../core.json'; import core from '../core.json';
import { dateFormat } from '../lib/events.js'; import { dateFormat } from '../lib/events.js';
import { marked, } from 'marked';
const topics = [ const topics = [
'identity', 'identity',
@ -25,9 +26,11 @@ const images = {
let imageSelected = Object.keys(images)[0]; let imageSelected = Object.keys(images)[0];
let eventSelected = core.events[0].id; let eventSelected = core.events[0].id;
let speakerSelected = 'alona-shevchenko';
$: image = `/gen-img/events/${imageSelected}.png`; $: image = `/gen-img/events/${imageSelected}.png`;
$: event = core.events.find(e => e.id === eventSelected); $: event = core.events.find(e => e.id === eventSelected);
$: speaker = core.people.find(p => p.id === speakerSelected);
</script> </script>
@ -88,9 +91,9 @@ $: event = core.events.find(e => e.id === eventSelected);
<div class="mb-4 text-xl text-green-500">Wide-square (4:3)</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 class="h-[404px] border-2 border-green-500 overflow-hidden">
<div id="img-square" class="aspect-[4/3] h-[400px] relative bg-black"> <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/4 z-20" /> <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> <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]" /> <img src={image} class="absolute top-0 left-24 -z-0 w-[28rem]" />
@ -120,7 +123,7 @@ $: event = core.events.find(e => e.id === eventSelected);
<div class="mb-4 text-xl text-green-500">Wide (16:9)</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 class="h-[404px] border-2 border-green-500 overflow-hidden">
<div id="img-square" class="aspect-video h-[400px] relative bg-black"> <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" /> <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
@ -148,6 +151,53 @@ $: event = core.events.find(e => e.id === eventSelected);
</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">
{#each event.speakers as sp}
<option value={sp}>{sp}</option>
{/each}
</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">
{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>
<div class="mb-4 text-xl text-green-500">Poster (3:2)</div> <div class="mb-4 text-xl text-green-500">Poster (3:2)</div>