Add semantic errors display from the compiler

public/css/pages.css

@@ -48,7 +48,7 @@
     height: 0;
     position: relative;
     right: 2.25rem;
-    opacity: 0.1;
+    opacity: 0.2;
 }
 
 .markdown ul {
@@ -73,5 +73,10 @@
 }
 
 .markdown blockquote {
-    color: red
+    color: red;
+}
+
+.two-column a {
+    color: #2563eb;
+    text-decoration: underline;
 }

src/components/TwoColumn.astro

@@ -1,3 +1,3 @@
-<div class="grid grid-cols-[10rem_auto]">
+<div class="two-column grid grid-cols-[10rem_auto]">
     <slot />
 </div>

src/lexer/highlighter.ts

@@ -34,6 +34,7 @@ type TokenType =
 export interface Err {
     Lex?: LexError
     Syntax?: SyntaxError
+    Semantic?: SemanticError
 }
 
 export interface LexError {
@@ -47,8 +48,15 @@ export interface SyntaxError {
     reason: string
 }
 
+export interface SemanticError {
+    error_start: number
+    error_end: number
+    reason: string
+}
+
 export interface TokenizeResult {
     Ok?: Token[],
+    SyntaxOnly?: [Token[], Err],
     TokensOnly?: [Token[], Err],
     Err?: Err,
 }
@@ -72,6 +80,10 @@ export async function native_highlighter(code: string): Promise<[string, string,
         const [tokens, error] = result.TokensOnly!;
         return syntax_error_highlighter(formatted_code, tokens, error.Syntax!);
     }
+    else if (result.SyntaxOnly) {
+        const [tokens, error] = result.SyntaxOnly!;
+        return semantic_error_highlighter(formatted_code, tokens, error.Semantic!);
+    }
 
     const tokens = result.Ok!;
 
@@ -107,6 +119,13 @@ function syntax_error_highlighter(code: string, tokens: Array<Token>, error: Syn
     return [highlighted, "Syntax", error_message];
 }
 
+function semantic_error_highlighter(code: string, tokens: Array<Token>, error: SyntaxError): [string, string, string] {
+    const highlighted = highlight_tokens(code, tokens, error.error_start, error.error_end);
+
+    const error_message = `${error.reason} from position ${error.error_start} to ${error.error_end}`;
+    return [highlighted, "Semantic", error_message];
+}
+
 function compiler_error(code: string, error: Error): [string, string, string] {
     return [code, "Fatal Compiler", error.message];
 }

src/pages/api/std/index.mdx

@@ -2,6 +2,7 @@
 layout: ../../../layouts/ApiLayout.astro
 ---
 import TwoColumn from "../../../components/TwoColumn.astro"
+import Code from "../../../components/Code.astro"
 
 # module `std`
 
@@ -27,12 +28,12 @@ if (str_contains("abc", "a")) {
 In THP there is no `str_contains` function. Instead, you'd call the
 `contains` method on the string:
 
-```thp
+<Code thpcode={`
 if "abc".contains("a")
 {
     // ...
 }
-```
+`} />
 
 ## On naming
 
@@ -55,9 +56,9 @@ If you need to use a PHP class with a lowercase name you can use the following s
 class animal {}
 ```
 
-```thp
+<Code thpcode={`
 val my_animal = 'animal()
-```
+`} />
 
 
 ## Datatypes
@@ -86,4 +87,12 @@ A [IEEE 754](https://en.wikipedia.org/wiki/IEEE_754) double precision floating p
 
 </TwoColumn>
 
+## Global functions
+
+<TwoColumn>
+[`print`](/api/std/print/)
+
+Prints text into stdout.
+</TwoColumn>
+
 

src/pages/api/std/print.mdx

@@ -0,0 +1,29 @@
+---
+layout: ../../../layouts/ApiLayout.astro
+---
+import TwoColumn from "../../../components/TwoColumn.astro"
+import Code from "../../../components/Code.astro"
+
+# `print`
+
+Prints to stdout.
+
+## Signature
+
+<Code thpcode={`
+fun print(String value) {}
+`} />
+
+## Description
+
+Prints a single `String` into stdout. Doesn't return anything.
+
+## Examples
+
+<Code thpcode={`
+print("Hello world!")
+`} />
+
+
+
+