website

commit 2d8abf7214727e09837b309a3c7b4192418688ba
parent 86f0a5c2f5bf48ee979421e8a065afe969144cfa
Author: fen123456 <fenwthompson@gmail.com>
Date:   Wed,  2 Sep 2026 21:06:25 +0100

init katex renderer. still buggy

Diffstat:
M
src/components/Header.jsx
 | 
5
+++++
M
src/index.jsx
 | 
2
++
A
src/pages/KatexRenderer.jsx
 | 
35
+++++++++++++++++++++++++++++++++++

3 files changed, 42 insertions(+), 0 deletions(-)
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -18,6 +18,11 @@ export default function Header() {
             Questions
           </button>
         </Link>
+        <Link href="/renderer" className={getActiveClass}>
+          <button class="taskbar-element">
+            KaTeX Renderer
+          </button>
+        </Link>
 			</nav>
 		</header>
 	);
diff --git a/src/index.jsx b/src/index.jsx
@@ -5,6 +5,7 @@ import Header from './components/Header.jsx';
 
 import Home from './pages/Home.jsx';
 import QuestionIndex from './pages/QuestionIndex.jsx';
+import KatexRenderer from './pages/KatexRenderer.jsx';
 import NotFound from './pages/NotFound.jsx';
 
 import './styles/index.css';
@@ -17,6 +18,7 @@ export function App() {
         <Route path="/" component={Home} />
         <Route path="/questions" component={QuestionIndex} />
         <Route path="/questions/*" component={QuestionIndex} />
+        <Route path="/renderer" component={KatexRenderer} />
         <Route component={NotFound} />
       </Switch>
     </>
diff --git a/src/pages/KatexRenderer.jsx b/src/pages/KatexRenderer.jsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import Equation from '../components/Equation.jsx';
+import Window from '../components/Window.jsx'
+ 
+export default function KatexRenderer() {
+  const [text, setText] = useState("")
+  const textRef = useRef(null)
+
+  function updateText(e) {
+    setText(e.target.value)
+  }
+
+  useEffect(() => {
+    textRef.current.addEventListener('input', updateText)
+  })
+
+  return (
+    <main>
+      <Window title="KaTeX Renderer">
+        <p>Hello World!</p>
+        <textarea 
+          class="field-border"
+          placeholder="Typst Syntax Here..."
+          value={text}
+          ref={textRef}
+          onChange={e => updateText(e)}
+        />
+        <div className="field-border">
+          <Equation equation={text} />
+        </div>
+      </Window>
+    </main>
+  )
+}
+\ No newline at end of file