Skip to content

Commit

Permalink
feat: clean markup (#41)
Browse files Browse the repository at this point in the history 
Co-authored-by: Thomas Catinaud Taris <[email protected]>
  • Loading branch information
@TCatinaud
TCatinaud and Thomas Catinaud Taris authored Jun 7, 2024
1 parent f621e49 commit f80a286
Show file tree
Hide file tree
Showing 14 changed files with 325 additions and 131 deletions.
87 changes: 74 additions & 13 deletions messages/en/pages/about.json
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions messages/en/pages/dashboard.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@
}
},
"intro-consumption": {
"title": "Salmon Consumption",
"content": "<p>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.</p>"
"title": "Main countries consuming salmon",
"content": "<p>The increase in salmon production results from an increase in the consumption of this fish, whose flesh is highly valued. In 2019, the United States were the largest consumers of salmon, with an <a href=\"/about#macro-consumption-section\">apparent consumption approaching one million tons</a>, followed by Russia and Japan, with consumption around 460,000 tons. European countries follow, with France being the 4th largest consumer of salmon in 2019. Consumption in Western countries is around 3 kilos per capita, while emerging countries such as Brazil and China have very low per capita consumption.<p>",
"data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/csv/top_15_countries_consuming_1.5.csv.zip",
"artifact": "top_15_countries_consuming_1.5.csv.zip"
}
}
},
Expand Down
85 changes: 73 additions & 12 deletions messages/fr/pages/about.json
View file

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions messages/fr/pages/dashboard.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,10 @@
}
},
"intro-consumption": {
"title": "Consommation de saumon",
"content": "<p>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.<p>"
"title": "Les plus gros consommateurs de saumon",
"content": "<p>La hausse de la production de saumons résulte d’une augmentation de la consommation de ce poisson, dont la chair est très appréciée. En 2019, les États-unis étaient les plus gros consommateurs de saumon, avec une <a href=\"/about#macro-consumption-section\">consommation apparente s’approchant du million de tonnes</a>, suivis par la Russie et le Japon dont la consommation est d’environ 460,000 tonnes. Les pays européens suivent ensuite, la France étant en 2019 le 4ème pays le plus consommateur de saumon. La consommation des pays occidentaux se situe aux alentours de 3 kilos par habitant, tandis que des pays émergents comme le Brésil ou la Chine présentent des consommations par habitant très faibles.<p>",
"data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/csv/top_15_countries_consuming_1.5_fr.csv.zip",
"artifact": "top_15_countries_consuming_1.5_fr.csv.zip"
}
}
},
Expand Down
163 changes: 107 additions & 56 deletions src/app/[locale]/about/about.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,9 @@ const About = () => {
return (
<>
<IntroBlock title={t("title")} />

<WhySection />
<WhoSection />
<MethodsSection />
<ExplainSection />

<TitleBlock title={t("sources")} />

<MacroSection />
<AlternativesSection />
<CompaniesSection />
Expand All @@ -35,35 +31,30 @@ const About = () => {

export default About;

const WhySection = () => {
const ExplainSection = () => {
const t = useTranslations("about");

return (
<>
<TitleBlock id="why-section-title" title={t("why.title")} />
<AboutSection content={t("why.content")} />
</>
);
};

const WhoSection = () => {
const t = useTranslations("about");

return (
<>
<TitleBlock id="who-section-title" title={t("who.title")} />
<AboutSection content={t("who.content")} />
</>
);
};

const MethodsSection = () => {
const t = useTranslations("about");
<TitleBlock
spaceY="mb-4 lg:mb-8"
id="why-section-title"
title={t("why.title")}
/>
<AboutSection content={t.raw("why.content")} />
<TitleBlock
spaceY="mt-12 lg:mt-24 mb-4 lg:mb-8"
id="who-section-title"
title={t("who.title")}
/>
<AboutSection content={t.raw("who.content")} />

return (
<>
<TitleBlock id="methods-section-title" title={t("methods.title")} />
<AboutSection content={t("methods.content")} />
<TitleBlock
spaceY="mt-12 lg:mt-24 mb-4 lg:mb-8"
id="methods-section-title"
title={t("methods.title")}
/>
<AboutSection content={t.raw("methods.content")} />
</>
);
};
Expand All @@ -74,9 +65,30 @@ const MacroSection = () => {
return (
<>
<AboutSection
content={t("macro.content")}
title={t("macro.title")}
id="macro-section-title"
content={t.raw("macro.content")}
id="macro-section"
/>
<AboutSection
subtitle={t("macro.calculator.title")}
content={t.raw("macro.calculator.content")}
id="macro-calculator-section"
/>
<AboutSection
subtitle={t("macro.salmon-collapse.title")}
content={t.raw("macro.salmon-collapse.content")}
id="macro-salmon-collapse-section"
/>
<AboutSection
subtitle={t("macro.hyper-growth.title")}
content={t.raw("macro.hyper-growth.content")}
id="macro-hyper-growth-section"
/>

<AboutSection
subtitle={t("macro.consumption.title")}
content={t.raw("macro.consumption.content")}
id="macro-consumption-section"
/>
</>
);
Expand All @@ -86,13 +98,11 @@ const AlternativesSection = () => {
const t = useTranslations("about");

return (
<>
<AboutSection
content={t("alternatives.content")}
title={t("alternatives.title")}
id="alternatives-section-title"
/>
</>
<AboutSection
id="alternatives-section"
title={t("alternatives.title")}
content={t.raw("alternatives.content")}
/>
);
};

Expand All @@ -101,10 +111,26 @@ const CompaniesSection = () => {

return (
<>
<AboutSection id="companies-section" title={t("companies.title")} />
<AboutSection
id="companies-top-comp-section"
subtitle={t("companies.top-comp.title")}
content={t.raw("companies.top-comp.content")}
/>
<AboutSection
id="companies-top-land-section"
subtitle={t("companies.top-land.title")}
content={t.raw("companies.top-land.content")}
/>
<AboutSection
content={t("companies.content")}
title={t("companies.title")}
id="companies-section-title"
id="companies-future-land-based-section"
subtitle={t("companies.future-land-based.title")}
content={t.raw("companies.future-land-based.content")}
/>
<AboutSection
id="companies-future-land-keys-section"
subtitle={t("companies.future-land-keys.title")}
content={t.raw("companies.future-land-keys.content")}
/>
</>
);
Expand All @@ -115,10 +141,16 @@ const BiodiversitySection = () => {

return (
<>
<AboutSection id="biodiversity-section" title={t("biodiversity.title")} />
<AboutSection
id="biodiversity-deforestation-section"
subtitle={t("biodiversity.deforestation.title")}
content={t.raw("biodiversity.deforestation.content")}
/>
<AboutSection
content={t("biodiversity.content")}
title={t("biodiversity.title")}
id="biodiversity-section-title"
id="biodiversity-escapes-section"
subtitle={t("biodiversity.escapes.title")}
content={t.raw("biodiversity.escapes.content")}
/>
</>
);
Expand All @@ -129,10 +161,16 @@ const HumanSection = () => {

return (
<>
<AboutSection id="human-health-section" title={t("human-health.title")} />
<AboutSection
id="human-health-antibiotic-section"
subtitle={t("human-health.antibiotic.title")}
content={t.raw("human-health.antibiotic.content")}
/>
<AboutSection
content={t("human_health.content")}
title={t("human_health.title")}
id="human-health-section-title"
id="human-health-microplastics-section"
subtitle={t("human-health.microplastics.title")}
content={t.raw("human-health.microplastics.content")}
/>
</>
);
Expand All @@ -144,9 +182,19 @@ const AnimalSection = () => {
return (
<>
<AboutSection
content={t("animal_welfare.content")}
title={t("animal_welfare.title")}
id="animal-welfare-section-title"
id="animal-welfare-section"
title={t("animal-welfare.title")}
/>

<AboutSection
id="animal-welfare-density-section"
subtitle={t("animal-welfare.density.title")}
content={t.raw("animal-welfare.density.content")}
/>
<AboutSection
id="animal-welfare-mortality-section"
subtitle={t("animal-welfare.mortality.title")}
content={t.raw("animal-welfare.mortality.content")}
/>
</>
);
Expand All @@ -157,23 +205,26 @@ const ClimateSection = () => {

return (
<>
<AboutSection id="climat-section" title={t("climate.title")} />
<AboutSection
content={t("climate.content")}
title={t("climate.title")}
id="climate-section-title"
id="climat-emissions-section"
subtitle={t("climate.emissions.title")}
content={t.raw("climate.emissions.content")}
/>
</>
);
};

const SocialSection = () => {
const t = useTranslations("about");

return (
<>
<AboutSection id="social-section" title={t("social.title")} />
<AboutSection
content={t("social.content")}
title={t("social.title")}
id="social-section-title"
id="social-resources-section"
subtitle={t("social.resources.title")}
content={t.raw("social.resources.content")}
/>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/app/[locale]/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export async function generateMetadata({
const t = await getTranslations({ locale, namespace: "about" });

return {
title: t("title"),
title: t("meta.title"),
};
}

Expand Down
Loading

0 comments on commit f80a286

Please sign in to comment.