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

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