improve file structure + add TSX/JSX support
All checks were successful
/ test (push) Successful in 14s

This commit is contained in:
Soph :3 2024-07-23 10:12:54 +03:00
parent 013c7cef7f
commit a7aaff537f
Signed by: sophie
GPG key ID: EDA5D222A0C270F2
13 changed files with 67 additions and 48 deletions

BIN
bun.lockb

Binary file not shown.

3
global.d.ts vendored
View file

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

View file

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

View file

@ -20,12 +20,18 @@ export default class TSCompiler extends Plugin {
const result = await esbuild.build({ const result = await esbuild.build({
stdin: { stdin: {
contents: file, contents: file,
resolveDir: filePath.split("/")?.slice(0,-1).join("/"),
sourcefile: filePath.split("/").at(-1), 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, write: false,
bundle: true,
outdir: 'out', outdir: 'out',
minify: this.minify minify: this.minify,
}); });
if(result.errors.length != 0) { if(result.errors.length != 0) {

View file

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

View file

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

View file

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

View file

@ -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);
}
}

View file

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

38
website/scripts/blog.ts Normal file
View file

@ -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();

View file

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