WIP: adding a basic example

thedodd · Apr 19, 2023 · 80d65f4 · 80d65f4
1 parent d950ad2
commit 80d65f4
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 2 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -3,7 +3,7 @@ on: [push, pull_request]
 
 jobs:
   build:
-    name: build
+    name: Build
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -16,11 +16,27 @@ jobs:
       - uses: actions-rs/cargo@v1
         with:
           command: clippy
-          args: -- -D warnings
       - uses: actions-rs/cargo@v1
         with:
           command: fmt
           args: -- --check
       - uses: actions-rs/cargo@v1
         with:
           command: build
+
+  example_basic:
+    name: Example | Basic
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: stable
+          target: wasm32-unknown-unknown
+          default: true
+          components: clippy, rustfmt
+      - name: fetch trunk
+        run: wget -qO- https://github.com/thedodd/trunk/releases/download/v0.16.0/trunk-x86_64-unknown-linux-gnu.tar.gz | tar -xzf-
+      - name: build example
+        run: cd examples/basic && ../../trunk build
diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
@@ -0,0 +1,17 @@
+[package]
+name = "basic"
+version = "0.1.0"
+authors = ["Anthony Dodd <[email protected]>"]
+edition = "2018"
+
+[dependencies]
+console_error_panic_hook = "0.1"
+gloo-console = "0.2"
+wasm-bindgen = "0.2"
+ybc = { path = "../../" }
+yew = "0.20"
+
+[features]
+default = []
+demo-abc = []
+demo-xyz = []
diff --git a/examples/basic/README.md b/examples/basic/README.md
@@ -0,0 +1,7 @@
+Trunk | Yew | ybc
+=================
+An example application demonstrating building a WASM web application using Trunk, Yew & YBC.
+
+Once you've installed Trunk, simply execute `trunk serve --open` from this example's directory, and you should see the following web application rendered in your browser.
+
+<img style="margin-top:2em;" src="example-yew.png"/>
diff --git a/examples/basic/Trunk.toml b/examples/basic/Trunk.toml
@@ -0,0 +1,3 @@
+[build]
+target = "index.html"
+dist = "dist"
diff --git a/examples/basic/example-yew.png b/examples/basic/example-yew.png
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Trunk | Yew | YBC</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/>
+
+    <link data-trunk rel="scss" href="src/index.scss"/>
+    <link data-trunk rel="scss" data-inline href="src/inline-scss.scss"/>
+    <link data-trunk rel="css" href="src/app.css"/>
+    <link data-trunk rel="icon" href="src/yew.svg"/>
+    <link data-trunk rel="copy-file" href="src/yew.svg"/>
+    <base data-trunk-public-url/>
+</head>
+<body>
+    <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" data-bin="basic" data-cargo-features="demo-abc,demo-xyz"/>
+</body>
+</html>
diff --git a/examples/basic/src/app.css b/examples/basic/src/app.css
@@ -0,0 +1 @@
+body {}
diff --git a/examples/basic/src/index.scss b/examples/basic/src/index.scss
@@ -0,0 +1,3 @@
+@charset "utf-8";
+
+html {}
diff --git a/examples/basic/src/inline-scss.scss b/examples/basic/src/inline-scss.scss
@@ -0,0 +1,4 @@
+.trunk_yew_example_fancy_green {
+  $nice_color: green;
+  background-color: $nice_color;
+}
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
@@ -0,0 +1,99 @@
+#![recursion_limit = "1024"]
+
+use console_error_panic_hook::set_once as set_panic_hook;
+use wasm_bindgen::prelude::*;
+use ybc::TileCtx::{Ancestor, Child, Parent};
+use yew::prelude::*;
+
+#[function_component(App)]
+pub fn app() -> Html {
+    html! {
+        <>
+        <ybc::Navbar
+            classes={classes!("is-success")}
+            padded=true
+            navbrand={html!{
+                <ybc::NavbarItem>
+                    <ybc::Title classes={classes!("has-text-white")} size={ybc::HeaderSize::Is4}>{"Trunk | Yew | YBC"}</ybc::Title>
+                </ybc::NavbarItem>
+            }}
+            navstart={html!{}}
+            navend={html!{
+                <>
+                <ybc::NavbarItem>
+                    <ybc::ButtonAnchor classes={classes!("is-black", "is-outlined")} rel={String::from("noopener noreferrer")} target={String::from("_blank")} href="https://github.com/thedodd/trunk">
+                        {"Trunk"}
+                    </ybc::ButtonAnchor>
+                </ybc::NavbarItem>
+                <ybc::NavbarItem>
+                    <ybc::ButtonAnchor classes={classes!("is-black", "is-outlined")} rel={String::from("noopener noreferrer")} target={String::from("_blank")} href="https://yew.rs">
+                        {"Yew"}
+                    </ybc::ButtonAnchor>
+                </ybc::NavbarItem>
+                <ybc::NavbarItem>
+                    <ybc::ButtonAnchor classes={classes!("is-black", "is-outlined")} rel={String::from("noopener noreferrer")} target={String::from("_blank")} href="https://github.com/thedodd/ybc">
+                        {"YBC"}
+                    </ybc::ButtonAnchor>
+                </ybc::NavbarItem>
+                </>
+            }}
+        />
+
+        <ybc::Hero
+            classes={classes!("is-light")}
+            size={ybc::HeroSize::FullheightWithNavbar}
+            body={html!{
+                <ybc::Container classes={classes!("is-centered")}>
+                <ybc::Tile ctx={Ancestor}>
+                    <ybc::Tile ctx={Parent} size={ybc::TileSize::Twelve}>
+                        <ybc::Tile ctx={Parent}>
+                            <ybc::Tile ctx={Child} classes={classes!("notification", "is-success")}>
+                                <ybc::Subtitle size={ybc::HeaderSize::Is3} classes={classes!("has-text-white")}>{"Trunk"}</ybc::Subtitle>
+                                <p>{"Trunk is a WASM web application bundler for Rust."}</p>
+                            </ybc::Tile>
+                        </ybc::Tile>
+                        <ybc::Tile ctx={Parent}>
+                            <ybc::Tile ctx={Child} classes={classes!("notification", "is-success")}>
+                                <ybc::Icon size={ybc::Size::Large} classes={classes!("is-pulled-right")}><img src="yew.svg"/></ybc::Icon>
+                                <ybc::Subtitle size={ybc::HeaderSize::Is3} classes={classes!("has-text-white")}>
+                                    {"Yew"}
+                                </ybc::Subtitle>
+                                <p>{"Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly."}</p>
+                            </ybc::Tile>
+                        </ybc::Tile>
+                        <ybc::Tile ctx={Parent}>
+                            <ybc::Tile ctx={Child} classes={classes!("notification", "is-success")}>
+                                <ybc::Subtitle size={ybc::HeaderSize::Is3} classes={classes!("has-text-white")}>{"YBC"}</ybc::Subtitle>
+                                <p>{"A Yew component library based on the Bulma CSS framework."}</p>
+                            </ybc::Tile>
+                        </ybc::Tile>
+                    </ybc::Tile>
+                </ybc::Tile>
+                </ybc::Container>
+            }}>
+        </ybc::Hero>
+        </>
+    }
+}
+
+#[wasm_bindgen(inline_js = "export function snippetTest() { console.log('Hello from JS FFI!'); }")]
+extern "C" {
+    fn snippetTest();
+}
+
+fn main() {
+    set_panic_hook();
+    snippetTest();
+
+    // Show off some feature flag enabling patterns.
+    #[cfg(feature = "demo-abc")]
+    {
+        gloo_console::log!("feature `demo-abc` enabled");
+    }
+    #[cfg(feature = "demo-xyz")]
+    {
+        gloo_console::log!("feature `demo-xyz` enabled");
+    }
+
+    yew::Renderer::<App>::new().render();
+}
diff --git a/examples/basic/src/yew.svg b/examples/basic/src/yew.svg