feat: add image in preview (#113)

* feat: refactor folder name mdx in blog * feat: add button to copy mdx in error.tsx
incubateur-ademe · Dec 9, 2024 · a942189 · a942189
1 parent e4867fc
commit a942189
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -67,9 +67,9 @@ Ces fichiers CSV sont constitués à partir de fichier Excel/Google sheet stock
     - exporter l'onglet "Solutions par critères" en csv en le nommant `solutions_par_criteres.csv`.
     - exporter l'onglet "Catalogue de solutions" en le nommant `solutions.csv`.
 
-3. Télécharger les fichier du Simulateur 2 les plus récents. 
-    - renommer les fichier csv bdd_energie en `bdd_energie_h1.csv`, `bdd_energie_h2.csv`, `bdd_energie_h3.csv`.
-    - renommer les fichiers csv bdd_eco en `bdd_eco_h1.csv`, `bdd_eco_h2.csv`, `bdd_eco_h3.csv`.
+3. Télécharger les fichier du Simulateur 2 les plus récents. Il y 3 fichiers bdd éco et bdd énergie (1 pour chaque zone géographique).
+    - renommer les fichier csv bdd_energie (de la forme YYYYMMDD - Simulateur 2 - BDD Energie - Zone HX - PACOUPA.xlsx) en `bdd_energie_h1.csv`, `bdd_energie_h2.csv`, `bdd_energie_h3.csv`.
+    - renommer les fichiers csv bdd_eco (de la forme YYYYMMDD - Simulateur 2 - BDD ECO - Zone HX - PACOUPA.xlsx) en `bdd_eco_h1.csv`, `bdd_eco_h2.csv`, `bdd_eco_h3.csv`.
 
 
 Quand tous les fichiers requis sont présents dans `assets`, lancer le script de génération de la base SQLite.
@@ -85,17 +85,17 @@ yarn db:build
 
     datasette assets/pacoupa.db
 
-    Une technique pour s'assurer que le script de génératin de la base s'est bien lancé, est de regarder la volumétrie attendue (ex: 120 000 lignes pour bdd_eco et bdd_energie).
+    Une technique pour s'assurer que le script de génération de la base s'est bien lancé, est de regarder la volumétrie attendue (ex: 120 000 lignes pour bdd_eco et bdd_energie).
 </details>
 
 <details>
     <summary>Sauvegarde des fichiers CSV</summary>
 
     Pour ne pas surcharger inutilement le repo GitHub Pacoupa, les fichiers CSV ne sont pas stockés (cf. .gitignore).
 
-    Donc, à chaque fois qu'un fichier pacoupa.db est créé, et à minima, quand il est utilisé en production (cf. plus loin sur l'hébergement Turso), il est fortement conseillé de stocker l'ensemble des fichiers CSV dans le répertoire `PACOUPA/Backup csv/[YYYYMMDD]`. 
+    Donc, à chaque fois qu'un fichier pacoupa.db est créé, et à minima, quand il est utilisé en production (cf. plus loin sur l'hébergement Turso), il est fortement conseillé de stocker l'ensemble des fichiers CSV dans un répertoire de backup sur le Drive de l'équipe. 
 
-    Comme cela, à tout moment l'historique des fichiers sources qui ont permis de constituer une certaine version de la base SQLite est disponible.
+    Comme cela, à tout moment l'historique des fichiers sources qui ont permis de constituer une certaine version de la base SQLite est récupérable.
 
 </details>
 

