From bead088df0fb90eaba84ade3ae19c1f7e91a7c68 Mon Sep 17 00:00:00 2001 From: Thomas Catinaud Taris <5670642+TCatinaud@users.noreply.github.com> Date: Wed, 29 May 2024 09:28:46 +0200 Subject: [PATCH] feat: add I18n (#28) * feat(i18n): init config * feat(i18n): prepare navigation and pages * feat: prepare pages transltations (with meta) * fix: build and lint * fix: remove unnecessary lint * feat(story): prepare i18n + refacto design * fix build * feat: Act title * feat(act): finish page * feat(story): en translation * feat(dashboard): translate top dashboard * feat(dashboard): translate page part 2 * fix: lint --------- Co-authored-by: Thomas Catinaud Taris Co-authored-by: gmguarino --- messages/en/components.json | 32 ++ messages/en/layout.json | 21 + messages/en/pages/about.json | 5 + messages/en/pages/act.json | 30 ++ messages/en/pages/dashboard.json | 139 +++++ messages/en/pages/story.json | 57 ++ messages/fr/components.json | 32 ++ messages/fr/layout.json | 21 + messages/fr/pages/about.json | 5 + messages/fr/pages/act.json | 30 ++ messages/fr/pages/dashboard.json | 121 +++++ messages/fr/pages/story.json | 57 ++ next.config.js | 6 +- package.json | 1 + .../page.tsx => [locale]/about/about.tsx} | 4 +- src/app/[locale]/about/page.tsx | 25 + src/app/[locale]/dashboard/dashboard.tsx | 463 ++++++++++++++++ src/app/[locale]/dashboard/page.tsx | 25 + src/app/{ => [locale]}/error.tsx | 0 src/app/[locale]/layout.tsx | 110 ++++ src/app/{ => [locale]}/not-found.tsx | 0 src/app/[locale]/page.tsx | 204 +++++++ src/app/[locale]/to-act/act.tsx | 74 +++ src/app/[locale]/to-act/page.tsx | 25 + src/app/api/hello/route.ts | 5 - src/app/dashboard/page.tsx | 501 ------------------ src/app/layout.tsx | 90 ---- src/app/page.tsx | 235 -------- src/app/to-act/page.tsx | 16 - src/components/Calculator.tsx | 15 +- src/components/Chart.tsx | 72 ++- src/components/DashboardSection.tsx | 17 +- src/components/Edito.tsx | 97 ++-- src/components/IconCard.tsx | 6 +- src/components/IntroBlock.tsx | 13 +- src/components/JoinBlock.tsx | 26 +- src/components/Summary.tsx | 4 +- src/components/TitleBlock.tsx | 2 +- src/components/buttons/PrimaryButton.tsx | 2 +- src/components/layout/Footer.tsx | 92 ++-- src/components/layout/Navbar.tsx | 84 ++- src/components/links/shareLink.tsx | 26 +- src/i18n.ts | 20 + src/middleware.ts | 22 + src/navigation.ts | 25 + src/styles/globals.css | 23 +- src/styles/page.css | 11 - tailwind.config.ts | 3 +- yarn.lock | 86 +++ 49 files changed, 1926 insertions(+), 1054 deletions(-) create mode 100644 messages/en/components.json create mode 100644 messages/en/layout.json create mode 100644 messages/en/pages/about.json create mode 100644 messages/en/pages/act.json create mode 100644 messages/en/pages/dashboard.json create mode 100644 messages/en/pages/story.json create mode 100644 messages/fr/components.json create mode 100644 messages/fr/layout.json create mode 100644 messages/fr/pages/about.json create mode 100644 messages/fr/pages/act.json create mode 100644 messages/fr/pages/dashboard.json create mode 100644 messages/fr/pages/story.json rename src/app/{about/page.tsx => [locale]/about/about.tsx} (78%) create mode 100644 src/app/[locale]/about/page.tsx create mode 100644 src/app/[locale]/dashboard/dashboard.tsx create mode 100644 src/app/[locale]/dashboard/page.tsx rename src/app/{ => [locale]}/error.tsx (100%) create mode 100644 src/app/[locale]/layout.tsx rename src/app/{ => [locale]}/not-found.tsx (100%) create mode 100644 src/app/[locale]/page.tsx create mode 100644 src/app/[locale]/to-act/act.tsx create mode 100644 src/app/[locale]/to-act/page.tsx delete mode 100644 src/app/api/hello/route.ts delete mode 100644 src/app/dashboard/page.tsx delete mode 100644 src/app/layout.tsx delete mode 100644 src/app/page.tsx delete mode 100644 src/app/to-act/page.tsx create mode 100644 src/i18n.ts create mode 100644 src/middleware.ts create mode 100644 src/navigation.ts delete mode 100644 src/styles/page.css diff --git a/messages/en/components.json b/messages/en/components.json new file mode 100644 index 000000000..6acb05e80 --- /dev/null +++ b/messages/en/components.json @@ -0,0 +1,32 @@ +{ + "components": { + "summary": { + "title": "page" + }, + "edito": { + "link": "See more" + }, + "shareLink": { + "blank": "new tab", + "twitter": "Twitter", + "linkedin": "Linkedin", + "website": "Website", + "email": "Email" + }, + "chart": { + "loading": "Loading data.." + }, + "calculator": { + "intro": "Here are the impacts of the salmon industry around the world since you opened this web page.", + "seconds": "seconds", + "second": "second" + }, + "join": { + "title": "Be the change.", + "intro": "There are alternatives to salmon in our way of eating, selling, and producing.", + "content": "France, located in the top 3 of the largest consumers of salmon in the world, bears a particular responsibility in guiding practices.", + "act": "To reverse the trend and stop the disaster, urgent action is needed. We have levers for action!", + "link": "We act" + } + } +} diff --git a/messages/en/layout.json b/messages/en/layout.json new file mode 100644 index 000000000..f9e9ff768 --- /dev/null +++ b/messages/en/layout.json @@ -0,0 +1,21 @@ +{ + "layout": { + "top": "Back to top", + "nav": { + "title": "main", + "story": "Story", + "dashboard": "Dashboard", + "act": "To act", + "about": "About" + }, + "footer": { + "allRight": "All rights reserved", + "and": "and" + } + }, + "siteConfig": { + "title": "Pinkbombs", + "description": "Analyzing the impact of Salmon on the Environment, Ecosystem, Health and Communities.", + "url": "https://pinkbombs-app.vercel.app" + } +} diff --git a/messages/en/pages/about.json b/messages/en/pages/about.json new file mode 100644 index 000000000..6ffb86bd6 --- /dev/null +++ b/messages/en/pages/about.json @@ -0,0 +1,5 @@ +{ + "about": { + "title": "" + } +} diff --git a/messages/en/pages/act.json b/messages/en/pages/act.json new file mode 100644 index 000000000..2598dceef --- /dev/null +++ b/messages/en/pages/act.json @@ -0,0 +1,30 @@ +{ + "act": { + "meta": { + "title": "To act" + }, + "title": "Good news: defusing Pinkbombs is just a click away", + "company": { + "title": "I call on responsible companies", + "content": "by sharing a pre-written information post that identifies them on Linkedin.", + "link": "Post on Linkedin", + "target": "#" + }, + "territory": { + "title": "I say no to the salmon factory project on my territory", + "content": "The onshore salmon factory project called “Pure Salmon”, an initiative of the Singaporean investment fund 8F Asset Management, is under discussion near Bordeaux. Thanks to petitions signed by citizens, it was notably rejected in Pas-de-Calais and Brittany. Let's go on !", + "link": "Sign the petition", + "target": "#" + }, + "seastemik": { + "title": "I support Seastemik", + "content": "Seastemik is an association created in 2023 with the objective of accelerating our transition to a healthy ocean.
To mobilize on the ground, it works to raise community awareness, accessibility of information and proposal of solutions.", + "link": "Contribute on HelloAsso", + "target": "#" + }, + "eat": { + "title": "I leave the salmon off my plate", + "content": "Ready to set out to leave salmon in the oceans and rivers? “Together, we are an immense force”.
What objective seems achievable to you? Leave it to us in our intention box to help the community grow!" + } + } +} diff --git a/messages/en/pages/dashboard.json b/messages/en/pages/dashboard.json new file mode 100644 index 000000000..264639d73 --- /dev/null +++ b/messages/en/pages/dashboard.json @@ -0,0 +1,139 @@ +{ + "dashboard": { + "meta": { + "title": "Dashboard" + }, + "title": "The numbers behind the story", + "sections": { + "intro": { + "title": "Introduction", + "blocks": { + "salmon-collapse": { + "title": "Wild Altantic salmon collapse", + "content": "

The Atlantic salmon was added to the IUCN Red List of Threatened Species in December 2023.

This is largely due to overfishing, habitat degradation, particularly caused by dams blocking migratory routes, as well as climate change altering their environments, impacting their growth and survival rates.

" + }, + "hyper-growth": { + "title": "Hyper-growth in salmon farming", + "content": "

Salmon production has experienced unprecedented growth.

Nearly nonexistent 30 years ago, it surged to three million tons of salmon in 2021, equivalent to the farming and slaughtering of one billion salmon.

" + }, + "top-10": { + "title": "Main countries producing farmed salmon", + "content": "

Salmon require cold waters to grow, and thus production is concentrated in a few countries located far to the North or far to the South. Today, four countries alone account for 90% of the world's salmon production.

", + "subblock": { + "title": "Salmon farming evolution by country" + } + }, + "intro-consumption": { + "title": "Salmon Consumption", + "content": "

The United States is the largest consumer of salmon, followed by Japan and Russia. European countries are also significant consumers of salmon, with France leading the pack with a high consumption rate of 4.4kg per person per year.

" + } + } + }, + "company": { + "title": "Entreprises", + "blocks": { + "top-comp": { + "title": "Main producers of open-net salmon", + "content": "

Small artisanal salmon farms have given way to industrial aquaculture.

In a few decades, the market has become dominated by a handful of multinational corporations.

Mowi, formerly known as Marine Harvest, is the leader in the sector. The company operates in 25 countries.

" + }, + "top-land": { + "title": "The new threat: on land plants", + "mainContent": "

In 2021, the theoretical combined production capacity of land-based salmon farms amounted to 2.5 million tons, nearly equaling the global production of salmon in marine farms (2.7 million tons).

", + "content": "

Land-based farms use RAS technology (Recirculating Aquaculture Systems) in fully enclosed tanks. Whilst, this approach to salmon farming gives control over the impact on biodiversity and the local environment (limited disease contamination, rejection of feces and salmon escapes), it also requires large amount of fresh water and is very energy-hungry, as it aims to recreate very precisely the natural conditions found in the sea.

As a result, the carbon footprint of salmon produced on land is higher than salmon produced in marine farms.

In order to make such farms profitable, the fish density can be 3 times higher than in marine farms. And there has been a small number of accidents where large number of fish died as a result of inadequate water conditions and a fire at a plant in Denmark.

" + }, + "future-land-based": { + "title": "The future of land-based aquaculture farms", + "mainContent": "

A land-based farm producing 10,000 tons of salmon per year - if built - would require as much electricity as a city of 45,000 inhabitants (to be confirmed). Currently, there are several projects in Europe, including mega-farms aiming to produce 100,000 tons or more per year.

", + "content": "

Despite technological and profitability challenges, the industry is investing heavily in land-based farms, with a large number of projects announced over the past 5 years. Many farms are being planned or are under construction in Europe, Asia, the Middle East, and the United States to supply their local markets.

", + "data": [ + { + "title": "+91.1", + "content": "Combined land-based farm (RAS) projects could represent an increase of over 91% in global salmon production." + }, + { + "title": "291 Billion", + "content": "More than 290 billion wild fish, known as forage fish, will be harvested annually to produce the necessary meal to feed these new salmon." + }, + { + "title": "1.4 Million", + "content": "These same meals contain soy. 975,000 hectares will be required for soy production, equivalent to approximately 1.4 million football fields." + }, + { + "title": "15.8 Million", + "content": "The electricity consumption required for filtering, cooling, and circulating water in RAS farms is equivalent to the annual consumption of 15.8 million Europeans." + } + ] + }, + "companies-consumption": { + "title": "", + "mainContent": "

Les États-Unis sont de loin les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont également d’importants consommateurs de ce poisson. La consommation de saumon par habitant pour ces grands pays est d'environ 2 kg/personne/an et peut atteindre des valeurs supérieures à 5 kg/personne/an.

", + "content": "

La consommation apparente de saumon (toutes espèces confondues) est calculée comme la production, y compris l'aquaculture et la capture, plus les importations moins les exportations. Toutes les données sont fournies par la FAO. Les facteurs de conversion entre le poids du produit et le poids vif sont approximés à l'aide de la documentation de la FAQ

Ces approximations peuvent conduire à des indicateurs erronés, surtout dans les pays peu peuplés et/ou à forte production. C’est pour cette raison que la consommation par habitant n’est pas incluse dans le graphique.

" + } + } + }, + "biodiversity": { + "title": "Biodiversity", + "blocks": { + "deforestation": { + "title": "Deforestation" + }, + "escapes-rates": { + "title": "Escapes" + } + } + }, + "health": { + "title": "Human health", + "blocks": { + "antibiotic-conso": { + "title": "Antibiotic consumption" + }, + "microplastics": { + "title": "Microplastic" + } + } + }, + "animals": { + "title": "Animal welfare", + "blocks": { + "stress-onshore": { + "title": "Stress in land-based facilities" + }, + "mortality-rates": { + "title": "Mortality rate" + } + } + }, + "climate": { + "title": "Climate", + "blocks": { + "carbon-bomb": { + "title": "Carbon impact" + } + } + }, + "social": { + "title": "Social", + "blocks": { + "social-carbon": { + "title": "Carbon impact" + } + } + }, + "alternative": { + "title": "Alternatives", + "blocks": { + "alternatives": { + "title": "Nutrition matrix" + } + } + } + }, + "calculator": { + "salmon": "slaughtered salmon", + "fish": "forage fish caught to feed salmon", + "companies": "tonnes of CO2 emitted by industry", + "money": "Euros of turnover for market leading companies" + } + } +} diff --git a/messages/en/pages/story.json b/messages/en/pages/story.json new file mode 100644 index 000000000..88837b5bd --- /dev/null +++ b/messages/en/pages/story.json @@ -0,0 +1,57 @@ +{ + "story": { + "title": "The salmon you eat, sell, produce...", + "bomb": "kills, starves, contaminates.", + "explode": { + "intro": "The salmon industry is a bomb with multiple impacts", + "social": { + "title": "Social", + "content": "Diverts food from West African communities." + }, + "climat": { + "title": "Climate", + "content": "Generates a carbon footprint equivalent to that of 10,000 inhabitants." + }, + "health": { + "title": "Health", + "content": "Raises concerns about human health due to diseases requiring medication and microplastics." + }, + "biodiversity": { + "title": "Biodiversity", + "content": "Degrades marine biodiversity, including escapees, pollution, parasites, and overexploitation of wild stocks." + }, + "animals": { + "title": "Animal condition", + "content": "Stress, diseases, excess mortality as consequences of intensive breeding." + } + }, + "edito": { + "social": { + "title": "Social", + "content": "Each year, over 500,000 tonnes of wild fish are harvested off the coast of West Africa to feed farmed fish, jeopardizing the food security of local communities." + }, + "climat": { + "title": "Climate", + "content": "Intensive salmon farming generates greenhouse gas emissions, primarily carbon dioxide (CO2) from energy used in facilities, feed production, and transportation, as well as methane resulting from the decomposition of organic waste." + }, + "health": { + "title": "Health", + "content": "The high concentration of fish in aquaculture farms promotes the spread of diseases, necessitating the use of pathogens or medications, which can have consequences for human health. Additionally, the increasing presence of microplastics in salmon raises concerns for human health.", + "credit": "Photo credit: Ramji / Bob Brown Foundation" + }, + "biodiversity": { + "title": "Biodiversity", + "content": "Intensive salmon farming has significant impacts on marine biodiversity, including escapees, water pollution from waste discharge, parasites affecting wild populations, and increased pressure on wild fish stocks due to the demand for fishmeal, thereby contributing to overexploitation and declining biodiversity." + }, + "animals": { + "title": "Animal condition", + "content": "The very high density of salmon in cages leads to illness and stress. Sea lice eat the flesh of disfigured fish. Mortality rates within cages are very abnormally high." + } + }, + "industry": { + "title": "And all this with the impunity of an exponentially growing industry.", + "content": "Salmon production, dominated by a handful of multinationals, has experienced hyper-growth on a global scale for several dec", + "link": "We act" + } + } +} diff --git a/messages/fr/components.json b/messages/fr/components.json new file mode 100644 index 000000000..5a017d066 --- /dev/null +++ b/messages/fr/components.json @@ -0,0 +1,32 @@ +{ + "components": { + "summary": { + "title": "page" + }, + "edito": { + "link": "En savoir plus" + }, + "shareLink": { + "blank": "nouvel onglet", + "twitter": "Twitter", + "linkedin": "Linkedin", + "website": "Site internet", + "email": "E-mail" + }, + "chart": { + "loading": "Chargement des données en cours..." + }, + "calculator": { + "intro": "Voici les impacts de l'industrie du saumon dans le monde depuis que vous avez ouvert cette page web.", + "seconds": "secondes", + "second": "seconde" + }, + "join": { + "title": "Be the change.", + "intro": "Il existe des alternatives au saumon dans notre manière de manger, de vendre et de produire.", + "content": "La France, située dans le top 3 des plus gros consommateurs de saumon au monde, porte une responsabilité particulière dans l'orientation des pratiques.", + "act": "Pour inverser la tendance et stopper le désastre, il est urgent d’agir. On a des leviers d’action !", + "link": "On agit" + } + } +} diff --git a/messages/fr/layout.json b/messages/fr/layout.json new file mode 100644 index 000000000..d4632ee3c --- /dev/null +++ b/messages/fr/layout.json @@ -0,0 +1,21 @@ +{ + "layout": { + "top": "Haut de page", + "nav": { + "title": "principale", + "story": "Story", + "dashboard": "Dashboard", + "act": "Agir", + "about": "À propos" + }, + "footer": { + "allRight": "Tous droits réservé", + "and": "et" + } + }, + "siteConfig": { + "title": "Pinkbombs", + "description": "Analyser l'impact du saumon sur l'environnement, l'écosystème, la santé et les communautés.", + "url": "https://pinkbombs-app.vercel.app" + } +} diff --git a/messages/fr/pages/about.json b/messages/fr/pages/about.json new file mode 100644 index 000000000..6ffb86bd6 --- /dev/null +++ b/messages/fr/pages/about.json @@ -0,0 +1,5 @@ +{ + "about": { + "title": "" + } +} diff --git a/messages/fr/pages/act.json b/messages/fr/pages/act.json new file mode 100644 index 000000000..0cdb3a57e --- /dev/null +++ b/messages/fr/pages/act.json @@ -0,0 +1,30 @@ +{ + "act": { + "meta": { + "title": "Agir" + }, + "title": "Bonne nouvelle : désamorcer les Pinkbombs est à portée de clic", + "company": { + "title": "J’interpelle les entreprises responsables", + "content": "en partageant un post d’information pré-rédigé qui les identifie sur Linkedin.", + "link": "Poster sur Linkedin", + "target": "#" + }, + "territory": { + "title": "Je dis non au projet d’usine à saumons sur mon territoire", + "content": "Le projet d’usine à saumons à terre dénommé « Pure Salmon », initiative du fonds d’investissement Singapourien 8F Asset Management, est en discussion près de Bordeaux. Grâce aux pétitions signées par les citoyen.ne.s, il a notamment été retoqué au Pas-de-Calais et en Bretagne. Continuons !", + "link": "Signer la pétition", + "target": "#" + }, + "seastemik": { + "title": "Je soutiens Seastemik", + "content": "Seastemik est une association créée en 2023 avec l’objectif d’accélérer notre transition vers un océan en bonne santé.
Pour mobiliser sur le terrain, elle travaille à la sensibilisation des communautés, l’accessibilité de l’information et la proposition de solutions.", + "link": "Contribuer sur HelloAsso", + "target": "#" + }, + "eat": { + "title": "Je laisse les saumons en dehors de mon assiette", + "content": "Prêt.e.s à se mettre en chemin pour laisser les saumons dans les océans et les rivières? « Ensemble, on est une force immense ».
Quel objectif vous semble atteignable? Laissez-le nous dans notre boîte à intentions pour faire grandir la communauté !" + } + } +} diff --git a/messages/fr/pages/dashboard.json b/messages/fr/pages/dashboard.json new file mode 100644 index 000000000..70e919ed9 --- /dev/null +++ b/messages/fr/pages/dashboard.json @@ -0,0 +1,121 @@ +{ + "dashboard": { + "meta": { + "title": "Dashboard" + }, + "title": "Les chiffres derrière l’histoire", + "sections": { + "intro": { + "title": "Introduction", + "blocks": { + "salmon-collapse": { + "title": "Effondrement du saumon sauvage de l'Atlantique", + "content": "

Le saumon atlantique est inscrit sur la Liste rouge de l'UICN des espèces menacées en décembre 2023.

Cela est dû en grande partie à la surpêche, à la dégradation de l'habitat, notamment due aux barrages bloquant les routes migratoires, mais aussi au changement climatique qui modifie leurs environnements, impactant leurs taux de croissance et de survie.

" + }, + "hyper-growth": { + "title": "Hyper-croissance de l’élevage du saumon", + "content": "

La production de saumon a connu une croissance sans précédent.

Quasi inexistante il y a 30 ans, elle a bondi à trois millions de tonnes de saumon en 2021, soit l’équivalent de l’élevage et de l’abattage d’un milliard de saumons.

" + }, + "top-10": { + "title": "Principaux pays producteurs de saumon d'élevage", + "content": "

Le saumon a besoin d'eaux froides pour croître et la production est donc concentrée dans quelques pays situés loin au nord ou au sud.

Aujourd'hui, quatre pays représentent à eux seuls 90 % de la production mondiale de saumon.

", + "subblock": { + "title": "Evolution de l'élevage du saumon par pays" + } + }, + "intro-consumption": { + "title": "Consommation de saumon", + "content": "

Les États-Unis sont les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont aussi d’importants consommateurs saumon, la France étant en tête de proue avec une consommation élevée qui atteint 4,4kg/an/personne.

" + } + } + }, + "company": { + "title": "Entreprises", + "blocks": { + "top-comp": { + "title": "Principaux producteurs de saumon en filet ouvert", + "content": "

Les petites fermes salmonicoles artisanales ont cédé la place à l’aquaculture industrielle.

En quelques décennies, le marché est devenu dominé par une poignée de multinationales.

Mowi, anciennement Marine Harvest, est leader du secteur. L'entreprise est présente dans 25 pays.

" + }, + "top-land": { + "title": "La nouvelle menace : sur fermes aquacoles terrestres", + "mainContent": "

En 2021, la capacité de production théorique combinée des élevages terrestres de saumon s’élève à 2,5 millions de tonnes, soit presque autant que la production mondiale de saumon dans les élevages marins (2,7 millions de tonnes).

", + "content": "

Les fermes terrestres utilisent la technologie RAS (Recycled Aquaculture Systems) dans des réservoirs entièrement fermés. Si cette approche de l'élevage du saumon permet de limiter l'impact sur la biodiversité et l'environnement local (contamination limitée par les maladies, rejet des excréments et des évasions de saumons), elle nécessite également de grandes quantités d'eau douce et est très gourmande en énergie, car elle vise à recréer très précisément les conditions de l’habitat naturel des saumons.

En conséquence, l’empreinte carbone du saumon produit sur terre est plus élevée que celle du saumon produit dans les fermes marines. Afin de rentabiliser de telles fermes, la densité de poissons peut être 3 fois plus élevée que dans les fermes marines.

La technologie n’est pas encore totalement maîtrisée : actuellement, aucune usine en fonctionnement ne produit plus de 5 000 tonnes et les incidents techniques sont fréquents.

Une usine au Danemark en a subi cinq, résultant de défaillances techniques (pollution au chlorure de fer dans le fjord, incendie complet de son usine, engendrant pollution de l’air et de l’eau).

" + }, + "future-land-based": { + "title": "Le futur des fermes aquacoles terrestres", + "mainContent": "

Une ferme terrestre produisant 10 000 tonnes de saumon par an - si elle était construite - nécessiterait autant d'électricité qu'une ville de 39 215 habitant·e·s. Il existe actuellement plusieurs projets en Europe, dont des méga-fermes visant à produire 100 000 tonnes ou plus par an.

", + "content": "

Malgré les défis technologiques et de rentabilité, l'industrie investit massivement dans les fermes terrestres, avec un grand nombre de projets annoncés au cours des 5 dernières années. De nombreuses fermes envisagent d'être construites ou sont déjà en cours de construction en Europe, en Asie, au Moyen-Orient et aux États-Unis pour approvisionner leurs marchés locaux.

", + "data": [ + { + "title": "+91.1%", + "content": "Les projets combinés de fermes terrestres (RAS) pourraient représenter une augmentation de plus de 91 % de la production mondiale de saumon." + }, + { + "title": "291 Milliards", + "content": "Plus de 290 milliards de poissons sauvages, appelés poissons fourrage, seront pêchés pour produire la farine nécessaire chaque année à nourrir ces nouveaux saumons." + }, + { + "title": "1.4 Millions", + "content": "Ces mêmes farines contiennent du soja. 975 000 hectares seront nécessaires à la production de ce soja, l'équivalent d'environ 1,4 millions de terrains de football." + }, + { + "title": "15.8 Millions", + "content": "La consommation électrique nécessaire pour filtrer, refroidir et faire circuler l'eau des fermes RAS représente l'équivalent de la consommation annuelle de 15,8 millions d'européens." + } + ] + }, + "companies-consumption": { + "title": "Consommation", + "mainContent": "

Les États-Unis sont de loin les plus gros consommateurs de saumon, suivis par le Japon et la Russie. Les pays européens sont également d’importants consommateurs de ce poisson. La consommation de saumon par habitant pour ces grands pays est d'environ 2 kg/personne/an et peut atteindre des valeurs supérieures à 5 kg/personne/an.

", + "content": "

La consommation apparente de saumon (toutes espèces confondues) est calculée comme la production, y compris l'aquaculture et la capture, plus les importations moins les exportations. Toutes les données sont fournies par la FAO. Les facteurs de conversion entre le poids du produit et le poids vif sont approximés à l'aide de la documentation de la FAQ

Ces approximations peuvent conduire à des indicateurs erronés, surtout dans les pays peu peuplés et/ou à forte production. C’est pour cette raison que la consommation par habitant n’est pas incluse dans le graphique.

" + } + } + }, + "biodiversity": { + "title": "Biodiversité", + "blocks": { + "deforestation": { "title": "Déforestation" }, + "escapes-rates": { "title": "Les évasions" } + } + }, + "health": { + "title": "Human health", + "blocks": { + "antibiotic-conso": { "title": "Consommation d'antibiotiques" }, + "microplastics": { "title": "Microplastique" } + } + }, + "animals": { + "title": "Bien être animal", + "blocks": { + "stress-onshore": { "title": "Densité / stress dans usine à terre" }, + "mortality-rates": { "title": "Taux de mortalité" } + } + }, + "climate": { + "title": "Climat", + "blocks": { + "carbon-bomb": { "title": "Impact carbone" } + } + }, + "social": { + "title": "Social", + "blocks": { + "social-carbon": { "title": "Impact carbone" } + } + }, + "alternative": { + "title": "Alternatives", + "blocks": { + "alternatives": { "title": "Matrice de nutrition" } + } + } + }, + "calculator": { + "salmon": "saumons abattus", + "fish": "poissons fourrages pêchés pour alimenter les saumons", + "companies": "tonnes de CO2 émis par l'industrie", + "money": "Euros de chiffre d'affaire pour les entreprises leadeurs du marché" + } + } +} diff --git a/messages/fr/pages/story.json b/messages/fr/pages/story.json new file mode 100644 index 000000000..7455bcf3b --- /dev/null +++ b/messages/fr/pages/story.json @@ -0,0 +1,57 @@ +{ + "story": { + "title": "Le saumon que vous mangez, vendez, produisez...", + "bomb": "Tue, affame et contamine.", + "explode": { + "intro": "L’industrie du saumon est une bombe écologique et sociale", + "social": { + "title": "Social", + "content": "Détourne la nourriture des communautés d'Afrique de l'Ouest." + }, + "climat": { + "title": "Climat", + "content": "Génère une empreinte carbone collossale." + }, + "health": { + "title": "Santé", + "content": "Impacte la santé humaine à cause des polluants éternels et des microplastiques." + }, + "biodiversity": { + "title": "Biodiversité", + "content": "Dégrade la biodiversité marine (échappées de saumons d’élevage, pollutions, parasites et déclin des espèces sauvages) et terrestre (déforestation)" + }, + "animals": { + "title": "Condition animale", + "content": "Provoque stress, maladies et mortalités de masse dans les élevages intensifs." + } + }, + "edito": { + "social": { + "title": "justice Sociale", + "content": "Chaque année 500 000+ tonnes de poissons sauvages sont prélevés aux larges des côtes de l’Afrique de l’Ouest pour nourrir des poissons d'élevage mettant en péril la sécurité alimentaire des communautés locales." + }, + "climat": { + "title": "Climat", + "content": "L'élevage intensif de saumons génère des émissions de gaz à effet de serre, principalement du dioxyde de carbone (CO2) provenant de l'énergie utilisée dans les installations, de la production d'aliments et du transport, ainsi que du méthane résultant de la décomposition des déchets organiques." + }, + "health": { + "title": "Santé", + "content": "La présence dans la chair des saumons de polluants organiques persistants (POP) et de microplastiques soulève des préoccupations pour la santé humaine.La concentration élevée de poissons dans les fermes aquacoles favorise la propagation de maladies, nécessitant l'utilisation d'agents pathogènes ou de médicaments.", + "credit": "Crédit photo : Ramji / Bob Brown Foundation" + }, + "biodiversity": { + "title": "Biodiversité", + "content": "L'élevage intensif de saumons a des répercussions significatives sur la biodiversité marine et les ressources planétaires : pollutions diverses, parasites affectant les espèces locales, pression accrue sur les populations de poissons sauvages, exploitation du krill d’Antarctique, déforestation, etc." + }, + "animals": { + "title": "Condition animale", + "content": "La très forte densité des saumons en cages entraine maladies et stress. Les poux de mer rongent la chair des poissons défigurés. Les taux de mortalité au sein des cages sont très anormalement élevés." + } + }, + "industry": { + "title": "Et tout ça dans l’impunité d’une industrie en croissance exponentielle.", + "content": "La production de saumons, dominée par une poignée de multinationales, connaît depuis quelques décennies une hyper-croissance à l’échelle globale.", + "link": "On agit" + } + } +} diff --git a/next.config.js b/next.config.js index a8a0126f7..5934b668e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,8 @@ /** @type {import('next').NextConfig} */ +const createNextIntlPlugin = require("next-intl/plugin"); + +const withNextIntl = createNextIntlPlugin(); + const nextConfig = { eslint: { dirs: ["src"], @@ -47,4 +51,4 @@ const nextConfig = { }, }; -module.exports = nextConfig; +module.exports = withNextIntl(nextConfig); diff --git a/package.json b/package.json index 1c21585b5..18fa64fe4 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "clsx": "^2.0.0", "lucide-react": "^0.321.0", "next": "^14.0.4", + "next-intl": "^3.14.1", "plotly.js": "^2.31.1", "plotly.js-dist-min": "^2.31.1", "react": "^18.2.0", diff --git a/src/app/about/page.tsx b/src/app/[locale]/about/about.tsx similarity index 78% rename from src/app/about/page.tsx rename to src/app/[locale]/about/about.tsx index f4b7cce12..7d5d8b1b1 100644 --- a/src/app/about/page.tsx +++ b/src/app/[locale]/about/about.tsx @@ -5,7 +5,7 @@ import "@/lib/env"; import IntroBlock from "@/components/IntroBlock"; -const AboutPage = () => { +const About = () => { return ( <> @@ -13,4 +13,4 @@ const AboutPage = () => { ); }; -export default AboutPage; +export default About; diff --git a/src/app/[locale]/about/page.tsx b/src/app/[locale]/about/page.tsx new file mode 100644 index 000000000..3559397e4 --- /dev/null +++ b/src/app/[locale]/about/page.tsx @@ -0,0 +1,25 @@ +import { getTranslations } from "next-intl/server"; +import React from "react"; +import "@/lib/env"; + +import { locales } from "@/navigation"; + +import About from "./about"; + +export async function generateMetadata({ + params: { locale }, +}: { + params: { locale: typeof locales }; +}) { + const t = await getTranslations({ locale, namespace: "about" }); + + return { + title: t("title"), + }; +} + +const Page = () => { + return ; +}; + +export default Page; diff --git a/src/app/[locale]/dashboard/dashboard.tsx b/src/app/[locale]/dashboard/dashboard.tsx new file mode 100644 index 000000000..d8d9c7778 --- /dev/null +++ b/src/app/[locale]/dashboard/dashboard.tsx @@ -0,0 +1,463 @@ +"use client"; + +import dynamic from "next/dynamic"; +import { useTranslations } from "next-intl"; +import React from "react"; +import "@/lib/env"; + +import Calculator from "@/components/Calculator"; +import DashboardSection from "@/components/DashboardSection"; +import IntroBlock from "@/components/IntroBlock"; +import JoinBlock from "@/components/JoinBlock"; +import { SummaryLinksProps } from "@/components/Summary"; +import TitleBlock from "@/components/TitleBlock"; + +const Chart = dynamic(() => import("@/components/Chart"), { + ssr: false, +}); + +const Dashboard = () => { + const t = useTranslations("dashboard"); + const summary: SummaryLinksProps = [ + { + id: "intro", + title: t("sections.intro.title"), + sublinks: [ + { + label: t("sections.intro.blocks.salmon-collapse.title"), + targetId: "salmon-collapse-block", + }, + { + label: t("sections.intro.blocks.hyper-growth.title"), + targetId: "hyper-growth-block", + }, + { + label: t("sections.intro.blocks.top-10.title"), + targetId: "top-10-block", + }, + /*{ + label: t("sections.intro.blocks.intro-consumption.title"), + targetId: "intro-consumption-block", + },*/ + ], + }, + { + id: "company", + title: t("sections.company.title"), + sublinks: [ + { + label: t("sections.company.blocks.top-comp.title"), + targetId: "top-comp-block", + }, + { + label: t("sections.company.blocks.top-land.title"), + targetId: "top-land-block", + }, + { + label: t("sections.company.blocks.future-land-based.title"), + targetId: "future-land-based-block", + }, + /*{ + label: t("sections.company.blocks.companies-consumption.title"), + targetId: "companies-consumption-block", + },*/ + ], + }, + { + id: "biodiversity", + title: t("sections.biodiversity.title"), + sublinks: [ + { + label: t("sections.biodiversity.blocks.deforestation.title"), + targetId: "deforestation-block", + }, + { + label: t("sections.biodiversity.blocks.escapes-rates.title"), + targetId: "escapes-rates-block", + }, + ], + }, + { + id: "health", + title: t("sections.health.title"), + sublinks: [ + { + label: t("sections.health.blocks.antibiotic-conso.title"), + targetId: "antibiotic-conso-block", + }, + { + label: t("sections.health.blocks.microplastics.title"), + targetId: "microplastics-block", + }, + ], + }, + { + id: "animals", + title: t("sections.animals.title"), + sublinks: [ + { + label: t("sections.animals.blocks.stress-onshore.title"), + targetId: "stress-onshore-block", + }, + { + label: t("sections.animals.blocks.mortality-rates.title"), + targetId: "mortality-rates-block", + }, + ], + }, + { + id: "climate", + title: t("sections.climate.title"), + sublinks: [ + { + label: t("sections.climate.blocks.carbon-bomb.title"), + targetId: "carbon-bomb-block", + }, + ], + }, + { + id: "social", + title: t("sections.social.title"), + sublinks: [ + { + label: t("sections.social.blocks.social-carbon.title"), + targetId: "social-carbon-block", + }, + ], + }, + { + id: "alternative", + title: t("sections.alternative.title"), + sublinks: [ + { + label: t("sections.alternative.blocks.alternatives.title"), + targetId: "alternatives-block", + }, + ], + }, + ]; + + return ( + <> + + + + +
+ + + + + {/* */} +
+ +
+ + + + {/* */} +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ + + + ); +}; + +export default Dashboard; + +const SalmonCollapseSection = () => { + const t = useTranslations("dashboard"); + + return ( + + ); +}; + +const SalmonFarmingSection = () => { + const t = useTranslations("dashboard"); + + return ( + + ); +}; + +const TopCountriesSection = () => { + const t = useTranslations("dashboard"); + + return ( + <> + + +
+

+ {t("sections.intro.blocks.top-10.subblock.title")} +

+ + +
+ + ); +}; + +/* +const SalmonConsumptionSection = () => { + const t = useTranslations("dashboard"); + + return ( + + ); +}; +*/ + +const MainProductionSection = () => { + const t = useTranslations("dashboard"); + + return ( + + ); +}; + +const LandPlantsSection = () => { + const t = useTranslations("dashboard"); + const data = []; + for (let i = 0; i < 4; i++) { + data.push({ + title: t(`sections.company.blocks.future-land-based.data.${i}.title`), + content: t(`sections.company.blocks.future-land-based.data.${i}.content`), + }); + } + + return ( + <> + + +
+
+

+ {t("sections.company.blocks.future-land-based.title")} +

+
+
+
+
+ {data.map((d, key) => ( +
+

{d.title}

+

{d.content}

+
+ ))} +
+ +
+ + ); +}; + +/* +const SalmonConsumptionBisSection = () => { + const t = useTranslations("dashboard"); + + return ( + + ); +}; +*/ + +const DeforestationSection = () => { + return ( + + ); +}; + +const EscapeSection = () => { + return ( + + ); +}; + +const AntibioticSection = () => { + return ( + + ); +}; + +const MicroplasticSection = () => { + return ( + + ); +}; + +const StressOnshoreSection = () => { + return ( + + ); +}; + +const MortalityRateSection = () => { + return ( + + ); +}; + +const CarbonSection = () => { + return ( + + ); +}; + +const SocialCarbonSection = () => { + return ( + + ); +}; diff --git a/src/app/[locale]/dashboard/page.tsx b/src/app/[locale]/dashboard/page.tsx new file mode 100644 index 000000000..21f9b1da2 --- /dev/null +++ b/src/app/[locale]/dashboard/page.tsx @@ -0,0 +1,25 @@ +import { getTranslations } from "next-intl/server"; +import React from "react"; +import "@/lib/env"; + +import { locales } from "@/navigation"; + +import Dashboard from "./dashboard"; + +export async function generateMetadata({ + params: { locale }, +}: { + params: { locale: typeof locales }; +}) { + const t = await getTranslations({ locale, namespace: "dashboard" }); + + return { + title: t("meta.title"), + }; +} + +const Page = () => { + return ; +}; + +export default Page; diff --git a/src/app/error.tsx b/src/app/[locale]/error.tsx similarity index 100% rename from src/app/error.tsx rename to src/app/[locale]/error.tsx diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx new file mode 100644 index 000000000..e21b5ea32 --- /dev/null +++ b/src/app/[locale]/layout.tsx @@ -0,0 +1,110 @@ +import clsx from "clsx"; +import { Barlow_Condensed, Montserrat } from "next/font/google"; +import Image from "next/image"; +import { NextIntlClientProvider } from "next-intl"; +import { getMessages } from "next-intl/server"; +import { getTranslations } from "next-intl/server"; +import * as React from "react"; + +const barlow = Barlow_Condensed({ + weight: ["700", "800", "900"], + subsets: ["latin"], + display: "swap", + variable: "--font-barlow", +}); + +const montserrat = Montserrat({ + weight: "500", + subsets: ["latin"], + display: "swap", + variable: "--font-montserrat", +}); + +import "@/styles/globals.css"; + +import Footer from "@/components/layout/Footer"; +import Navbar from "@/components/layout/Navbar"; + +import { locales } from "@/navigation"; + +export async function generateMetadata({ + params: { locale }, +}: { + params: { locale: typeof locales }; +}) { + const t = await getTranslations({ locale, namespace: "siteConfig" }); + + return { + metadataBase: new URL(t("url")), + title: { + default: t("title"), + template: `%s | ${t("title")}`, + }, + description: t("description"), + robots: { index: true, follow: true }, + icons: { + icon: "/favicon/favicon.ico", + shortcut: "/favicon/favicon.ico", + apple: "/favicon/apple-touch-icon.png", + }, + manifest: `/favicon/site.webmanifest`, + openGraph: { + url: t("url"), + title: t("title"), + description: t("description"), + siteName: t("title"), + images: [`${t("url")}/images/og.jpg`], + type: "website", + locale: "fr", + }, + twitter: { + card: "summary_large_image", + title: t("title"), + description: t("description"), + images: [`${t("url")}/images/og.jpg`], + }, + }; +} + +export default async function LocaleLayout({ + children, + params: { locale }, +}: { + children: React.ReactNode; + params: { locale: string }; +}) { + const messages = await getMessages(); + const t = await getTranslations({ locale, namespace: "layout" }); + return ( + + + + +
+ {children} + + {t("top")} + +
+