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

17
.gitea/workflow/deploy.yaml
View File

@@ -1,17 +0,0 @@
name: Deploy Fefan
on:
push:
branches:
- main
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Build & deploy
run: |
git pull
docker compose up -d --build

13
next/api/index.js
View File

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

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

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

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

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

50
next/app/page.js
View File

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

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

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

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

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

37
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'; import styles from './style.module.scss';
export default async function TimeSlot(props) { export default async function TimeSlot(props) {
const date_begin = new Date(props.start) const date_begin = new Date(props.start);
const date_end = new Date(props.end) const date_end = new Date(props.end);
const date_format = new Intl.DateTimeFormat('fr', { const date_format = new Intl.DateTimeFormat('fr', {
weekday: 'long', weekday: 'long',
month: "long", month: 'long',
day: "numeric" day: 'numeric',
}).format(date_begin) }).format(date_begin);
return ( return (
<article className={styles.timeSlot}> <article className={styles.timeSlot}>
<h4> <h4>
{date_format} - {date_begin.getHours()}h {date_format} - {date_begin.getHours()}h
{date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ""} à&nbsp; {date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ''} à&nbsp;
{date_end.getHours()}h{date_end.getMinutes() !== 0 ? date_end.getMinutes() : ""} {date_end.getHours()}h
</h4> {date_end.getMinutes() !== 0 ? date_end.getMinutes() : ''}
<BlocksRenderer content={props.content}/> </h4>
</article> <BlockRenderer content={props.content} />
); </article>
);
} }