fix(journey): normalize headings and fix setext hr in story text

- Render h1/h2/h3 as plain paragraphs — journal stories are plain
  text, not structured documents
- Preprocess text to insert blank line before --- and === so they
  become horizontal rules instead of setext headings
This commit is contained in:
Maurice
2026-04-13 20:39:29 +02:00
parent 6c253c71c3
commit c60332dcf1
2 changed files with 11 additions and 10 deletions
@@ -1,5 +1,6 @@
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm' import remarkGfm from 'remark-gfm'
import remarkBreaks from 'remark-breaks'
interface Props { interface Props {
text: string text: string
@@ -15,11 +16,11 @@ export default function JournalBody({ text, dark }: Props) {
color: 'inherit', color: 'inherit',
}}> }}>
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm, remarkBreaks]}
components={{ components={{
h1: ({ children }) => <h1 style={{ fontFamily: 'inherit', fontSize: '1.3em', fontWeight: 700, margin: '16px 0 6px', lineHeight: 1.3 }}>{children}</h1>, h1: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
h2: ({ children }) => <h2 style={{ fontFamily: 'inherit', fontSize: '1.15em', fontWeight: 600, margin: '14px 0 4px', lineHeight: 1.3 }}>{children}</h2>, h2: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
h3: ({ children }) => <h3 style={{ fontFamily: 'inherit', fontSize: '1.05em', fontWeight: 600, margin: '12px 0 4px', lineHeight: 1.4 }}>{children}</h3>, h3: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
p: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>, p: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
blockquote: ({ children }) => ( blockquote: ({ children }) => (
<blockquote style={{ <blockquote style={{
@@ -62,7 +63,7 @@ export default function JournalBody({ text, dark }: Props) {
}, },
}} }}
> >
{text} {text.replace(/^(.+)\n([-=]{3,})$/gm, '$1\n\n$2')}
</ReactMarkdown> </ReactMarkdown>
</div> </div>
) )
+5 -5
View File
@@ -1004,7 +1004,7 @@ function VerdictSection({ pros, cons }: { pros: string[]; cons: string[] }) {
> >
<div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" /> <div className="flex-1 h-px bg-zinc-200 dark:bg-zinc-700" />
<span className="text-[10px] font-bold tracking-[0.14em] uppercase text-zinc-400 flex items-center gap-1.5"> <span className="text-[10px] font-bold tracking-[0.14em] uppercase text-zinc-400 flex items-center gap-1.5">
Pros & Cons {t('journey.editor.prosCons')}
<ChevronDown <ChevronDown
size={12} size={12}
className={`md:hidden text-zinc-400 transition-transform duration-300 ${open ? 'rotate-180' : ''}`} className={`md:hidden text-zinc-400 transition-transform duration-300 ${open ? 'rotate-180' : ''}`}
@@ -1042,12 +1042,12 @@ function VerdictSection({ pros, cons }: { pros: string[]; cons: string[] }) {
}`} }`}
> >
{pros.length > 0 && ( {pros.length > 0 && (
<div className="rounded-xl border border-green-200 dark:border-green-800/30 p-4" style={{ background: 'linear-gradient(180deg, #F0FDF4 0%, white 100%)' }}> <div className="rounded-xl border border-green-200 dark:border-green-800/30 p-4 bg-gradient-to-b from-green-50 to-white dark:from-green-950/30 dark:to-zinc-900">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 rounded-lg bg-green-500 flex items-center justify-center"> <div className="w-6 h-6 rounded-lg bg-green-500 flex items-center justify-center">
<Check size={14} className="text-white" strokeWidth={3} /> <Check size={14} className="text-white" strokeWidth={3} />
</div> </div>
<span className="hidden md:inline text-[11px] font-bold tracking-[0.1em] uppercase text-green-700">{t('journey.verdict.lovedIt')}</span> <span className="hidden md:inline text-[11px] font-bold tracking-[0.1em] uppercase text-green-700 dark:text-green-400">{t('journey.verdict.lovedIt')}</span>
<span className="ml-auto text-[11px] font-semibold text-green-600">{pros.length}</span> <span className="ml-auto text-[11px] font-semibold text-green-600">{pros.length}</span>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@@ -1061,12 +1061,12 @@ function VerdictSection({ pros, cons }: { pros: string[]; cons: string[] }) {
</div> </div>
)} )}
{cons.length > 0 && ( {cons.length > 0 && (
<div className="rounded-xl border border-red-200 dark:border-red-800/30 p-4" style={{ background: 'linear-gradient(180deg, #FEF2F2 0%, white 100%)' }}> <div className="rounded-xl border border-red-200 dark:border-red-800/30 p-4 bg-gradient-to-b from-red-50 to-white dark:from-red-950/30 dark:to-zinc-900">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<div className="w-6 h-6 rounded-lg bg-red-500 flex items-center justify-center"> <div className="w-6 h-6 rounded-lg bg-red-500 flex items-center justify-center">
<Minus size={14} className="text-white" strokeWidth={3} /> <Minus size={14} className="text-white" strokeWidth={3} />
</div> </div>
<span className="hidden md:inline text-[11px] font-bold tracking-[0.1em] uppercase text-red-700">{t('journey.verdict.couldBeBetter')}</span> <span className="hidden md:inline text-[11px] font-bold tracking-[0.1em] uppercase text-red-700 dark:text-red-400">{t('journey.verdict.couldBeBetter')}</span>
<span className="ml-auto text-[11px] font-semibold text-red-600">{cons.length}</span> <span className="ml-auto text-[11px] font-semibold text-red-600">{cons.length}</span>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">