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 Layout from '../layouts/Layout.astro';
import { getCollection } from 'astro:content';
import Layout from "../layouts/Layout.astro";
import { getCollection } from "astro:content";
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
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";
const BASE_URL = (await import.meta.env.STRAPI_URL) || "http://localhost:1337";
---
<Layout>
<div class="container mx-auto p-4">
<!-- Main heading -->
<h1 class="text-3xl font-bold mb-8">Hello Strapi 5 and Astro 5 World</h1>
<!-- 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((poleElement) => (
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
{/* Post cover image */}
<img
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">{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 class="container mx-auto p-4">
<!-- Main heading -->
<h1 class="text-3xl font-bold mb-8">
Hello Strapi 5 and Astro 5 World
</h1>
<!-- 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((poleElement) => (
<article class="bg-white rounded-lg shadow-lg overflow-hidden">
{/* Post cover image */}
<img
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">
{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>
</Layout>
</Layout>