rschneider/yogastic
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Roland Schneider 2025-05-23 14:38:14 +02:00
parent 67839dbfb9
commit f33e97666e
2 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
yoga-app/src/app/services/[slug]/page.tsx
View File

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

9
yoga-app/src/components/next.blocks.renderer.tsx
View File

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