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

update summit gen tpl

Browse source
This commit is contained in:
tree🌴 2024-03-16 23:31:19 +01:00
parent 09f33554c6
commit 2b7c8462bc
16 changed files with 163 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/fonts/KyivTypeSerif-Medium3.woff2 Normal file
View file

Binary file not shown.

BIN
public/gen-img/events/prague01.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.4 MiB

6
public/gen-img/summit-title2.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

6
public/gen-img/summit-title3.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

1
src/components/EventImageGenerator.svelte
View file

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

22
src/components/event-formats/poster-simple.svelte
View file

@ -8,19 +8,17 @@
<img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" /> <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
{#if event.type === 'summit'} {#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> <div class="-mt-8">
<div class="border-2 border-white py-2 px-4 bg-black"> {event.city}
{event.city}, {event.country}
</div>
</div> </div>
</div> </div>

45
src/components/event-formats/poster.svelte
View file

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

37
src/components/event-formats/square.svelte
View file

@ -12,19 +12,34 @@
<div class="absolute top-0 left-0 h-full w-1/2 z-10" style="background: linear-gradient(to left, transparent, black);"></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.src} class="absolute top-0 left-0 -z-0 h-full object-cover" style="{image.calcObjOffsets('square')}" /> <img src={image.src} class="absolute top-0 left-0 -z-0 h-full object-cover" style="{image.calcObjOffsets('square')}" />
<div class="absolute bottom-8 left-8 uppercase z-20">
<div class="flex"> {#if event.type === 'summit'}
<div class="border-2 border-white py-1 px-2 border-r-0 inline-block bg-black"> <img src="/gen-img/summit-title3.svg" class="absolute -bottom-1 left-0 w-full z-20" />
{tools.dateFormat(event.date)} <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>
<div class="border-2 border-white py-1 px-2 bg-black"> <div class="-mt-1">
{event.city}, {event.country} {event.city}
</div> </div>
</div> </div>
<div class="flex"> {:else}
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase"> <div class="absolute bottom-8 left-8 uppercase z-20">
{event.type} <div class="flex">
</div> <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>
</div> {/if}
</div> </div>

20
src/components/event-formats/wide-square.svelte
View file

@ -13,13 +13,30 @@
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" /> <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="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"> <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')}" /> <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide-square')}" />
</div> </div>
</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="absolute bottom-8 left-8 uppercase z-20 text-xl">
<div class="flex"> <div class="flex">
<div class="border-2 border-white py-1 px-2 inline-block bg-black"> <div class="border-2 border-white py-1 px-2 inline-block bg-black">
@ -37,4 +54,5 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</div> </div>

51
src/components/event-formats/wide.svelte
View file

@ -10,29 +10,48 @@
<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" />
<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"> <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')}" /> <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide')}" />
</div> </div>
</div> </div-->
<div class="absolute bottom-8 left-8 uppercase z-20 text-xl"> <div class="absolute left-0 top-0 h-full w-64 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
<div class="flex"> <img src={image.src} class="absolute right-0 h-full w-full object-cover" style="{image.calcObjOffsets('wide')}" />
<div class="border-2 border-white py-1 px-2 inline-block bg-black">
{tools.dateFormat(event.date)} {#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>
</div> </div>
<div class="flex" style="margin-top: -2px;"> {:else}
<div class="border-2 border-white py-1 px-2 bg-black"> <div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
{event.city}, {event.country} <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 uppercase">
{event.type}
</div>
</div> </div>
</div> </div>
<div class="flex" style="margin-top: -2px;"> {/if}
<div class="border-2 border-white py-1 px-2 bg-white text-black uppercase">
{event.type}
</div>
</div>
</div>
</div> </div>

8
src/gen-images-offsets.yaml
View file

@ -25,4 +25,10 @@ copenhagen02:
wide-square: { x: 100% } wide-square: { x: 100% }
wide: { x: 100% } wide: { x: 100% }
poster: { x: 100% } poster: { x: 100% }
poster-simple: { x: 108% } poster-simple: { x: 108% }
prague01:
square: { x: 67% }
wide-square: { x: 70% }
wide: { x: 110% }
poster: { x: 60% }
poster-simple: { x: 60% }

6
src/gen-images.json
View file

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

15
src/layouts/generator.astro
View file

@ -14,8 +14,21 @@ const { title } = Astro.props;
type="font/woff2" type="font/woff2"
crossorigin 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> </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"> <div class="pl-10 pt-10 pb-0">

4
src/lib/events.js
View file

@ -35,9 +35,9 @@ export function dateInfo (item) {
return { isDate, isFuture: future, year } return { isDate, isFuture: future, year }
} }
export function dateFormat (str) { export function dateFormat (str, fmt) {
if (str.match(/^\d{4}-\d{2}-\d{2}$/)) { 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+)$/) const qm = str.match(/^(\d{4})\/(\w+)$/)
if (qm) { if (qm) {

1
src/styles/base.css
View file

@ -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; 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; @tailwind components;
@layer components { @layer components {

1
tailwind.config.mjs
View file

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