update generator

astro.config.mjs

@@ -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-**"]
-      },
+      }
-    },
+    }
-  },
+  }
 });

package-lock.json

@@ -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",

package.json

@@ -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"
   }
 }

src/components/ImageGenerator.svelte

@@ -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>

src/pages/gen/event.astro

@@ -1,25 +1,6 @@
 ---
 
-const topics = [
+import ImageGenerator from '../../components/ImageGenerator.svelte';
-    '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`;
 
 ---
 
@@ -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">
+<ImageGenerator client:load />
-        <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>
 
 </body>
 </html>

svelte.config.js

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