Grosse amélioration de MDX / à-propos

cartesapp · Oct 4, 2023 · b4c36b7 · b4c36b7
1 parent c5a2241
commit b4c36b7
Show file tree

Hide file tree

Showing 6 changed files with 240 additions and 27 deletions.
diff --git a/app/a-propos/about.mdx b/app/a-propos/about.mdx
@@ -2,6 +2,8 @@
 
 > La catastrophe climatique n'est plus une menace lointaine, c'est une actualité.
 
+## Sommaire
+
 ## Pourquoi ce site ?
 
 ### Contexte
@@ -39,18 +41,34 @@ Finalement, il faut trouver _la bonne unité_. Un steak de 150gr en France, c'es
 
 C'est cette deuxième piste que nous explorons aujourd'hui. [Rejoignez-nous !](https://matrix.to/#/#futureco:matrix.org).
 
-### Où en est-on ?
+## Où en est-on ?
 
 Ce projet, d'abord un projet personnel, a été la base technique du site [Nos Gestes Climat](https://nosgestesclimat.fr) porté par BetaGouv et l'ADEME, et a inspiré [Impact CO2](https://impactco2.fr), un autre site de l'ADEME. Pendant ce temps là, il s'est transformé pour proposer des calculateurs d'empreinte climat spécialisés sur les questions que se posent les français : quelle est l'empreinte du ferry ? De l'avion, d'une piscine ? Prochainement, un test global d'empreinte climat sera publié, dans une formule qui tranchera avec l'historique. Aussi dans les cartons, un calculateur de voyage écologique de nouvelle génération.
 
-### Qui est derrière ce site ?
+## Qui est derrière ce site ?
+
+Ce site est principalement développé par <a href="https://kont.me">Maël THOMAS-QUILLÉVÉRÉ</a>, développé à Rennes via un ordinateur qui va sur ses 4 ans, de l'électricité principalement nucléaire et du jus de cerveau obtenu à partir d'un régime principalement végétarien 🥞. 
+
+
+### Pourquoi nous faire confiance ? 
+
+Tout ce qui est proposé sur futur.eco a une particularité : respecter les [standards les plus élevés de conception de modèles numériques publics](https://publi.codes/docs/pourquoi-publicodes/standard-modeles-ouverts). 
+
+Ainsi, en plus de faire confiance à la personne à l'origine du travail, car la confiance dans une boîte noire a toujours des limites, tout ici est inspectable, documenté et reproductible. C'est extrêmement important quand il s'agit de sujet graves, comme la crise environnementale.
+
+### Mentions légales
 
-Ce site est principalement développé par <a href="https://kont.me">Maël THOMAS-QUILLÉVÉRÉ</a>, entrepreneur dirigeant de l'[entreprise Menoz](https://annuaire-entreprises.data.gouv.fr/entreprise/834364291), que vous pouvez contacter à l'adresse c arobase kont point me. Il est hébergé sur des serveurs internationaux (si vous le consultez en France, il vous est servi depuis la France), développé à Rennes via un ordinateur qui va sur ses 4 ans, de l'électricité nucléaire et du jus de cerveau obtenu à partir d'un régime principalement végétarien 🥞. Il est hébergé par la société Vercel, servi depuis un CDN dans le pays duquel vous le consultez. 
+Le site est édit par l'[entreprise Menoz](https://annuaire-entreprises.data.gouv.fr/entreprise/834364291), que vous pouvez contacter à l'adresse c arobase kont point me. Il est hébergé sur les serveurs internationaux de la société Vercel. Si vous le consultez en France, il vous est donc servi depuis la France.
 
+<br/>
+<br/>
+<br/>
+------------------------
 
+## Notes de bas de page
 
-[1] L'impact carbone en équivalent CO₂e n'est bien sûr pas le seul critère permettant de juger qu'une consommation est durable. Occupation des sols, utilisation de l'eau, utilisation des métaux rares... tous ces critères sont bien sûr pertinents. Réduire notre impact carbone n'en reste pas moins une condition nécessaire à un futur heureux.
+1. L'impact carbone en équivalent CO₂e n'est bien sûr pas le seul critère permettant de juger qu'une consommation est durable. Occupation des sols, utilisation de l'eau, utilisation des métaux rares... tous ces critères sont bien sûr pertinents. Réduire notre impact carbone n'en reste pas moins une condition nécessaire à un futur heureux.
 
-[2] La base carbone de l'ADEME existe, mais s'adresse uniquement aux experts. On ne peut pas demander à un citoyen de créer un compte sur _bilans-ges.ademe.fr_, alors qu'il est avec ses amis à table et qu'il a besoin d'une réponse immédiate. Elle se concentre d'ailleurs sur les données primaires, par exemple le bilan de la combustion d'un kg de gaz naturel du réseau.
+2. La base carbone de l'ADEME existe, mais s'adresse uniquement aux experts. On ne peut pas demander à un citoyen de créer un compte sur _bilans-ges.ademe.fr_, alors qu'il est avec ses amis à table et qu'il a besoin d'une réponse immédiate. Elle se concentre d'ailleurs sur les données primaires, par exemple le bilan de la combustion d'un kg de gaz naturel du réseau.
 
-[3] Recommandation n° 7 du [premier rapport](https://www.hautconseilclimat.fr/wp-content/uploads/2019/06/hcc_rapport_annuel_2019.pdf) du Haut Conseil pour le Climat, juin 2019.
+3. Recommandation n° 7 du [premier rapport](https://www.hautconseilclimat.fr/wp-content/uploads/2019/06/hcc_rapport_annuel_2019.pdf) du Haut Conseil pour le Climat, juin 2019.
diff --git a/app/a-propos/page.tsx b/app/a-propos/page.tsx
@@ -1,5 +1,4 @@
 import Article from 'Components/Article'
-import { Metadata } from 'next'
 import Content from './about.mdx'
 
 const Page = () => (

diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -1,15 +1,7 @@
 import type { MDXComponents } from 'mdx/types'
 
-// This file allows you to provide custom React components
-// to be used in MDX files. You can import and use any
-// React component you want, including components from
-// other libraries.
-
-// This file is required to use MDX in `app` directory.
 export function useMDXComponents(components: MDXComponents): MDXComponents {
 	return {
-		// Allows customizing built-in components, e.g. to add styling.
-		// h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
 		...components,
 	}
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,7 +1,8 @@
-import remarkFrontmatter from 'remark-frontmatter'
-import nextMdx from '@next/mdx'
-import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
+import createMDX from '@next/mdx'
 import path from 'path'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import remarkToc from 'remark-toc'
 import { fileURLToPath } from 'url'
 const __filename = fileURLToPath(import.meta.url)
 
@@ -11,7 +12,6 @@ const __dirname = path.dirname(__filename)
 
 const nextConfig = {
 	experimental: {
-		mdxRs: true,
 		serverComponentsExternalPackages: ['publicodes'],
 	},
 	compiler: {
@@ -72,8 +72,30 @@ const nextConfig = {
 
 		return config
 	},
+	pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
 }
 
-const withMDX = nextMdx()
+const withMDX = createMDX({
+	// Add markdown plugins here, as desired
+	options: {
+		remarkPlugins: [
+			[remarkToc, { heading: '(table[ -]of[ -])?contents?|toc|Sommaire' }],
+		],
+		rehypePlugins: [
+			rehypeSlug,
+			[
+				rehypeAutolinkHeadings,
+				{
+					behaviour: 'append',
+					properties: {
+						ariaHidden: true,
+						tabIndex: -1,
+						className: 'hash-link',
+					},
+				},
+			],
+		],
+	},
+})
 
 export default withMDX(nextConfig)
diff --git a/package.json b/package.json
@@ -72,11 +72,11 @@
 		"@babel/runtime": "^7.22.6",
 		"@mdx-js/loader": "^2.3.0",
 		"@mdx-js/react": "^2.3.0",
-		"@next/mdx": "^13.4.13",
+		"@next/mdx": "^13.5.4",
 		"@opentelemetry/api": "^1.4.1",
 		"@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
 		"@rehooks/local-storage": "^2.4.4",
-		"@types/mdx": "^2.0.5",
+		"@types/mdx": "^2.0.8",
 		"@vercel/og": "^0.5.10",
 		"add": "^2.0.6",
 		"babel-plugin-webpack-alias": "^2.1.2",
@@ -130,9 +130,12 @@
 		"redux": "^4.2.1",
 		"redux-thunk": "^2.4.1",
 		"regenerator-runtime": "^0.14.0",
+		"rehype-autolink-headings": "^7.0.0",
+		"rehype-slug": "^6.0.0",
 		"remark-footnotes": "^4.0.1",
 		"remark-frontmatter": "^4.0.1",
 		"remark-mdx-frontmatter": "^3.0.0",
+		"remark-toc": "^9.0.0",
 		"reselect": "^4.1.8",
 		"string-replace-to-array": "^2.1.0",
 		"styled-components": "^6.0.7",