From f33e97666e1274a2ec4327c54c2f86a34e7aa617 Mon Sep 17 00:00:00 2001
From: Roland Schneider <rschneider@ucs.at>
Date: Fri, 23 May 2025 14:38:14 +0200
Subject: [PATCH] [yoga-6] add nextBlocksRenderer to render json based rich
 text

---
 yoga-app/src/app/services/[slug]/page.tsx     | 25 +++++++++++++++----
 .../src/components/next.blocks.renderer.tsx   |  9 +++----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/yoga-app/src/app/services/[slug]/page.tsx b/yoga-app/src/app/services/[slug]/page.tsx
index 8687169..248531d 100644
--- a/yoga-app/src/app/services/[slug]/page.tsx
+++ b/yoga-app/src/app/services/[slug]/page.tsx
@@ -1,29 +1,44 @@
 import React from "react";
 import strapiApi from "@/api/strapi/strapi-api";
-import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
+import {BlocksContent} from "@strapi/blocks-react-renderer";
 import SubscribeComponent from "@/components/subscribe.component";
 import FooterComponent from "@/components/footer.component";
 import SubHeaderComponent from "@/components/subHeader.component";
 import AosComponent from "@/components/aos.component";
 import styles from './page.module.css'
 import NextBlocksRenderer from "@/components/next.blocks.renderer";
+import clsx from "clsx";
+
+const rewriteStrapiImageUrlToNextImageUrl = (content: BlocksContent) =>{
+    console.info("content", content);
+    for(const item of content){
+        if ( item.type == 'image'){
+            const imageData = item.image;
+            const url = new URL(imageData.url);
+            imageData.url = strapiApi.getImageUrl(url.pathname);
+        }
+    }
+    return content;
+}
 
 export default async function ServiceArticlePage({params}: {
     params: Promise<{ slug: string }>
 }) {
     const {slug} = await params
-    const {header, description, footer, subscribeNow} = await strapiApi.getServicePage();
+    const {footer, subscribeNow} = await strapiApi.getServicePage();
     const servicesByName = await strapiApi.getService(slug);
     const selectedService = servicesByName[0];
-    const article = selectedService.article;
+    console.info("selectedService",selectedService);
+    const article: BlocksContent = rewriteStrapiImageUrlToNextImageUrl( selectedService.article);
     console.info(article);
 
-    selectedService.article
+
+
     return (
         <>
             {selectedService && selectedService.header && selectedService.description &&
                 <SubHeaderComponent header1={selectedService.header} description={selectedService.description}/>}
-            <section className={styles.article}>
+            <section className={clsx( styles.article, 'mb-3')}>
                 <div className="container">
                     <div className={"row"}>
                         <div className={"col-lg-12 col-md-12 col-sm-12 col-xs-12"}>
diff --git a/yoga-app/src/components/next.blocks.renderer.tsx b/yoga-app/src/components/next.blocks.renderer.tsx
index e997689..c7c6d6e 100644
--- a/yoga-app/src/components/next.blocks.renderer.tsx
+++ b/yoga-app/src/components/next.blocks.renderer.tsx
@@ -1,6 +1,5 @@
 'use client';
 import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer";
-import strapiApi from "@/api/strapi/strapi-api";
 import React from "react";
 import YogaImageComponent from "@/components/yoga.image.component";
 
@@ -13,13 +12,11 @@ const NextBlocksRenderer = ({ content }: Props) => {
         content={content}
         blocks={{
             image: ({image}) => {
-                console.log(image);
-                const url =  new URL(image.url);
                 return (
                     <YogaImageComponent
-                        src={url.pathname}
-                        width={image.width}
-                        height={image.height}
+                        src={image.url}
+                        // width={image.width}
+                        // height={image.height}
                         alt={image.alternativeText || ""}
                     />
                 );