From ebf62bcd5cd7a1ebb846471e4334f614ccd89e87 Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 5 Jul 2024 09:40:10 -0500 Subject: [PATCH] Remove client side syntax highlighting --- src/components/Code.astro | 6 ++- src/components/CodeEditor.astro | 6 +-- src/components/InteractiveCode.astro | 4 +- src/components/utils.ts | 64 ---------------------------- src/layouts/thpHighlighter.ts | 46 +------------------- src/lexer/highlighter.ts | 9 +--- src/pages/index.astro | 60 +++++++++++--------------- src/pages/learn/templating/intro.mdx | 3 -- 8 files changed, 37 insertions(+), 161 deletions(-) diff --git a/src/components/Code.astro b/src/components/Code.astro index 6a25d38..eb3c1c1 100644 --- a/src/components/Code.astro +++ b/src/components/Code.astro @@ -1,7 +1,11 @@ --- import { leftTrimDedent } from "./utils"; +import { thp_highlighter } from "../lexer/highlighter"; const { thpcode } = Astro.props; +const html_code = thp_highlighter(leftTrimDedent(thpcode).join("\n")); --- -
{leftTrimDedent(thpcode).join("\n")}
+
thp
diff --git a/src/components/CodeEditor.astro b/src/components/CodeEditor.astro index d6c620e..0cf77a1 100644 --- a/src/components/CodeEditor.astro +++ b/src/components/CodeEditor.astro @@ -1,13 +1,11 @@ --- -import { trimAndDedent } from "./utils"; +import Code from "./Code.astro" const { thpcode } = Astro.props; ---
- 
{trimAndDedent(thpcode).join("\n")}
+
diff --git a/src/components/InteractiveCode.astro b/src/components/InteractiveCode.astro index d980a57..1277734 100644 --- a/src/components/InteractiveCode.astro +++ b/src/components/InteractiveCode.astro @@ -2,7 +2,7 @@ import { lex } from "../lexer/lexer"; import type { Instruction } from "../thp_machine/machine_parser"; import { parse_str } from "../thp_machine/machine_parser"; -import { trimAndDedent } from "./utils"; +import { leftTrimDedent } from "./utils"; const { code, steps } = Astro.props; function highlightCode(lines: Array): string { @@ -31,7 +31,7 @@ function highlightCode(lines: Array): string { return outLines.join("\n"); } -const codeHtml = highlightCode(trimAndDedent(code)); +const codeHtml = highlightCode(leftTrimDedent(code)); let instructionSet: Array>; try { instructionSet = parse_str(steps); diff --git a/src/components/utils.ts b/src/components/utils.ts index 09402c0..88c9213 100644 --- a/src/components/utils.ts +++ b/src/components/utils.ts @@ -5,70 +5,6 @@ * - Picks the indentation level from the first non-white line * - Dedents the following lines */ -export function trimAndDedent(input: string): Array { - let lines = input.split("\n"); - - // Remove empty lines at the start - while (lines[0] === "") { - lines = lines.slice(1); - } - - // Get indentation level - let indentationLevel = 0; - for (const char of lines[0]!) { - if (char === " ") { - indentationLevel += 1; - } else { - break; - } - } - - // Enforce indentation, or trim - for (let i = 0; i < lines.length; i += 1) { - // If the line is empty, continue - const characters = lines[i]!.split(""); - if (characters.length === 0) { - continue; - } - - // If all characters are whitespace, append just a newline - const nonWhitespace = characters.find((x) => x !== " "); - if (nonWhitespace === undefined) { - lines[i] = ""; - continue; - } - - // Enforce indentation - if (characters.length < indentationLevel) { - throw new Error("Invalid indentation while parsing THP code: " + lines[i]); - } - let currentIndentation = 0; - for (const c of characters) { - if (c === " ") { currentIndentation += 1 } - else { break; } - } - if (currentIndentation < indentationLevel) { - throw new Error("Invalid indentation while parsing THP code: " + lines[i]); - } - - lines[i] = characters.slice(4).join(""); - } - - - // Remove empty lines at the end - let endPosition = lines.length - 1; - while (true) { - if (lines[endPosition] === "") { - lines = lines.slice(0, -1); - endPosition -= 1; - } else { - break; - } - } - - return lines; -} - export function leftTrimDedent(input: string): Array { let lines = input.split("\n"); let output: Array = []; diff --git a/src/layouts/thpHighlighter.ts b/src/layouts/thpHighlighter.ts index 98442a4..56907cb 100644 --- a/src/layouts/thpHighlighter.ts +++ b/src/layouts/thpHighlighter.ts @@ -1,48 +1,4 @@ import { thp_highlighter, CodeJar } from "../lexer/highlighter"; -/** - * Highlights all THP code snippets mounted in the DOM with class .language-thp - * - * It assumes that the code is inside: 
...
- */
-export function highlightOnDom() {
-    const code_elements = document.querySelectorAll("code.language-thp");
-
-    for (const e of [...code_elements]) {
-        const el = e as HTMLElement;
-        // Some elements with .language-thp don't want to be processed
-        if (e.getAttribute("data-disabled") !== null) {
-            continue;
-        }
-
-        const pre_parent = el.parentElement!;
-        const new_div = document.createElement("div");
-        let code = el.innerHTML;
-
-        // Replace all < with < and all > with >
-        code = code.replace(/</g, "<").replace(/>/g, ">");
-
-        el.parentElement!.className = "language-thp";
-        pre_parent.removeChild(el);
-        pre_parent.appendChild(new_div);
-
-        // Create and append a language name indicator
-
-        CodeJar(new_div, thp_highlighter, {
-            tab: "    ",
-        }).updateCode(code);
-    }
-
-    const pre_elements = document.querySelectorAll("pre");
-    for (const pre_el of pre_elements) {
-        const language = pre_el.getAttribute("data-language");
-        if (language === null) { continue; }
-
-        // Create a visual indicador
-        const indicator = document.createElement("span");
-        indicator.className = "absolute top-2 right-2 inline-block text-sm select-none opacity-75";
-        indicator.innerText = language;
-        pre_el.appendChild(indicator);
-    }
-}
+export function highlightOnDom() {}
 
diff --git a/src/lexer/highlighter.ts b/src/lexer/highlighter.ts
index 5509a79..8c7d1b2 100644
--- a/src/lexer/highlighter.ts
+++ b/src/lexer/highlighter.ts
@@ -1,9 +1,6 @@
 import { lex } from "./lexer";
-import {CodeJar as Codejar} from "codejar";
-
-export function thp_highlighter(editor: any) {
-    let code: string = editor.textContent;
 
+export function thp_highlighter(code: string) {
     let tokens = lex(code);
 
     let highlighted_code = "";
@@ -12,7 +9,5 @@ export function thp_highlighter(editor: any) {
         highlighted_code += `${token.v}`;
     }
 
-    editor.innerHTML = highlighted_code;
+    return highlighted_code;
 }
-
-export const CodeJar = Codejar;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index afa5390..45732a9 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,28 @@
 import BaseLayout from "../layouts/BaseLayout.astro";
 import Navbar from "../components/Navbar.astro";
 import HeroSection from "../components/HeroSection.astro";
+import { thp_highlighter } from "../lexer/highlighter";
+import { leftTrimDedent } from "../components/utils";
+
+const thpcode = `union Animal {
+	Dog(String),
+	Cat(String, Int),
+}
+
+val cat_name = Post::get("cat_name") ?? "Michifu"
+val my_cat = Animal::Cat(cat_name, 9)
+
+try change_fur_color(cat) else die("Not a cat")
+
+match random_animal()
+case Dog(name)
+{ 
+	print("{name} has 1 live ")
+}
+case Cat(name, lives)
+{
+	print("{name} has {lives}")
+}`;
 ---
 
 
@@ -95,7 +117,9 @@ import HeroSection from "../components/HeroSection.astro";
                         
                     
                     

-                    

+                    

+                        

+                    

                 
             
         
@@ -194,38 +218,4 @@ import HeroSection from "../components/HeroSection.astro";
         

         Nullable types must be explicitly checked before using them.
     
-
-    
-    
 
diff --git a/src/pages/learn/templating/intro.mdx b/src/pages/learn/templating/intro.mdx
index 0bfe4b5..d240510 100644
--- a/src/pages/learn/templating/intro.mdx
+++ b/src/pages/learn/templating/intro.mdx
@@ -101,6 +101,3 @@ fun TransactionItem(Transaction t) {
 `} />
 
 
-
-
-