Create config file for md-docs generator

md-docs.config.yaml

@@ -0,0 +1,9 @@
+input: md
+output: static
+template: static/template.html
+
+headings:
+  h1: text-4xl mb-4 font-black
+  h2: text-3xl mt-8 mb-4 font-bold
+  h3: text-2xl mt-8 mb-4 font-medium
+

md/learn/index.md

@@ -0,0 +1,35 @@
+# Welcome
+
+Welcome to the documentation of the THP programming languague.
+
+## Goals
+
+## Philosophy
+
+## Compared to PHP
+
+### Differences
+
+### Runtime similarities
+
+## Improvements
+
+```misti
+use PDO
+use Globals::Env
+
+val (Some(dbUri) Some(dbUser) Some(dbPassword)) = (
+    Env::get("DB_URI")
+    Env::get("DB_USERNAME")
+    Env::get("DB_PASSWORD")
+)
+else {
+    die("All 3 db environment variables must be set.")
+}
+
+match PDO(dbUri dbUser dbPassword) {
+    Ok(connection) -> { /* db operations */ }
+    Err(pdoException) -> { /* handle exception */ }
+}
+```
+

md/learn/index.yaml

@@ -0,0 +1,6 @@
+path: ""
+name: ""
+has_index: true
+children:
+- path: index
+  name: Index

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "generate": "md-docs",
     "watch": "concurrently -k \"pnpm tailwind:watch\" \"serve ./static/ -l 3333\"",
     "tailwind:watch": "tailwindcss -i ./tailwind.css -o ./static/css/out.css --watch"
   },

static/css/xcode-colors.css

