From f590f3d7ee08a5dfe171535c41999fc6f5ed36e2 Mon Sep 17 00:00:00 2001 From: Antoine Caron Date: Fri, 6 Sep 2024 16:52:49 +0200 Subject: [PATCH] feat(page): add page about budget (#405) Co-authored-by: Mathieu Mure --- app/budget-et-financement/content.mdx | 20 ++++++++ app/budget-et-financement/opengraph-image.tsx | 15 ++++++ app/budget-et-financement/page.tsx | 23 +++++++++ app/devenir-sponsor/content.mdx | 2 + data/budget.tsx | 43 ++++++++++++++++ modules/budget/budgetTable.module.css | 14 ++++++ modules/budget/budgetTable.tsx | 50 +++++++++++++++++++ 7 files changed, 167 insertions(+) create mode 100644 app/budget-et-financement/content.mdx create mode 100644 app/budget-et-financement/opengraph-image.tsx create mode 100644 app/budget-et-financement/page.tsx create mode 100644 data/budget.tsx create mode 100644 modules/budget/budgetTable.module.css create mode 100644 modules/budget/budgetTable.tsx diff --git a/app/budget-et-financement/content.mdx b/app/budget-et-financement/content.mdx new file mode 100644 index 00000000..b3e5e4ca --- /dev/null +++ b/app/budget-et-financement/content.mdx @@ -0,0 +1,20 @@ +import { BudgetTable } from '../../modules/budget/budgetTable'; + +# Budget et financement + +LyonJS est une association dédiée à la promotion et au développement de la communauté JavaScript à Lyon. +Nos événements, ateliers et rencontres sont organisés grâce à l'implication et au soutien de nos membres actifs. +Pour assurer le bon fonctionnement de l'association et garantir la qualité de nos activités, nous devons couvrir certaines dépenses. + +Actuellement, LyonJS est financée par ses membres actifs. +Voici un aperçu des principales dépenses annuelles de l'association ainsi que leur coût. + +## Tableau des dépenses + + + +## Financement futur par des Sponsors + +Afin de soutenir notre croissance et d'améliorer la qualité des événements que nous organisons, nous souhaitons à l'avenir financer l'association grâce à des dons de sponsors. +Ce changement de modèle de financement nous permettra de réduire la charge financière sur nos membres actifs et d'offrir des activités encore plus diversifiées et accessibles à toute la communauté. +Avec le soutien de sponsors, LyonJS pourra continuer à grandir et à créer des opportunités de partage et d'apprentissage. diff --git a/app/budget-et-financement/opengraph-image.tsx b/app/budget-et-financement/opengraph-image.tsx new file mode 100644 index 00000000..132939be --- /dev/null +++ b/app/budget-et-financement/opengraph-image.tsx @@ -0,0 +1,15 @@ +import { ImageResponse } from 'next/og'; +import { SimpleText } from '../../modules/og/SimpleText'; + +export const runtime = 'edge'; + +export const alt = 'Budget'; +export const size = { + width: 1200, + height: 630, +}; +export const contentType = 'image/png'; + +export default function Image() { + return new ImageResponse(, size); +} diff --git a/app/budget-et-financement/page.tsx b/app/budget-et-financement/page.tsx new file mode 100644 index 00000000..f85f371c --- /dev/null +++ b/app/budget-et-financement/page.tsx @@ -0,0 +1,23 @@ +import { Metadata } from 'next'; +// @ts-ignore +import Content from './content.mdx'; + +export default function BudgetEtFinancement() { + return ; +} +export const revalidate = 3600; +const title = 'LyonJS | Budget et financement de l’association'; +const description = "Quelles sont les dépenses de l'association LyonJS, comment elle se finance"; + +export const metadata: Metadata = { + title, + description, + twitter: { + title, + description, + }, + openGraph: { + title, + description, + }, +}; diff --git a/app/devenir-sponsor/content.mdx b/app/devenir-sponsor/content.mdx index 5e809556..678eaaef 100644 --- a/app/devenir-sponsor/content.mdx +++ b/app/devenir-sponsor/content.mdx @@ -68,3 +68,5 @@ Si vous souhaitez héberger l'un de nos événements, vérifiez que vous pouvez - avoir au moins une personne de vos équipes présente le soir de l'événement. - être assuré pour ce type d'événements. - être capable de baliser l'accès à vos locaux pour aider notre communauté à bien trouver le lieu. + +[**En savoir plus sur les dépenses et le financement de l'association LyonJS**](/budget-et-financement) diff --git a/data/budget.tsx b/data/budget.tsx new file mode 100644 index 00000000..8a44db8d --- /dev/null +++ b/data/budget.tsx @@ -0,0 +1,43 @@ +export type BudgetRowType = { + expense: string; + description: string; + cost: number; +}; + +export const budgetRows: BudgetRowType[] = [ + { + expense: 'Abonnement plateforme Meetup', + description: 'Plateforme pour publier nos événements, 90$ par semestre', + cost: 160, + }, + { + expense: "Compte en banque d'association", + description: 'Compte business associatif sur banque en ligne', + cost: 120, + }, + { + expense: 'Nom de domaine et hébergement', + description: "Actuellement acheté auprès d'OVH", + cost: 15.59, + }, + { + expense: 'Hébergement du site', + description: 'Offert par Vercel et Clever Cloud', + cost: 0, + }, + { + expense: 'T-shirts / Hoodies', + description: "100 par personne, on prévoit jusqu'à 2 arrivée dans l'asso par ans", + cost: 200, + }, + { + expense: 'Assurances', + description: 'Couverture juridique et responsabilité morale', + cost: 200, + }, + { + expense: 'Location de salle', + description: 'Les salles et les lieux de nos événements sont offerts par nos sponsors', + cost: 0, + }, +]; diff --git a/modules/budget/budgetTable.module.css b/modules/budget/budgetTable.module.css new file mode 100644 index 00000000..964c81d3 --- /dev/null +++ b/modules/budget/budgetTable.module.css @@ -0,0 +1,14 @@ +.budgetTable thead { + color: var(--yellow-1); + text-align: left; +} +.budgetTable tbody tr { + padding: 0.75rem; +} + +.budgetTable, +.budgetTable th, +.budgetTable td { + border: 1px solid white; + padding: 1rem; +} diff --git a/modules/budget/budgetTable.tsx b/modules/budget/budgetTable.tsx new file mode 100644 index 00000000..f816131f --- /dev/null +++ b/modules/budget/budgetTable.tsx @@ -0,0 +1,50 @@ +import styles from './budgetTable.module.css'; +import { budgetRows } from '../../data/budget'; + +const costFormat = new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }); + +export const BudgetTable = () => { + return ( + + + + + + + + + + {budgetRows.map((row) => { + return ( + + + + + + ); + })} + + + + + + +
+ Dépense + + Description + + Coût +
+ {row.expense} + {row.description}{costFormat.format(row.cost)}
+ Total + + {costFormat.format( + budgetRows.reduce((total, currentValue) => { + return total + currentValue.cost; + }, 0), + )} +
+ ); +};