diff --git a/src/app/mdx/playground/error.tsx → src/app/blog/playground/error.tsx b/src/app/mdx/playground/error.tsx → src/app/blog/playground/error.tsx
@@ -1,6 +1,11 @@
-"use client"; // Error components must be Client Components
+"use client";
+import { Button } from "@/components/Button";
+
+// Error components must be Client Components
 
 export default function Error({ error, reset: _reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  const mdxContent = localStorage.getItem("mdxContent");
+
   return (
     <div className="col-start-2 mt-4 p-8">
       <p>Erreur du playground</p>
@@ -18,22 +23,27 @@ export default function Error({ error, reset: _reset }: { error: Error & { diges
       <details>
         <summary>Détails</summary>
 
+        <div className="py-4">
+          <Button
+            size="small"
+            priority="secondary"
+            onClick={() => {
+              if (mdxContent) {
+                navigator.clipboard.writeText(mdxContent).catch(console.error);
+              }
+            }}
+          >
+            Copier le code
+          </Button>
+        </div>
         <p>
-          <pre>{localStorage.getItem("mdxContent")}</pre>
+          <pre>{mdxContent}</pre>
         </p>
       </details>
 
       <div className="mt-8">
-        <a href={`/mdx/playground?reset=true`}>Recharger le playground</a>
+        <a href={`/blog/playground?reset=true`}>Recharger le playground</a>
       </div>
-      {/* <button
-        onClick={ 
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-          }
-          >
-          Try again
-          </button> */}
     </div>
   );
 }
diff --git a/src/app/mdx/playground/page.tsx → src/app/blog/playground/page.tsx b/src/app/mdx/playground/page.tsx → src/app/blog/playground/page.tsx
@@ -1,38 +1,83 @@
 "use client";
 
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { compileMDX } from "next-mdx-remote/rsc";
 import { type ChangeEvent, useEffect, useState } from "react";
 
 import { Button } from "@/components/Button";
 import { defaultMdxComponents } from "@/mdx-components";
 
+const today = new Date().toISOString().split("T")[0];
+
 const placeholder = `---
-title: "Ajouter le titre"
-publishedAt: ${new Date().toISOString()}
+title: "Mon titre"
+publishedAt: ${today}
 summary: "Ajouter la description ici."
 image: thought-catalog-505eectW54k-unsplash.jpg
 ---
 
-### Qu’est-ce qu’une énergie renouvelable&nbsp;?
+### Éditeur MDX
+
+- dans votre branche sous GitHub, ajouter les images dans public/img/blog
+- quand Vercel a fini de créer une nouvelle URL pour cette branche, vous pouvez utiliser ces images
+- modifier le frontmatter (titre, date, description et image)
+- écrire le contenu de l'article
+- quand vous êtes satisfaits de votre article, cliquez sur Copier et collez le contenu dans le fichier MDX dans GitHub, dans le dossier /content/blog.
+
+### Composants Markdown
+
+Les composants markdown classiques sont présents (titres, listes, liens, etc.)
+
+### Composants additionnels
+
+Ces composants sont disponibles pour enrichir le contenu de l'article.
+Attention à bien fermer les balises.
+
+- Spacer : ajoute un espace
+- CTA : ajoute un bouton CTA
+- Card  : ajoute une carte, avec un titre, un corps
+- Image : ajoute une image (qui doit se trouver dans /public/img/blog)
+- Callout : ajoute une zone de texte colorée
 
-- item 1
-- item 2
+<Spacer size="64" />
 
-<Spacer size="32" />
 
+Ex de Card : 
 <Card fullWidth>
-  <Card.Title>Titre de la carte</Card.Title>
-  <Card.Body>
-    Contenu de la carte
-  </Card.Body>
+<Card.Title>Titre de la carte</Card.Title>
+<Card.Body>
+Contenu de la carte
+</Card.Body>
 </Card>
 
+<Spacer size="64" />
+
+Ex d'image : 
+<Image src="thought-catalog-505eectW54k-unsplash.jpg" />
+
+Ex de Callout : 
+
+<Callout type="pacoupa" title="Un callout avec titre">Quand on ne précise pas le type, on affiche un callout vert avec la flamme verte.</Callout>
+
+<Spacer size="64" />
+
+<Callout type="warning">Un autre callout en warning (jaune). Les autres types possibles sont "info", "neutral", "success", "warning"</Callout>
+
+<Spacer size="64" />
+
+### Pour aller plus loin
+
+Vous pouvez cliquer sur le bouton Exemple complet pour voir un exemple plus complet d'article.
+
+Vous pouvez regarder comment sont écrits les autres articles du blog, la page faq, les landings pages, etc. pour vous inspirer.
+
+
 `;
 
 const completeSample = `---
 title: "Les systèmes de chauffage à énergie renouvelable pour les copropriétés"
-publishedAt: 2024-11-20
+publishedAt: ${today}
 summary: "Dans une période où la transition énergétique est devenue une priorité, les copropriétés ont un rôle clé à jouer pour réduire les émissions de gaz à effet de serre. Les systèmes de chauffage à énergie renouvelable offrent une solution efficace et durable pour chauffer les bâtiments tout en réduisant leur empreinte carbone."
 image: thought-catalog-505eectW54k-unsplash.jpg
 ---
@@ -77,8 +122,11 @@ export default function MDXEditorPage() {
   const [mdxContent, setMdxContent] = useState<string>("");
   const [renderedContent, setRenderedContent] = useState<React.ReactNode | null>(null);
   const [frontmatter, setFrontmatter] = useState<Record<string, unknown> | null>(null);
+  const [image, setImage] = useState<string | undefined>(undefined);
   const searchParams = useSearchParams();
 
+  console.debug("frontmatter", frontmatter);
+
   const reset = searchParams.get("reset") === "true";
 
   useEffect(() => {
@@ -101,6 +149,10 @@ export default function MDXEditorPage() {
           },
         });
 
+        if (frontmatter.image) {
+          setImage(frontmatter.image as string);
+        }
+
         setRenderedContent(content);
         setFrontmatter(frontmatter);
       } catch (error) {
@@ -129,8 +181,6 @@ export default function MDXEditorPage() {
     setMdxContent(completeSample);
   };
 
-  console.log("fronmatter", frontmatter);
-
   const copy = async () => {
     await navigator.clipboard.writeText(mdxContent);
   };
@@ -159,7 +209,17 @@ export default function MDXEditorPage() {
           placeholder="Write your MDX here. "
         />
       </div>
-      <div className="w-1/2 p-4 bg-white h-full overflow-x-hidden overflow-y-auto">
+      <div className="w-1/2 p-4 bg-white h-full overflow-x-hidden overflow-y-auto pt-16">
+        {image && (
+          <div className="mb-8 relative w-full h-[400px]">
+            <Image
+              src={"/img/blog/" + image}
+              alt="Image de décoration de l'article"
+              fill
+              className="rounded-lg object-cover"
+            />
+          </div>
+        )}
         <div className="border p-4">{renderedContent}</div>
       </div>
     </div>

diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -1,14 +1,13 @@
-import { fr, type FrCxArg } from "@codegouvfr/react-dsfr";
+import { fr } from "@codegouvfr/react-dsfr";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 
-import { H3 } from "@/dsfr/base/typography";
+import { H6 } from "@/dsfr/base/typography";
+import { cn } from "@/utils/cn";
 
 import { Logo } from "./img/Logo";
 
 type Props = {
   content?: React.ReactNode;
-  icon?: React.ReactNode;
-  iconId?: FrCxArg;
   title?: string;
   type: "error" | "info" | "neutral" | "pacoupa" | "success" | "warning";
 };
@@ -46,20 +45,25 @@ const config: Record<Props["type"], { bgColor: string; contentColor: string; tit
   },
 };
 
-export const Callout = ({ content, iconId, icon, title, type }: Props) => {
+export const Callout = ({ content, title, type }: Props) => {
   type = type ?? "info";
 
-  icon =
-    type === "pacoupa" ? <Logo /> : icon ?? <i className={fr.cx(iconId ?? "ri-information-fill", "fr-icon--sm")} />;
+  const icon = type === "pacoupa" ? <Logo /> : <i className={fr.cx("ri-information-fill", "fr-icon--sm")} />;
 
   const { bgColor, titleColor, contentColor } = config[type];
 
   return (
     <div className={`rounded-[4px] p-2 ${bgColor} w-full`}>
-      <div className="flex">
-        <div className="flex-shrink-0 -mt-0.5">{icon}</div>
-        <div className="ml-2">
-          {title && <H3 className={`text-sm font-medium ${titleColor} mb-0`}>{title}</H3>}
+      <div className="flex gap-2">
+        <div
+          className={cn("flex-shrink-0 -mt-0.5", {
+            "mt-1": !!title,
+          })}
+        >
+          {icon}
+        </div>
+        <div>
+          {title && <H6 className={`text-sm font-medium ${titleColor} mb-0`}>{title}</H6>}
           <div className={cx("text-sm", { "mt-2": !!title }, `${contentColor}`)}>{content}</div>
         </div>
       </div>

diff --git a/src/components/EstimationGains.tsx b/src/components/EstimationGains.tsx
@@ -11,7 +11,6 @@ import { BadgeEuros } from "./BadgeEuros";
 import { Callout } from "./Callout";
 import { DPEImage } from "./img/DPEImage";
 import { FlecheImage } from "./img/FlecheImage";
-import { Logo } from "./img/Logo";
 import { Herb } from "./img/twemoji/Herb";
 import { MoneyBag } from "./img/twemoji/MoneyBag";
 
@@ -80,7 +79,6 @@ export const EstimationGains = ({ solution, avecMessage, withTitle }: PropsWithC
             <div className="mt-8 mb-4">
               <Callout
                 type="pacoupa"
-                icon={<Logo />}
                 content={
                   <Text variant="sm" className="mb-0">
                     Un logement mieux isolé :

diff --git a/src/components/mdx/MdxCallout.tsx b/src/components/mdx/MdxCallout.tsx
@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from "react";
+
+import { Callout } from "../Callout";
+
+type Props = {
+  title?: string;
+  type: "error" | "info" | "neutral" | "pacoupa" | "success" | "warning";
+};
+
+export const MdxCallout = ({ children, type, title }: PropsWithChildren<Props>) => {
+  return <Callout content={children} type={type ?? "pacoupa"} title={title} />;
+};
diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx
@@ -6,6 +6,7 @@ import { getLabelFromChildren } from "@/utils/react";
 import { slugify } from "@/utils/string";
 
 import { CTA } from "./components/CTA";
+import { MdxCallout } from "./components/mdx/MdxCallout";
 import { MdxCard } from "./components/mdx/MdxCard";
 import { MdxDetails } from "./components/mdx/MdxDetails";
 import { MdxImage } from "./components/mdx/MdxImage";
@@ -31,6 +32,7 @@ export const defaultMdxComponents: MDXComponents = {
   Card: MdxCard,
   Details: MdxDetails,
   Spacer: MdxSpacer,
+  Callout: MdxCallout,
 
   Image: props => <MdxImage {...props} />,
   ...anchorHeadingMDXComponents,