@@ -0,0 +1,262 @@
+/* colors from: https://raw.githubusercontent.com/WhiteVermouth/XcodeTheme/master/assets/color-palette.png */
+:root {
+    --code-theme-color: #dedede;
+    --code-theme-bg-color: #1f1f24;
+    --code-theme-bg-color_selection: #515b70;
+    --code-theme-color_selection: inherit;
+
+    --code-theme-comment: #6c7986;
+
+    /* number */
+    --code-theme-c1: #d0bf69;
+    /* keyword */
+    --code-theme-c2: #fc5fa3;
+    /* ? */
+    --code-theme-c3: #39adb5;
+    /* string */
+    --code-theme-c4: #fc6a5d;
+    /* declaration */
+    --code-theme-c5: #5dd8ff;
+    /* proyect function */
+    --code-theme-c6: #67b7a4; /*#e53935;*/
+
+    --code-theme-punctuation: #dedede;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --code-theme-color: #3a3a3a;
+        --code-theme-bg-color: #ffffff;
+        --code-theme-bg-color_selection: #a4cdff;
+        --code-theme-color_selection: inherit;
+
+        --code-theme-comment: #5d6c79;
+
+        /* number */
+        --code-theme-c1: #1c00cf;
+        /* keyword */
+        --code-theme-c2: #9b2393;
+        --code-theme-c3: #39adb5;
+        /* string */
+        --code-theme-c4: #c41a16;
+        /* declaration */
+        --code-theme-c5: #0f68a0;
+        --code-theme-c6: #326d74; /*#e53935;*/
+
+        --code-theme-punctuation: #202020;
+    }
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    color: var(--code-theme-color);
+    background: var(--code-theme-bg-color);
+    line-height: 1.5em;
+    border-radius: 0.3em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+code[class*="language-"]::-moz-selection,
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection,
+pre[class*="language-"] ::-moz-selection {
+    background: var(--code-theme-bg-color_selection);
+    color: var(--code-theme-color_selection);
+}
+
+code[class*="language-"]::selection,
+pre[class*="language-"]::selection,
+code[class*="language-"] ::selection,
+pre[class*="language-"] ::selection {
+    background: var(--code-theme-bg-color_selection);
+    color: var(--code-theme-color_selection);
+}
+
+:not(pre) > code[class*="language-"] {
+    white-space: normal;
+    border-radius: 0.2em;
+    padding: 0.1em;
+}
+
+:not(pre) > code {
+    /* border: solid 1px var(--border-color); */
+    background-color: var(--code-theme-bg-color);
+    padding: 0 0.25rem;
+    border-radius: 5px;
+}
+
+pre[class*="language-"] {
+    overflow: auto;
+    position: relative;
+    margin: 0.5em 0;
+    padding: 0.75em 0.75em;
+}
+
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+    color: var(--code-theme-c1);
+}
+
+[class*="language-"] .namespace {
+    opacity: 0.7;
+}
+
+.token.atrule {
+    color: var(--code-theme-c2);
+}
+
+.token.attr-name {
+    color: var(--code-theme-c3);
+}
+
+.token.attr-value {
+    color: var(--code-theme-c4);
+}
+
+.token.attribute {
+    color: var(--code-theme-c4);
+}
+
+.token.boolean {
+    color: var(--code-theme-c2);
+}
+
+.token.builtin {
+    color: var(--code-theme-c3);
+}
+
+.token.cdata {
+    color: var(--code-theme-c3);
+}
+
+.token.char {
+    color: var(--code-theme-c3);
+}
+
+.token.class {
+    color: var(--code-theme-c3);
+}
+
+.token.class-name {
+    color: var(--code-theme-c5);
+}
+
+.token.comment {
+    color: var(--code-theme-comment);
+}
+
+.token.constant {
+    color: var(--code-theme-c2);
+}
+
+.token.deleted {
+    color: var(--code-theme-c6);
+}
+
+.token.doctype {
+    color: var(--code-theme-comment);
+}
+
+.token.entity {
+    color: var(--code-theme-c6);
+}
+
+.token.function {
+    color: var(--code-theme-c2);
+}
+
+.token.hexcode {
+    color: var(--code-theme-c1);
+}
+
+.token.id {
+    color: var(--code-theme-c2);
+    font-weight: bold;
+}
+
+.token.important {
+    color: var(--code-theme-c2);
+    font-weight: bold;
+}
+
+.token.inserted {
+    color: var(--code-theme-c3);
+}
+
+.token.keyword {
+    color: var(--code-theme-c2);
+}
+
+.token.number {
+    color: var(--code-theme-c1);
+}
+
+.token.operator {
+    color: var(--code-theme-punctuation);
+}
+
+.token.prolog {
+    color: var(--code-theme-comment);
+}
+
+.token.property {
+    color: var(--code-theme-c3);
+}
+
+.token.pseudo-class {
+    color: var(--code-theme-c4);
+}
+
+.token.pseudo-element {
+    color: var(--code-theme-c4);
+}
+
+.token.punctuation {
+    color: var(--code-theme-punctuation);
+}
+
+.token.regex {
+    color: var(--code-theme-c5);
+}
+
+.token.selector {
+    color: var(--code-theme-c6);
+}
+
+.token.string {
+    color: var(--code-theme-c4);
+}
+
+.token.symbol {
+    color: var(--code-theme-c2);
+}
+
+.token.tag {
+    color: var(--code-theme-c6);
+}
+
+.token.unit {
+    color: var(--code-theme-c1);
+}
+
+.token.url {
+    color: var(--code-theme-c6);
+}
+
+.token.variable {
+    color: var(--code-theme-c6);
+}

static/index.html

@@ -7,6 +7,7 @@
 
     <!-- Tailwind output -->
     <link href="/css/out.css" rel="stylesheet">
+    <link rel="stylesheet" href="/css/xcode-colors.css">
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -16,7 +17,7 @@
     <div class="px-2 grid grid-cols-2 gap-4 relative">
         <div class="text-center h-screen overflow-hidden sticky top-0 left-0">
 
-            <div class="rounded-md my-4 mx-4 p-4 bg-c-bg-card"
+            <div class="rounded-md m-4 p-4 bg-c-bg-card"
                 style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
             >
                 <h1
