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

format index

Browse Source
This commit is contained in:
Oier Bravo
2025-06-22 00:14:17 +02:00
parent 1b99852d6c
commit 0092aa321d
1 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,41 +1,56 @@
--- ---
// Import necessary components and utilities // Import necessary components and utilities
import Layout from '../layouts/Layout.astro'; import Layout from "../layouts/Layout.astro";
import { getCollection } from 'astro:content'; import { getCollection } from "astro:content";
import MarkdownComponent from "../components/MardownContent.astro"; import MarkdownComponent from "../components/MardownContent.astro";
import { getStrapiMedia } from '../utils/strapi'; import { getStrapiMedia } from "../utils/strapi";
// Fetch all posts from Strapi using Astro's content collection // Fetch all posts from Strapi using Astro's content collection
const strapiPoleElements = await getCollection("strapiPoleElementsLoader"); const strapiPoleElements = await getCollection("strapiPoleElementsLoader");
// Get Strapi URL from environment variables with fallback to localhost // Get Strapi URL from environment variables with fallback to localhost
const BASE_URL = await import.meta.env.STRAPI_URL || "http://localhost:1337"; const BASE_URL = (await import.meta.env.STRAPI_URL) || "http://localhost:1337";
--- ---
<Layout> <Layout>
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<!-- Main heading --> <!-- Main heading -->
<h1 class="text-3xl font-bold mb-8">Hello Strapi 5 and Astro 5 World</h1> <h1 class="text-3xl font-bold mb-8">
<!-- Responsive grid layout using Tailwind CSS --> Hello Strapi 5 and Astro 5 World
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> </h1>
{/* Map through posts and create article cards */} <!-- Responsive grid layout using Tailwind CSS -->
{strapiPoleElements.map((poleElement) => ( <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<article class="bg-white rounded-lg shadow-lg overflow-hidden"> {/* Map through posts and create article cards */}
{/* Post cover image */} {
<img strapiPoleElements.map((poleElement) => (
src={getStrapiMedia(poleElement.data.mainImage.url, BASE_URL)} <article class="bg-white rounded-lg shadow-lg overflow-hidden">
alt={poleElement.data.mainImage.alternativeText} {/* Post cover image */}
class="w-full h-48 object-cover" <img
/> src={getStrapiMedia(
{/* Post content container */} poleElement.data.mainImage.url,
<div class="p-4"> BASE_URL,
<h2 class="text-xl font-bold mb-2">{poleElement.data.name}</h2> )}
<MarkdownComponent content={poleElement.data.description} class="text-gray-600 mb-4"/> alt={poleElement.data.mainImage.alternativeText}
<div class="text-sm text-gray-500"> class="w-full h-48 object-cover"
Published: {new Date(poleElement.data.publishedAt).toLocaleDateString()} />
</div> {/* Post content container */}
</div> <div class="p-4">
</article> <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(
poleElement.data.publishedAt,
).toLocaleDateString()}
</div>
</div>
</article>
))
}
</div>
</div> </div>
</div> </Layout>
</Layout>