Intermediate refactoring...

2022-11-07 00:00:01 +01:00
parent 471fad6d61
commit 5142d4c551
23 changed files with 1648 additions and 1728 deletions
@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'preact/hooks'
+
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkMath from 'remark-math'
+import remarkRehype from 'remark-rehype'
+import rehypeKatex from 'rehype-katex'
+import rehypeStringify from 'rehype-stringify'
+
+export const Markdown = ({ source }) => {
+    const elementRef = useRef()
+
+    useEffect(async () => {
+        const renderedHtml = await unified()
+            .use(remarkParse)
+            .use(remarkMath)
+            .use(remarkRehype)
+            .use(rehypeKatex, { throwOnError: false, errorColor: '#c60' })
+            .use(rehypeStringify)
+            .process(source)
+
+        if (elementRef.current) {
+            elementRef.current.innerHTML = renderedHtml
+        }
+    }, [source])
+
+    return <div class="markdown" ref={elementRef}></div>
+}
@@ -0,0 +1,19 @@
+import { Link } from '../Router.jsx'
+import { Markdown } from './Markdown.jsx'
+
+export const Problem = ({ id, content }) => {
+    return (
+        <div class="problem">
+            <div class="problem-header">
+                <div class="problem-title">
+                    <Link page={`/problem/:id`} params={{ id }}>
+                        Problema {id}
+                    </Link>
+                </div>
+            </div>
+            <div class="problem-content">
+                <Markdown source={content} />
+            </div>
+        </div>
+    )
+}