@@ -41,11 +42,12 @@
                     Get started
                 </button>
 
-                <button class="m-4 py-2 px-4 rounded font-display text-white
+                <a class="m-4 py-2 px-4 rounded font-display text-white
                         bg-c-purple hover:bg-c-purple-light transition-colors"
+                    href="/learn/"
                 >
                     Learn
-                </button>
+                </a>
             </div>
             
         </div>
@@ -65,18 +67,17 @@
                 </p>
 
                 <pre
-                    class="p-2 my-2 rounded-md bg-c-bg"
+                    class="p-2 my-2 rounded-md bg-c-bg language-misti"
                     style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
-                ><code>type Person = {
+                >type <span class="token class-name">Person</span> = {
-    String name,
+    <span class="token class-name">String</span> name,
-    String lastName,
+    <span class="token class-name">String</span> lastName,
-    Int age,
+    <span class="token class-name">Int</span> age,
 }
 
-Option[Array[Person]] persons = PersonManager::getAll()
+<span class="token class-name">Option</span>[<span class="token class-name">Array</span>[<span class="token class-name">Person</span>]] persons = <span class="token class-name">PersonManager</span>::getAll()
 
-print("There are {persons?.length ?? 0} persons registered!")
+print(<span class="token string">"There are {persons?.length ?? 0} persons registered!"</span>)</pre>
-</code></pre>
 
             </div>
 
@@ -95,15 +96,14 @@ print("There are {persons?.length ?? 0} persons registered!")
                 </p>
 
                 <pre
-                    class="p-2 my-2 rounded-md bg-c-bg"
+                    class="p-2 my-2 rounded-md bg-c-bg language-misti"
                     style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
-                ><code>val name = "John Doe"
+                ><span class="token keyword">val</span> name = <span class="token string">"John Doe"</span>
 
-val lastNamePos = name.indexOf("Doe")  // Instead of `strpos`
+<span class="token keyword">val</span> lastNamePos = name.indexOf(<span class="token string">"Doe"</span>)  <span class="token comment">// Instead of `strpos`</span>
-val letters = name.split("")  // Instead of `str_split` or `explode`
+<span class="token keyword">val</span> letters = name.split(<span class="token string">""</span>)  <span class="token comment">// Instead of `str_split` or `explode`</span>
 
-val notALetters = letters.filter { $ != "a" }  // Instead of `array_filter`
+<span class="token keyword">val</span> notALetters = letters.filter { $ != <span class="token string">"a"</span> }  <span class="token comment">// Instead of `array_filter`</span></pre>
-</code></pre>
 
             </div>
 
@@ -125,38 +125,36 @@ val notALetters = letters.filter { $ != "a" }  // Instead of `array_filter`
                 </p>
 
                 <pre
-                    class="p-2 my-2 rounded-md bg-c-bg"
+                    class="p-2 my-2 rounded-md bg-c-bg language-misti"
                     style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
-                ><code>val colors = Array("red", "blue", "green")
+                ><span class="token keyword">val</span> colors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>)
 
-val response = match colors.search("purple") {
+<span class="token keyword">val</span> response = match colors.search(<span class="token string">"purple"</span>) {
-    Some(_) -> "purple is a color!"
+    <span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is a color!"</span>
-    None -> "purple is not a color"
+    <span class="token class-name">None</span> -&gt; <span class="token string">"purple is not a color"</span>
 }
 
-print(response)
+print(response)</pre>
-</code></pre>
+ 
-
                 <pre
-                    class="p-2 my-2 rounded-md bg-c-bg"
+                    class="p-2 my-2 rounded-md bg-c-bg language-misti"
                     style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
-                ><code>use PDO
+                >use <span class="token class-name">PDO</span>
-use Globals::Env
+use <span class="token class-name">Globals</span>::<span class="token class-name">Env</span>
 
-val #(Some(dbUri), Some(dbUser), Some(dbPassword)) = #(
+<span class="token keyword">val</span> #(<span class="token class-name">Some</span>(dbUri), <span class="token class-name">Some</span>(dbUser), <span class="token class-name">Some</span>(dbPassword)) = #(
-    Env::get("DB_URI"),
+    <span class="token class-name">Env</span>::get(<span class="token string">"DB_URI"</span>),
-    Env::get("DB_USERNAME"),
+    <span class="token class-name">Env</span>::get(<span class="token string">"DB_USERNAME"</span>),
-    Env::get("DB_PASSWORD"),
+    <span class="token class-name">Env</span>::get(<span class="token string">"DB_PASSWORD"</span>),
 )
 else {
-    die("All 3 db environment variables must be set.")
+    die(<span class="token string">"All 3 db environment variables must be set."</span>)
 }
 
