[Web] Code, inline code generation

doc-generator/src/generator/code.rs

@@ -0,0 +1,13 @@
+use markdown::mdast::Code;
+
+use super::Printable;
+
+impl Printable for Code {
+    fn to_html(&self) -> String {
+        format!("<pre>{}</pre>", self.value)
+    }
+
+    fn get_text(&self) -> String {
+        panic!("Code cannot return its raw text")
+    }
+}

doc-generator/src/generator/inline_code.rs

@@ -0,0 +1,13 @@
+use markdown::mdast::InlineCode;
+
+use super::Printable;
+
+impl Printable for InlineCode {
+    fn to_html(&self) -> String {
+        format!("<code>{}</code>", self.value)
+    }
+
+    fn get_text(&self) -> String {
+        self.value.clone()
+    }
+}

doc-generator/src/generator/mod.rs

@@ -1,9 +1,12 @@
 use markdown::mdast::Node;
 
+mod code;
 mod heading;
-mod root;
+mod inline_code;
-mod text;
 mod paragraph;
+mod root;
+mod strong;
+mod text;
 
 pub trait Printable {
     fn to_html(&self) -> String;
@@ -18,7 +21,11 @@ impl Printable for Node {
             Node::Text(text) => text.to_html(),
             Node::Paragraph(p) => p.to_html(),
             Node::ThematicBreak(_) => String::from("<hr />"),
-            _ => format!("Not implemented<br>{:?}", self),
+            Node::InlineCode(i) => i.to_html(),
+            Node::Code(c) => c.to_html(),
+            Node::Html(h) => h.value.clone(),
+            Node::Strong(s) => s.to_html(),
+            _ => format!("<div style=\"background-color: red\">Not implemented<div><br>{:?}", self),
         }
     }
 
@@ -29,6 +36,10 @@ impl Printable for Node {
             Node::Text(text) => text.get_text(),
             Node::Paragraph(p) => p.get_text(),
             Node::ThematicBreak(_) => panic!("<hr> cannot return its raw text"),
+            Node::InlineCode(i) => i.get_text(),
+            Node::Code(c) => c.get_text(),
+            Node::Html(_) => panic!("Html cannot return its raw text"),
+            Node::Strong(s) => s.get_text(),
             _ => String::from(""),
         }
     }

doc-generator/src/generator/paragraph.rs

@@ -18,4 +18,4 @@ impl Printable for Paragraph {
     fn get_text(&self) -> String {
         panic!("Paragraph cannot return its raw text")
     }
-}
+}

doc-generator/src/generator/strong.rs

@@ -0,0 +1,17 @@
+use markdown::mdast::Strong;
+
+use crate::utils;
+
+use super::Printable;
+
+impl Printable for Strong {
+    fn to_html(&self) -> String {
+        let text = utils::collect_children_html(&self.children);
+
+        format!("<b>{}</b>", text)
+    }
+
+    fn get_text(&self) -> String {
+        utils::collect_children_text(&self.children)
+    }
+}

doc-generator/src/utils.rs

@@ -1,3 +1,27 @@
+use markdown::mdast::Node;
+
+use crate::generator::Printable;
+
 pub fn to_html_fragment(text: &String) -> String {
     text.clone().to_lowercase().replace(" ", "-")
 }
+
+pub fn collect_children_html(vec: &Vec<Node>) -> String {
+    let mut result = Vec::<String>::new();
+
+    for node in vec {
+        result.push(node.to_html())
+    }
+
+    result.into_iter().collect()
+}
+
+pub fn collect_children_text(vec: &Vec<Node>) -> String {
+    let mut result = Vec::<String>::new();
+
+    for node in vec {
+        result.push(node.get_text())
+    }
+
+    result.join("-")
+}

doc-generator/static/index.html

@@ -7,6 +7,7 @@
     <link href="/tailwind/output.css" rel="stylesheet">
 
     <link href="/styles/global.css" rel="stylesheet" />
+    <link href="/styles/xcode-colors.css" rel="stylesheet" />
     <title>Misti</title>
 
     <!-- Google fonts - Inter -->

doc-generator/static/package.json

@@ -4,7 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "watch": "concurrently -k \"tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch\" \"live-server . --port=3333\""
+    "watch": "concurrently -k \"tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch\" \"live-server . --port=3333\"",
+    "server": "live-server . --port=3333",
+    "styles": "tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch"
   },
   "keywords": [],
   "author": "",

doc-generator/static/styles/xcode-colors.css

@@ -0,0 +1,263 @@
+/* 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);
+    font-size: 1em;
+    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);
+}

doc-generator/static/template.html

@@ -7,6 +7,7 @@
     <link href="/tailwind/output.css" rel="stylesheet">
 
     <link href="/styles/global.css" rel="stylesheet" />
+    <link href="/styles/xcode-colors.css" rel="stylesheet" />
     <title>Misti</title>
 
     <!-- Google fonts - Inter -->