update generator

This commit is contained in:
tree🌴 2024-03-06 17:28:41 +01:00
parent bff8c70c3e
commit cbd1378703
6 changed files with 379 additions and 98 deletions

View File

@ -1,18 +1,19 @@
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import yaml from '@rollup/plugin-yaml';
import svelte from "@astrojs/svelte";
// https://astro.build/config
export default defineConfig({
site: 'https://beta.web3privacy.info',
integrations: [tailwind()],
integrations: [tailwind(), svelte()],
vite: {
plugins: [yaml()],
server: {
watch: {
ignored: ["**/.sl/**/*", "**/.watchman-**"],
},
},
},
ignored: ["**/.sl/**/*", "**/.watchman-**"]
}
}
}
});

243
package-lock.json generated
View File

@ -1,20 +1,23 @@
{
"name": "w3pn-web",
"version": "1.1.0",
"version": "1.2.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "w3pn-web",
"version": "1.1.0",
"version": "1.2.3",
"dependencies": {
"@astrojs/svelte": "^5.2.0",
"@astrojs/tailwind": "^5.1.0",
"@rollup/plugin-yaml": "^4.1.2",
"astro": "^4.3.5",
"cfonts": "^3.2.0",
"date-fns": "^2.30.0",
"marked": "^11.1.1",
"tailwindcss": "^3.4.1"
"svelte": "^4.2.12",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
}
},
"node_modules/@alloc/quick-lru": {
@ -82,6 +85,23 @@
"node": ">=18.14.1"
}
},
"node_modules/@astrojs/svelte": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@astrojs/svelte/-/svelte-5.2.0.tgz",
"integrity": "sha512-GmwbXks2WMkmAfl0rlPM/2gA1RtmZzjGV2mOceV3g7QNyjIsSYBPKrlEnSFnuR+YMvlAtWdbMFBsb3gtGxnTTg==",
"dependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"svelte2tsx": "^0.6.27"
},
"engines": {
"node": ">=18.14.1"
},
"peerDependencies": {
"astro": "^4.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.56",
"typescript": "^5.3.3"
}
},
"node_modules/@astrojs/tailwind": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-5.1.0.tgz",
@ -1141,6 +1161,43 @@
"win32"
]
},
"node_modules/@sveltejs/vite-plugin-svelte": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.0.2.tgz",
"integrity": "sha512-MpmF/cju2HqUls50WyTHQBZUV3ovV/Uk8k66AN2gwHogNAG8wnW8xtZDhzNBsFJJuvmq1qnzA5kE7YfMJNFv2Q==",
"dependencies": {
"@sveltejs/vite-plugin-svelte-inspector": "^2.0.0",
"debug": "^4.3.4",
"deepmerge": "^4.3.1",
"kleur": "^4.1.5",
"magic-string": "^0.30.5",
"svelte-hmr": "^0.15.3",
"vitefu": "^0.2.5"
},
"engines": {
"node": "^18.0.0 || >=20"
},
"peerDependencies": {
"svelte": "^4.0.0 || ^5.0.0-next.0",
"vite": "^5.0.0"
}
},
"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.0.0.tgz",
"integrity": "sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==",
"dependencies": {
"debug": "^4.3.4"
},
"engines": {
"node": "^18.0.0 || >=20"
},
"peerDependencies": {
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.0",
"vite": "^5.0.0"
}
},
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1919,6 +1976,26 @@
"node": ">=6"
}
},
"node_modules/code-red": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15",
"@types/estree": "^1.0.1",
"acorn": "^8.10.0",
"estree-walker": "^3.0.3",
"periscopic": "^3.1.0"
}
},
"node_modules/code-red/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@ -2021,6 +2098,18 @@
"node": ">= 8"
}
},
"node_modules/css-tree": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -2090,6 +2179,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/dedent-js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
},
"node_modules/deep-extend": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@ -2099,6 +2193,14 @@
"node": ">=4.0.0"
}
},
"node_modules/deepmerge": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/define-property": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
@ -2995,6 +3097,14 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-reference": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/is-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@ -3173,6 +3283,11 @@
"node": ">=6"
}
},
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
},
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -3222,6 +3337,14 @@
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
"dependencies": {
"tslib": "^2.0.3"
}
},
"node_modules/lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -3482,6 +3605,11 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -4163,6 +4291,15 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/no-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
"dependencies": {
"lower-case": "^2.0.2",
"tslib": "^2.0.3"
}
},
"node_modules/node-abi": {
"version": "3.55.0",
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.55.0.tgz",
@ -4427,6 +4564,15 @@
"url": "https://github.com/inikulin/parse5?sponsor=1"
}
},
"node_modules/pascal-case": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/path-exists": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@ -4476,6 +4622,24 @@
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw=="
},
"node_modules/periscopic": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^3.0.0",
"is-reference": "^3.0.0"
}
},
"node_modules/periscopic/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@ -5964,6 +6128,62 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/svelte": {
"version": "4.2.12",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.12.tgz",
"integrity": "sha512-d8+wsh5TfPwqVzbm4/HCXC783/KPHV60NvwitJnyTA5lWn1elhXMNWhXGCJ7PwPa8qFUnyJNIyuIRt2mT0WMug==",
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@jridgewell/trace-mapping": "^0.3.18",
"@types/estree": "^1.0.1",
"acorn": "^8.9.0",
"aria-query": "^5.3.0",
"axobject-query": "^4.0.0",
"code-red": "^1.0.3",
"css-tree": "^2.3.1",
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"locate-character": "^3.0.0",
"magic-string": "^0.30.4",
"periscopic": "^3.1.0"
},
"engines": {
"node": ">=16"
}
},
"node_modules/svelte-hmr": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
"integrity": "sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==",
"engines": {
"node": "^12.20 || ^14.13.1 || >= 16"
},
"peerDependencies": {
"svelte": "^3.19.0 || ^4.0.0"
}
},
"node_modules/svelte/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/svelte2tsx": {
"version": "0.6.27",
"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
"integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
"dependencies": {
"dedent-js": "^1.0.1",
"pascal-case": "^3.1.1"
},
"peerDependencies": {
"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
"typescript": "^4.9.4 || ^5.0.0"
}
},
"node_modules/tailwindcss": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
@ -6132,6 +6352,11 @@
}
}
},
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@ -6155,6 +6380,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/unherit": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/unherit/-/unherit-3.0.1.tgz",

