feat: start implementing new Leptos-based generation (#38)

noviga · Jul 16, 2023 · d76b561 · d76b561
1 parent e96a33d
commit d76b561
Show file tree

Hide file tree

Showing 14 changed files with 585 additions and 7 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -6,6 +6,10 @@ on:
   push:
     branches: [master]
 
+permissions:
+  id-token: write
+  pages: write
+
 env:
   CARGO_TERM_COLOR: always
 
@@ -38,11 +42,16 @@ jobs:
       - name: Build examples
         run: ./scripts/examples.sh
 
-      - name: Publish examples
+      - name: Setup GitHub Pages
+        if: github.event_name == 'push'
+        uses: actions/configure-pages@v3
+
+      - name: Upload Pages artifact
         if: github.event_name == 'push'
-        uses: peaceiris/actions-gh-pages@v3
+        uses: actions/upload-pages-artifact@v2
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: dist
-          cname: lerni.noviga.com
-          force_orphan: true
+            path: dist
+
+      - name: Deploy to GitHub Pages
+        if: github.event_name == 'push'
+        uses: actions/deploy-pages@v2
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "lerni"
-version = "0.0.1"
+version = "0.0.2"
 edition = "2021"
 license = "MIT"
 description = "Lerni content framework"
@@ -12,6 +12,7 @@ derive_more = "0.99.17"
 getrandom = { version = "0.2.8", features = ["js"] }
 gloo-events = "0.1.2"
 gloo-utils = "0.1.6"
+leptos = { version = "0.4.3", features = ["csr"] }
 rand = { version = "0.8.5", default-features = false, features = ["getrandom"] }
 yew = { version = "0.20.0", features = ["csr"] }
 wasm-bindgen = "0.2.84"
@@ -41,6 +42,10 @@ crate-type = ["cdylib"]
 name = "hello_world"
 crate-type = ["cdylib"]
 
+[[example]]
+name = "ng_hello_world"
+crate-type = ["cdylib"]
+
 [[example]]
 name = "pointer"
 crate-type = ["cdylib"]

diff --git a/dist/index.html b/dist/index.html
@@ -43,6 +43,15 @@ <h1>Lerni Examples</h1>
             (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/svg.rs" target="_blank">source</a>)
         </li>
     </ul>
+
+    <h1>New Generation (Leptos-based) Lerni Examples</h1>
+    <h2>⚠️ Work in progress!</h2>
+    <ul>
+        <li>
+            <a href="/ng_hello_world/">Hello World</a>
+            (<a href="https://github.com/lerni-edu/lerni/blob/master/examples/ng_hello_world.rs" target="_blank">source</a>)
+        </li>
+    </ul>
 </div>
 </body>
 </html>
diff --git a/dist/ng_hello_world/index.html b/dist/ng_hello_world/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en" class="has-background-light">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Lerni "Rows & Columns" Example</title>
+    <link rel="stylesheet" href="/css/bulma.min.css" />
+    <link rel="stylesheet" href="/css/fas.min.css" />
+    <link rel="preload" href="/ng_hello_world/ng_hello_world_bg.wasm" as="fetch" type="application/wasm" crossorigin="" />
+    <link rel="modulepreload" href="/ng_hello_world/ng_hello_world.js" />
+</head>
+<body>
+    <script type="module">import init from '/ng_hello_world/ng_hello_world.js';init('/ng_hello_world/ng_hello_world_bg.wasm');</script>
+</body>
+</html>
diff --git a/examples/ng_hello_world.rs b/examples/ng_hello_world.rs
@@ -0,0 +1,17 @@
+use leptos::*;
+use lerni::ng::*;
+
+#[component]
+pub fn HelloWorld(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <SlideShow>
+            <Slide background_color={ Color::MistyRose }><Label text="Hello →"  /></Slide>
+            <Slide background_color={ Color::PaleGreen }><Label text="← World!" /></Slide>
+        </SlideShow>
+    }
+}
+
+#[wasm_bindgen(start)]
+pub fn main() {
+    lerni::ng::start(HelloWorld);
+}
diff --git a/scripts/examples.sh b/scripts/examples.sh
@@ -5,6 +5,7 @@ blur \
 buttons \
 grid \
 hello_world \
+ng_hello_world \
 pointer \
 rows_cols \
 svg \

diff --git a/src/lib.rs b/src/lib.rs
@@ -2,6 +2,7 @@
 
 #![warn(missing_docs)]
 
+pub mod ng;
 pub mod properties;
 pub mod utils;
 pub mod widgets;

diff --git a/src/ng.rs b/src/ng.rs
@@ -0,0 +1,57 @@
+//! New generation Lerni based on Leptos.
+
+pub use wasm_bindgen::prelude::wasm_bindgen;
+
+mod align;
+pub use align::{Align, VAlign};
+
+mod color;
+pub use color::Color;
+
+mod label;
+pub use label::Label;
+
+mod slide;
+pub use slide::Slide;
+
+mod slideshow;
+pub use slideshow::SlideShow;
+
+use leptos::{IntoView, Scope};
+
+/// Additional information provided to all slides.
+#[derive(Clone, Copy, Default, Debug, PartialEq)]
+pub struct Metadata {
+    /// Visibility flag.
+    pub visible: bool,
+    /// Teacher mode flag.
+    pub teacher_mode: bool,
+    /// Pointer on/off flag.
+    pub pointer: bool,
+}
+
+/// Frame within which the widget will be rendered.
+#[derive(Clone, Default, Debug, PartialEq)]
+pub struct Frame {
+    /// X-coordinate (in pixels) of the to left corner.
+    pub x: i32,
+    /// Y-coordinate (in pixels) of the to left corner.
+    pub y: i32,
+    /// Width (in pixels).
+    pub width: i32,
+    /// Height (in pixels).
+    pub height: i32,
+    /// Screen X to SVG X transform factor.
+    pub fx: f32,
+    /// Screen Y to SVG Y transform factor.
+    pub fy: f32,
+}
+
+/// The main entry point.
+pub fn start<F, N>(f: F)
+where
+    F: FnOnce(Scope) -> N + 'static,
+    N: IntoView,
+{
+    leptos::mount_to_body(f);
+}
diff --git a/src/ng/align.rs b/src/ng/align.rs
@@ -0,0 +1,27 @@
+/// Horizontal align.
+#[derive(Clone, Default, PartialEq)]
+pub enum Align {
+    /// Left horizontal align.
+    Left,
+    /// Center horizontal align.
+    #[default]
+    Center,
+    /// Right horizontal align.
+    Right,
+    /// Fill all horizontal space.
+    Fill,
+}
+
+/// Vertical align.
+#[derive(Clone, Default, PartialEq)]
+pub enum VAlign {
+    /// Top vertical align.
+    Top,
+    /// Middle vertical align.
+    #[default]
+    Middle,
+    /// Bottom vertical align.
+    Bottom,
+    /// Fill all vertical space.
+    Fill,
+}