Use --public-url value in router example (#1597)

* Use --public-url value for router example

* some documentation

Author: siku2

.github/workflows/publish-examples.yml

@@ -53,8 +53,7 @@ jobs:
               cd "$path"
               dist_dir="$output/$example"
 
-              export PUBLIC_URL="$PUBLIC_URL_PREFIX/$example"
-              trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL"
+              trunk build --release --dist "$dist_dir" --public-url "$PUBLIC_URL_PREFIX/$example"
             )
           done
 

.gitignore

@@ -5,6 +5,7 @@ orig.*
 /.idea
 /.vscode
 /cmake-build-debug
+/dist
 /website/yarn.lock
 /website/node_modules
 /website/package-lock.json

Cargo.toml

@@ -19,6 +19,7 @@ members = [
   "yew-dsl",
 
   # Examples
+  "examples/boids",
   "examples/counter",
   "examples/crm",
   "examples/dashboard",
@@ -39,5 +40,4 @@ members = [
   "examples/todomvc",
   "examples/two_apps",
   "examples/webgl",
-  "examples/boids",
 ]

examples/.gitignore

@@ -4,7 +4,6 @@ version = "0.1.0"
 edition = "2018"
 
 [dependencies]
-default-env = "0.1"
 instant = { version = "0.1", features = ["wasm-bindgen"] }
 lipsum = "0.7"
 log = "0.4"

examples/router/Cargo.toml

@@ -23,6 +23,14 @@ This example involves many different parts, here are just the Yew specific thing
 - Uses [`yew-router`] to render and switch between multiple pages.
 - Uses [`IntervalService`] for the [`ProgressDelay`](src/components/progress_delay.rs) component.
 
+The example automatically adapts to the `--public-url` value passed to Trunk.
+This allows it to be hosted on any path, not just at the root.
+For example, our demo is hosted at [/router](https://examples.yew.rs/router).
+
+This is achieved by adding `<base data-trunk-public-url />` to the [index.html](index.html) file.
+Trunk rewrites this tag to contain the value passed to `--public-url` which can then be retrieved at runtime.
+Take a look at [`PublicUrlSwitch`](src/switch.rs) for the implementation.
+
 ## Improvements
 
 - Use a special image component which shows a progress bar until the image is loaded.

examples/router/README.md

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>Yew • Router</title>
+    <base data-trunk-public-url />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"

examples/router/index.html

@@ -1,5 +1,7 @@
-use default_env::default_env;
-use yew::virtual_dom::{Transformer, VComp};
+use yew::{
+    virtual_dom::{Transformer, VComp},
+    web_sys::Url,
+};
 use yew_router::{components::RouterAnchor, prelude::*, switch::Permissive};
 
 #[derive(Clone, Debug, Switch)]
@@ -35,16 +37,24 @@ impl AppRoute {
 #[derive(Clone, Debug)]
 pub struct PublicUrlSwitch(AppRoute);
 impl PublicUrlSwitch {
-    // this variable is set by the build script
-    const PUBLIC_URL: &'static str = default_env!("PUBLIC_URL", "/");
+    fn base_url() -> Url {
+        if let Ok(Some(href)) = yew::utils::document().base_uri() {
+            // since this always returns an absolute URL we turn it into `Url`
+            // so we can more easily get the path.
+            Url::new(&href).unwrap()
+        } else {
+            Url::new("/").unwrap()
+        }
+    }
+
+    fn base_path() -> String {
+        let mut path = Self::base_url().pathname();
+        if path.ends_with('/') {
+            // pop the trailing slash because AppRoute already accounts for it
+            path.pop();
+        }
 
-    /// Return `PUBLIC_URL` without a trailing slash.
-    /// This is required because `AppRoute` still expects paths to
-    /// start with a slash so we only want to strip away the parts before that.
-    fn public_url_no_trailing_slash() -> &'static str {
-        Self::PUBLIC_URL
-            .strip_suffix('/')
-            .unwrap_or(Self::PUBLIC_URL)
+        path
     }
 
     pub fn route(self) -> AppRoute {
@@ -53,7 +63,7 @@ impl PublicUrlSwitch {
 }
 impl Switch for PublicUrlSwitch {
     fn from_route_part<STATE>(part: String, state: Option<STATE>) -> (Option<Self>, Option<STATE>) {
-        if let Some(part) = part.strip_prefix(Self::public_url_no_trailing_slash()) {
+        if let Some(part) = part.strip_prefix(&Self::base_path()) {
             let (route, state) = AppRoute::from_route_part(part.to_owned(), state);
             (route.map(Self), state)
         } else {
@@ -62,7 +72,7 @@ impl Switch for PublicUrlSwitch {
     }
 
     fn build_route_section<STATE>(self, route: &mut String) -> Option<STATE> {
-        route.push_str(Self::public_url_no_trailing_slash());
+        route.push_str(&Self::base_path());
         self.0.build_route_section(route)
     }
 }