From 5f07c2c7f853e7e0d76bd653f4a414cabb509a4d Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Wed, 6 Mar 2024 21:33:24 +0100
Subject: [PATCH] update img gen

---
 src/components/EventImageGenerator.svelte     | 183 +++++++++++
 src/components/ImageGenerator.svelte          | 310 ------------------
 .../event-formats/poster-simple.svelte        |  29 ++
 src/components/event-formats/poster.svelte    |  38 +++
 .../event-formats/square-speaker.svelte       |  42 +++
 src/components/event-formats/square.svelte    |  30 ++
 .../event-formats/wide-square.svelte          |  32 ++
 src/components/event-formats/wide.svelte      |  34 ++
 src/pages/gen/event.astro                     |   2 +-
 9 files changed, 389 insertions(+), 311 deletions(-)
 create mode 100644 src/components/EventImageGenerator.svelte
 delete mode 100644 src/components/ImageGenerator.svelte
 create mode 100644 src/components/event-formats/poster-simple.svelte
 create mode 100644 src/components/event-formats/poster.svelte
 create mode 100644 src/components/event-formats/square-speaker.svelte
 create mode 100644 src/components/event-formats/square.svelte
 create mode 100644 src/components/event-formats/wide-square.svelte
 create mode 100644 src/components/event-formats/wide.svelte

diff --git a/src/components/EventImageGenerator.svelte b/src/components/EventImageGenerator.svelte
new file mode 100644
index 0000000..af5cc2d
--- /dev/null
+++ b/src/components/EventImageGenerator.svelte
@@ -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}
\ No newline at end of file
diff --git a/src/components/ImageGenerator.svelte b/src/components/ImageGenerator.svelte
deleted file mode 100644
index 5b033ff..0000000
--- a/src/components/ImageGenerator.svelte
+++ /dev/null
@@ -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}
\ No newline at end of file
diff --git a/src/components/event-formats/poster-simple.svelte b/src/components/event-formats/poster-simple.svelte
new file mode 100644
index 0000000..e1bfe71
--- /dev/null
+++ b/src/components/event-formats/poster-simple.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/components/event-formats/poster.svelte b/src/components/event-formats/poster.svelte
new file mode 100644
index 0000000..ad2c8c4
--- /dev/null
+++ b/src/components/event-formats/poster.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/components/event-formats/square-speaker.svelte b/src/components/event-formats/square-speaker.svelte
new file mode 100644
index 0000000..42d292d
--- /dev/null
+++ b/src/components/event-formats/square-speaker.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/components/event-formats/square.svelte b/src/components/event-formats/square.svelte
new file mode 100644
index 0000000..cda3860
--- /dev/null
+++ b/src/components/event-formats/square.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/components/event-formats/wide-square.svelte b/src/components/event-formats/wide-square.svelte
new file mode 100644
index 0000000..d849b27
--- /dev/null
+++ b/src/components/event-formats/wide-square.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/components/event-formats/wide.svelte b/src/components/event-formats/wide.svelte
new file mode 100644
index 0000000..b46820f
--- /dev/null
+++ b/src/components/event-formats/wide.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/pages/gen/event.astro b/src/pages/gen/event.astro
index 692f37b..81d28fa 100644
--- a/src/pages/gen/event.astro
+++ b/src/pages/gen/event.astro
@@ -1,6 +1,6 @@
 ---
 
-import ImageGenerator from '../../components/ImageGenerator.svelte';
+import ImageGenerator from '../../components/EventImageGenerator.svelte';
 
 let url = Astro.url;