From 69b9559dfe66a126273eb6fb6f763125d29e4a6f Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Wed, 6 Mar 2024 18:51:29 +0100
Subject: [PATCH] speaker gen image

---
 src/components/ImageGenerator.svelte | 56 ++++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageGenerator.svelte b/src/components/ImageGenerator.svelte
index 119d46b..8f08942 100644
--- a/src/components/ImageGenerator.svelte
+++ b/src/components/ImageGenerator.svelte
@@ -2,6 +2,7 @@
 
 import core from '../core.json';
 import { dateFormat } from '../lib/events.js';
+import { marked,  } from 'marked';
 
 const topics = [
     'identity',
@@ -25,9 +26,11 @@ const images = {
 
 let imageSelected = Object.keys(images)[0];
 let eventSelected = core.events[0].id;
+let speakerSelected = 'alona-shevchenko';
 
 $: image = `/gen-img/events/${imageSelected}.png`;
 $: event = core.events.find(e => e.id === eventSelected);
+$: speaker = core.people.find(p => p.id === speakerSelected);
 
 </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="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>
                 <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="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" />
 
@@ -148,6 +151,53 @@ $: event = core.events.find(e => e.id === eventSelected);
         </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 class="mb-4 text-xl text-green-500">Poster (3:2)</div>