feat: add marked

README.md

@@ -1,3 +1,4 @@
+# Install
 ```bash
 // hot-reload
 go install github.com/air-verse/air@latest
@@ -6,3 +7,8 @@ air
 // REPL
 gore
 ```
+
+# TODO
+- [ ] actually rewrite this properly
+- [ ] serve `index.html` from `/`
+- [ ] pack the assetins into the [binary](https://github.com/gin-gonic/examples/tree/master/assets-in-binary)

frontend/bun.lock

@@ -5,6 +5,7 @@
       "name": "bun-react-template",
       "dependencies": {
         "bun-plugin-tailwind": "^0.1.2",
+        "marked": "^16.4.1",
         "react": "^19",
         "react-dom": "^19",
         "tailwindcss": "^4.1.11",
@@ -55,6 +56,8 @@
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "marked": ["marked@16.4.1", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-ntROs7RaN3EvWfy3EZi14H4YxmT6A5YvywfhO+0pm+cH/dnSQRmdAmoFIc3B9aiwTehyk7pESH4ofyBY+V5hZg=="],
+
     "react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
 
     "react-dom": ["react-dom@19.2.0", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.0" } }, "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ=="],

frontend/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "bun-react-template",
-  "version": "0.1.0",
+  "name": "obi",
+  "version": "0.0.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "bun-plugin-tailwind": "^0.1.2",
+    "marked": "^16.4.1",
     "react": "^19",
     "react-dom": "^19",
     "tailwindcss": "^4.1.11"

frontend/src/components/FileContent.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { marked } from 'marked' 
 
 export function FileContent({ filePath }) {
   const [data, setData] = useState(null);
@@ -29,7 +30,7 @@ export function FileContent({ filePath }) {
 
   return (
     <div>
-      <pre>{data?.data}</pre>
+      <div dangerouslySetInnerHTML={{__html: !!data?.data && marked.parse(data.data)}}></div>
     </div>
   );
 }

frontend/src/components/Obi.tsx

@@ -1,14 +1,15 @@
 import { useState } from 'react';
 import { FilesList } from "./FilesList";
 import { FileContent } from "./FileContent";
-import { bytesToBase64 } from "../util/codecs.ts";
+import { fromBase64, toBase64 } from "../util/codecs.ts";
 
 export function Obi() {
   const [filePath, setFilePath] = useState('');
 
   const handleFileClick = (value) => {
-    console.log(`Encoded string: [${bytesToBase64(value)}]`);
-    setFilePath(bytesToBase64(value));
+    console.log(`Encoded string: [${toBase64(value)}]`);
+    console.log(`Decoded string: [${fromBase64(toBase64(value))}]`);
+    setFilePath(toBase64(value));
   };
 
   return (

frontend/src/util/codecs.ts

@@ -1,11 +1,11 @@
-// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
-export function base64ToBytes(base64) {
-  const binString = atob(base64);
-  return Uint8Array.from(binString, (m) => m.codePointAt(0));
+// https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
+export function fromBase64(string: String) {
+  const binString = atob(string);
+  const bytes = Uint8Array.from(binString, (m) => m.codePointAt(0))
+  return new TextDecoder().decode(bytes);
 }
 
-// From https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem.
-export function bytesToBase64(string: String) {
+export function toBase64(string: String) {
   const bytes = new TextEncoder().encode(string)
   const binString = String.fromCodePoint(...bytes);
   return btoa(binString);