update summit gen tpl

src/components/EventImageGenerator.svelte

@@ -66,7 +66,6 @@ onMount(() => {
     const img = searchParams.get('img');
     if (img) {
         imageSelected.set(img);
-        updateImages();
     }
 });
 

src/components/event-formats/poster-simple.svelte

@@ -8,19 +8,17 @@
     <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
 
     {#if event.type === 'summit'}
-        <img src="/gen-img/summit-title.svg" class="absolute top-28 left-0 w-full z-20" />
+        <img src="/gen-img/summit-title3.svg" class="absolute top-28 left-0 w-full z-20" />
-        <div class="absolute top-36 left-0 h-64 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
+        <div class="absolute top-14 left-0 h-64 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
-        <div class="absolute top-36 left-[-70px] w-[900px] h-[900px] -z-0 object-fit" style="background-image: url({image.src}); background-size: 100% 100%; background-position: center; {image.calcBgOffsets('poster-simple')}"></div>
+        <div class="absolute top-14 left-[-70px] w-[900px] h-[1020px] -z-0" style="background-image: url({image.src}); background-size: cover; background-position: center; {image.calcBgOffsets('poster-simple')}"></div>
-        <div class="absolute bottom-0 left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
+        <div class="absolute bottom-0 left-0 h-[30rem] w-full z-10" style="background: linear-gradient(transparent, black);"></div>
 
-        <div class="absolute bottom-24 left-10 right-10 uppercase text-4xl z-20">
+        <div class="absolute bottom-10 left-10 right-10 uppercase text-[5.5rem] z-20 font-kyiv">
-            <div class="flex justify-center">
+            <div>
-                <div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
+                {tools.dateFormat(event.date, "dd/MM/yyyy")}
-                    {tools.dateFormat(event.date)}
-                </div>
-                <div class="border-2 border-white py-2 px-4 bg-black">
-                    {event.city}, {event.country}
             </div>
+            <div class="-mt-8">
+                {event.city}
             </div>
         </div>
 

src/components/event-formats/poster.svelte

@@ -8,10 +8,24 @@
 <div id="img-poster" class="aspect-[1/1.414] w-[760px] relative bg-black text-white overflow-hidden">
     <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
 
+
+    {#if event.type === 'summit'}
+        <img src="/gen-img/summit-title3.svg" class="absolute top-28 left-0 w-full z-20 " />
+        <div class="absolute top-10 left-0 h-96 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
+        <img src={image.src} class="absolute top-10 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
+        <div class="absolute bottom-[14rem] left-0 h-96 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
+        <div class="absolute bottom-72 left-10 right-10 uppercase text-[5rem] z-20 font-kyiv">
+            <div>
+                {tools.dateFormat(event.date, "dd/MM/yyyy")}
+            </div>
+            <div class="-mt-8">
+                {event.city}
+            </div>
+        </div>
+    {:else}
         <div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
         <img src={image.src} class="absolute top-20 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
         <div class="absolute bottom-[14rem] left-0 h-64 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">
@@ -27,6 +41,7 @@
                 </div>  
             </div>
         </div>   
+    {/if}
     <div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3 z-20">
         {#each topics as topic}
             <div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>

src/components/event-formats/square.svelte

@@ -12,6 +12,20 @@
     <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.src} class="absolute top-0 left-0 -z-0 h-full object-cover" style="{image.calcObjOffsets('square')}" />
 
+
+    {#if event.type === 'summit'}
+        <img src="/gen-img/summit-title3.svg" class="absolute -bottom-1 left-0 w-full z-20" />
+        <div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
+
+        <div class="absolute bottom-20 left-8 right-8 uppercase text-[2rem] z-20 font-kyiv">
+            <div>
+                {tools.dateFormat(event.date, "dd/MM/yyyy")}
+            </div>
+            <div class="-mt-1">
+                {event.city}
+            </div>
+        </div>
+    {:else}
         <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">
@@ -27,4 +41,5 @@
                 </div>  
             </div>
         </div>
+    {/if}
 </div>

src/components/event-formats/wide-square.svelte

@@ -13,13 +13,30 @@
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
 
     <div class="flex items-end justify-end w-full h-full">
-        <div class="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
+        <div class="absolute top-0 h-full {image.ratio > 1 && event.type !== 'summit' ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
 
         <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
             <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide-square')}" />
         </div>
     </div>
 
+
+{#if event.type === 'summit'}
+    <img src="/gen-img/summit-title3.svg" class="absolute -bottom-1.5 left-0 w-full z-20" />
+    <div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
+
+    <div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
+    <div class="absolute right-0 top-0 h-full w-36 z-10" style="background: linear-gradient(to right, transparent, black);"></div>
+
+    <div class="absolute top-5 right-8 uppercase text-[2.2rem] z-20 font-kyiv text-right">
+        <div>
+            {tools.dateFormat(event.date, "dd/MM/yyyy")}
+        </div>
+        <div class="-mt-1">
+            {event.city}
+        </div>
+    </div>
+{:else}
     <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">
@@ -37,4 +54,5 @@
             </div>  
         </div>
     </div>
+{/if}
 </div>

src/components/event-formats/wide.svelte

@@ -10,14 +10,32 @@
 
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
 
-    <div class="flex items-end justify-end w-full h-full">
+    <!--div class="flex items-end justify-end w-full h-full">
-        <div class="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
+        <div class="absolute top-0 h-full {image.ratio > 1 && event.type !== 'summit' ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
 
         <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
             <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide')}" />
         </div>
-    </div>
+    </div-->
 
+    <div class="absolute left-0 top-0 h-full w-64 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
+    <img src={image.src} class="absolute right-0 h-full w-full object-cover" style="{image.calcObjOffsets('wide')}" />
+
+    {#if event.type === 'summit'}
+        <img src="/gen-img/summit-title3.svg" class="absolute -bottom-1.5 left-0 w-full z-20" />
+        <div class="absolute top-0 left-0 h-44 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
+        <div class="absolute bottom-0 left-0 h-32 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
+        <div class="absolute right-0 top-0 h-full w-44 z-10" style="background: linear-gradient(to right, transparent, black);"></div>
+
+        <div class="absolute top-5 right-8 uppercase text-[2.4rem] z-20 font-kyiv text-right">
+            <div>
+                {tools.dateFormat(event.date, "dd/MM/yyyy")}
+            </div>
+            <div class="-mt-1">
+                {event.city}
+            </div>
+        </div>
+    {:else}
         <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">
@@ -35,4 +53,5 @@
                 </div>  
             </div>
         </div>
+    {/if}
 </div>

src/gen-images-offsets.yaml

@@ -26,3 +26,9 @@ copenhagen02:
   wide: { x: 100% }
   poster: { x: 100% }
   poster-simple: { x: 108% }
+prague01:
+  square: { x: 67% }
+  wide-square: { x: 70% }
+  wide: { x: 110% }
+  poster: { x: 60% }
+  poster-simple: { x: 60% }

src/gen-images.json

@@ -29,6 +29,12 @@
     "height": 2100,
     "ratio": 1
   },
+  "prague01": {
+    "format": "PNG",
+    "width": 7000,
+    "height": 3517,
+    "ratio": 1.99033266988911
+  },
   "summit02": {
     "format": "PNG",
     "width": 2600,

src/layouts/generator.astro

@@ -14,8 +14,21 @@ const { title } = Astro.props;
         type="font/woff2"
         crossorigin
     />
+    <link
+        rel="preload"
+        href="/fonts/KyivTypeSerif-Medium3.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+    />
+    <style>
+        @font-face {
+            font-family: 'KyivTypeSerif';
+            src: url(/fonts/KyivTypeSerif-Medium3.woff2) format('woff2');
+        }
+    </style>
 </head>
-<body class="bg-[#F0F0F0] text-black font-mono font-['DM Mono Regular Latin']">
+<body class="bg-[#F0F0F0] text-black font-mono">
 
     <div class="pl-10 pt-10 pb-0">
 

src/lib/events.js

@@ -35,9 +35,9 @@ export function dateInfo (item) {
     return { isDate, isFuture: future, year }
 }
 
-export function dateFormat (str) {
+export function dateFormat (str, fmt) {
     if (str.match(/^\d{4}-\d{2}-\d{2}$/)) {
-        return format(new Date(str), 'MMM d, yyyy')
+        return format(new Date(str), fmt || 'MMM d, yyyy')
     }
     const qm = str.match(/^(\d{4})\/(\w+)$/)
     if (qm) {

src/styles/base.css

@@ -28,6 +28,7 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+
 @tailwind components;
 
 @layer components {

tailwind.config.mjs

@@ -8,6 +8,7 @@ export default {
 			fontFamily: {
 				sans: ["Archivo", ...defaultTheme.fontFamily.sans],
 				mono: ["DM Mono", ...defaultTheme.fontFamily.mono],
+				kyiv: ["KyivTypeSerif"],
 			  },
 		},
 	},