[yoga-6] add nextBlocksRenderer to render json based rich text

Reviewed-on: https://gitea.rschneider.hu/rschneider/yogastic/pulls/9

dev.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+cd environment/dev/docker-compose/yogastic
+docker compose up -d
+

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

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 || ""}
                     />
                 );

yoga-app/src/components/price.item.component.tsx

@@ -7,7 +7,7 @@ export interface Props{
     config: YogaPrice_Plain
 }
 
-export function PriceItemComponent({config: {header,option1,option2,price,icon, image,buttonText}} : Props){
+export function PriceItemComponent({config: {header, description, option1,option2,price,pricePostfix, icon, image,buttonText}} : Props){
     // there are some issues with the strapi generated types
     const iconFile: StrapiFile = icon as StrapiFile;
     const imageFile: StrapiFile = image as StrapiFile;
@@ -28,6 +28,7 @@ export function PriceItemComponent({config: {header,option1,option2,price,icon,
                 </div>
                 <div className="pricing_plans_box_lower_portion">
                     <h3>{header}</h3>
+                    <p className={'text-center'}>{description}</p>
                     <ul className="list-unstyled">
                         <li>
                             <i className="fa-solid fa-check" aria-hidden="true"></i>{option1}
@@ -38,7 +39,7 @@ export function PriceItemComponent({config: {header,option1,option2,price,icon,
                     </ul>
                     <div className="pricing_plans_span_wrapper">
                         <span className="price">{price} FT</span>
-                        <span className="per_month">/per month</span>
+                        { pricePostfix && <span className="per_month">{pricePostfix}</span> }
                     </div>
                     <div className="btn_wrapper">
                         <a className="enroll_now_btn text-decoration-none" href="/pricing.html">{buttonText}</a>

yoga-app/src/types/generated-strapi-interfaces/api/yoga-price.ts

@@ -14,6 +14,8 @@ export interface YogaPrice {
     price?: number;
     icon?: { data: Media };
     image?: { data: Media };
+    pricePostfix?: string;
+    description?: string;
   };
 }
 export interface YogaPrice_Plain {
@@ -25,6 +27,8 @@ export interface YogaPrice_Plain {
   price?: number;
   icon?: Media_Plain;
   image?: Media_Plain;
+  pricePostfix?: string;
+  description?: string;
 }
 
 export interface YogaPrice_NoRelations {
@@ -36,6 +40,8 @@ export interface YogaPrice_NoRelations {
   price?: number;
   icon?: number;
   image?: number;
+  pricePostfix?: string;
+  description?: string;
 }
 
 export interface YogaPrice_AdminPanelLifeCycle {
@@ -47,4 +53,6 @@ export interface YogaPrice_AdminPanelLifeCycle {
   price?: number;
   icon?: AdminPanelRelationPropertyModification<Media_Plain>;
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
+  pricePostfix?: string;
+  description?: string;
 }

yoga-cms/generated-strapi-interfaces/api/yoga-price.ts

@@ -14,6 +14,8 @@ export interface YogaPrice {
     price?: number;
     icon?: { data: Media };
     image?: { data: Media };
+    pricePostfix?: string;
+    description?: string;
   };
 }
 export interface YogaPrice_Plain {
@@ -25,6 +27,8 @@ export interface YogaPrice_Plain {
   price?: number;
   icon?: Media_Plain;
   image?: Media_Plain;
+  pricePostfix?: string;
+  description?: string;
 }
 
 export interface YogaPrice_NoRelations {
@@ -36,6 +40,8 @@ export interface YogaPrice_NoRelations {
   price?: number;
   icon?: number;
   image?: number;
+  pricePostfix?: string;
+  description?: string;
 }
 
 export interface YogaPrice_AdminPanelLifeCycle {
@@ -47,4 +53,6 @@ export interface YogaPrice_AdminPanelLifeCycle {
   price?: number;
   icon?: AdminPanelRelationPropertyModification<Media_Plain>;
   image?: AdminPanelRelationPropertyModification<Media_Plain>;
+  pricePostfix?: string;
+  description?: string;
 }

yoga-cms/src/api/yoga-price/content-types/yoga-price/schema.json

@@ -4,7 +4,8 @@
   "info": {
     "singularName": "yoga-price",
     "pluralName": "yoga-prices",
-    "displayName": "YogaPrice"
+    "displayName": "YogaPrice",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true
@@ -27,24 +28,32 @@
       "type": "integer"
     },
     "icon": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
       "allowedTypes": [
         "images",
         "files",
         "videos",
         "audios"
-      ],
-      "type": "media",
-      "multiple": false
+      ]
     },
     "image": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
       "allowedTypes": [
         "images",
         "files",
         "videos",
         "audios"
-      ],
-      "type": "media",
-      "multiple": false
+      ]
+    },
+    "pricePostfix": {
+      "type": "string"
+    },
+    "description": {
+      "type": "text"
     }
   }
 }

yoga-cms/types/generated/contentTypes.d.ts

@@ -1680,6 +1680,7 @@ export interface ApiYogaPriceComponentYogaPriceComponent
 export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
   collectionName: 'yoga_prices';
   info: {
+    description: '';
     displayName: 'YogaPrice';
     pluralName: 'yoga-prices';
     singularName: 'yoga-price';
@@ -1692,6 +1693,7 @@ export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
     createdAt: Schema.Attribute.DateTime;
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
+    description: Schema.Attribute.Text;
     header: Schema.Attribute.String;
     icon: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
     image: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
@@ -1704,6 +1706,7 @@ export interface ApiYogaPriceYogaPrice extends Struct.CollectionTypeSchema {
     option1: Schema.Attribute.String;
     option2: Schema.Attribute.String;
     price: Schema.Attribute.Integer;
+    pricePostfix: Schema.Attribute.String;
     publishedAt: Schema.Attribute.DateTime;
     updatedAt: Schema.Attribute.DateTime;
     updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &