On continue dans next-yak mais il y a plein de problèmes...

app/blog/Article.tsx

@@ -0,0 +1,61 @@
+import ArticleWrapper from '@/components/ArticleUI'
+import BlueskyComments from '@/components/BlueskyComments'
+import { getMDXComponent } from 'next-contentlayer2/hooks'
+import { css } from 'next-yak'
+import Image from 'next/image'
+import Link from 'next/link'
+import Contribution from '@/app/blog/Contribution'
+import OtherArticles from './OtherArticles'
+import { mdxComponents } from './mdxComponents'
+import { dateCool, getLastEdit } from './utils'
+
+export default async function Article({ post, slug }) {
+	const MDXContent = getMDXComponent(post.body.code)
+	const lastEdit = await getLastEdit(slug)
+
+	const sameEditDate =
+		!lastEdit || post.date.slice(0, 10) === lastEdit.slice(0, 10)
+	return (
+		<div>
+			<ArticleWrapper>
+				{!post.tags?.includes('page') && (
+					<Link
+						href="/blog"
+						css={css`
+							margin-top: 0.6rem;
+							display: inline-block;
+						`}
+					>
+						← Retour au blog
+					</Link>
+				)}
+				<header>
+					{post.image && (
+						<Image
+							src={post.image}
+							width="600"
+							height="400"
+							alt="Illustration de l'article"
+						/>
+					)}
+					<h1 dangerouslySetInnerHTML={{ __html: post.titre.html }} />
+					<p>{post?.description}</p>
+					<small>
+						publié le <time dateTime={post.date}>{dateCool(post.date)}</time>
+						{!sameEditDate && (
+							<span>
+								, mis à jour{' '}
+								<time dateTime={lastEdit}>{dateCool(lastEdit)}</time>
+							</span>
+						)}
+					</small>
+					<hr />
+				</header>
+				<MDXContent components={mdxComponents} />
+				<Contribution slug={params.slug} />
+				<OtherArticles excludeUrl={post.url} />
+			</ArticleWrapper>
+			{post?.bluesky && <BlueskyComments uri={post.bluesky} />}
+		</div>
+	)
+}

app/blog/Blog.tsx

@@ -0,0 +1,58 @@
+import Logo from '@/public/logo.svg'
+import { css } from 'next-yak'
+import Image from 'next/image'
+import Link from 'next/link'
+import { List } from './UI'
+import { dateCool } from './utils'
+
+export const description =
+	"Découvrez l'histoire, les nouveautés et le futur de Cartes.app"
+
+export default function Blog({ articles }) {
+	return (
+		<main>
+			<nav
+				css={css`
+					margin-top: 1rem;
+				`}
+			>
+				<Link href="/">
+					<Image
+						src={Logo}
+						alt="Logo de Cartes.app"
+						width="100"
+						height="100"
+						css={css`
+							width: 2rem;
+							height: auto;
+							margin-right: 0.6rem;
+							vertical-align: middle;
+						`}
+					/>
+					Revenir sur la carte
+				</Link>
+			</nav>
+			<h1>Le blog de Cartes.app</h1>
+			<p>{description}</p>
+			<p>
+				Pour l'instant, nous sommes dans une phase de construction : l'objectif
+				est de sortir une version 1 en 2024, et ces articles en expliquent
+				l'avancement. L'application reste largement utilisable, mais
+				attendez-vous à quelques bugs.
+			</p>
+			<List>
+				{articles.map(({ url, date, titre }) => (
+					<li key={url}>
+						<div>
+							<Link
+								href={url}
+								dangerouslySetInnerHTML={{ __html: titre.html }}
+							/>
+						</div>
+						<small>publié le {dateCool(date)}</small>
+					</li>
+				))}
+			</List>
+		</main>
+	)
+}

app/blog/UI.tsx

