From 7de1df59fd13736c9e6cc6a3e770e20d256974de Mon Sep 17 00:00:00 2001
From: babayaga <cgoflyn@gmail.com>
Date: Fri, 7 Mar 2025 18:17:44 +0100
Subject: [PATCH] components:map tests

---
 .../imagetools/api/utils/getProcessedImage.js | 12 ++++------
 src/components/polymech/map.astro             | 23 +++++++++++--------
 src/layouts/StoreLayout.astro                 |  8 +++----
 src/pages/tests/kbot.astro                    | 21 +++++++++++------
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/imagetools/api/utils/getProcessedImage.js b/packages/imagetools/api/utils/getProcessedImage.js
index 98eae1d..ff3546f 100644
--- a/packages/imagetools/api/utils/getProcessedImage.js
+++ b/packages/imagetools/api/utils/getProcessedImage.js
@@ -15,23 +15,19 @@ export default async function getProcessedImage(src, transformConfigs) {
   throwErrorIfUnsupported(src, extname(src).slice(1));
 
   let base;
-
   if (src.match("(http://|https://|data:image/).*")) {
-    ({ src, base } = await getResolvedSrc(src));
+    ({ src, base } = await getResolvedSrc(src))
   } else {
     const {
       default: { isSsrBuild },
-    } = await import("../../astroViteConfigs.js");
+    } = await import("../../astroViteConfigs.js")
 
     if (isSsrBuild) {
-      const filename = fileURLToPath(import.meta.url);
-
-      const assetPath = resolve(filename, "../../client") + src;
-
+      const filename = fileURLToPath(import.meta.url)
+      const assetPath = resolve(filename, "../../client") + src
       src = "/" + relative(cwd, assetPath);
     }
   }
