[Web] Simple manual linking of pages

doc-generator/Cargo.lock

@@ -242,6 +242,7 @@ dependencies = [
  "clap",
  "markdown",
  "misti",
+ "toml",
 ]
 
 [[package]]
@@ -265,6 +266,12 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "hashbrown"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
+
 [[package]]
 name = "heck"
 version = "0.4.1"
@@ -310,6 +317,16 @@ dependencies = [
  "cxx-build",
 ]
 
+[[package]]
+name = "indexmap"
+version = "1.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
+dependencies = [
+ "autocfg",
+ "hashbrown",
+]
+
 [[package]]
 name = "io-lifetimes"
 version = "1.0.9"
@@ -387,6 +404,12 @@ dependencies = [
  "unicode-id",
 ]
 
+[[package]]
+name = "memchr"
+version = "2.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
+
 [[package]]
 name = "misti"
 version = "0.0.4"
@@ -459,6 +482,21 @@ version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1792db035ce95be60c3f8853017b3999209281c24e2ba5bc8e59bf97a0c590c1"
 
+[[package]]
+name = "serde"
+version = "1.0.159"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c04e8343c3daeec41f58990b9d77068df31209f2af111e059e9fe9646693065"
+
+[[package]]
+name = "serde_spanned"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0efd8caf556a6cebd3b285caf480045fcc1ac04f6bd786b09a6f11af30c4fcf4"
+dependencies = [
+ "serde",
+]
+
 [[package]]
 name = "strsim"
 version = "0.10.0"
@@ -507,6 +545,40 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "toml"
+version = "0.7.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b403acf6f2bb0859c93c7f0d967cb4a75a7ac552100f9322faf64dc047669b21"
+dependencies = [
+ "serde",
+ "serde_spanned",
+ "toml_datetime",
+ "toml_edit",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "0.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3ab8ed2edee10b50132aed5f331333428b011c99402b5a534154ed15746f9622"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.19.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "239410c8609e8125456927e6707163a3b1fdb40561e4b803bc041f466ccfdc13"
+dependencies = [
+ "indexmap",
+ "serde",
+ "serde_spanned",
+ "toml_datetime",
+ "winnow",
+]
+
 [[package]]
 name = "unicode-id"
 version = "0.3.3"
@@ -696,3 +768,12 @@ name = "windows_x86_64_msvc"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
+
+[[package]]
+name = "winnow"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae8970b36c66498d8ff1d66685dc86b91b29db0c7739899012f63a63814b4b28"
+dependencies = [
+ "memchr",
+]

doc-generator/Cargo.toml

@@ -9,3 +9,5 @@ edition = "2021"
 misti = { path = "../compiler"}
 clap = { version = "4.2.0", features = ["derive"] }
 markdown = "1.0.0-alpha.7"
+toml = "0.7.3"
+

doc-generator/README.md

@@ -10,7 +10,7 @@ Rust code to generate HTML files from MD files.
 The binary is called like:
 
 ```sh
-generator --input /path/to/markdown/folder/ --output /path/to/static/folder
+generator --input /path/to/markdown/folder/ --output /path/to/static/folder/
 ```
 
 ## `markdown` folder
@@ -18,6 +18,42 @@ generator --input /path/to/markdown/folder/ --output /path/to/static/folder
 Contains the Markdown. All files inside are expected to be UTF-8 encoded
 markdown, and have the `.md` file extension.
 
+The markdown follows the CommonMark specification, but certain code blocks
+contain custom behaviour:
+
+### `meta`
+
+A code block with language `meta` contains text in TOML format that indicates
+metadata for the current page.
+
+````toml
+```meta
+title: "Title of the page"
+description: "Description of the page"
+```
+````
+
+- title: Used to create the title of the page with the format `{title} - Misti`
+- description: The description of the page, placed in a `<meta>` element in the `<head>`
+
+### `nav`
+
+Used to link to the previous/next page.
+
+````toml
+```nav
+[previous]
+href = "./relative/path/to/previous.html"
+title = "Title of previous page"
+
+[next]
+href = "./relative/path/to/previous.html"
+title = "Title of previous page"
+```
+````
+
+
+
 ## `static` folder
 
 Contains CSS, JS, and HTML templates. Here the MD files are written to

doc-generator/markdown/en/docs/latest/basics/function-calls.md

@@ -14,3 +14,14 @@ val remainder = substract(50, 30)
 val total = add(60, -30, 90)
 ```
 
+
+
+```nav
+[previous]
+href = "./simple-datatypes.html"
+title = "Datatypes"
+
+[next]
+href = "./operators.html"
+title = "Operators"
+```

doc-generator/markdown/en/docs/latest/basics/simple-datatypes.md

@@ -33,3 +33,14 @@ True and false
 true
 false
 ```
+
+```nav
+[previous]
+href = "./variables-and-constants.html"
+title = "Variables and constants"
+
+[next]
+href = "./function-calls.html"
+title = "Function calls"
+```
+

doc-generator/markdown/en/docs/latest/basics/variables-and-constants.md

@@ -106,3 +106,14 @@ val roi =
     val investment = 25000
     income / investment   // This will be the value of `roi`
 ```
+
+
+```nav
+[previous]
+href = "../"
+title = "Welcome"
+
+[next]
+href = "./simple-datatypes.html"
+title = "Datatypes"
+```

doc-generator/markdown/en/docs/latest/index.md

@@ -21,6 +21,8 @@ Such things will be noted in the documentation where neccesary.
 
 ## Syntax summary
 
+## Variables and constants
+
 ```misti
 //
 // Variables and constants
@@ -44,6 +46,8 @@ val roi =
     income / investment   // This will be the value of `roi`
 ```
 
+## Basic datatypes
+
 ```misti
 //
 // Basic datatypes
@@ -53,6 +57,8 @@ Bool boolean = true
 Str string = "John Doe"
 ```
 
+## Conditionals
+
 ```misti
 //
 // Conditionals
@@ -72,6 +78,8 @@ val response = if risk < 0.2 do "Go ahead" else "Don't"
 // There is no ternary conditional
 ```
 
+## Arrays
+
 ```misti
 //
 // Arrays
@@ -92,6 +100,8 @@ Array[Num] dates = Array(1990, 1995, 2014, 2015, 2017)
 //     instead of angle brackes.
 ```
 
+## Tuples
+
 ```misti
 //
 // Tuples
@@ -105,6 +115,8 @@ var #(name, age, isMarried) = person
 #(Str, Num, Bool) signature = #("John", 30, true)
 ```
 
+## Loops
+
 ```misti
 //
 // Loops
@@ -121,6 +133,8 @@ while condition do
     print("while")
 ```
 
+## Functions
+
 ```misti
 //
 // Functions
@@ -147,6 +161,7 @@ calculate(100, 0.25)  // "Your total is 75$"
 calculate(100)        // "Your total is 100$"
 ```
 
+## Objects
 
 ```misti
 //
@@ -178,6 +193,7 @@ val randomObject = #{
 }
 ```
 
+## Classes
 
 ```misti
 //