View File

@ -19,12 +19,15 @@
"sync-all": "npm run core && npm run contribs && npm run articles && npm run talks && npm run explorer && npm run events-ext && npm run db-repo"
},
"dependencies": {
"@astrojs/svelte": "^5.2.0",
"@astrojs/tailwind": "^5.1.0",
"@rollup/plugin-yaml": "^4.1.2",
"astro": "^4.3.5",
"cfonts": "^3.2.0",
"date-fns": "^2.30.0",
"marked": "^11.1.1",
"tailwindcss": "^3.4.1"
"svelte": "^4.2.12",
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
}
}

View File

@ -0,0 +1,121 @@
<script>
import core from '../core.json';
import { dateFormat } from '../lib/events.js';
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 img = 'meetup01';
const images = {
meetup01: {},
summit01: {}
}
let imageSelected = Object.keys(images)[0]
let eventSelected = core.events[0].id
$: image = `/gen-img/events/${imageSelected}.png`;
$: event = core.events.find(e => e.id === eventSelected);
</script>
<div class="w-full p-10">
<div>
<div>
Event:
<select bind:value={eventSelected} class="text-black">
{#each core.events as e}
<option value={e.id}>{e.type} {e.city}</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>
<div class="w-full flex flex-wrap gap-10 p-10">
<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-2xl 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">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>

View File

@ -1,25 +1,6 @@
---
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 img = 'meetup01';
const images = {
meetup01: {},
summit01: {}
}
const image = `/gen-img/events/${img}.png`;
import ImageGenerator from '../../components/ImageGenerator.svelte';
---
@ -35,74 +16,7 @@ const image = `/gen-img/events/${img}.png`;
</head>
<body class="bg-gray-900 text-white font-mono font-['DM Mono Regular Latin']">
<div class="w-full flex flex-wrap gap-10 p-10">
<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-2xl z-20">
<div class="flex">
<div class="border-2 border-white py-2 px-4 border-r-0 inline-block bg-black">
May 30, 2024
</div>
<div class="border-2 border-white py-2 px-4 bg-black">
Prague, Czechia
</div>
</div>
<div class="flex">
<div class="border-2 border-white py-2 px-4 bg-white text-black">
Meetup
</div>
</div>
</div>
<div class="absolute left-10 right-10 bottom-28 uppercase text-lg flex flex-wrap gap-3">
{topics.map(topic => (
<div><span class="inline-block w-2 h-2 bg-white"></span> {topic}</div>
))}
</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">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">
May 30, 2024
</div>
<div class="border-2 border-white py-1 px-2 bg-black">
Prague, Czechia
</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>
<ImageGenerator client:load />
</body>
</html>

5
svelte.config.js Normal file
View File

@ -0,0 +1,5 @@
import { vitePreprocess } from '@astrojs/svelte';
export default {
preprocess: vitePreprocess(),
};