diff --git a/client/src/collections/strapiPoleElementsLoader.mjs b/client/src/collections/strapiPoleElementsLoader.mjs new file mode 100644 index 00000000..538a9472 --- /dev/null +++ b/client/src/collections/strapiPoleElementsLoader.mjs @@ -0,0 +1,61 @@ +import { defineCollection, z } from "astro:content"; +import qs from "qs"; + +// Define a custom content collection that loads data from Strapi +const strapiPoleElementsLoader = defineCollection({ + // Async loader function that fetches data from Strapi API + loader: async () => { + // Get Strapi URL from environment variables or fallback to localhost + const BASE_URL = import.meta.env.STRAPI_URL || "http://localhost:1337"; + const path = "/api/elements"; + const url = new URL(path, BASE_URL); + + // Build query parameters using qs to populate cover image data + url.search = qs.stringify({ + populate: { + mainImage: { + fields: ["url", "alternativeText"], + }, + }, + }); + + // Fetch articles from Strapi + const poleElementsData = await fetch(url.href); + const { data }= await poleElementsData.json(); + + // Transform the API response into the desired data structure + return data.map((item) => ({ + id: item.id.toString(), + name: item.name, + title: item.name, + description: item.description, + createdAt: item.createdAt, + updatedAt: item.updatedAt, + publishedAt: item.publishedAt, + mainImage: { + id: Number(item.mainImage.id), + documentId: item.mainImage.documentId, + url: item.mainImage.url, + alternativeText: item.mainImage.alternativeText, + } + })); + }, + // Define the schema for type validation using Zod + schema: z.object({ + id: z.string(), + name: z.string(), + title: z.string(), + description: z.string(), + createdAt: z.string(), + updatedAt: z.string(), + publishedAt: z.string(), + mainImage: z.object({ + id: z.number(), + documentId: z.string(), + url: z.string(), + alternativeText: z.string(), + }), + }), +}); + +export default strapiPoleElementsLoader; \ No newline at end of file diff --git a/client/src/components/ElementsCard.astro b/client/src/components/ElementsCard.astro deleted file mode 100644 index 730d974f..00000000 --- a/client/src/components/ElementsCard.astro +++ /dev/null @@ -1,46 +0,0 @@ ---- -// BigCard component - configurable card with link -interface Props { - url: string; -} - -const { url } = Astro.props; ---- - -
- -
-
- -
- - - -
- - -

- Pole Elements -

- - -

- Explore a comprehensive collection of pole dance elements, techniques, and combinations. - From basic spins to advanced tricks, discover everything you need to master pole sport. -

- - -
- Explore Elements - - - -
-
- - -
-
-
- -
\ No newline at end of file diff --git a/client/src/components/PoleElementsList.astro b/client/src/components/PoleElementsList.astro index 12b923b6..ed37698a 100644 --- a/client/src/components/PoleElementsList.astro +++ b/client/src/components/PoleElementsList.astro @@ -18,21 +18,23 @@ const BASE_URL = getStrapiBaseUrl();
{ elements.map((poleElement) => ( -
- {poleElement.data.mainImage.alternativeText} -
-

- {poleElement.data.name} -

-
-
+ +
+ {poleElement.data.mainImage.alternativeText} +
+

+ {poleElement.data.name} +

+
+
+ )) }
\ No newline at end of file diff --git a/client/src/content.config.mjs b/client/src/content.config.mjs index 4a79c911..93c2d8dc 100644 --- a/client/src/content.config.mjs +++ b/client/src/content.config.mjs @@ -1,64 +1,6 @@ -import { defineCollection, z } from "astro:content"; -import qs from "qs"; - -// Define a custom content collection that loads data from Strapi -const strapiPoleElementsLoader = defineCollection({ - // Async loader function that fetches data from Strapi API - loader: async () => { - // Get Strapi URL from environment variables or fallback to localhost - const BASE_URL = import.meta.env.STRAPI_URL || "http://localhost:1337"; - const path = "/api/elements"; - const url = new URL(path, BASE_URL); - - // Build query parameters using qs to populate cover image data - url.search = qs.stringify({ - populate: { - mainImage: { - fields: ["url", "alternativeText"], - }, - }, - }); - - // Fetch articles from Strapi - const poleElementsData = await fetch(url.href); - const { data }= await poleElementsData.json(); - - // Transform the API response into the desired data structure - return data.map((item) => ({ - id: item.id.toString(), - name: item.name, - title: item.name, - description: item.description, - createdAt: item.createdAt, - updatedAt: item.updatedAt, - publishedAt: item.publishedAt, - mainImage: { - id: Number(item.mainImage.id), - documentId: item.mainImage.documentId, - url: item.mainImage.url, - alternativeText: item.mainImage.alternativeText, - } - })); - }, - // Define the schema for type validation using Zod - schema: z.object({ - id: z.string(), - name: z.string(), - title: z.string(), - description: z.string(), - createdAt: z.string(), - updatedAt: z.string(), - publishedAt: z.string(), - mainImage: z.object({ - id: z.number(), - documentId: z.string(), - url: z.string(), - alternativeText: z.string(), - }), - }), -}); +import strapiPoleElementsLoader from "./collections/strapiPoleElementsLoader.mjs"; // Export the collection for use in Astro pages export const collections = { - strapiPoleElementsLoader, + poleElements: strapiPoleElementsLoader, }; \ No newline at end of file diff --git a/client/src/layouts/Layout.astro b/client/src/layouts/Layout.astro index 4f8f5276..064b9f38 100644 --- a/client/src/layouts/Layout.astro +++ b/client/src/layouts/Layout.astro @@ -9,7 +9,9 @@ const { title = "Just a title", description = "Adescription" } = Astro.props; - +
+ +
diff --git a/client/src/pages/elements.astro b/client/src/pages/elements.astro index 5b86c230..b5fd05aa 100644 --- a/client/src/pages/elements.astro +++ b/client/src/pages/elements.astro @@ -6,23 +6,21 @@ import PoleElementsList from "../components/PoleElementsList.astro"; import { getStrapiBaseUrl } from "../config/strapi"; // Fetch all posts from Strapi using Astro's content collection -const strapiPoleElements = await getCollection("strapiPoleElementsLoader"); +const strapiPoleElements = await getCollection("poleElements"); // Get Strapi URL from global config const BASE_URL = getStrapiBaseUrl(); --- -
- -

- Pole Elements -

- - -
+ +

+ Pole Elements +

+ + diff --git a/client/src/pages/elements/[...id].astro b/client/src/pages/elements/[...id].astro new file mode 100644 index 00000000..5679c471 --- /dev/null +++ b/client/src/pages/elements/[...id].astro @@ -0,0 +1,20 @@ +--- +import { getCollection } from 'astro:content'; +import MardownContent from '../../components/MardownContent.astro'; +import Layout from '../../layouts/Layout.astro'; + +// 1. Genera una nueva ruta para cada entrada de colección +export async function getStaticPaths() { + const poleElements = await getCollection('poleElements'); + return poleElements.map(entry => ({ + params: { id: entry.id }, props: { entry }, + })); +} +// 2. Para tu plantilla, puedes obtener la entrada directamente de la prop +const { entry } = Astro.props; +--- + + +

{entry.data.title}

+ + \ No newline at end of file