add(blockRenderer): add blockRenderer component to add link open to a new page

next/app/contact/page.js

@@ -1,23 +1,22 @@
-import getData from "@/api";
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
-import styles from "./style.module.scss";
-import Email from "@/components/email";
-export const dynamic = "force-dynamic";
+import getData from '@/api';
+import BlockRenderer from '@/components/blockRenderer';
+import Email from '@/components/email';
+import styles from './style.module.scss';
+export const dynamic = 'force-dynamic';
 
 export async function generateMetadata() {
   return {
     metadataBase: `${process.env.NEXT_PUBLIC_ORIGIN}`,
-    title: "Contactez nous !",
+    title: 'Contactez nous !',
   };
 }
 
 export default async function Contact() {
-  const site = await getData("site", {});
-
+  const site = await getData('site', {});
   const content = site.data?.attributes.contact_text;
   return (
     <main className={styles.main}>
-      <article>{content ? <BlocksRenderer content={content} /> : null}</article>
+      <article>{content ? <BlockRenderer content={content} /> : null}</article>
       {site.data?.attributes.contact_mail ? <Email></Email> : null}
     </main>
   );

next/app/legal/page.js

@@ -1,22 +1,22 @@
-import getData from "@/api";
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
-import styles from "./style.module.scss";
-export const dynamic = "force-dynamic";
+import getData from '@/api';
+import BlockRenderer from '@/components/blockRenderer';
+import styles from './style.module.scss';
+export const dynamic = 'force-dynamic';
 
 export async function generateMetadata() {
   return {
     metadataBase: `${process.env.NEXT_PUBLIC_ORIGIN}`,
-    title: "Mentions légales",
+    title: 'Mentions légales',
   };
 }
 
 export default async function Legal() {
-  const site = await getData("site", {});
+  const site = await getData('site', {});
   const content = site.data?.attributes.legal;
 
   return (
     <main className={styles.main}>
-      <article>{content ? <BlocksRenderer content={content} /> : null}</article>
+      <article>{content ? <BlockRenderer content={content} /> : null}</article>
     </main>
   );
 }

next/app/page.js

@@ -1,31 +1,31 @@
-import getData from "@/api";
-import styles from "./page.module.scss";
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
-import Button from "@/components/button";
-import ImageBlock from "@/components/imageBlock";
-export const dynamic = "force-dynamic";
+import getData from '@/api';
+import BlockRenderer from '@/components/blockRenderer';
+import Button from '@/components/button';
+import ImageBlock from '@/components/imageBlock';
+import styles from './page.module.scss';
+export const dynamic = 'force-dynamic';
 
 export async function generateMetadata() {
-  const site = await getData("site", {
+  const site = await getData('site', {
     populate: {
       edition: {
         populate: {
           flyer: {
             fields: [
-              "name",
-              "url",
-              "alternativeText",
-              "caption",
-              "width",
-              "height",
+              'name',
+              'url',
+              'alternativeText',
+              'caption',
+              'width',
+              'height',
             ],
           },
           programs: true,
         },
-        fields: ["id", "introduction", "title", "subtitle", "description"],
+        fields: ['id', 'introduction', 'title', 'subtitle', 'description'],
       },
     },
-    fields: ["author"],
+    fields: ['author'],
   });
   const current_edition = site.data?.attributes.edition.data?.attributes;
   const flyer =
@@ -37,7 +37,7 @@ export async function generateMetadata() {
         title: current_edition.title,
         description: current_edition.description,
         alternates: {
-          canonical: "/",
+          canonical: '/',
         },
         openGraph: {
           title: current_edition.title,
@@ -49,25 +49,25 @@ export async function generateMetadata() {
             height: flyer.height,
           },
           authors: [site.data.attributes.author],
-          type: "website",
-          locale: "fr_FR",
-          siteName: "Le Fefan - Festival de Fanfares",
+          type: 'website',
+          locale: 'fr_FR',
+          siteName: 'Le Fefan - Festival de Fanfares',
         },
       }
     : {};
 }
 
 export default async function Home() {
-  const site = await getData("site", {
+  const site = await getData('site', {
     populate: {
       edition: {
         populate: {
           flyer: {
-            fields: ["name", "url", "alternativeText", "caption"],
+            fields: ['name', 'url', 'alternativeText', 'caption'],
           },
           programs: true,
         },
-        fields: ["id", "introduction", "title", "subtitle"],
+        fields: ['id', 'introduction', 'title', 'subtitle'],
       },
     },
   });
@@ -91,15 +91,15 @@ export default async function Home() {
           <article>
             <h2>{current_edition.title}</h2>
             <h3>{current_edition.subtitle}</h3>
-            {introduction ? <BlocksRenderer content={introduction} /> : null}
+            {introduction ? <BlockRenderer content={introduction} /> : null}
             <nav>
-              {programs.filter((e) => e.attributes.type === "city-wide")
+              {programs.filter((e) => e.attributes.type === 'city-wide')
                 .length > 0 ? (
                 <Button as="a" type="primary" href="/prog/city-wide">
                   Voir la programmation
                 </Button>
               ) : null}
-              {programs.filter((e) => e.attributes.type === "village").length >
+              {programs.filter((e) => e.attributes.type === 'village').length >
               0 ? (
                 <Button as="a" type="secondary" href="/prog/village">
                   Le Village

next/app/prog/village/page.js

@@ -1,38 +1,38 @@
-import Empty from "@/components/empty";
-import styles from "./style.module.scss";
-import getData from "@/api";
-import ImageBlock from "@/components/imageBlock";
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
-import TimeSlot from "@/components/timeSlot";
-export const dynamic = "force-dynamic";
+import getData from '@/api';
+import BlockRenderer from '@/components/blockRenderer';
+import Empty from '@/components/empty';
+import ImageBlock from '@/components/imageBlock';
+import TimeSlot from '@/components/timeSlot';
+import styles from './style.module.scss';
+export const dynamic = 'force-dynamic';
 
 export async function generateMetadata() {
-  const site = await getData("site", {
+  const site = await getData('site', {
     populate: {
       edition: {
         populate: {
           flyer: {
             fields: [
-              "name",
-              "url",
-              "alternativeText",
-              "caption",
-              "width",
-              "height",
+              'name',
+              'url',
+              'alternativeText',
+              'caption',
+              'width',
+              'height',
             ],
           },
           programs: true,
         },
-        fields: ["id", "introduction", "title", "subtitle"],
+        fields: ['id', 'introduction', 'title', 'subtitle'],
       },
     },
-    fields: ["author"],
+    fields: ['author'],
   });
   const current_edition = site.data?.attributes.edition.data?.attributes;
   const flyer =
     site.data?.attributes.edition.data?.attributes.flyer.data.attributes;
   const programs = current_edition?.programs.data;
-  const village = programs?.filter((e) => e.attributes.type === "village")[0];
+  const village = programs?.filter((e) => e.attributes.type === 'village')[0];
 
   return village
     ? {
@@ -40,7 +40,7 @@ export async function generateMetadata() {
         title: village.attributes.title,
         description: village.attributes.description,
         alternates: {
-          canonical: "/prog/village",
+          canonical: '/prog/village',
         },
         openGraph: {
           title: village.attributes.title,
@@ -52,29 +52,29 @@ export async function generateMetadata() {
             height: flyer.height,
           },
           authors: [site.data.attributes.author],
-          type: "website",
-          locale: "fr_FR",
-          siteName: "Le Fefan - Festival de Fanfares",
+          type: 'website',
+          locale: 'fr_FR',
+          siteName: 'Le Fefan - Festival de Fanfares',
         },
       }
     : {};
 }
 
 export default async function Village() {
-  const site = await getData("site", {
+  const site = await getData('site', {
     populate: {
       edition: {
         populate: {
           programs: {
             populate: {
               sticker: {
-                fields: ["alternativeText", "url"],
+                fields: ['alternativeText', 'url'],
               },
               bands: {
-                fields: ["*"],
+                fields: ['*'],
               },
               time_slots: {
-                fields: ["*"],
+                fields: ['*'],
               },
             },
           },
@@ -85,7 +85,7 @@ export default async function Village() {
   const edition = site.data?.attributes.edition ?? {};
   const program =
     edition.data?.attributes.programs.data.filter(
-      ({ attributes: r }) => r.type === "village"
+      ({ attributes: r }) => r.type === 'village',
     )[0] ?? {};
   const time_slots = program.attributes?.time_slots.data ?? [];
 
@@ -93,11 +93,11 @@ export default async function Village() {
     <main className={styles.main}>
       {program.attributes ? (
         <>
-          <h2>{program.attributes?.title ?? "Le Village"}</h2>
+          <h2>{program.attributes?.title ?? 'Le Village'}</h2>
           <section className={styles.villageSection}>
             <article>
               {program.attributes?.introduction ? (
-                <BlocksRenderer content={program.attributes.introduction} />
+                <BlockRenderer content={program.attributes.introduction} />
               ) : null}
             </article>
             {program.attributes?.sticker?.data ? (