OK ça marche mieux avec contentlayer

.gitignore

@@ -20,3 +20,5 @@ source/data
 .next/**
 
 .env.local
+
+.contentlayer

app/blog/[slug]/page.tsx

@@ -1,27 +1,32 @@
+import { allArticles } from 'contentlayer/generated'
 import Article from '@/components/Article'
-import { Markdown } from '@/components/utils/markdown'
-import { getPostData } from '../getPosts'
 import { dateCool } from '../utils'
+import { getMDXComponent } from 'next-contentlayer/hooks'
 
-export async function generateMetadata({ params }: Props) {
-	const postData = await getPostData(params.slug)
-
-	return {
-		title: postData.title,
-	}
+export const generateMetadata = ({ params }) => {
+	const post = allArticles.find(
+		(post) => post._raw.flattenedPath === params.slug
+	)
+	return { title: post.titre, description: post.description }
 }
 
 export default async function Post({ params }: Props) {
-	const postData = await getPostData(params.slug)
+	const post = allArticles.find(
+		(post) => post._raw.flattenedPath === params.slug
+	)
+
+	const Content = getMDXComponent(post.body.code)
 
 	return (
 		<Article>
 			<header>
-				<h1>{postData.title}</h1>
-				<small>{dateCool(postData.date)}</small>
+				<h1>{post.titre}</h1>
+				<small>
+					<time dateTime={post.date}>{dateCool(post.date)}</time>
+				</small>
 			</header>
 
-			<Markdown>{postData.contentHtml}</Markdown>
+			<Content />
 		</Article>
 	)
 }

app/blog/page.tsx

@@ -1,7 +1,7 @@
-import { Metadata } from 'next'
+import { allArticles } from 'contentlayer/generated'
+import { compareDesc } from 'date-fns'
 import Link from 'next/link'
-
-import { getSortedPostsData } from './getPosts'
+import { dateCool } from './utils'
 
 const title = `Le blog - Futureco`
 const description =
@@ -13,17 +13,20 @@ export const metadata: metadata = {
 }
 
 const Page = () => {
-	const allPostsData = getSortedPostsData()
+	const articles = allArticles.sort((a, b) =>
+		compareDesc(new Date(a.date), new Date(b.date))
+	)
+	console.log('AA', allArticles)
 	return (
 		<main>
 			<h1>Le blog</h1>
 			<ul>
-				{allPostsData.map(({ id, date, title }) => (
-					<li key={id}>
+				{articles.map(({ url, date, titre }) => (
+					<li key={url}>
 						<div>
-							<Link href={`/blog/${id}`}>{title}</Link>
+							<Link href={url}>{titre}</Link>
 						</div>
-						<small>{date}</small>
+						<small>{dateCool(date)}</small>
 					</li>
 				))}
 			</ul>

articles/voyage.mdx

@@ -1,6 +1,8 @@
 ---
-title: 'Un beau voyage'
+titre: 'Un beau voyage'
 date: '2023-11-11'
+description: |
+  Salut salut !
 ---
 
 
@@ -34,13 +36,17 @@ Qu'on soit clair : je ne prétends aucunement que posséder et voyager en voitur
 
 Notre point ici, c'est qu'il est malgré tout cela plus compliqué de se passer de voiture. Il y a un déficit de budget, d'attention, de simplicité, donc notamment d'information.
 
-En témoigne Google Maps, l'application de voyage qui écrase ses concurrents, pensée pour la voiture avant tout, comme en témoigne sa suggestion de recherche par défaut "Stations services" ou encore sa proposition d'itinéraire par défaut, la voiture individuelle. 
+En témoigne Google Maps, l'application de voyage qui écrase ses concurrents, pensée pour la voiture avant tout, comme en témoigne sa carte par défaut où les routes automobile sautent aux yeux en jaune, où la suggestion de recherche par défaut "Stations services"...
 
 ![](/blog-images/google-maps-accueil.png)
 
+... ou encore sa proposition d'itinéraire par défaut, la voiture individuelle, sans jamais demander si on en dispose, d'une voiture.
+
 ![](/blog-images/google-maps-itinéraire.png)
 
-Si l'application du géant du numérique évolue pour mieux prendre en compte les transports en commun et le vélo, elle reste loin d'avoir l'ambition de les proposer comme *la façon normale de voyager*. Rappelons deux choses : Google est étatsunien, les États-Unis sont un pays où la voiture est bien plus obligatoire et consensuelle qu'en Europe. Google est une agence publicitaire : son application Maps n'échappe pas à la règle, et la promotion des stations services répond autant à cette logique de monétisation que de besoin utilisateur.
+Si l'application du géant du numérique évolue pour mieux prendre en compte les transports en commun et le vélo, elle reste loin d'avoir l'ambition de les proposer comme *la façon normale de voyager*. Et pourquoi le ferait-elle, alors que [92 % des foyers français disposent d'au moins une voiture](https://www.ouest-france.fr/economie/transports/la-vie-sans-voiture-mission-impossible-pour-72-des-francais-2e9fb338-7dee-11ec-92fb-6689e2d2ee1b) en 2021 ? 
+
+Rappelons deux choses également : Google est étatsunien, les États-Unis sont un pays où la voiture est bien plus obligatoire et consensuelle qu'en Europe. Google est une agence publicitaire : son application Maps n'échappe pas à la règle, et la promotion des stations services répond autant à cette logique de monétisation que de besoin utilisateur.
 
 L'application "universelle" de l'information transport est donc avant tout conçue pour la voiture individuelle, malgré ses nouvelle fonctionnalités transport en commun appréciable (par exemple, l'estimation de l'affluence dans les gares et les bus). À ses côtés dans le paysage des applications de transport, on a Waze, Mappy, Viamichelin, SNCF Connect, Organic Maps, CityMapper, Géovélo, Rome2rio récemment achetée par Omio, des centaines d'applications dédiées aux transports en commun locaux, etc. 
 
@@ -59,8 +65,11 @@ Voici les objectifs de ce projet, à ce stade :
 - répondre à la question : "Puis-je faire ce voyage sans voiture individuelle, et comment ?"
 - via une interface moderne, simple, mobile, sans téléchargement d'application
 - un code entièrement open source
+- aucune dépendance à Google, mais aux magnifiques bases OpenStreetMap et Wikipedia
 - qui se concentre sur un territoire et ses particularités, au maximum la France, qui ne manque pas de richesses
 
+Ce pari est une projection dans l'avenir. Comme nous le disions plus haut, une application qui calcule des itinéraires train + vélo ne séduira en 2024 qu'une extrême minorité des français. Probablement pas de quoi monter un business. Pourtant, les scénarios de tenue de nos objectifs climatiques sont formels : la part modale du train, du vélo, des transports en commun doivent exploser, et celle de la voiture que les européens de moins en moins solvables ne peuvent plus se payer, baisser. 
+
 À part cela, tout reste à construire ! Nous relaterons les avancées ici. Vos retours seront précieux. À bientôt ! 
 
 <img src="/gare.svg"/>

components/Article.ts

@@ -16,8 +16,10 @@ const Article = styled.article`
 		font-size: 140%;
 	}
 	img {
-		width: 700px;
 		max-width: 90vw;
+		max-height: 30rem;
+		display: block;
+		margin: 1rem auto;
 	}
 	blockquote {
 		margin-left: 0;

contentlayer.config.ts

@@ -0,0 +1,25 @@
+// contentlayer.config.ts
+import { defineDocumentType, makeSource } from 'contentlayer/source-files'
+
+export const Article = defineDocumentType(() => ({
+	name: 'Article',
+	filePathPattern: `**/*.mdx`,
+	contentType: 'mdx',
+
+	fields: {
+		titre: { type: 'string', required: true },
+		date: { type: 'date', required: true },
+		description: { type: 'string', required: true },
+	},
+	computedFields: {
+		url: {
+			type: 'string',
+			resolve: (post) => `/blog/${post._raw.flattenedPath}`,
+		},
+	},
+}))
+
+export default makeSource({
+	contentDirPath: 'articles',
+	documentTypes: [Article],
+})

next.config.mjs

@@ -1,7 +1,8 @@
-import createMDX from '@next/mdx'
+import { withContentlayer } from 'next-contentlayer'
 import path from 'path'
 import { fileURLToPath } from 'url'
 const __filename = fileURLToPath(import.meta.url)
+
 import mdxOptions from './mdxOptions.mjs'
 
 const __dirname = path.dirname(__filename)
@@ -73,8 +74,4 @@ const nextConfig = {
 	pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
 }
 
-const withMDX = createMDX({
-	// Add markdown plugins here, as desired
-	options: mdxOptions,
-})
-export default withMDX(nextConfig)
+export default withContentlayer(nextConfig)

package.json

@@ -86,8 +86,10 @@
 		"buffer": "^6.0.3",
 		"chrome-aws-lambda": "^10.1.0",
 		"color-convert": "^2.0.1",
+		"contentlayer": "^0.3.4",
 		"core-js": "^3.31.1",
 		"css-to-js": "^0.0.2",
+		"date-fns": "^2.30.0",
 		"dotenv": "^16.0.0",
 		"emoji-regex": "^10.2.1",
 		"eslint-config-next": "^13.5.3",
@@ -108,6 +110,7 @@
 		"mini-css-extract-plugin": "^2.6.0",
 		"moo": "^0.5.0",
 		"next": "^14.0.2",
+		"next-contentlayer": "^0.3.4",
 		"next-mdx-remote": "^4.4.1",
 		"openmoji": "^14.0.0",
 		"path-browserify": "^1.0.1",

tsconfig.json

@@ -19,16 +19,19 @@
 				"name": "next"
 			}
 		],
+		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./*"]
+			"@/*": ["./*"],
+			"contentlayer/generated": ["./.contentlayer/generated"]
 		}
 	},
 	"include": [
 		"next-env.d.ts",
 		"**/*.ts",
 		"**/*.tsx",
 		".next/types/**/*.ts",
-		"global.d.ts"
+		"global.d.ts",
+		".contentlayer/generated"
 	],
 	"exclude": ["node_modules"]
 }