From 06472d13c6067eea6ac9cb64741558cbb95a1b2e Mon Sep 17 00:00:00 2001
From: Pagwin <pgp2024@pagwin.xyz>
Date: Thu, 24 Oct 2024 17:25:10 -0400
Subject: [PATCH] added highlighting functionality just need to setup the
 particular themes

---
 TODO                                   |  6 ++++-
 static/js/code_highlighting.mjs        | 37 ++++++++++++++++++++++++++
 static/js/code_highlighting_worker.mjs |  5 ++++
 templates/default.html                 |  1 +
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 static/js/code_highlighting.mjs
 create mode 100644 static/js/code_highlighting_worker.mjs

diff --git a/TODO b/TODO
index 3213396..d55bc63 100644
--- a/TODO
+++ b/TODO
@@ -2,7 +2,11 @@ get RSS feed up and running
 
 handle dark/light theming correctly (https://www.joshwcomeau.com/react/dark-mode/) seems useful for that
 
-get code blocks working properly, namely get them colored (probably with https://highlightjs.org/), maybe add a red border, consider https://github.com/highlightjs/highlight.js?tab=readme-ov-file#using-web-workers
+~~get code blocks working properly, namely get them colored (probably with https://highlightjs.org/), maybe add a red border, consider https://github.com/highlightjs/highlight.js?tab=readme-ov-file#using-web-workers~~
+
+get highlight js theme set to my preference, make sure to add nesting in CSS so it'll be active when the light/dark class is active
+    https://highlightjs.org/examples
+    https://github.com/highlightjs/base16-highlightjs/blob/main/themes/google-light.css
 
 ico?
 
diff --git a/static/js/code_highlighting.mjs b/static/js/code_highlighting.mjs
new file mode 100644
index 0000000..bf3efde
--- /dev/null
+++ b/static/js/code_highlighting.mjs
@@ -0,0 +1,37 @@
+// setup web worker to avoid causing issues for the rendering thread
+async function setup(){
+    // start fetching css sooner rather than latter
+    const baseCssProm = fetch("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css").then(res=>res.text());
+    // TODO: pick light and dark themes and specify their fetch location
+    const lightCssProm = fetch("").then(res=>res.text());
+    const darkCssProm = fetch("").then(res=>res.text());
+
+    const code = document.querySelectorAll("pre.sourceCode code");
+    const worker = new Worker('/static/js/code_highlighting_worker.mjs');
+    worker.onmessage = (event) => { 
+        for(let c of code){
+            c.innerHTML = event.data; 
+        }
+    }
+    for(let c of code){
+        worker.postMessage(c.textContent);
+    }
+
+    // setting up the css for highlighting with previously fetched css
+    const baseStylesheet = new CSSStyleSheet();
+    const lightThemeSheet = new CSSStyleSheet();
+    const darkThemeSheet = new CSSStyleSheet();
+
+    //shenanigans done to avoid awaiting each promise sequentially
+    await Promise.all([
+        (async()=>{return await baseStylesheet.replace(await baseCssProm)})(),
+        (async()=>{return await lightThemeSheet.replace(await lightCssProm)})(),
+        (async()=>{return await darkThemeSheet.replace(await darkCssProm)})(),
+    ]);
+    document.adoptedStyleSheets.push(baseStylesheet);
+    document.adoptedStyleSheets.push(lightThemeSheet);
+    document.adoptedStyleSheets.push(darkThemeSheet);
+
+}
+addEventListener('load', setup);
+if(document.readyState == "complete") await setup();
diff --git a/static/js/code_highlighting_worker.mjs b/static/js/code_highlighting_worker.mjs
new file mode 100644
index 0000000..aa4fb6d
--- /dev/null
+++ b/static/js/code_highlighting_worker.mjs
@@ -0,0 +1,5 @@
+onmessage = (event) => {
+  importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js');
+  const result = self.hljs.highlightAuto(event.data);
+  postMessage(result.value);
+};
diff --git a/templates/default.html b/templates/default.html
index 661bc21..809b438 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -7,6 +7,7 @@
     <title>{{{title}}} · Pagwin's website</title>
     <link rel="stylesheet" type="text/css" href="/static/css/default.css" />
     <link rel="alternate" type="application/rss+xml" title="RSS" href="https://pagwin.xyz/index.xml">
+    <script type="module" src="/static/js/code_highlighting.mjs"></script>
 </head>
 
 <body class="dark">