components:map tests

This commit is contained in:
lovebird 2025-03-07 18:17:44 +01:00
parent b5f9431593
commit 7de1df59fd
4 changed files with 35 additions and 29 deletions

View File

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

View File

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

View File

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

View File

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