Mop/fefan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add(blockRenderer): add blockRenderer component to add link open to a new page
All checks were successful
Deploy Fefan / deploy (push) Successful in 4m40s
Details

Browse Source
This commit is contained in:
Julien Aldon
2026-04-21 15:44:01 +02:00
parent 7bef2fe840
commit fa3793a181
9 changed files with 132 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
next/api/index.js
View File

@@ -1,16 +1,17 @@
import qs from "qs";
import qs from 'qs';
async function getData(path, query) {
const queryString = qs.stringify(query);
const isServerSide = typeof window === "undefined";
const isServerSide = typeof window === 'undefined';
const res = await fetch(
`${
isServerSide
? process.env.NEXT_PRIVATE_CONTENT_URI ??
"http://fefan-backend:1337/api"
: process.env.NEXT_PUBLIC_CONTENT_URI ?? "https://content.fefan.fr/api"
? (process.env.NEXT_PRIVATE_CONTENT_URI ??
'http://fefan-backend:1337/api')
: (process.env.NEXT_PUBLIC_CONTENT_URI ??
'https://content.fefan.fr/api')
}/${path}?${queryString}`,
{ cache: "no-store" }
{ cache: 'no-store' },
);
return await res.json();

17
next/app/contact/page.js
View File

@@ -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>
);

14
next/app/legal/page.js
View File

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

50
next/app/page.js
View File

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

56
next/app/prog/village/page.js
View File

@@ -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 ? (

37
next/components/articleBlock/index.jsx
View File

@@ -1,20 +1,21 @@
import { BlocksRenderer } from "@strapi/blocks-react-renderer";
import Button from "../button";
import styles from "./style.module.scss";
import BlockRenderer from '@/components/blockRenderer';
import Button from '../button';
import styles from './style.module.scss';
export default function ArticleBlock({title, content, link, className, ...props}) {
return (
<article {...props} className={`${styles.articleBlock} ${className ?? ''}`}>
<h4>{title}</h4>
{content ? <BlocksRenderer content={content}/> : null}
<Button
type="secondary"
as="a"
href={link}
target="_blank"
>
Lire la suite
</Button>
</article>
);
export default function ArticleBlock({
title,
content,
link,
className,
...props
}) {
return (
<article {...props} className={`${styles.articleBlock} ${className ?? ''}`}>
<h4>{title}</h4>
{content ? <BlockRenderer content={content} /> : null}
<Button type="secondary" as="a" href={link} target="_blank">
Lire la suite
</Button>
</article>
);
}

18
next/components/blockRenderer/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
'use client';
import { BlocksRenderer } from '@strapi/blocks-react-renderer';
import Link from 'next/link';
export default function BlockRenderer({ content }) {
return (
<BlocksRenderer
content={content}
blocks={{
link: ({ children, url }) => (
<Link href={url} target="_blank">
{children}
</Link>
),
}}
/>
);
}

39
next/components/timeSlot/index.jsx
View File

@@ -1,23 +1,24 @@
import { BlocksRenderer } from '@strapi/blocks-react-renderer';
import BlockRenderer from '@/components/blockRenderer';
import styles from './style.module.scss';
export default async function TimeSlot(props) {
const date_begin = new Date(props.start)
const date_end = new Date(props.end)
const date_format = new Intl.DateTimeFormat('fr', {
weekday: 'long',
month: "long",
day: "numeric"
}).format(date_begin)
const date_begin = new Date(props.start);
const date_end = new Date(props.end);
const date_format = new Intl.DateTimeFormat('fr', {
weekday: 'long',
month: 'long',
day: 'numeric',
}).format(date_begin);
return (
<article className={styles.timeSlot}>
<h4>
{date_format} - {date_begin.getHours()}h
{date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ""} à&nbsp;
{date_end.getHours()}h{date_end.getMinutes() !== 0 ? date_end.getMinutes() : ""}
</h4>
<BlocksRenderer content={props.content}/>
</article>
);
}
return (
<article className={styles.timeSlot}>
<h4>
{date_format} - {date_begin.getHours()}h
{date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ''} à&nbsp;
{date_end.getHours()}h
{date_end.getMinutes() !== 0 ? date_end.getMinutes() : ''}
</h4>
<BlockRenderer content={props.content} />
</article>
);
}