app/components/common/Mermaid.tsx

@@ -1,41 +0,0 @@
-import MermaidRenderer from "react-mermaid2";
-
-type MermaidProps = {
-  path: string;
-};
-
-export function Mermaid(props: MermaidProps) {
-  return (
-    <MermaidRenderer
-      chart={`
-    sequenceDiagram
-    autonumber
-
-    box rgba(139,92,246,.1) Navigateur
-    actor Utilisateur
-    end
-
-    box rgba(139,92,246,.1) Serveur
-    participant Routeur
-    participant Contrôleur
-    participant Modèle
-    participant Vue
-    end
-
-    participant Base de données
-
-    Utilisateur->>Routeur: Je veux voir la page d'accueil
-    Routeur->>Contrôleur: Appelle la méthode \`home\`
-    alt Si des données sont nécessaires
-        Contrôleur->>Modèle: Demande les données
-        Modèle->>Base de données: Récupère les données
-        Base de données-->>Modèle: Retourne les données
-        Modèle-->>Contrôleur: Retourne les données
-    end
-    Contrôleur->>Vue: Demande le HTML
-    Vue-->>Contrôleur: Retourne le HTML généré
-    Contrôleur->>Utilisateur: Retourne le HTML généré
-  `}
-    />
-  );
-}

app/layouts/LayoutDefault.tsx

@@ -1,20 +1,22 @@
 import { MobileNavigation } from "@syntax/MobileNavigation";
 import { usePageContext } from "vike-react/usePageContext";
 import { ThemeProvider } from "@/providers/ThemeProvider";
+import { useEffect, useState, Suspense } from "react";
 import { ThemeSelector } from "@syntax/ThemeSelector";
+import { clientOnly } from "vike-react/clientOnly";
+import { ToastContainer } from "react-toastify";
 import { Navigation } from "@syntax/Navigation";
 import { Link } from "@/components/common/Link";
-import { useEffect, useState } from "react";
-import { Search } from "@syntax/Search";
 import { Hero } from "@syntax/Hero";
-import { Logo, LogoWithText } from "@syntax/Logo";
+import { Logo } from "@syntax/Logo";
 import clsx from "clsx";
 
 import "./style.css";
 import "./tailwind.css";
 import "./prism.css";
 import "unfonts.css";
-import { ToastContainer } from "react-toastify";
+
+const Search = clientOnly(() => import("@syntax/Search").then((module) => module.Search));
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
@@ -58,9 +60,11 @@ function Header() {
         </Link>
       </div>
 
-      <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+      <Suspense fallback={<div className="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />}>
-        <Search />
+        <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
-      </div>
+          <Search />
+        </div>
+      </Suspense>
 
       <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
         <ThemeSelector className="relative z-10" />

app/markdoc/tags.tsx

@@ -1,16 +1,9 @@
 import { QuickLink, QuickLinks } from "@syntax/QuickLinks";
 import { TabContent, Tabs } from "@/components/md/Tabs";
-// import { Fence2 } from "@/components/syntax/Fence2";
-import { Callout } from "@syntax/Callout";
-// import fs from "fs/promises";
-// import { Tag } from "./Tag";
-import React from "react";
 import { Snippet } from "@/components/syntax/Snippet";
 import { Iframe } from "@/components/common/Iframe";
-import { Mermaid } from "@/components/common/Mermaid";
+import { Callout } from "@syntax/Callout";
-// import path from "path";
+import React from "react";
-
-// const __dirname = path.resolve();
 
 const tags = {
   callout: {
@@ -91,12 +84,6 @@ const tags = {
       },
     },
   },
-  mermaid: {
-    render: Mermaid,
-    attributes: {
-      path: { type: String },
-    },
-  },
   img: {
     render: ({ src, alt = "", className = "" }: { src: string; alt: string; className: string }) => (
       <img src={src} alt={alt} className={className} loading="lazy" />