improve file structure + add TSX/JSX support

global.d.ts

@@ -8,5 +8,8 @@ export as namespace p5;
 declare global {
     interface Window {
         p5: typeof P5,
+        setup: () => void,
+        preload: () => void,
+        draw: () => void
     }
 }

package.json

@@ -18,6 +18,7 @@
     "esbuild": "^0.23.0",
     "marked": "^13.0.2",
     "mime-types": "^2.1.35",
+    "nano-jsx": "^0.1.0",
     "p5": "^1.9.4"
   }
 }

src/plugins/ts-compiler.ts

@@ -20,12 +20,18 @@ export default class TSCompiler extends Plugin {
     const result = await esbuild.build({
       stdin: {
         contents: file,
+        resolveDir: filePath.split("/")?.slice(0,-1).join("/"),
         sourcefile: filePath.split("/").at(-1),
-        loader: "ts"
+        loader: filePath.split("/").at(-1)?.split(".").at(-1) as "ts"|"tsx"|"jsx"
       },
+      jsxFragment: "Fragment",
+      jsxFactory: "Nano.h",
+      jsxImportSource: "nano-jsx",
+      jsx: "transform",
       write: false,
+      bundle: true,
       outdir: 'out',
-      minify: this.minify
+      minify: this.minify,
     });
     
     if(result.errors.length != 0) {

tsconfig.json

@@ -6,6 +6,7 @@
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
+    "jsxImportSource": "nano-jsx/esm",
     "allowJs": true,
 
     // Bundler mode

website/blog.html

@@ -18,7 +18,7 @@ __TEMPLATE_HEAD__
         data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="noborder_dark"
         data-lang="en" data-loading="lazy" crossorigin="anonymous" async>
         </script>
-    <script type="module" src="blog.js"></script>
+    <script type="module" src="scripts/blog.js"></script>
 </body>
 
 </html>

website/blog.ts

@@ -1,34 +0,0 @@
-const uriParams = new URLSearchParams(location.search);
-if (uriParams.has("md")) {
-  const error = document.getElementById("error")!;
-  const renderer = document.getElementById("renderer")!;
-  const return_back = document.getElementById("return_back")!;
-  const req = await fetch("/blogs/" + uriParams.get("md") + ".html");
-  const giscus = document.querySelector(".giscus")! as HTMLDivElement;
-  if (req.status != 200) {
-    error.style.display = "block";
-    giscus.style.display = "none";
-  } else {
-    let text = await req.text();
-    renderer.innerHTML = text;
-  }
-  return_back.style.display = "block";
-} else {
-  //@ts-expect-error
-  const blog_posts = __BLOG_POSTS__.map(z => z.replace(".md", ""))
-  const html_list = document.getElementById("html_list")!;
-  html_list.style.display = "block";
-  for (const blog_post of blog_posts) {
-    const req = await fetch("/blogs/" + blog_post + ".json");
-    const metadata = await req.json();
-    const li = document.createElement("li");
-    const a = document.createElement("a");
-    a.href = "/blog.html?md=" + encodeURIComponent(blog_post);
-    a.innerText = `${metadata.title} (created ${new Date(
-      metadata.time * 1000
-      //@ts-expect-error
-    ).toGMTString()})`;
-    li.appendChild(a);
-    html_list.appendChild(li);
-  }
-}

website/index.html

@@ -4,8 +4,8 @@ __TEMPLATE_HEAD__
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
 
-    <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="assets/style.css">
-    <script src="index.js"></script>
+    <script src="scripts/index.js"></script>
 
 </head>
 
@@ -29,7 +29,7 @@ __TEMPLATE_HEAD__
                 href="https://github.com/fucksophie">github (view projects here)</a>, <a
                 href="https://git.sad.ovh/sophie">sadgit</a>, or <a href="https://bark.lgbt/@yourfriend">mastodon</a>
             <br>
-            <a href="/key.txt">Here's my PGP key.</a>
+            <a href="assets/key.txt">Here's my PGP key.</a>
         </span>
         <span id="donations" style="display:none">
             <ul>
@@ -42,7 +42,7 @@ __TEMPLATE_HEAD__
             </ul>
             OR <a href="https://ko-fi.com/sophskofi">kofi</a> OR, dm for paypal
             <br>
-            <img src="/sticker.webp" alt="monero-chan" style="width:128px;">
+            <img src="assets/sticker.webp" alt="monero-chan" style="width:128px;">
         </span>
     </span>
 

website/scripts/blog.ts

@@ -0,0 +1,38 @@
+async function blog() {
+  const uriParams = new URLSearchParams(location.search);
+  if (uriParams.has("md")) {
+    const error = document.getElementById("error")!;
+    const renderer = document.getElementById("renderer")!;
+    const return_back = document.getElementById("return_back")!;
+    const req = await fetch("/blogs/" + uriParams.get("md") + ".html");
+    const giscus = document.querySelector(".giscus")! as HTMLDivElement;
+    if (req.status != 200) {
+      error.style.display = "block";
+      giscus.style.display = "none";
+    } else {
+      let text = await req.text();
+      renderer.innerHTML = text;
+    }
+    return_back.style.display = "block";
+  } else {
+    //@ts-expect-error
+    const blog_posts = __BLOG_POSTS__.map((z) => z.replace(".md", ""));
+    const html_list = document.getElementById("html_list")!;
+    html_list.style.display = "block";
+    for (const blog_post of blog_posts) {
+      const req = await fetch("/blogs/" + blog_post + ".json");
+      const metadata = await req.json();
+      const li = document.createElement("li");
+      const a = document.createElement("a");
+      a.href = "/blog.html?md=" + encodeURIComponent(blog_post);
+      a.innerText = `${metadata.title} (created ${new Date(
+        metadata.time * 1000
+        //@ts-expect-error
+      ).toGMTString()})`;
+      li.appendChild(a);
+      html_list.appendChild(li);
+    }
+  }
+}
+
+blog();

website/scripts/index.ts

@@ -9,6 +9,8 @@
   https://creativecommons.org/licenses/by-sa/3.0/deed.en
 */
 
+import type { Keyboard } from "puppeteer";
+
 /*
   You won't believe what they say about us, bad PR
   Bad chemistry between the 9 and 3-Star
@@ -178,7 +180,7 @@ class Particle {
   }
 }
 
-function preload() {
+window.preload = function() {
   font = loadFont("https://rsms.me/inter/font-files/InterVariable.ttf");
   darkTheme = color(34, 40, 49, 255);
   lightTheme = color(238, 238, 238, 255);
@@ -262,11 +264,11 @@ function nextWord(word: string) {
   }
 }
 
-function windowResized() {
+window.windowResized = function() {
   resizeCanvas(windowWidth, windowHeight);
 }
 
-function setup() {
+window.setup = function() {
   // selection
   let pages = ["home", "donations"];
   let selected = "home";
@@ -335,8 +337,10 @@ function setup() {
     }
   }, 1)
 }
-function keyPressed(a: KeyboardEvent) {
+window.keyPressed = function (a) {
-  if (a.code == "Space") {
+  if(!a) return;
+  const event = a as KeyboardEvent;
+  if (event.code == "Space") {
     if (darkMode) {
       bgColor = lightTheme;
     } else {
@@ -347,7 +351,7 @@ function keyPressed(a: KeyboardEvent) {
     localStorage.setItem("theme", darkMode ? "dark" : "light");
   }
 }
-function draw() {
+window.draw = function () {
   fill(bgColor);
   noStroke();
   rect(0, 0, width * 2, height * 2);
@@ -370,7 +374,7 @@ function draw() {
   }
 }
 
-function mouseDragged() {
+window.mouseDragged = function () {
   if (mouseButton == LEFT) {
     for (const particle of particles) {
       if (dist(particle.pos.x, particle.pos.y, mouseX, mouseY) < 50) {