@@ -1,6 +1,4 @@
-'use client'
-
-import {styled} from 'next-yak'
+import { styled } from 'next-yak'
 import CTA from '../presentation/CTA'
 
 export const List = styled.ol`

app/blog/[slug]/page.tsx

@@ -1,14 +1,6 @@
 import { allArticles } from '@/.contentlayer/generated'
-import Article from '@/components/Article'
-import BlueskyComments from '@/components/BlueskyComments'
-import {css} from 'next-yak'
-import { getMDXComponent } from 'next-contentlayer2/hooks'
-import Image from 'next/image'
-import Link from 'next/link'
-import Contribution from '../Contribution'
-import OtherArticles from '../OtherArticles'
-import { mdxComponents } from '../mdxComponents'
-import { dateCool, getLastEdit } from '../utils'
+import { getLastEdit } from '../utils'
+import Article from '../Article'
 
 export const generateMetadata = async (props) => {
 	const params = await props.params
@@ -31,57 +23,9 @@ export const generateMetadata = async (props) => {
 
 export default async function Post(props: Props) {
 	const params = await props.params
-	console.log('SLUG', params.slug)
 	const post = allArticles.find(
 		(post) => post._raw.flattenedPath === params.slug
 	)
 
-	const MDXContent = getMDXComponent(post.body.code)
-	const lastEdit = await getLastEdit(params.slug)
-
-	const sameEditDate =
-		!lastEdit || post.date.slice(0, 10) === lastEdit.slice(0, 10)
-	return (
-		<div>
-			<Article>
-				{!post.tags?.includes('page') && (
-					<Link
-						href="/blog"
-						css={css`
-							margin-top: 0.6rem;
-							display: inline-block;
-						`}
-					>
-						← Retour au blog
-					</Link>
-				)}
-				<header>
-					{post.image && (
-						<Image
-							src={post.image}
-							width="600"
-							height="400"
-							alt="Illustration de l'article"
-						/>
-					)}
-					<h1 dangerouslySetInnerHTML={{ __html: post.titre.html }} />
-					<p>{post?.description}</p>
-					<small>
-						publié le <time dateTime={post.date}>{dateCool(post.date)}</time>
-						{!sameEditDate && (
-							<span>
-								, mis à jour{' '}
-								<time dateTime={lastEdit}>{dateCool(lastEdit)}</time>
-							</span>
-						)}
-					</small>
-					<hr />
-				</header>
-				<MDXContent components={mdxComponents} />
-				<Contribution slug={params.slug} />
-				<OtherArticles excludeUrl={post.url} />
-			</Article>
-			{post?.bluesky && <BlueskyComments uri={post.bluesky} />}
-		</div>
-	)
+	return <Article post={post} slug={params.slug} />
 }

app/blog/blogArticles.ts

@@ -0,0 +1,6 @@
+import { allArticles } from '@/.contentlayer/generated'
+
+export const blogArticles = allArticles.filter(
+	(article) =>
+		!article.tags?.includes('page') && !article.tags?.includes('brouillon')
+)

app/blog/page.tsx

@@ -1,76 +1,19 @@
-import { allArticles } from '@/.contentlayer/generated'
 import { compareDesc } from 'date-fns'
-import Link from 'next/link'
-import { List } from './UI'
-import { dateCool } from './utils'
-import Logo from '@/public/logo.svg'
-import Image from 'next/image'
-import {css} from 'next-yak'
-
-export const blogArticles = allArticles.filter(
-	(article) =>
-		!article.tags?.includes('page') && !article.tags?.includes('brouillon')
-)
+import { blogArticles } from './blogArticles'
+import Blog from './Blog'
 
 const title = `Le blog - Cartes`
-const description =
-	"Découvrez l'histoire, les nouveautés et le futur de Cartes.app"
 
 export const metadata: metadata = {
 	title,
-	description,
+	description: 'yoyo',
 }
 
 const Page = () => {
 	const articles = blogArticles.sort((a, b) =>
 		compareDesc(new Date(a.date), new Date(b.date))
 	)
-	return (
-		<main>
-			<nav
-				css={css`
-					margin-top: 1rem;
-				`}
-			>
-				<Link href="/">
-					<Image
-						src={Logo}
-						alt="Logo de Cartes.app"
-						width="100"
-						height="100"
-						css={css`
-							width: 2rem;
-							height: auto;
-							margin-right: 0.6rem;
-							vertical-align: middle;
-						`}
-					/>
-					Revenir sur la carte
-				</Link>
-			</nav>
-			<h1>Le blog de Cartes.app</h1>
-			<p>{description}</p>
-			<p>
-				Pour l'instant, nous sommes dans une phase de construction : l'objectif
-				est de sortir une version 1 en 2024, et ces articles en expliquent
-				l'avancement. L'application reste largement utilisable, mais
-				attendez-vous à quelques bugs.
-			</p>
-			<List>
-				{articles.map(({ url, date, titre }) => (
-					<li key={url}>
-						<div>
-							<Link
-								href={url}
-								dangerouslySetInnerHTML={{ __html: titre.html }}
-							/>
-						</div>
-						<small>publié le {dateCool(date)}</small>
-					</li>
-				))}
-			</List>
-		</main>
-	)
+	return <Blog articles={articles} />
 }
 
 export default Page

next.config.mjs

@@ -16,9 +16,6 @@ const nextConfig = {
 	experimental: {
 		reactCompiler: true,
 	},
-	compiler: {
-		styledComponents: true,
-	},
 	/*
 	compilerOptions: {
 		baseUrl: '.',

package.json

@@ -89,6 +89,7 @@
 		"openmoji": "^15.0.0",
 		"osmtogeojson": "^3.0.0-beta.5",
 		"pmtiles": "^3.2.0",
+		"postcss-nested": "^7.0.2",
 		"process": "^0.11.10",
 		"rbush": "^4.0.1",
 		"react": "^19.0.0-rc-45804af1-20241021",

postcss.config.js

@@ -0,0 +1,6 @@
+// postcss.config.js
+module.exports = {
+	plugins: {
+		'postcss-nested': {},
+	},
+}