From 1b99852d6c3376e3253924b00ecd556fdf0b90a5 Mon Sep 17 00:00:00 2001
From: Oier Bravo Urtasun <oierbravo@gmail.com>
Date: Sun, 22 Jun 2025 00:12:21 +0200
Subject: [PATCH] strapi utils

---
 client/src/pages/index.astro | 24 +++++++-----------------
 client/src/utils/strapi.ts   | 10 ++++++++++
 2 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 client/src/utils/strapi.ts

diff --git a/client/src/pages/index.astro b/client/src/pages/index.astro
index 37f0ae82..71e51138 100644
--- a/client/src/pages/index.astro
+++ b/client/src/pages/index.astro
@@ -3,22 +3,12 @@
 import Layout from '../layouts/Layout.astro';
 import { getCollection } from 'astro:content';
 import MarkdownComponent from "../components/MardownContent.astro";
+import { getStrapiMedia } from '../utils/strapi';
 
 // Fetch all posts from Strapi using Astro's content collection
 const strapiPoleElements = await getCollection("strapiPoleElementsLoader");
 // Get Strapi URL from environment variables with fallback to localhost
 const BASE_URL = await import.meta.env.STRAPI_URL || "http://localhost:1337";
-
-// Helper function to handle media URLs from Strapi
-function getStrapiMedia(url: string | null) {
-  if (url == null) return null;
-  // Return as-is if it's a data URL (base64)
-  if (url.startsWith("data:")) return url;
-  // Return as-is if it's an absolute URL
-  if (url.startsWith("http") || url.startsWith("//")) return url;
-  // Prepend BASE_URL for relative URLs
-  return `${BASE_URL}${url}`;
-}
 ---
 
 <Layout>
@@ -28,20 +18,20 @@ function getStrapiMedia(url: string | null) {
 	<!-- Responsive grid layout using Tailwind CSS -->
 	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
 		{/* Map through posts and create article cards */}
-		{strapiPoleElements.map((post) => (
+		{strapiPoleElements.map((poleElement) => (
 			<article class="bg-white rounded-lg shadow-lg overflow-hidden">
 				{/* Post cover image */}
 				<img 
-					src={getStrapiMedia(post.data.mainImage.url)} 
-					alt={post.data.mainImage.alternativeText} 
+					src={getStrapiMedia(poleElement.data.mainImage.url, BASE_URL)} 
+					alt={poleElement.data.mainImage.alternativeText} 
 					class="w-full h-48 object-cover"
 				/>
 				{/* Post content container */}
 				<div class="p-4">
-					<h2 class="text-xl font-bold mb-2">{post.data.name}</h2>
-					<MarkdownComponent content={post.data.description} class="text-gray-600 mb-4"/>
+					<h2 class="text-xl font-bold mb-2">{poleElement.data.name}</h2>
+					<MarkdownComponent content={poleElement.data.description} class="text-gray-600 mb-4"/>
 					<div class="text-sm text-gray-500">
-						Published: {new Date(post.data.publishedAt).toLocaleDateString()}
+						Published: {new Date(poleElement.data.publishedAt).toLocaleDateString()}
 					</div>
 				</div>
 			</article>
diff --git a/client/src/utils/strapi.ts b/client/src/utils/strapi.ts
new file mode 100644
index 00000000..31e67f67
--- /dev/null
+++ b/client/src/utils/strapi.ts
@@ -0,0 +1,10 @@
+// Helper function to handle media URLs from Strapi
+export function getStrapiMedia(url: string | null, baseUrl: string) {
+  if (url == null) return null;
+  // Return as-is if it's a data URL (base64)
+  if (url.startsWith("data:")) return url;
+  // Return as-is if it's an absolute URL
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  // Prepend baseUrl for relative URLs
+  return `${baseUrl}${url}`;
+} 
\ No newline at end of file