gen images update

package.json

@@ -16,6 +16,7 @@
     "explorer": "deno run --allow-all utils/explorer.js",
     "events-ext": "deno run --allow-all utils/events-ext.js",
     "db-repo": "deno run --allow-all utils/db-repo.js",
+    "gen-images": "deno run --allow-all utils/gen-images.js",
     "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": {

src/components/EventImageGenerator.svelte

@@ -1,6 +1,8 @@
 <script>
 
 import core from '../core.json';
+import genImages from '../gen-images.json';
+
 import { dateFormat } from '../lib/events.js';
 import { marked } from 'marked';
 import { onMount, afterUpdate } from 'svelte';
@@ -90,40 +92,12 @@ function getImageUrl(img) {
 $: image = $imageSelected ? getImageUrl($imageSelected) : '';
 $: event = core.events.find(e => e.id === $eventSelected);
 $: speaker = core.people.find(p => p.id === $speakerSelected);
-$: imgSrc = $deepImgSrc?.[image];
+$: imgSrc = genImages[$imageSelected];
 
 const tools = {
     dateFormat
 }
 
-let imagesSrc = import.meta.glob("../../public/gen-img/events/*.png");
-const images = [];
-const dImages = {};
-for (const path in imagesSrc) {
-    const splitted = path.split('/')
-    const ph = splitted[splitted.length-1].split('.')[0];
-    images.push(ph);
-    dImages[ph] = import(path);
-}
-
-//console.log(dImages);
-
-const deepImgSrc = writable(null);
-async function updateImages () {
-
-    const col = {};
-    for (const imgFn of images) {
-        const id = getImageUrl(imgFn)
-        let imgClass = await dImages[imgFn];
-        const i = imgClass.default;
-        i.ratio = i.width / i.height;
-        col[id] = i;
-    }
-    deepImgSrc.set(col);
-}
-onMount(updateImages);
-//afterUpdate(updateImages);
-
 </script>
 
 
@@ -179,7 +153,7 @@ onMount(updateImages);
     Image:
     <select bind:value={$imageSelected} class="text-black">
         <option value="">---</option>
-        {#each images as img}
+        {#each Object.keys(genImages) as img}
             <option value={img}>{img} {#if event.design?.image && event.design.image === img}[fixed]{/if}</option>
         {/each}
     </select>

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

@@ -17,7 +17,7 @@
         <div class="absolute top-0 h-full {imgSrc.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {imgSrc.ratio > 1 ? '0px' : '130px'};"></div>
 
         <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
-            <img src={imgSrc.src} class="h-full object-cover" />
+            <img src={image} class="h-full object-cover" />
         </div>
     </div>
 

src/components/event-formats/wide.svelte

@@ -15,7 +15,7 @@
         <div class="absolute top-0 h-full {imgSrc.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {imgSrc.ratio > 1 ? '0px' : '130px'};"></div>
 
         <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
-            <img src={imgSrc.src} class="h-full object-cover" />
+            <img src={image} class="h-full object-cover" />
         </div>
     </div>
 

src/gen-images.json

@@ -0,0 +1,128 @@
+{
+  "brno01": {
+    "format": "PNG",
+    "width": 3000,
+    "height": 3000,
+    "ratio": 1
+  },
+  "brussels01": {
+    "format": "PNG",
+    "width": 6951,
+    "height": 3502,
+    "ratio": 1.9848657909765848
+  },
+  "bucharest01": {
+    "format": "PNG",
+    "width": 7025,
+    "height": 3535,
+    "ratio": 1.9872701555869872
+  },
+  "porto01": {
+    "format": "PNG",
+    "width": 1024,
+    "height": 1024,
+    "ratio": 1
+  },
+  "summit01": {
+    "format": "PNG",
+    "width": 2100,
+    "height": 2100,
+    "ratio": 1
+  },
+  "summit02": {
+    "format": "PNG",
+    "width": 2600,
+    "height": 2600,
+    "ratio": 1
+  },
+  "ljubljana01": {
+    "format": "PNG",
+    "width": 768,
+    "height": 768,
+    "ratio": 1
+  },
+  "warsaw01": {
+    "format": "PNG",
+    "width": 6951,
+    "height": 3476,
+    "ratio": 1.9997123130034522
+  },
+  "athens01": {
+    "format": "PNG",
+    "width": 2048,
+    "height": 2048,
+    "ratio": 1
+  },
+  "bangkok01": {
+    "format": "PNG",
+    "width": 6995,
+    "height": 3511,
+    "ratio": 1.9923098832241526
+  },
+  "rome01": {
+    "format": "PNG",
+    "width": 1024,
+    "height": 1024,
+    "ratio": 1
+  },
+  "barcelona02": {
+    "format": "PNG",
+    "width": 7012,
+    "height": 3028,
+    "ratio": 2.3157199471598413
+  },
+  "rome02": {
+    "format": "PNG",
+    "width": 7025,
+    "height": 2876,
+    "ratio": 2.4426286509040334
+  },
+  "tallinn01": {
+    "format": "PNG",
+    "width": 2600,
+    "height": 2600,
+    "ratio": 1
+  },
+  "barcelona01": {
+    "format": "PNG",
+    "width": 768,
+    "height": 768,
+    "ratio": 1
+  },
+  "berlin01": {
+    "format": "PNG",
+    "width": 1536,
+    "height": 1536,
+    "ratio": 1
+  },
+  "copenhagen01": {
+    "format": "PNG",
+    "width": 768,
+    "height": 768,
+    "ratio": 1
+  },
+  "berlin02": {
+    "format": "PNG",
+    "width": 768,
+    "height": 768,
+    "ratio": 1
+  },
+  "berlin03": {
+    "format": "PNG",
+    "width": 7000,
+    "height": 3520,
+    "ratio": 1.9886363636363635
+  },
+  "copenhagen02": {
+    "format": "PNG",
+    "width": 7025,
+    "height": 3511,
+    "ratio": 2.0008544574195386
+  },
+  "amsterdam01": {
+    "format": "PNG",
+    "width": 7025,
+    "height": 3535,
+    "ratio": 1.9872701555869872
+  }
+}

utils/db-repo.js

@@ -1,26 +1,30 @@
-
-
 // projects count
-const resp = await fetch("https://raw.githubusercontent.com/web3privacy/web3privacy/main/README.md");
+const resp = await fetch(
+  "https://raw.githubusercontent.com/web3privacy/web3privacy/main/README.md",
+);
 const text = await resp.text();
-const [_, count] = text.match(/([\d\+]+) privacy projects/)
+const [_, count] = text.match(/([\d\+]+) privacy projects/);
 
 // contributors
-const response = await fetch(`https://api.github.com/repos/web3privacy/web3privacy/contributors`,);
+const response = await fetch(
+  `https://api.github.com/repos/web3privacy/web3privacy/contributors`,
+);
 const repoContributors = await response.json();
 
 // stars
-const respRepo = await fetch('https://api.github.com/repos/web3privacy/web3privacy')
+const respRepo = await fetch(
+  "https://api.github.com/repos/web3privacy/web3privacy",
+);
 const repo = await respRepo.json();
 
 const data = {
-    count,
-    contributors: repoContributors.length,
-    stars: repo.stargazers_count,
-}
+  count,
+  contributors: repoContributors.length,
+  stars: repo.stargazers_count,
+};
 
 await Deno.writeTextFile(
-    "./src/db-repo.json",
-    JSON.stringify(data, null, 2),
-  );
-  console.log(`File ./src/db-repo.json saved`);
+  "./src/db-repo.json",
+  JSON.stringify(data, null, 2),
+);
+console.log(`File ./src/db-repo.json saved`);

utils/gen-images.js

@@ -0,0 +1,23 @@
+import { run } from "https://deno.land/x/run_simple/mod.ts";
+import { join } from "https://deno.land/std@0.208.0/path/mod.ts";
+
+const IMG_DIR = "./public/gen-img/events";
+
+const data = {};
+for await (const f of Deno.readDir(IMG_DIR)) {
+  const [name, ext] = f.name.split(".");
+  if (ext !== "png") {
+    continue;
+  }
+  const explain = await run(`identify ${join(IMG_DIR, f.name)}`);
+  const [_, format, resolution] = explain.split(" ");
+  const [width, height] = resolution.split("x").map((c) => Number(c));
+
+  data[name] = { format, width, height, ratio: width / height };
+}
+
+await Deno.writeTextFile(
+  "./src/gen-images.json",
+  JSON.stringify(data, null, 2),
+);
+console.log(`File ./src/gen-images.json saved`);