Ajout page détail produit avec SEO sur React Router 7

1
model Product {
2
  id           String   @id @default(uuid())
3
  name         String
4
  slug         String   @unique
5
  description  String?
6
  content      String?          // ^? contenu Markdown pour le SEO
7
  priceCents   Int
8
  stock        Int      @default(0)
9
  isActive     Boolean  @default(true)
10
  /* … */
11
}

1
npx prisma migrate dev --name add-product-content

1
/* … */
2
await prisma.product.create({
3
  data: {
4
    name: "Chef Gordon 2",
5
    slug: "chef-gordon-2",
6
    description: "Le robot cuistot étoilé !",
7
    content: md`
8
### Fonctionnalités principales
9
| Tâche | Temps moyen |
10
| ----- | ----------- |
11
| Émincer un oignon | 2 s |
12
| Nettoyer le plan de travail | 5 s |
13

14
> *Parce que « C’est trop cuit ! » n’existe plus.*
15
`,
16
    priceCents: 799000,
17
    stock: 12,
18
  },
19
});

1
npx prisma db seed

1
import { getProduct } from "~/server/products.server";
2

3
export async function loader({ params }) {
4
  const { product, productImages } = await getProduct({
5
    productSlug: params.productSlug,
6
  });
7
  if (!product)
8
    throw new Response("Produit introuvable", { status: 404 });
9
  return { product, productImages };
10
}

1
import { generateMeta } from "@forge42/seo-tools/remix/metadata";
2
import { product as productLD } from "@forge42/seo-tools/structured-data/product";
3
import { breadcrumbs } from "@forge42/seo-tools/structured-data/breadcrumb";
4

5
export const meta = ({ loaderData, location }) =>
6
  generateMeta(
7
    {
8
      title: loaderData.product.name,
9
      description: loaderData.product.description ?? "",
10
      image: loaderData.productImages[0].url,
11
      url: `https://localhost:5173${location.pathname}`,
12
    },
13
    [
14
      { "script:ld+json": productLD(/* …données produit… */) },
15
      { "script:ld+json": breadcrumbs(location.pathname, ["Accueil", "Collection", loaderData.product.name]) },
16
    ],
17
  );

1
<div className="prose">
2
  <Markdown remarkPlugins={[remarkGfm]}>
3
    {product.content}
4
  </Markdown>
5
</div>

1
npm i @tailwindcss/typography

1
@plugin "@tailwindcss/typography";

1
<nav aria-label="Breadcrumb" className="mb-8 text-sm">
2
  <Link to="/" className="text-gray-500 hover:text-black">Accueil</Link>
3
  <ChevronRight className="inline h-4 w-4 mx-1 text-gray-400" />
4
  <Link to="/products" className="text-gray-500 hover:text-black">Collection</Link>
5
  <ChevronRight className="inline h-4 w-4 mx-1 text-gray-400" />
6
  <span className="text-gray-900">{product.name}</span>
7
</nav>

1
git add .
2
git commit -m "feat(product): page détail avec markdown & SEO"
3
git push -u origin 7-5-ajout-de-la-page-detail-du-produit