-
   const {
     w,
     h,
diff --git a/src/components/polymech/map.astro b/src/components/polymech/map.astro
index 1e81031..c04e8f3 100644
--- a/src/components/polymech/map.astro
+++ b/src/components/polymech/map.astro
@@ -1,5 +1,7 @@
 ---
-import { Location, Options } from './map-types';
+
+import { Location, Options } from './map-types'
+import { Img } from "imagetools/components"
 
 interface Props {
     locations?: Location[];
@@ -14,11 +16,13 @@ const { locations = [
     {
         geo: { lat: -2.272012, lon: 40.890586 },
         title: 'Shela Beach'
+    },
+    {
+        geo: { lat: -1.075012, lon: 40.890586 },
+        title: 'Shela Beach2'
     }
 ], options = {} } = Astro.props;
-
-const { zoom = 10, api_key = '' } = options;
-
+const { zoom = 9, api_key = '' } = options;
 // Generate markers query param
 const markersParam = locations.map((loc, index) => `markers=color:red%7Clabel:${String.fromCharCode(65 + index)}%7C${loc.geo.lat},${loc.geo.lon}`).join('&');
 
@@ -26,21 +30,21 @@ const centerLat = locations.reduce((sum, loc) => sum + loc.geo.lat, 0) / locatio
 const centerLon = locations.reduce((sum, loc) => sum + loc.geo.lon, 0) / locations.length;
 
 const googleMapsUrl = api_key ?
-    `https://maps.googleapis.com/maps/api/staticmap?center=${centerLat},${centerLon}&zoom=${zoom}&size=600x400&${markersParam}&key=${api_key}` : null;
+    `https://maps.googleapis.com/maps/api/staticmap?center=${centerLat},${centerLon}&size=1200x600&${markersParam}&key=${api_key}` : null;
 
 const hasError = !api_key;
 ---
 
-<div class="map-container w-full max-w-4xl mx-auto border border-gray-200 rounded-lg overflow-hidden shadow-md">
+<div class="map-container w-full max-w-4xl mx-auto border border-gray-200 rounded-lg overflow-hidden shadow-md m-4">
     {!hasError ? (
         <div class="relative w-full h-full">
-            <img 
+            <img
                 src={googleMapsUrl} 
                 alt="Map showing locations" 
                 class="w-full h-auto" width="600" 
                 height="400"
             />
-            <div class="absolute bottom-0 w-full bg-white/[70%] p-4 backdrop-blur-sm">
+            <div class="bottom-0 w-full bg-white/[70%] p-4 backdrop-blur-sm">
                 <ul class="space-y-1">
                     {locations.map((loc, index) => (
                         <li key={index} class="flex items-center gap-2">
@@ -62,7 +66,6 @@ const hasError = !api_key;
 </div>
 <style>
     .map-container {
-        aspect-ratio: 6 / 4;
-        max-height: 400px;
+        
     }
 </style>
\ No newline at end of file
diff --git a/src/layouts/StoreLayout.astro b/src/layouts/StoreLayout.astro
index 2ed338a..c68548b 100644
--- a/src/layouts/StoreLayout.astro
+++ b/src/layouts/StoreLayout.astro
@@ -3,6 +3,7 @@ import BaseLayout from "./BaseLayout.astro";
 import { createMarkdownComponent } from "@/base/index.js";
 import { translate } from "@/base/i18n.js";
 import Wrapper from "@/components/containers/Wrapper.astro";
+
 import Translate from "@/components/polymech/i18n.astro";
 import Readme from "@/components/polymech/readme.astro";
 import LGallery from "@/components/polymech/GalleryK.astro"
@@ -10,6 +11,7 @@ import Resources from "@/components/polymech/resources.astro"
 import Specs from "@/components/polymech/specs.astro"
 import TabButton from "@/components/polymech/tab-button.astro"
 import TabContent from "@/components/polymech/tab-content.astro"
+import Map from "@/components/polymech/map.astro"
 
 import "flowbite"
 
@@ -60,9 +62,7 @@ const Content_Debug = await createMarkdownComponent(str_debug)
       <div class="grid sm:grid-cols-2 lg:grid-cols-2 just xl:grid-cols-2 gap-2">
         <div class="flex flex-col gap-2 h-full justify-between">
           <div>
-            
-            {
-              <article  class="markdown-content bg-white rounded-xl p-4 " >
+            <article  class="markdown-content bg-white rounded-xl p-4 " >
                 <h1  class="text-neutral-500 font-mono font-semibold mb-2 text-2xl">
               <Translate>{`${data.title}`}</Translate></span>              
               { isRTL(Astro.currentLocale) && (
@@ -73,7 +73,7 @@ const Content_Debug = await createMarkdownComponent(str_debug)
             </h1>
                 <Body/>
               </article>
-            }
+            
           </div>
           
           <div class="gap-2 flex flex-col h-full justify-end">
diff --git a/src/pages/tests/kbot.astro b/src/pages/tests/kbot.astro
index 2da802c..ffa74cf 100644
--- a/src/pages/tests/kbot.astro
+++ b/src/pages/tests/kbot.astro
@@ -1,18 +1,25 @@
 ---
-import BaseLayout from "@/layouts/BaseLayout.astro";
+import BaseLayout from "@/layouts/BaseLayout.astro"
+import Wrapper from "@/components/containers/Wrapper.astro"
+import { getCollection } from "astro:content"
+import KBot from "@/components/polymech/kbot.astro"
+const locale = Astro.currentLocale
+const store = `${locale}/store/`
+const blog = `/blog/posts/`
 
-import Wrapper from "@/components/containers/Wrapper.astro";
-import { getCollection } from "astro:content";
+import Map from "@/components/polymech/map.astro"
+
+const mapOptions = {
+  zoom: 9,
+  api_key: "AIzaSyCHsscCXksisHKMnUihOxl2X1mKny-qrqk"
+}
 
-import KBot from "@/components/polymech/kbot.astro";
-const locale = Astro.currentLocale;
-const store = `${locale}/store/`;
-const blog = `/blog/posts/`;
 ---
 
 <BaseLayout>
     <Wrapper variant="standard" class="py-4">
         <section>
+            <Map options={mapOptions} />
             <div class="py-2 space-y-2">
                 <div class="grid md:grid-cols-1 lg:grid-cols-1 gap-4" >
                     <KBot router="openai" model="gpt-4.5-preview" mode="completion" template="code_simple" disabled={true}>