Added example

bnw · Oct 16, 2023 · 933e3ca · 933e3ca
1 parent 2239522
commit 933e3ca
Show file tree

Hide file tree

Showing 17 changed files with 2,038 additions and 303 deletions.
diff --git a/.github/workflows/build-pages.yml b/.github/workflows/build-pages.yml
@@ -0,0 +1,33 @@
+name: build-pages
+
+on: 
+  workflow_dispatch:
+    inputs:
+        busytexreleasetag:
+          description: 'wasm_release_tag'
+          required: true
+
+jobs:
+    build-pages:
+        runs-on: ubuntu-22.04
+        steps:
+
+            - uses: actions/checkout@v2
+
+            - run: npm install && npm build
+
+            - run: |
+                mkdir pages
+                cd $GITHUB_WORKSPACE/pages
+                mkdir -p example
+                cp ../example/* example/
+                mkdir -p build/wasm/
+                cp  ../build/wasm/busytex.wasm ../build/wasm/busytex.js build/wasm/
+                mkdir -p build-js/
+                cp ../build-js/BusytexAsync.browser.js build-js/
+                mkdir -p typescript/test/assets
+                cp ../typescript/test/assets/* typescript/test/assets/
+
+            - uses: actions/upload-pages-artifact@v2
+              with:
+                path: $GITHUB_WORKSPACE/pages
diff --git a/example/README.md b/example/README.md
diff --git a/example/assets/test.png b/example/assets/test.png
diff --git a/example/assets/test.svg b/example/assets/test.svg
diff --git a/example/assets/test.txt b/example/assets/test.txt
diff --git a/example/example.bib b/example/example.bib
diff --git a/example/example.html b/example/example.html
diff --git a/example/example.py b/example/example.py
diff --git a/example/example.sh b/example/example.sh
diff --git a/example/example.tex b/example/example.tex
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,16 @@
+<html>
+
+<head>
+    <title>Busytex Async</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+    <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>
+    <script data-type="module" type="text/babel" src="index.jsx"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/example/index.jsx b/example/index.jsx
@@ -0,0 +1,55 @@
+const initialEditorText = await fetch("../typescript/test/assets/test.tex").then((result) => result.text());
+
+const worker = new Worker("worker.js");
+worker.postMessage({ type: "initialize" });
+
+let numMessages = 0;
+
+function DemoEditor() {
+    const [editorText, setEditorText] = React.useState(initialEditorText);
+    const [isCompiling, setIsCompiling] = React.useState(false);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    const [logContent, setLogContent] = React.useState([]);
+    const [pdfDataUrl, setPdfDataUrl] = React.useState("");
+    const logEndRef = React.createRef();
+
+    React.useEffect(() => {
+        logEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    });
+
+    worker.onmessage = (event) => {
+        console.log("Main thread recieved", event)
+        if (event.data.type === "initialized") {
+            setIsInitialized(true);
+        } else if (event.data.type === "print") {
+            setLogContent([...logContent, <p className="m-0 p-0 text-monospace" key={numMessages++}>{event.data.message}</p>]);
+        } else if (event.data.type === "printErr") {
+            setLogContent([...logContent, <p className="m-0 p-0 text-monospace text-danger" key={numMessages++}>{event.data.message}</p>]);
+        } else if (event.data.type === "compiled") {
+            setIsCompiling(false);
+            setPdfDataUrl(event.data.pdf);
+            setLogContent([...logContent, <p className="m-0 p-0 text-monospace text-success" key={numMessages++}>Compile done!</p>]);
+        }
+    }
+
+    return <div className="container">
+        <div className="row mt-3">
+            <div className="col">
+                <button onClick={() => { worker.postMessage({type: "compile", tex: editorText}); setIsCompiling(true); }} disabled={isCompiling || !isInitialized}>Compile</button>
+                { !(isInitialized) && <span>Initializing WASM, please wait...</span> }
+                { pdfDataUrl!="" && <a download="main.pdf" href={pdfDataUrl}>Download PDF</a> }
+            </div>
+        </div>
+        <div className="row mt-3 mh-75 h-75">
+            <textarea className="col mh-100"  style={{fontFamily:"monospace"}} onChange={(e) => setEditorText(e.target.value)} value={editorText}></textarea>
+            <div className="col mh-100 overflow-auto">{logContent}<div ref={logEndRef} /></div>
+        </div>
+    </div>;
+}
+
+
+const root = ReactDOM.render(
+    <DemoEditor />,
+    document.body
+);
+