diff --git a/md-docs.config.yaml b/md-docs.config.yaml new file mode 100644 index 0000000..1b93fe1 --- /dev/null +++ b/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 + diff --git a/md/learn/index.md b/md/learn/index.md new file mode 100644 index 0000000..0875631 --- /dev/null +++ b/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 */ } +} +``` + diff --git a/md/learn/index.yaml b/md/learn/index.yaml new file mode 100644 index 0000000..5efc31f --- /dev/null +++ b/md/learn/index.yaml @@ -0,0 +1,6 @@ +path: "" +name: "" +has_index: true +children: +- path: index + name: Index diff --git a/package.json b/package.json index 0d8fdd2..daa9be8 100644 --- a/package.json +++ b/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" }, diff --git a/static/css/xcode-colors.css b/static/css/xcode-colors.css new file mode 100644 index 0000000..120ffd9 --- /dev/null +++ b/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); +} diff --git a/static/index.html b/static/index.html index a762b5b..bf223b0 100644 --- a/static/index.html +++ b/static/index.html @@ -7,6 +7,7 @@ + @@ -16,7 +17,7 @@
-

- +

@@ -65,18 +67,17 @@ 

type Person = {
-    String name,
-    String lastName,
-    Int age,
+                >type Person = {
+    String name,
+    String lastName,
+    Int age,
 }
 
-Option[Array[Person]] persons = PersonManager::getAll()
+Option[Array[Person]] persons = PersonManager::getAll()
 
-print("There are {persons?.length ?? 0} persons registered!")
-
+print("There are {persons?.length ?? 0} persons registered!")
@@ -95,15 +96,14 @@ print("There are {persons?.length ?? 0} persons registered!") 

val name = "John Doe"
+                >val name = "John Doe"
 
-val lastNamePos = name.indexOf("Doe")  // Instead of `strpos`
-val letters = name.split("")  // Instead of `str_split` or `explode`
+val lastNamePos = name.indexOf("Doe")  // Instead of `strpos`
+val letters = name.split("")  // Instead of `str_split` or `explode`
 
-val notALetters = letters.filter { $ != "a" }  // Instead of `array_filter`
-
+val notALetters = letters.filter { $ != "a" } // Instead of `array_filter` @@ -125,38 +125,36 @@ val notALetters = letters.filter { $ != "a" } // Instead of `array_filter` 

val colors = Array("red", "blue", "green")
+                >val colors = Array("red", "blue", "green")
 
-val response = match colors.search("purple") {
-    Some(_) -> "purple is a color!"
-    None -> "purple is not a color"
+val response = match colors.search("purple") {
+    Some(_) -> "purple is a color!"
+    None -> "purple is not a color"
 }
 
-print(response)
-
- +print(response) + 
use PDO
-use Globals::Env
+                >use PDO
+use Globals::Env
 
-val #(Some(dbUri), Some(dbUser), Some(dbPassword)) = #(
-    Env::get("DB_URI"),
-    Env::get("DB_USERNAME"),
-    Env::get("DB_PASSWORD"),
+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.")
+    die("All 3 db environment variables must be set.")
 }
 
-match PDO(dbUri, dbUser, dbPassword) {
-    Ok(connection) -> { /* db operations */ }
-    Err(pdoException) -> { /* handle exception */ }
-}
-
+match PDO(dbUri, dbUser, dbPassword) { + Ok(connection) -> { /* db operations */ } + Err(pdoException) -> { /* handle exception */ } +} diff --git a/static/template.html b/static/template.html new file mode 100644 index 0000000..df46ee8 --- /dev/null +++ b/static/template.html @@ -0,0 +1,53 @@ + + + + + + THP: Typed Hypertext Processor + + + + + + + + + + + +
+
+
+ +

+ thp +

+ + +
+
+ + +
+ + + +
+ {{markdown}} +
+
+ + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index bf2799c..d1d4c12 100644 --- a/tailwind.config.js +++ b/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: { diff --git a/tailwind.css b/tailwind.css index 181be84..ff5b1be 100644 --- a/tailwind.css +++ b/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); +} + +