From 22272e0a171231f9496158e91cb21fbbe2f4c745 Mon Sep 17 00:00:00 2001 From: Schneider Roland Date: Wed, 21 May 2025 22:28:12 +0200 Subject: [PATCH 1/4] add service detail page --- api.http | 6 ++- yoga-app/package-lock.json | 11 +++++ yoga-app/package.json | 1 + yoga-app/src/api/strapi/query/service.json | 25 ++++++++++ yoga-app/src/api/strapi/strapi-api.ts | 8 +++- yoga-app/src/app/services/[slug]/page.tsx | 20 ++++++-- .../api/article.ts | 8 ++-- .../api/yoga-single-service.ts | 8 ++-- .../api/yoga-single-service.ts | 8 ++-- .../yoga-single-service/schema.json | 7 +-- yoga-cms/types/generated/contentTypes.d.ts | 46 ++++++++++++++++--- 11 files changed, 118 insertions(+), 30 deletions(-) create mode 100644 yoga-app/src/api/strapi/query/service.json diff --git a/api.http b/api.http index 177f818..141dff6 100644 --- a/api.http +++ b/api.http @@ -26,4 +26,8 @@ Accept: application/json ### GET request with a header GET {{domain}}/api/yoga-single-services?filters[name][$eq]=service4 -Accept: application/json \ No newline at end of file +Accept: application/json + +### GET service page +GET {{domain}}/api/service-page?fields[0]=*&populate[subscribeNow][fields][0]=*&populate[footer][fields][0]=*&populate[footer][populate][links][fields][0]=*&populate[footer][populate][contactUsEmail][fields][0]=*&populate[footer][populate][contactUsLocation][fields][0]=*&populate[footer][populate][contactUsPhoneNumber][fields][0]=* +Accept: application/json diff --git a/yoga-app/package-lock.json b/yoga-app/package-lock.json index 74ee318..f1496f2 100644 --- a/yoga-app/package-lock.json +++ b/yoga-app/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@fortawesome/fontawesome-free": "^6.7.2", + "@strapi/blocks-react-renderer": "^1.0.2", "@strapi/database": "^5.10.3", "@types/aos": "^3.0.7", "@types/bcrypt": "^5.0.2", @@ -1393,6 +1394,16 @@ "node": ">=8" } }, + "node_modules/@strapi/blocks-react-renderer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@strapi/blocks-react-renderer/-/blocks-react-renderer-1.0.2.tgz", + "integrity": "sha512-pRV/WMreo5wyrLg7J0pw1DM9lg8U8m+QA7Bd8CPN3beUBTdDhYrFTTNZh3XveEdnURZNJu1X0aWXAg4SzVg7QA==", + "hasInstallScript": true, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/@strapi/database": { "version": "5.10.3", "resolved": "https://registry.npmjs.org/@strapi/database/-/database-5.10.3.tgz", diff --git a/yoga-app/package.json b/yoga-app/package.json index 5752382..512e19e 100644 --- a/yoga-app/package.json +++ b/yoga-app/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@fortawesome/fontawesome-free": "^6.7.2", + "@strapi/blocks-react-renderer": "^1.0.2", "@strapi/database": "^5.10.3", "@types/aos": "^3.0.7", "@types/bcrypt": "^5.0.2", diff --git a/yoga-app/src/api/strapi/query/service.json b/yoga-app/src/api/strapi/query/service.json new file mode 100644 index 0000000..ab1330e --- /dev/null +++ b/yoga-app/src/api/strapi/query/service.json @@ -0,0 +1,25 @@ +{ + "fields": ["*"], + "populate": { + "subscribe": { + "fields": ["*"] + }, + "footer": { + "fields": ["*"], + "populate": { + "links": { + "fields": ["*"] + }, + "contactUsEmail": { + "fields": ["*"] + }, + "contactUsLocation": { + "fields": ["*"] + }, + "contactUsPhoneNumber": { + "fields": ["*"] + } + } + } + } +} diff --git a/yoga-app/src/api/strapi/strapi-api.ts b/yoga-app/src/api/strapi/strapi-api.ts index 4208309..49bd386 100644 --- a/yoga-app/src/api/strapi/strapi-api.ts +++ b/yoga-app/src/api/strapi/strapi-api.ts @@ -4,6 +4,7 @@ import qs from "qs"; import aboutQuery from "@/api/strapi/query/about.json"; import homeQuery from "@/api/strapi/query/home.json"; import servicesQuery from "@/api/strapi/query/services.json"; +import serviceQuery from "@/api/strapi/query/service.json"; import pricesQuery from "@/api/strapi/query/prices.json"; import faqQuery from "@/api/strapi/query/faq.json"; import contactQuery from "@/api/strapi/query/contact.json"; @@ -14,6 +15,7 @@ import {PricesPage_Plain} from "@/types/generated-strapi-interfaces/api/prices-p import {FaqPage_Plain} from "@/types/generated-strapi-interfaces/api/faq-page"; import {ContactPage_Plain} from "@/types/generated-strapi-interfaces/api/contact-page"; import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service"; +import {ServicePage_Plain} from "@/types/generated-strapi-interfaces/api/service-page"; class StrapiApi{ @@ -43,7 +45,11 @@ class StrapiApi{ return this.getJson("/api/services-page?",servicesQuery); } - public getServicePage(name: string): Promise{ + public getServicePage(): Promise{ + return this.getJson("/api/service-page?",serviceQuery); + } + + public getService(name: string): Promise{ return this.getJson("/api/yoga-single-services?", { filters: { name: { diff --git a/yoga-app/src/app/services/[slug]/page.tsx b/yoga-app/src/app/services/[slug]/page.tsx index c28afa2..c867876 100644 --- a/yoga-app/src/app/services/[slug]/page.tsx +++ b/yoga-app/src/app/services/[slug]/page.tsx @@ -1,9 +1,12 @@ import React from "react"; import strapiApi from "@/api/strapi/strapi-api"; +import {BlocksContent, BlocksRenderer} from "@strapi/blocks-react-renderer"; export default async function ServiceArticlePage({params}: { - params: { slug: string} + params: Promise<{ slug: string}> } ) { - const servicesByName = await strapiApi.getServicePage(params.slug); + const {slug} = await params + const {footer= undefined, subscribeNow = undefined} = await strapiApi.getServicePage(); + const servicesByName = await strapiApi.getService(slug); // return ( // <> // {header && description && } @@ -17,10 +20,19 @@ export default async function ServiceArticlePage({params}: { // // // ); - console.info("slug", params.slug); + console.info("slug", slug); console.info("servicesByName", servicesByName); + const selectedService = servicesByName[0]; + const article = selectedService.article; + console.info("article", article); + + selectedService.article return ( -
hello world {params.slug}
+ <> + + { subscribeNow && } + { footer && } + ); } diff --git a/yoga-app/src/types/generated-strapi-interfaces/api/article.ts b/yoga-app/src/types/generated-strapi-interfaces/api/article.ts index 4d334fe..0ed5302 100644 --- a/yoga-app/src/types/generated-strapi-interfaces/api/article.ts +++ b/yoga-app/src/types/generated-strapi-interfaces/api/article.ts @@ -17,7 +17,7 @@ export interface Article { cover?: { data: Media }; author?: { data: Author }; category?: { data: Category }; - blocks?: object; + blocks?: any; }; } export interface Article_Plain { @@ -28,7 +28,7 @@ export interface Article_Plain { cover?: Media_Plain; author?: Author_Plain; category?: Category_Plain; - blocks?: object; + blocks?: any; } export interface Article_NoRelations { @@ -39,7 +39,7 @@ export interface Article_NoRelations { cover?: number; author?: number; category?: number; - blocks?: object; + blocks?: any; } export interface Article_AdminPanelLifeCycle { @@ -50,5 +50,5 @@ export interface Article_AdminPanelLifeCycle { cover?: AdminPanelRelationPropertyModification; author?: AdminPanelRelationPropertyModification; category?: AdminPanelRelationPropertyModification; - blocks?: object; + blocks?: any; } diff --git a/yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts b/yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts index d09adba..7cf126e 100644 --- a/yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts +++ b/yoga-app/src/types/generated-strapi-interfaces/api/yoga-single-service.ts @@ -13,7 +13,7 @@ export interface YogaSingleService { image?: { data: Media }; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: { data: YogaSingleService[] }; }; @@ -26,7 +26,7 @@ export interface YogaSingleService_Plain { image?: Media_Plain; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService_Plain[]; } @@ -39,7 +39,7 @@ export interface YogaSingleService_NoRelations { image?: number; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService[]; } @@ -52,7 +52,7 @@ export interface YogaSingleService_AdminPanelLifeCycle { image?: AdminPanelRelationPropertyModification; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService[]; } diff --git a/yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts b/yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts index d09adba..7cf126e 100644 --- a/yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts +++ b/yoga-cms/generated-strapi-interfaces/api/yoga-single-service.ts @@ -13,7 +13,7 @@ export interface YogaSingleService { image?: { data: Media }; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: { data: YogaSingleService[] }; }; @@ -26,7 +26,7 @@ export interface YogaSingleService_Plain { image?: Media_Plain; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService_Plain[]; } @@ -39,7 +39,7 @@ export interface YogaSingleService_NoRelations { image?: number; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService[]; } @@ -52,7 +52,7 @@ export interface YogaSingleService_AdminPanelLifeCycle { image?: AdminPanelRelationPropertyModification; imageAlt?: string; name?: string; - article?: string; + article?: any; locale: string; localizations?: YogaSingleService[]; } diff --git a/yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json b/yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json index b6bbdfa..c5b54a8 100644 --- a/yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json +++ b/yoga-cms/src/api/yoga-single-service/content-types/yoga-single-service/schema.json @@ -73,12 +73,7 @@ "type": "string" }, "article": { - "pluginOptions": { - "i18n": { - "localized": true - } - }, - "type": "richtext" + "type": "blocks" } } } diff --git a/yoga-cms/types/generated/contentTypes.d.ts b/yoga-cms/types/generated/contentTypes.d.ts index 5481a63..732d7c5 100644 --- a/yoga-cms/types/generated/contentTypes.d.ts +++ b/yoga-cms/types/generated/contentTypes.d.ts @@ -849,6 +849,44 @@ export interface ApiPricesPagePricesPage extends Struct.SingleTypeSchema { }; } +export interface ApiServicePageServicePage extends Struct.SingleTypeSchema { + collectionName: 'service_pages'; + info: { + description: ''; + displayName: 'ServicePage'; + pluralName: 'service-pages'; + singularName: 'service-page'; + }; + options: { + draftAndPublish: true; + }; + attributes: { + createdAt: Schema.Attribute.DateTime; + createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> & + Schema.Attribute.Private; + description: Schema.Attribute.Text; + footer: Schema.Attribute.Relation< + 'oneToOne', + 'api::yoga-footer.yoga-footer' + >; + header: Schema.Attribute.String; + locale: Schema.Attribute.String & Schema.Attribute.Private; + localizations: Schema.Attribute.Relation< + 'oneToMany', + 'api::service-page.service-page' + > & + Schema.Attribute.Private; + publishedAt: Schema.Attribute.DateTime; + subscribeNow: Schema.Attribute.Relation< + 'oneToOne', + 'api::yoga-subscribe-now-component.yoga-subscribe-now-component' + >; + updatedAt: Schema.Attribute.DateTime; + updatedBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> & + Schema.Attribute.Private; + }; +} + export interface ApiServicesPageServicesPage extends Struct.SingleTypeSchema { collectionName: 'services_pages'; info: { @@ -1694,12 +1732,7 @@ export interface ApiYogaSingleServiceYogaSingleService }; }; attributes: { - article: Schema.Attribute.RichText & - Schema.Attribute.SetPluginOptions<{ - i18n: { - localized: true; - }; - }>; + article: Schema.Attribute.Blocks; buttonLink: Schema.Attribute.String & Schema.Attribute.SetPluginOptions<{ i18n: { @@ -2511,6 +2544,7 @@ declare module '@strapi/strapi' { 'api::page.page': ApiPagePage; 'api::person.person': ApiPersonPerson; 'api::prices-page.prices-page': ApiPricesPagePricesPage; + 'api::service-page.service-page': ApiServicePageServicePage; 'api::services-page.services-page': ApiServicesPageServicesPage; 'api::yoga-about-us-component.yoga-about-us-component': ApiYogaAboutUsComponentYogaAboutUsComponent; 'api::yoga-about-us-with-boxes-component.yoga-about-us-with-boxes-component': ApiYogaAboutUsWithBoxesComponentYogaAboutUsWithBoxesComponent; -- 2.45.2 From 35f172702a6be476adedcb17659b04c22d531195 Mon Sep 17 00:00:00 2001 From: Schneider Roland Date: Thu, 22 May 2025 20:22:57 +0200 Subject: [PATCH 2/4] add service detail page --- .../api/service-page.ts | 40 +++++++++++++++++++ .../api/service-page.ts | 40 +++++++++++++++++++ .../content-types/service-page/schema.json | 31 ++++++++++++++ .../service-page/controllers/service-page.ts | 7 ++++ .../api/service-page/routes/service-page.ts | 7 ++++ .../api/service-page/services/service-page.ts | 7 ++++ 6 files changed, 132 insertions(+) create mode 100644 yoga-app/src/types/generated-strapi-interfaces/api/service-page.ts create mode 100644 yoga-cms/generated-strapi-interfaces/api/service-page.ts create mode 100644 yoga-cms/src/api/service-page/content-types/service-page/schema.json create mode 100644 yoga-cms/src/api/service-page/controllers/service-page.ts create mode 100644 yoga-cms/src/api/service-page/routes/service-page.ts create mode 100644 yoga-cms/src/api/service-page/services/service-page.ts diff --git a/yoga-app/src/types/generated-strapi-interfaces/api/service-page.ts b/yoga-app/src/types/generated-strapi-interfaces/api/service-page.ts new file mode 100644 index 0000000..aad1a4f --- /dev/null +++ b/yoga-app/src/types/generated-strapi-interfaces/api/service-page.ts @@ -0,0 +1,40 @@ +// Interface automatically generated by schemas-to-ts + +import { YogaSubscribeNowComponent } from './yoga-subscribe-now-component'; +import { YogaFooter } from './yoga-footer'; +import { YogaSubscribeNowComponent_Plain } from './yoga-subscribe-now-component'; +import { YogaFooter_Plain } from './yoga-footer'; +import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification'; + +export interface ServicePage { + id: number; + attributes: { + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: { data: YogaSubscribeNowComponent }; + footer?: { data: YogaFooter }; + }; +} +export interface ServicePage_Plain { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: YogaSubscribeNowComponent_Plain; + footer?: YogaFooter_Plain; +} + +export interface ServicePage_NoRelations { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: number; + footer?: number; +} + +export interface ServicePage_AdminPanelLifeCycle { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: AdminPanelRelationPropertyModification; + footer?: AdminPanelRelationPropertyModification; +} diff --git a/yoga-cms/generated-strapi-interfaces/api/service-page.ts b/yoga-cms/generated-strapi-interfaces/api/service-page.ts new file mode 100644 index 0000000..aad1a4f --- /dev/null +++ b/yoga-cms/generated-strapi-interfaces/api/service-page.ts @@ -0,0 +1,40 @@ +// Interface automatically generated by schemas-to-ts + +import { YogaSubscribeNowComponent } from './yoga-subscribe-now-component'; +import { YogaFooter } from './yoga-footer'; +import { YogaSubscribeNowComponent_Plain } from './yoga-subscribe-now-component'; +import { YogaFooter_Plain } from './yoga-footer'; +import { AdminPanelRelationPropertyModification } from '../common/AdminPanelRelationPropertyModification'; + +export interface ServicePage { + id: number; + attributes: { + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: { data: YogaSubscribeNowComponent }; + footer?: { data: YogaFooter }; + }; +} +export interface ServicePage_Plain { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: YogaSubscribeNowComponent_Plain; + footer?: YogaFooter_Plain; +} + +export interface ServicePage_NoRelations { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: number; + footer?: number; +} + +export interface ServicePage_AdminPanelLifeCycle { + id: number; + createdAt: Date; updatedAt: Date; publishedAt?: Date; header?: string; + description?: string; + subscribeNow?: AdminPanelRelationPropertyModification; + footer?: AdminPanelRelationPropertyModification; +} diff --git a/yoga-cms/src/api/service-page/content-types/service-page/schema.json b/yoga-cms/src/api/service-page/content-types/service-page/schema.json new file mode 100644 index 0000000..abbc9c6 --- /dev/null +++ b/yoga-cms/src/api/service-page/content-types/service-page/schema.json @@ -0,0 +1,31 @@ +{ + "kind": "singleType", + "collectionName": "service_pages", + "info": { + "singularName": "service-page", + "pluralName": "service-pages", + "displayName": "ServicePage", + "description": "" + }, + "options": { + "draftAndPublish": true + }, + "attributes": { + "header": { + "type": "string" + }, + "description": { + "type": "text" + }, + "subscribeNow": { + "type": "relation", + "relation": "oneToOne", + "target": "api::yoga-subscribe-now-component.yoga-subscribe-now-component" + }, + "footer": { + "type": "relation", + "relation": "oneToOne", + "target": "api::yoga-footer.yoga-footer" + } + } +} diff --git a/yoga-cms/src/api/service-page/controllers/service-page.ts b/yoga-cms/src/api/service-page/controllers/service-page.ts new file mode 100644 index 0000000..fb5ecd6 --- /dev/null +++ b/yoga-cms/src/api/service-page/controllers/service-page.ts @@ -0,0 +1,7 @@ +/** + * service-page controller + */ + +import { factories } from '@strapi/strapi' + +export default factories.createCoreController('api::service-page.service-page'); diff --git a/yoga-cms/src/api/service-page/routes/service-page.ts b/yoga-cms/src/api/service-page/routes/service-page.ts new file mode 100644 index 0000000..1a53841 --- /dev/null +++ b/yoga-cms/src/api/service-page/routes/service-page.ts @@ -0,0 +1,7 @@ +/** + * service-page router + */ + +import { factories } from '@strapi/strapi'; + +export default factories.createCoreRouter('api::service-page.service-page'); diff --git a/yoga-cms/src/api/service-page/services/service-page.ts b/yoga-cms/src/api/service-page/services/service-page.ts new file mode 100644 index 0000000..75e5a74 --- /dev/null +++ b/yoga-cms/src/api/service-page/services/service-page.ts @@ -0,0 +1,7 @@ +/** + * service-page service + */ + +import { factories } from '@strapi/strapi'; + +export default factories.createCoreService('api::service-page.service-page'); -- 2.45.2 From 67839dbfb935649a816d97bc7d538db841b776f7 Mon Sep 17 00:00:00 2001 From: Schneider Roland Date: Fri, 23 May 2025 07:40:42 +0200 Subject: [PATCH 3/4] add service detail page --- yoga-app/src/api/strapi/query/service.json | 2 +- yoga-app/src/api/strapi/strapi-client.ts | 1 + .../src/app/services/[slug]/page.module.css | 3 + yoga-app/src/app/services/[slug]/page.tsx | 58 ++++++++++--------- .../src/components/next.blocks.renderer.tsx | 31 ++++++++++ 5 files changed, 68 insertions(+), 27 deletions(-) create mode 100644 yoga-app/src/app/services/[slug]/page.module.css create mode 100644 yoga-app/src/components/next.blocks.renderer.tsx diff --git a/yoga-app/src/api/strapi/query/service.json b/yoga-app/src/api/strapi/query/service.json index ab1330e..ea569ba 100644 --- a/yoga-app/src/api/strapi/query/service.json +++ b/yoga-app/src/api/strapi/query/service.json @@ -1,7 +1,7 @@ { "fields": ["*"], "populate": { - "subscribe": { + "subscribeNow": { "fields": ["*"] }, "footer": { diff --git a/yoga-app/src/api/strapi/strapi-client.ts b/yoga-app/src/api/strapi/strapi-client.ts index 9cf838a..48fab18 100644 --- a/yoga-app/src/api/strapi/strapi-client.ts +++ b/yoga-app/src/api/strapi/strapi-client.ts @@ -14,6 +14,7 @@ class StrapiClient{ return '/image/'+ imagePath; } public async httpGet(path: string){ + console.info("httpGet", path); return await httpClient.httpGet(this.strapiUrl + path); } public async httpGetJson(url: string): Promise>{ diff --git a/yoga-app/src/app/services/[slug]/page.module.css b/yoga-app/src/app/services/[slug]/page.module.css new file mode 100644 index 0000000..3bc39f0 --- /dev/null +++ b/yoga-app/src/app/services/[slug]/page.module.css @@ -0,0 +1,3 @@ +.article h1{ + color: black; +} diff --git a/yoga-app/src/app/services/[slug]/page.tsx b/yoga-app/src/app/services/[slug]/page.tsx index c867876..8687169 100644 --- a/yoga-app/src/app/services/[slug]/page.tsx +++ b/yoga-app/src/app/services/[slug]/page.tsx @@ -1,39 +1,45 @@ import React from "react"; import strapiApi from "@/api/strapi/strapi-api"; import {BlocksContent, BlocksRenderer} 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"; + export default async function ServiceArticlePage({params}: { - params: Promise<{ slug: string}> -} ) { + params: Promise<{ slug: string }> +}) { const {slug} = await params - const {footer= undefined, subscribeNow = undefined} = await strapiApi.getServicePage(); + const {header, description, footer, subscribeNow} = await strapiApi.getServicePage(); const servicesByName = await strapiApi.getService(slug); - // return ( - // <> - // {header && description && } - // { ourServices && } - // { contactUs && } - // { ourSpecialities && } - // { feedbacks && } - // { blogs && } - // { subscribe && } - // { footer && } - // - // - // ); - console.info("slug", slug); - console.info("servicesByName", servicesByName); const selectedService = servicesByName[0]; const article = selectedService.article; - console.info("article", article); + console.info(article); selectedService.article - return ( - <> - - { subscribeNow && } - { footer && } - - ); + return ( + <> + {selectedService && selectedService.header && selectedService.description && + } +
+
+
+
+ +
+
+
+ +
+ {subscribeNow && } + {footer && } + + + ); } export const dynamic = 'force-dynamic' diff --git a/yoga-app/src/components/next.blocks.renderer.tsx b/yoga-app/src/components/next.blocks.renderer.tsx new file mode 100644 index 0000000..e997689 --- /dev/null +++ b/yoga-app/src/components/next.blocks.renderer.tsx @@ -0,0 +1,31 @@ +'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"; + +export interface Props{ + content: BlocksContent; +} +const NextBlocksRenderer = ({ content }: Props) => { + return ( + { + console.log(image); + const url = new URL(image.url); + return ( + + ); + } + }} + />); +} + +export default NextBlocksRenderer; -- 2.45.2 From f33e97666e1274a2ec4327c54c2f86a34e7aa617 Mon Sep 17 00:00:00 2001 From: Roland Schneider Date: Fri, 23 May 2025 14:38:14 +0200 Subject: [PATCH 4/4] [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 && } -
+
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 ( ); -- 2.45.2