page initilization

fp-china · Nov 28, 2024 · 58cf91b · 58cf91b
1 parent e130471
commit 58cf91b
Show file tree

Hide file tree

Showing 6 changed files with 203 additions and 121 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Respo Moonbit</title>
-    <style>
-      body {
-        margin: 0;
-      }
-
-      body * {
-        box-sizing: border-box;
-      }
-    </style>
+    <title>MoonBit is like Rust</title>
   </head>
   <body>
     <!-- <script src="./main.mjs" type="module"></script> -->

diff --git a/src/main/container.mbt b/src/main/container.mbt
@@ -0,0 +1,179 @@
+fn comp_container() -> @respo_node.RespoNode[ActionOp] {
+  div(
+    class_name=str_spaced(
+      [@respo.preset, @respo.ui_global, @respo.ui_fullscreen, @respo.ui_column],
+    ),
+    style=respo_style(font_family="Helvetica Neue, sans-serif"),
+    [
+      div(
+        class_name=@respo.ui_center,
+        style=respo_style(
+          background_color=RawString("rgb(221, 221, 221)"),
+          font_weight="100",
+          font_size=24,
+          padding=Px(40),
+          color=RawString("#888"),
+          line_height=Em(2),
+        ),
+        [
+          text_node("MoonBit is like Rust (Except that it has GC)"),
+          text_node("Fork repo if you want to contribute."),
+        ],
+      ),
+      div(
+        style=respo_style(background_color=RawString("#eee")),
+        [
+          div(
+            style=respo_style(max_width=Px(1400), margin=Auto),
+            [
+              comp_section("BASICS"),
+              comp_topic("Hello World"),
+              comp_compare(
+                "println(\"Hello, World!\")", "println!(\"Hello, World!\");",
+              ),
+              comp_topic("Variables And Constants"),
+              comp_compare(mbt_variable, rs_variable),
+              comp_topic("Explicit Types"),
+              comp_topic("Type Coercion"),
+              comp_topic("String Interpolation"),
+              comp_topic("Range Operator"),
+              comp_topic("Inclusive Range Operator"),
+              comp_section("COLLECTIONS"),
+              comp_topic("Arrays"),
+              comp_topic("Maps"),
+              comp_topic("Empty Collections"),
+              comp_section("FUNCTIONS"),
+              comp_topic("Functions"),
+              comp_topic("Tuple Return"),
+              comp_topic("Variable Number Of Arguments"),
+              comp_topic("Function Type"),
+              comp_topic("Map"),
+              comp_topic("Sort"),
+              comp_topic("Named Arguments"),
+              comp_section("TRAITS"),
+              comp_topic("Declaration"),
+              comp_topic("Usage"),
+              comp_topic("Default Implementation"),
+              comp_topic("Downcasting"),
+              comp_topic("Protocol"),
+              comp_topic("Extensions"),
+              @respo_node.space(height=200),
+            ],
+          ),
+        ],
+      ),
+    ],
+  )
+}
+
+fn comp_section(title : String) -> @respo_node.RespoNode[ActionOp] {
+  div(
+    class_name=str_spaced([]),
+    style=respo_style(
+      padding=Px(12),
+      font_size=48,
+      font_weight="100",
+      text_align=Center,
+      margin=Px(60),
+      color=RawString("#888"),
+    ),
+    [text_node(title)],
+  )
+}
+
+fn comp_topic(title : String) -> @respo_node.RespoNode[ActionOp] {
+  div(
+    class_name=str_spaced([@respo.ui_center]),
+    style=respo_style(
+      padding=Px(12),
+      font_size=32,
+      font_weight="200",
+      margin=Px(60),
+      color=RawString("#444"),
+    ),
+    [div([text_node(title)])],
+  )
+}
+
+fn comp_compare(
+  mbt_code : String,
+  rs_code : String
+) -> @respo_node.RespoNode[ActionOp] {
+  div(
+    class_name=str_spaced([@respo.ui_row]),
+    style=respo_style(padding=Px(12)),
+    [
+      div(
+        class_name=str_spaced([@respo.ui_expand, @respo.ui_column]),
+        [
+          div([text_node("MoonBit", class_name=style_lang_name)]),
+          div([code_block(mbt_code)]),
+        ],
+      ),
+      @respo_node.space(width=16),
+      div(
+        class_name=str_spaced([@respo.ui_expand, @respo.ui_column]),
+        [
+          div([text_node("Rust", class_name=style_lang_name)]),
+          div([code_block(rs_code)]),
+        ],
+      ),
+    ],
+  )
+}
+
+/// a custom style for code block
+fn code_block[T](
+  class_name? : String,
+  style? : @respo_node.RespoStyle,
+  code : String
+) -> @respo_node.RespoNode[T] {
+  pre(
+    class_name=str_some_spaced(
+      [
+        Some(@respo.ui_font_code),
+        Some(@respo.ui_expand),
+        class_name,
+        Some(style_code_block),
+      ],
+    ),
+    style=style.or_default(),
+    inner_text=code,
+  )
+}
+
+fn str_some_spaced(arr : Array[String?]) -> String {
+  arr.filter(fn(x) { not(x.is_empty()) }).map(fn(x) { x.unwrap() })
+  |> String::concat(separator=" ")
+}
+
+let style_code_block : String = declare_static_style(
+  [
+    (
+      "&",
+      respo_style(
+        padding=Px(8),
+        background_color=Hsl(0, 0, 100),
+        border=(1.0, Solid, Hsl(0, 0, 90)),
+        border_radius=4,
+        line_height=Em(1.6),
+        font_size=13,
+      ),
+    ),
+    ("pre&", respo_style(margin=Px(0))),
+  ],
+)
+
+let style_lang_name : String = declare_static_style(
+  [
+    (
+      "&",
+      respo_style(
+        font_weight="100",
+        line_height=Em(1.6),
+        font_size=18,
+        margin_bottom=Px(8),
+      ),
+    ),
+  ],
+)
diff --git a/src/main/counter.mbt b/src/main/counter.mbt
diff --git a/src/main/main.mbt b/src/main/main.mbt
@@ -1,18 +1,14 @@
 let app_store_key : String = "mbt-workflow"
 
 fn view(
-  store : Store
+  _store : Store
 ) -> @respo_node.RespoNode[ActionOp]!@respo_node.RespoCommonError {
   if false {
     raise @respo_node.RespoCommonError("TODO")
   }
   // @dom_ffi.log("Store to render: " + store.to_json().stringify(indent=2))
-  let states = store.get_states()
-  div(
-    class_name=@respo.ui_global,
-    style=respo_style(padding=Px(12)),
-    [comp_counter(states.pick("counter"), store.counted)],
-  )
+  // let states = store.get_states()
+  comp_container()
 }
 
 fn main {

diff --git a/src/main/moon.pkg.json b/src/main/moon.pkg.json
@@ -15,7 +15,10 @@
         "span",
         "respo_attrs",
         "respo_style",
-        "declare_static_style"
+        "str_spaced",
+        "pre",
+        "declare_static_style",
+        "text_node"
       ]
     },
     { "path": "tiye/dom-ffi/lib", "alias": "dom_ffi" }

diff --git a/src/main/snippets.mbt b/src/main/snippets.mbt
@@ -0,0 +1,16 @@
+let mbt_variable : String =
+  #| let mut my_variable: Int = 42
+  #| my_variable = 50
+  #|
+  #| let my_constant = 42
+
+let rs_variable : String =
+  #| let mut my_variable: usize = 42;
+  #| my_variable = 50;
+  #|
+  #| let my_constant: usize = 42:
+
+// fn demo() {
+//   let mut my_variable : Int = 42
+
+// }