@@ -247,6 +263,8 @@ class Square(Num length) -> Rectangle(length, length) =
         console.log("A square with perimeter = {$perimeter()} and area = {$area()}")
 ```
 
+## Null safety
+
 ```misti
 //
 // Null safety
@@ -272,6 +290,8 @@ else
 Num? roi = divide(income, investment)
 ```
 
+## Error handling
+
 ```misti
 //
 // Error handling
@@ -295,6 +315,8 @@ try problematicExpression() with
     10
 ```
 
+## Pattern matching
+
 ```misti
 //
 // Pattern matching
@@ -336,6 +358,8 @@ match result with
     // reason is Str
 ```
 
+## JSX
+
 ```misti
 //
 // JSX
@@ -348,7 +372,11 @@ val list = items.map fun (item, count) {&lt;li key={count}>{item}&lt;/li>}
 
 
 
-
+```nav
+[next]
+href = "./basics/variables-and-constants.html"
+title = "Variables and constants"
+```
 
 
 

doc-generator/src/generator/code.rs

@@ -9,6 +9,10 @@ impl Printable for Code {
         let code = highlight(&self.value);
 
         if let Some(lang) = &self.lang {
+            if lang == "nav" {
+                return generate_nav_html(&self.value);
+            }
+
             format!("<pre class=\"language-{}\">{}</pre>", lang, code)
         } else {
             format!("<pre class=\"language-none\">{}</pre>", code)
@@ -19,3 +23,63 @@ impl Printable for Code {
         panic!("Code cannot return its raw text")
     }
 }
+
+fn generate_nav_html(data: &String) -> String {
+    use toml::{Table, Value};
+
+    let table = data.parse::<Table>().unwrap();
+
+    let previous = match table.get("previous") {
+        Some(Value::Table(t)) => match (t.get("href"), t.get("title")) {
+            (Some(Value::String(href)), Some(Value::String(title))) => {
+                format!(
+                    "
+                    <a
+                    class=\"inline-block px-4 py-2 transition-colors
+                    border border-border-color hover:border-c2-primary
+                    hover:text-c2-primary
+                    rounded-md\"
+                    href=\"{}\"
+                    >
+                        <span class=\"text-xs\">Previous</span>
+                        <br>
+                        <span class=\"font-bold\">{}</span>
+                    </a>
+                    ",
+                    href, title
+                )
+            }
+            _ => panic!("TOML error: `previous` doesn't have a href and title string."),
+        },
+        Some(_) => panic!("TOML error: `previous` is not a table."),
+        _ => String::from("<div></div>"),
+    };
+
+    let next = match table.get("next") {
+        Some(Value::Table(t)) => match (t.get("href"), t.get("title")) {
+            (Some(Value::String(href)), Some(Value::String(title))) => {
+                format!(
+                    "
+                    <a
+                    class=\"inline-block px-4 py-2 transition-colors
+                    border border-border-color hover:border-c2-primary
+                    hover:text-c2-primary
+                    rounded-md text-right\"
+                    href=\"{}\"
+                    >
+                        <span class=\"text-xs\">Next</span>
+                        <br>
+                        <span class=\"font-bold\">{}</span>
+                    </a>
+                    ",
+                    href, title
+                )
+            }
+            _ => panic!("TOML error: `next` doesn't have a href and title string."),
+        },
+        Some(_) => panic!("TOML error: `next` is not a table."),
+        _ => String::from("<div></div>"),
+    };
+
+    format!("<div class=\"grid grid-cols-2 gap-4 my-16\">{}{}</div>", previous, next)
+}

doc-generator/src/generator/highlighter/mod.rs

@@ -20,7 +20,7 @@ pub fn highlight(input: &String) -> String {
     let tokens = misti::tokenize(&input);
 
     if tokens.is_err() {
-        eprintln!("Found a lexical error processing code.\n{:?}", tokens);
+        // eprintln!("Found a lexical error processing code.\n{:?}", tokens);
         return input.clone();
     }
 

doc-generator/static/styles/global.css

@@ -32,6 +32,8 @@ body ::selection {
     --c2-on-primary: #003351;
     --c2-primary-container: #004b72;
     --c2-on-primary-container: #cce5ff;
+    --c2-surface-variant: #41474d;
+    --c2-on-surface-variant: #c1c7ce;
 
     /* C3 Material Colors */
     --c3-primary: #ffaed7;
@@ -70,6 +72,8 @@ body ::selection {
         --c2-on-primary: #ffffff;
         --c2-primary-container: #cce5ff;
         --c2-on-primary-container: #001e31;
+        --c2-surface-variant: #dde3ea;
+        --c2-on-surface-variant: #41474d;
 
         /* C3 Material Colors */
         --c3-primary: #954170;
@@ -95,7 +99,7 @@ body ::selection {
 }
 
 html {
-    font-size: 20px;
+    font-size: 18px;
 }
 
 .padded {

doc-generator/static/tailwind.config.js

@@ -30,6 +30,8 @@ module.exports = {
       "c2-on-primary": "var(--c2-on-primary)",
       "c2-primary-container": "var(--c2-primary-container)",
       "c2-on-primary-container": "var(--c2-on-primary-container)",
+      "c2-surface-variant": "var(--c2-surface-variant)",
+      "c2-on-surface-variant": "var(--c2-on-surface-variant)",
 
       "c3-primary": "var(--c3-primary)",
       "c3-on-primary": "var(--c3-on-primary)",

doc-generator/static/template.html

@@ -17,11 +17,15 @@
 </head>
 <body>
 
-    <div class="mx-auto max-w-screen-lg grid" style="grid-template-columns: 15rem auto;">
+    <div class="grid" style="grid-template-columns: 12rem 12rem calc(100vw - 24rem);">
+        <div class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
+            <p class="font-extrabold text-5xl text-center">Misti</p>
+            {{pages}}
+        </div>
         <div class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
             {{sidebar}}
         </div>
-        <div class="marked px-8">
+        <div class="marked px-8 max-w-screen-lg">
             {{markdown}}
         </div>
     </div>