Chore/vercel (#86)

* demo: add vercel * demo: config * chore: demo workflow
2025-01-22 22:09:22 -05:00 · 2024-01-17 16:53:28 +08:00 · 2024-01-17 16:53:28 +08:00 · b75c9c9ab3
commit b75c9c9ab3
parent 9aa2835cd8
14 changed files with 47 additions and 66 deletions
--- a/.github/workflows/demo.yml
+++ b/.github/workflows/demo.yml
@ -15,6 +15,11 @@ jobs:
            - uses: actions/checkout@v4
              with:
                  fetch-depth: 0
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 18
+                  cache: "npm"
            - name: Setup Rust
              uses: actions-rs/toolchain@v1
              with:
@ -25,18 +30,13 @@ jobs:
              uses: jetli/trunk-action@v0.4.0
              with:
                  version: "v0.17.5"
-            - name: Deploy GitHub Pages
+            - name: Build
              run: |
                  cd demo
                  trunk build --release
-                  git worktree add gh-pages
-                  git config user.name "Deploy demo from CI"
-                  git config user.email ""
-                  cd gh-pages
-                  # Delete the ref to avoid keeping history.
-                  git update-ref -d refs/heads/gh-pages
-                  rm -rf *
-                  mv ../dist/* .
-                  git add .
-                  git commit -m "Deploy demo $GITHUB_SHA to gh-pages"
-                  git push --force --set-upstream origin gh-pages
+            - name: Deploy
+              run: npx vercel --token ${VERCEL_TOKEN} --prod
+              env:
+                  VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+                  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+                  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
--- a/demo/README.md
+++ b/demo/README.md
@ -1,6 +1,6 @@
 ## Used

-Run the `trunk serve` command and then open the `http://127.0.0.1:6421/thaw` URL
+Run the `trunk serve` command and then open the `http://127.0.0.1:6421` URL

 ## Docs

--- a/demo/Trunk.toml
+++ b/demo/Trunk.toml
@ -1,8 +1,8 @@
 [build]
 target = "index.html"
-public_url = "/thaw/"
+# public_url = "/thaw/"
 # release = true
-filehash = false
+# filehash = false

 [watch]
 watch = ["../thaw", "./src", "../demo_markdown"]
--- a/demo/index.html
+++ b/demo/index.html
@ -7,12 +7,16 @@
        <title>Thaw UI</title>
        <link
            rel="shortcut icon"
-            href="/thaw/favicon.ico"
+            href="/favicon.ico"
            type="image/x-icon"
        />
        <link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
        <link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
-        <link data-trunk rel="copy-file" href="./src/assets/404.html" />
+        <link
+            data-trunk
+            rel="copy-file"
+            href="./src/assets/vercel/vercel.json"
+        />
        <link data-trunk rel="copy-file" href="../logo.svg" />
    </head>
    <body></body>
--- a/demo/src/app.rs
+++ b/demo/src/app.rs
@ -13,7 +13,7 @@ pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
-        <Router base="/thaw" set_is_routing>
+        <Router set_is_routing>
            <TheProvider>
                <TheRouter is_routing/>
            </TheProvider>
@ -33,7 +33,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
    });

    view! {
-        <Routes base="/thaw".to_string()>
+        <Routes>
            <Route path="/" view=Home/>
            <Route path="/guide" view=GuidePage>
                <Route path="/installation" view=InstallationMdPage/>
--- a/demo/src/assets/404.html
+++ b/demo/src/assets/404.html
@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Thaw UI</title>
-        <link
-            rel="shortcut icon"
-            href="/thaw/favicon.ico"
-            type="image/x-icon"
-        />
-        <link rel="stylesheet" href="/thaw/index.css" />
-
-        <link
-            rel="preload"
-            href="/thaw/demo_bg.wasm"
-            as="fetch"
-            type="application/wasm"
-            crossorigin=""
-        />
-        <link rel="modulepreload" href="/thaw/demo.js" />
-    </head>
-    <body>
-        <script type="module">
-            import init from "/thaw/demo.js";
-            init("/thaw/demo_bg.wasm");
-        </script>
-    </body>
-</html>
--- a/demo/src/assets/vercel/vercel.json
+++ b/demo/src/assets/vercel/vercel.json
@ -0,0 +1,8 @@
+{
+    "rewrites": [
+        {
+            "source": "/(.*)",
+            "destination": "/index.html"
+        }
+    ]
+}
--- a/demo/src/components/demo.rs
+++ b/demo/src/components/demo.rs
@ -13,7 +13,7 @@ pub struct DemoCode {
 pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
    let theme = use_theme(Theme::light);
    let style = create_memo(move |_| {
-        let mut style = String::from("background-image: url(/thaw/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
+        let mut style = String::from("background-image: url(/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
        theme.with(|theme| {
            if theme.common.color_scheme == "dark" {
                style.push_str("border: 1px solid #383f52;");
--- a/demo/src/components/site_header.rs
+++ b/demo/src/components/site_header.rs
@ -126,7 +126,7 @@ pub fn SiteHeader() -> impl IntoView {
                let navigate = use_navigate();
                navigate("/", Default::default());
            }>
-                <img src="/thaw/logo.svg" style="width: 36px"/>
+                <img src="/logo.svg" style="width: 36px"/>
                <div class="demo-name">
                    "Thaw UI"
                </div>
@ -234,10 +234,10 @@ fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {

    let menu_value = create_rw_signal({
        let mut pathname = loaction.pathname.get_untracked();
-        if pathname.starts_with("/thaw/components/") {
-            pathname.drain(17..).collect()
-        } else if pathname.starts_with("/thaw/guide/") {
+        if pathname.starts_with("/components/") {
            pathname.drain(12..).collect()
+        } else if pathname.starts_with("/guide/") {
+            pathname.drain(7..).collect()
        } else {
            String::new()
        }
@ -256,10 +256,10 @@ fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {
            menu.iter()
                .any(|group| group.children.iter().any(|item| &item.value == name))
        }) {
-            if !pathname.eq(&format!("/thaw/guide/{name}")) {
+            if !pathname.eq(&format!("/guide/{name}")) {
                navigate(&format!("/guide/{name}"), Default::default());
            }
-        } else if !pathname.eq(&format!("/thaw/components/{name}")) {
+        } else if !pathname.eq(&format!("/components/{name}")) {
            navigate(&format!("/components/{name}"), Default::default());
        }
    });
--- a/demo/src/pages/components.rs
+++ b/demo/src/pages/components.rs
@ -12,8 +12,8 @@ pub fn ComponentsPage() -> impl IntoView {
    let select_name = create_rw_signal(String::new());
    create_effect(move |_| {
        let mut pathname = loaction.pathname.get();
-        let name = if pathname.starts_with("/thaw/components/") {
-            pathname.drain(17..).collect()
+        let name = if pathname.starts_with("/components/") {
+            pathname.drain(12..).collect()
        } else {
            String::new()
        };
@ -22,7 +22,7 @@ pub fn ComponentsPage() -> impl IntoView {

    _ = select_name.watch(move |name| {
        let pathname = loaction.pathname.get_untracked();
-        if !pathname.eq(&format!("/thaw/components/{name}")) {
+        if !pathname.eq(&format!("/components/{name}")) {
            navigate(&format!("/components/{name}"), Default::default());
        }
    });
--- a/demo/src/pages/guide.rs
+++ b/demo/src/pages/guide.rs
@ -11,8 +11,8 @@ pub fn GuidePage() -> impl IntoView {
        let loaction = use_location();
        let mut pathname = loaction.pathname.get_untracked();

-        if pathname.starts_with("/thaw/guide/") {
-            pathname.drain(12..).collect()
+        if pathname.starts_with("/guide/") {
+            pathname.drain(7..).collect()
        } else {
            String::new()
        }
--- a/demo/src/pages/nav_bar/mod.rs
+++ b/demo/src/pages/nav_bar/mod.rs
@ -10,7 +10,7 @@ pub fn NavBarPage() -> impl IntoView {
        <div style="display: flex">
            <NavBarMdPage />
            <div>
-                <MobilePage path="/thaw?path=/mobile/nav-bar"/>
+                <MobilePage path="/?path=/mobile/nav-bar"/>
            </div>
        </div>
    }
@ -32,11 +32,10 @@ pub fn NavBarDemoPage() -> impl IntoView {
                on_click_right=on_click_right
            >
                <NavBarRight slot>
-                     <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/> 
+                     <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
                </NavBarRight>
            </NavBar>
            <div style="padding-top: 50px">{move || click_text.get()}</div>
        </div>
    }
 }
-
--- a/demo/src/pages/tabbar/mod.rs
+++ b/demo/src/pages/tabbar/mod.rs
@ -9,7 +9,7 @@ pub fn TabbarPage() -> impl IntoView {
        <div style="display: flex">
            <TabbarMdPage />
            <div>
-                <MobilePage path="/thaw?path=/mobile/tabbar"/>
+                <MobilePage path="/?path=/mobile/tabbar"/>
            </div>
        </div>
    }
--- a/demo/src/pages/toast/mod.rs
+++ b/demo/src/pages/toast/mod.rs
@ -11,7 +11,7 @@ pub fn ToastPage() -> impl IntoView {
        <div style="display: flex">
           <ToastMdPage />
            <div>
-                <MobilePage path="/thaw?path=/mobile/toast"/>
+                <MobilePage path="/?path=/mobile/toast"/>
            </div>
        </div>
    }