diff --git a/src/plugins/ts-compiler.ts b/src/plugins/ts-compiler.ts index 8499f76..8e9de85 100644 --- a/src/plugins/ts-compiler.ts +++ b/src/plugins/ts-compiler.ts @@ -11,37 +11,46 @@ export default class TSCompiler extends Plugin { minify = false; constructor() { super(); - if(process.argv.includes("--prod")) { + if (process.argv.includes("--prod")) { this.minify = true; } } async rewriteFile(file: string, filePath: string) { - - const result = await esbuild.build({ - stdin: { - contents: file, - resolveDir: filePath.split("/")?.slice(0,-1).join("/"), - sourcefile: filePath.split("/").at(-1), - 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, - }); + let result; + try { + result = await esbuild.build({ + stdin: { + contents: file, + resolveDir: filePath.split("/")?.slice(0, -1).join("/"), + sourcefile: filePath.split("/").at(-1), + 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, + }); + } catch (e) { + console.error(e); + console.log("Errored!"); + return; + } - if(result.errors.length != 0) { - console.log("TS compiler errored.") - result.errors.forEach(element => { - console.error(element); - }); + if (result.errors.length != 0) { + console.log("TS compiler errored."); + result.errors.forEach((element) => { + console.error(element); + }); } else { const output = result.outputFiles[0].contents; - return (new TextDecoder()).decode(output); + return new TextDecoder().decode(output); } } } diff --git a/src/plugins/variables.ts b/src/plugins/variables.ts index 91bd8ce..a73abfe 100644 --- a/src/plugins/variables.ts +++ b/src/plugins/variables.ts @@ -13,7 +13,7 @@ export default class Variables extends Plugin { constructor() { super(); this.variables["__BLOG_POSTS__"] = JSON.stringify( - fs.readdirSync("./website/blogs") + fs.readdirSync("./website/blogs").map((z) => z.replace(".md", "")) ); const templatePath = path.resolve(__dirname, "../../website/templates"); if (fs.existsSync(templatePath)) { diff --git a/website/blog.html b/website/blog.html index 2f9dbad..2daa940 100644 --- a/website/blog.html +++ b/website/blog.html @@ -3,21 +3,7 @@ __TEMPLATE_HEAD__ -

sophie's blog

- -
Scroll to bottom for comments ↓
- -
- -
- +
diff --git a/website/scripts/blog.ts b/website/scripts/blog.ts deleted file mode 100644 index 3f40308..0000000 --- a/website/scripts/blog.ts +++ /dev/null @@ -1,38 +0,0 @@ -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(); diff --git a/website/scripts/blog.tsx b/website/scripts/blog.tsx new file mode 100644 index 0000000..39e3aef --- /dev/null +++ b/website/scripts/blog.tsx @@ -0,0 +1,84 @@ +import Nano, { Component, Fragment, Suspense } from "nano-jsx" +import { BlogPage } from "./blog_page"; +import { Giscus } from "./giscus"; +import { useState } from "nano-jsx/esm/hooks/useState.js"; + +export interface Metadata { + title: string; + // time in seconds since epoch (*1000 for MS) + time: number; + filename: string; +} + +//@ts-expect-error +const blog_posts = __BLOG_POSTS__ as string[]; + +const fetchBlogPosts = async () => { + const metadatas: Metadata[] = []; + + for await (const blog of blog_posts) { + const req = await fetch("/blogs/" + blog + ".json"); + const json = await req.json() + json.filename = blog; + metadatas.push(json); + } + + return metadatas +} + +class Main extends Component { + async didMount() { + const blogPosts = await fetchBlogPosts() + this.update(blogPosts) + } + + list(metadatas: Metadata[]) { + const pageOpen = useState(undefined, "pageOpen"); + console.log("abcd") + return + } + render(blogPosts: Metadata[]) { + + const pageOpen = useState(undefined, "pageOpen"); + const md = new URLSearchParams(location.search).get("md"); + + if (blogPosts) { + const found = blogPosts.find(z => z.filename == md); + if (found) { + console.log(found); + pageOpen[1](found); + //@ts-expect-error + pageOpen[0] = found; + } + } + + if (pageOpen[0]) { + return + } + + + return <> +

sophie's blog

+
Scroll to bottom for comments ↓
+ + {() => { + if (blogPosts) return this.list(blogPosts) + else return

Loading...

+ }} + + + } +} + +Nano.render(
, document.getElementById("root")) diff --git a/website/scripts/blog_page.tsx b/website/scripts/blog_page.tsx new file mode 100644 index 0000000..710a666 --- /dev/null +++ b/website/scripts/blog_page.tsx @@ -0,0 +1,43 @@ +import { Component } from "nano-jsx" +import { Giscus } from "./giscus"; +import { useState } from "nano-jsx/esm/hooks/useState.js"; +import type { Metadata } from "./blog"; + +const fetchBlogPost = async (metadata: Metadata) => { + return (await fetch("/blogs/" + metadata.filename + ".html")).text(); +} + +export class BlogPage extends Component { + metadata: Metadata; + + constructor(props: { metadata: Metadata }) { + super(props); + this.metadata = props.metadata; + } + + async didMount() { + const blogPost = await fetchBlogPost(this.metadata) + this.update(blogPost) + } + + render(blogPost: string) { + const pageOpen = useState(undefined, "pageOpen"); + history.replaceState({}, "", location.pathname+"?md=" + this.metadata.filename); + + return <> +

sophie's blog

+ { + pageOpen[1](undefined); + this.update(); + }}>return back? + + { + () => { + if (!blogPost) return

Loading...

+ else return
+ } + } + + + } +} \ No newline at end of file diff --git a/website/scripts/giscus.tsx b/website/scripts/giscus.tsx new file mode 100644 index 0000000..16910c5 --- /dev/null +++ b/website/scripts/giscus.tsx @@ -0,0 +1,24 @@ +export function Giscus({searchTerm}: {searchTerm: string}) { + let config: Record = { + "repo": "fucksophie/blog_comments", + "repo-id": "R_kgDOMY4cfw", + "category": "General", + "category-id": "DIC_kwDOMY4cf84ChCRR", + "mapping": "specific", + "term": searchTerm, + "strict": "1", + "reactions-enabled": "1", + "emit-metadata": "0", + "input-position": "bottom", + "theme": "noborder_dark", + "lang": "en", + "loading": "lazy", + } + for(const x of Object.entries(config)) { + delete config[x[0]]; + config["data-"+x[0]] = x[1]; + } + return
+ +
+} \ No newline at end of file