oier/pole-book
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

strapi utils

Browse Source
This commit is contained in:
Oier Bravo
2025-06-22 00:12:21 +02:00
parent 2053924a09
commit 1b99852d6c
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/pages/index.astro
View File

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

10
client/src/utils/strapi.ts Normal file
View File

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