feat: paragraph irudia sortzen du

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
+                  }
+                }
               }
             }
           }

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: {
+  formats: FormatsObject;
-    thumbnail: {
-      url: string;
-      height: number;
-      width: number;
-    };
-    small?: {
-      url: string;
-      height: number;
-      width: number;
-    };
-  };
 }
 
 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 ?? "",

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[];
 }

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;
     <h1>{orriBasikoa.izenburua}</h1>
     <article>
       {
-        orriBasikoa.edukiLibrea.map((paragraphTestua) => (
+        orriBasikoa.edukiLibrea.map((paragraph) => (
-          <MarkdownParser content={paragraphTestua.testua} />
+          <EdukiLibrea paragraph={paragraph} />
         ))
       }
     </article>

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" && (
+    <ParagraphIrudia media={paragraph.media} />
+  )
+}
+
+{
+  paragraph.type === "ComponentParagraphTestua" && (
+    <ParagraphTestua testua={paragraph.testua} />
+  )
+}

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" });
+---
+
+<img
+  class="irudia"
+  alt={media.alternativeText}
+  src={imageData.src}
+  width={imageData.width}
+  height={imageData.height}
+/>
+
+<style lang="scss">
+  img {
+    width: 100%;
+    height: auto;
+  }
+</style>

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;
+---
+
+<MarkdownParser content={testua} />