feat: page interactive, démos Play/Step et simulateur Carnot

Ajoute le pipeline PageSpec (validation, rendu, publication /p/{slug}), les démos TipTap /demo, et le simulateur Carnot (modes frigo/PAC/moteur, énergie kJ vs puissance W, unités K/°C/°F) avec correctifs d’équations KaTeX. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-24 17:51:43 +00:00
parent f385d43d5d
commit 69c99e4f4f
67 changed files with 12005 additions and 33 deletions
--- a/memento-note/components/interactive-page/page-md.tsx
+++ b/memento-note/components/interactive-page/page-md.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useMemo } from 'react'
+import katex from 'katex'
+import { marked } from 'marked'
+import { sanitizeRichHtml } from '@/lib/sanitize-content'
+import 'katex/dist/katex.min.css'
+import { cn } from '@/lib/utils'
+
+/** Light markdown + inline $KaTeX$ for page prose / callouts / speak. */
+export function PageMd({
+  md,
+  className,
+}: {
+  md: string
+  className?: string
+}) {
+  const html = useMemo(() => {
+    const placeholders: string[] = []
+    const withSlots = md.replace(/\$([^$]+)\$/g, (_, tex: string) => {
+      const i = placeholders.length
+      try {
+        placeholders.push(
+          katex.renderToString(tex, { displayMode: false, throwOnError: false })
+        )
+      } catch {
+        placeholders.push(tex)
+      }
+      return `%%KATEX${i}%%`
+    })
+
+    let out = marked.parse(withSlots, { gfm: true, breaks: true }) as string
+    placeholders.forEach((frag, i) => {
+      out = out.replace(`%%KATEX${i}%%`, frag)
+    })
+    return sanitizeRichHtml(out)
+  }, [md])
+
+  return (
+    <div
+      className={cn(
+        'prose prose-neutral dark:prose-invert max-w-none prose-p:leading-relaxed prose-headings:tracking-tight',
+        className
+      )}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
+
+export function PageFormula({
+  tex,
+  caption,
+}: {
+  tex: string
+  caption?: string
+}) {
+  const html = useMemo(() => {
+    try {
+      return katex.renderToString(tex, {
+        displayMode: true,
+        throwOnError: false,
+      })
+    } catch {
+      return tex
+    }
+  }, [tex])
+
+  return (
+    <figure
+      className="my-5 overflow-x-auto rounded-xl border px-4 py-4 md:px-5"
+      style={{
+        background: 'var(--pp-paper)',
+        borderColor: 'var(--pp-line)',
+        borderLeft: '4px solid var(--pp-plum)',
+      }}
+    >
+      <div
+        className="text-[1.15em] [&_.katex-display]:m-0"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {caption ? (
+        <figcaption
+          className="mt-2.5 text-sm"
+          style={{ color: 'var(--pp-muted)' }}
+        >
+          {caption}
+        </figcaption>
+      ) : null}
+    </figure>
+  )
+}