From 1b5edeb7fa2b5bfe07fe6cc4bfb7e37c0762a0ca Mon Sep 17 00:00:00 2001 From: "Aitor C. Urrutia Aranburu" Date: Tue, 9 Sep 2025 17:16:28 +0200 Subject: [PATCH] feat: paragraph irudia sortzen du --- front/src/content.config.ts | 9 ++++ front/src/models/ImageMedia.ts | 54 ++++++++++++++----- front/src/models/OrriBasikoa.ts | 12 ++++- front/src/views/orriBasikoa/OrriBasikoa.astro | 6 ++- .../orriBasikoa/_components/EdukiLibrea.astro | 23 ++++++++ .../_components/ParagraphIrudia.astro | 26 +++++++++ .../_components/ParagraphTestua.astro | 12 +++++ 7 files changed, 126 insertions(+), 16 deletions(-) create mode 100644 front/src/views/orriBasikoa/_components/EdukiLibrea.astro create mode 100644 front/src/views/orriBasikoa/_components/ParagraphIrudia.astro create mode 100644 front/src/views/orriBasikoa/_components/ParagraphTestua.astro diff --git a/front/src/content.config.ts b/front/src/content.config.ts index 7192ea2..d84db41 100644 --- a/front/src/content.config.ts +++ b/front/src/content.config.ts @@ -106,9 +106,18 @@ const orriBasikoak = defineCollection({ deskribapena edukiLibrea { ... on ComponentParagraphTestua { + type: __typename id testua } + ... on ComponentParagraphIrudia { + type: __typename + id + media { + alternativeText + formats + } + } } } } diff --git a/front/src/models/ImageMedia.ts b/front/src/models/ImageMedia.ts index a7e93b8..9e88abd 100644 --- a/front/src/models/ImageMedia.ts +++ b/front/src/models/ImageMedia.ts @@ -1,17 +1,19 @@ +interface Format { + url: string; + height: number; + width: number; +} + +interface FormatsObject { + thumbnail: Format; + small?: Format; + medium?: Format; + large?: Format; +} + export interface ImageMedia { alternativeText?: string; - formats: { - thumbnail: { - url: string; - height: number; - width: number; - }; - small?: { - url: string; - height: number; - width: number; - }; - }; + formats: FormatsObject; } export interface ImageData { @@ -21,7 +23,33 @@ export interface ImageData { width: number; } -export function getImageData(imageMedia: ImageMedia): ImageData { +export function getImageData( + imageMedia: ImageMedia, + options: { preferredFormat?: "thumbnail" | "small" | "medium" | "large" } = { + preferredFormat: "small", + } +): ImageData { + if (imageMedia.formats.large && options.preferredFormat === "large") { + return { + alt: imageMedia.alternativeText ?? "", + src: imageMedia.formats.large.url, + width: imageMedia.formats.large.width, + height: imageMedia.formats.large.height, + }; + } + + if ( + imageMedia.formats.medium && + (options.preferredFormat === "large" || options.preferredFormat == "medium") + ) { + return { + alt: imageMedia.alternativeText ?? "", + src: imageMedia.formats.medium.url, + width: imageMedia.formats.medium.width, + height: imageMedia.formats.medium.height, + }; + } + if (imageMedia.formats.small) { return { alt: imageMedia.alternativeText ?? "", diff --git a/front/src/models/OrriBasikoa.ts b/front/src/models/OrriBasikoa.ts index 9c4f874..3108028 100644 --- a/front/src/models/OrriBasikoa.ts +++ b/front/src/models/OrriBasikoa.ts @@ -1,14 +1,24 @@ import type { Markdown } from "./Markdown"; +import type { ImageMedia } from "models/ImageMedia"; + +interface ParagraphIrudia { + type: "ComponentParagraphIrudia"; + id: string; + media: ImageMedia; +} interface ParagraphTestua { + type: "ComponentParagraphTestua"; id: string; testua: Markdown; } +export type Paragraph = ParagraphTestua | ParagraphIrudia; + export interface OrriBasikoa { id: string; izenburua: string; slug: string; deskribapena?: string; - edukiLibrea: ParagraphTestua[]; + edukiLibrea: Paragraph[]; } diff --git a/front/src/views/orriBasikoa/OrriBasikoa.astro b/front/src/views/orriBasikoa/OrriBasikoa.astro index e45a6c5..58f8339 100644 --- a/front/src/views/orriBasikoa/OrriBasikoa.astro +++ b/front/src/views/orriBasikoa/OrriBasikoa.astro @@ -4,6 +4,8 @@ import Layout from "../../layouts/Layout.astro"; import Header from "views/_components/Header.astro"; import Footer from "views/_components/Footer.astro"; import MarkdownParser from "views/_components/MarkdownParser.astro"; +import { getImageData } from "models/ImageMedia"; +import EdukiLibrea from "./_components/EdukiLibrea.astro"; interface Props { orriBasikoa: OrriBasikoa; @@ -19,8 +21,8 @@ const { orriBasikoa } = Astro.props;

{orriBasikoa.izenburua}

{ - orriBasikoa.edukiLibrea.map((paragraphTestua) => ( - + orriBasikoa.edukiLibrea.map((paragraph) => ( + )) }
diff --git a/front/src/views/orriBasikoa/_components/EdukiLibrea.astro b/front/src/views/orriBasikoa/_components/EdukiLibrea.astro new file mode 100644 index 0000000..824c4db --- /dev/null +++ b/front/src/views/orriBasikoa/_components/EdukiLibrea.astro @@ -0,0 +1,23 @@ +--- +import type { Paragraph } from "models/OrriBasikoa"; +import ParagraphIrudia from "./ParagraphIrudia.astro"; +import ParagraphTestua from "./ParagraphTestua.astro"; + +interface Props { + paragraph: Paragraph; +} + +const { paragraph } = Astro.props; +--- + +{ + paragraph.type === "ComponentParagraphIrudia" && ( + + ) +} + +{ + paragraph.type === "ComponentParagraphTestua" && ( + + ) +} diff --git a/front/src/views/orriBasikoa/_components/ParagraphIrudia.astro b/front/src/views/orriBasikoa/_components/ParagraphIrudia.astro new file mode 100644 index 0000000..af0621a --- /dev/null +++ b/front/src/views/orriBasikoa/_components/ParagraphIrudia.astro @@ -0,0 +1,26 @@ +--- +import { getImageData, type ImageMedia } from "models/ImageMedia"; + +interface Props { + media: ImageMedia; +} + +const { media } = Astro.props; + +const imageData = getImageData(media, { preferredFormat: "large" }); +--- + +{media.alternativeText} + + diff --git a/front/src/views/orriBasikoa/_components/ParagraphTestua.astro b/front/src/views/orriBasikoa/_components/ParagraphTestua.astro new file mode 100644 index 0000000..a83533e --- /dev/null +++ b/front/src/views/orriBasikoa/_components/ParagraphTestua.astro @@ -0,0 +1,12 @@ +--- +import type { Markdown } from "models/Markdown"; +import MarkdownParser from "views/_components/MarkdownParser.astro"; + +interface Props { + testua: Markdown; +} + +const { testua } = Astro.props; +--- + +