-match PDO(dbUri, dbUser, dbPassword) {
+match <span class="token class-name">PDO</span>(dbUri, dbUser, dbPassword) {
-    Ok(connection) -> { /* db operations */ }
+    <span class="token class-name">Ok</span>(connection) -&gt; { /* db operations */ }
-    Err(pdoException) -> { /* handle exception */ }
+    <span class="token class-name">Err</span>(pdoException) -&gt; { /* handle exception */ }
-}
+}</pre>
-</code></pre>
 
             </div>
 

static/template.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>THP: Typed Hypertext Processor</title>
+
+    <!-- Tailwind output -->
+    <link href="/css/out.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="/css/xcode-colors.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@400;500;600;700;800;900&family=Fugaz+One&family=Inconsolata&family=Inter&display=swap" rel="stylesheet"> 
+</head>
+<body class="bg-c-bg text-c-text">
+    <div class="grid grid-cols-[10rem_12rem_auto] gap-2">
+        <div class="p-2">
+            <div class="relative mb-2 button-effect">
+                <a class="button-effect-receiver inline-block w-[9rem] p-4 bg-c-bg-card rounded-md"
+                    href="/"
+                >
+                    <h1
+                        class="py-8 font-display text-6xl text-center"
+                        style="text-shadow: 3px 3px 0 var(--c-bg)"
+                    >
+                        thp
+                    </h1>
+                </a>
+
+                <div class="w-full h-full bg-c-text absolute top-0 left-0 -z-10 rounded-md"></div>
+            </div>
+
+            <nav class="rounded-md p-4 bg-c-bg-card">
+                {{pages}}
+            </nav>
+        </div>
+
+        <nav class="rounded-md my-2 p-4 bg-c-background-2">
+            <h2 class="text-2xl">On this page</h2>
+
+            <br>
+
+            {{sidebar}}
+        </nav>
+        
+        <main class="markdown p-4 my-2">
+            {{markdown}}
+        </main>
+    </div>
+</body>
+</html>

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./static/*.html"],
+  content: ["./static/**/*.html"],
   theme: {
     extend: {
       colors: {
@@ -10,7 +10,8 @@ module.exports = {
         "c-purple-light": "var(--c-purple-light)",
         "c-box-shadow": "var(--c-box-shadow)",
         "c-bg-card": "var(--c-bg-card)",
-        "c-ping": "var(--c-pink)"
+        "c-ping": "var(--c-pink)",
+        "c-background-2": "var(--c-background-2)",
       }
     },
     fontFamily: {

tailwind.css

@@ -21,6 +21,8 @@
         --c-box-shadow: #374259;
         --c-bg-card: #FFB4B4;
         --c-pink: #374259;
+
+        --c-background-2: #FEDEFF;
     }
 }
 
@@ -31,3 +33,13 @@ body {
 pre, code {
     font-family: Inconsolata, monospace;
 }
+
+.button-effect-receiver {
+    transition: transform 150ms;
+}
+
+.button-effect:hover .button-effect-receiver {
+    transform: translateX(-3px) translateY(-3px);
+}
+
+