feat: use different color schemes depending on the language

public/css/global.css

@@ -19,6 +19,9 @@
 
 :root {
   --c-thp: #f472b6;
+  --c-php: #4f5b93;
+  --c-html: #dc4a20;
+  --c-zig: #f7a41d;
 
   --font-display: "Atkinson Hyperlegible", sans-serif;
   --font-body: "Atkinson Hyperlegible", sans-serif;

public/css/xcode-colors.css

@@ -27,6 +27,48 @@
   --code-theme-punctuation: #dedede;
 }
 
+.language-html {
+  --code-theme-border-color: var(--c-html);
+}
+
+.language-zig {
+  --code-theme-border-color: var(--c-zig);
+}
+
+.language-php {
+    --code-theme-bg-color: rgb(7, 9, 15);
+    --code-theme-border-color: var(--c-php);
+}
+
+.language-ebnf, .language-c {
+  --code-theme-bg-color: rgb(7, 9, 15);
+}
+
+@media (prefers-color-scheme: light) {
+  .language-ebnf, .language-c {
+    --code-theme-bg-color: #eff1f5;
+  }
+
+ .language-php {
+    --code-theme-bg-color: white;
+    --code-theme-border-color: var(--c-php);
+    --code-theme-comment: rgb(79,91,147);
+    /* number */
+    --code-theme-c1: #336699;
+    /* keyword */
+    --code-theme-c2: #669933;
+    --code-theme-c3: #39adb5;
+    /* string */
+    --code-theme-c4: #cc3333;
+    /* declaration */
+    --code-theme-c5: #336699;
+    /* function */
+    --code-theme-c7: #336699;
+
+    --code-theme-punctuation: #669933;
+  }
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     --code-theme-color: #3a3a3a;

src/layouts/thpHighlighter.ts

@@ -11,12 +11,14 @@ export function highlightOnDom() {
 
     let indicator_bg_class = "";
     if (language === "php") {
-      indicator_bg_class = "bg-[#4f5b93]";
+      indicator_bg_class = "bg-[var(--c-php)] text-white";
     } else if (language === "html") {
-      indicator_bg_class = "bg-[#dc4a20]";
+      indicator_bg_class = "bg-[var(--c-html)] text-white";
+    } else if (language === "zig") {
+      indicator_bg_class = "bg-[var(--c-zig)] text-black";
     }
 
-    indicator.className = `absolute top-1 right-0 inline-block text-sm select-none opacity-85 ${indicator_bg_class} px-2 rounded-full`;
+    indicator.className = `absolute top-0 right-0 inline-block text-sm select-none opacity-85 ${indicator_bg_class} px-2 rounded-bl-md`;
     indicator.innerText = language;
     pre_el.appendChild(indicator);
   }

src/pages/en/v0.0.1/spec/index.mdx

@@ -18,8 +18,7 @@ type system, better syntax and semantics, and better integration with tooling.
 ## Compiler architecture
 
 <Info>
-This is subject to change. At this moment, only Lexical Analysis is
-being worked on.
+This is subject to change. We are still rewriting from Rust to Zig.
 </Info>
 
 The compiler will have 5 phases:
@@ -47,7 +46,7 @@ Using CRLF will lead to a compiler error.
 This document uses a modified version of EBNF which allows the use of
 RegExp-like modifiers. An example is as follows:
 
-```abnf
+```ebnf
 ; single line comments
 
 literal       = "a"
@@ -180,7 +179,7 @@ does so.
 
 ## Basic characters
 
-```abnf
+```ebnf
 newline = "\n"
 character = '\0'..'\255' ; any ASCII character
 
@@ -202,6 +201,32 @@ operator_char    = "+" | "-" | "=" | "*" | "!" | "/" | "|"
 
 ## Tokens
 
+This is a summary of all tokens:
+
+```zig
+pub const TokenType = enum {
+    Int,
+    Float,
+    Identifier,
+    Datatype,
+    Operator,
+    Comment,
+    String,
+    // grouping signs
+    LeftParen,
+    RightParen,
+    LeftBracket,
+    RightBracket,
+    LeftBrace,
+    RightBrace,
+    // punctiation that carries special meaning
+    Comma,
+    Newline,
+    // Each keyword will have its own token
+};
+```
+
+
 ### Number
 
 A decimal integer **cannot** have a leading zero. This: `0644` is
@@ -237,7 +262,7 @@ Float = decimal_digit+, ".", decimal_digit+, scientific_notation?
 scientific_notation = "e", ("+" | "-"), decimal_digit+
 ```
 
-## Identifier & Datatypes
+### Identifier & Datatypes
 
 ```ebnf
 Identifier        = (underscore | lowercase_letter), identifier_letter*
@@ -249,7 +274,7 @@ identifier_letter = underscore | lowercase_letter | uppercase_letter | decimal_d
 Datatype = uppercase_letter, indentifier_letter*
 ```
 
-## Operator
+### Operator
 
 If 2 or more operator chars are together, they count as a single operator. That is,
 `+-` always becomes a single token, not 2 `+` `-` tokens. The lexer is not aware of
@@ -259,12 +284,12 @@ any operator.
 Operator = operator_char+
 ```
 
-## Comments
+### Comments
 
 At this time, only single line comments are allowed.
 
 
-## Strings
+### Strings
 
 Strings in THP only use double quotes.
 
@@ -279,3 +304,48 @@ double_quote = '"'
 string_char  = any_except_newline_and_double_quote
 ```
 
+### Grouping signs
+
+Each grouping sign has its own token.
+
+```ebnf
+LeftParen = "("
+RightParen = ")"
+LeftBracket = "["
+RightBracket = "]"
+LeftBrace = "{"
+RightBrace = "}"
+```
+
+## Syntax & AST
+
+On this section of the grammar plain strings are used instead of
+keywords productions.
+
+### Variable binding
+
+Variable bindings have 2 forms: immutable & mutable.
+Immutable bindings use the `val` keyword, mutable bindings
+use `var`.
+
+Bindings can have type annotations, placed between the keyword and
+the identifier.
+
+If the binding is immutable and has a datatype, the `val` keyword
+can be dropped. Mutable bindings cannot drop the var keyword.
+
+
+
+```ebnf
+ImmutableBinding = "val", Datatype?, Identifier, "=", Expression
+                 |        Datatype,  Identifier, "=", Expression
+
+MutableBinding   = "var", Datatype?, Identifier, "=", Expression
+```
+
+### Expression
+
+
+
+
+