bump dioxus version to v0.6 and refined

.github/workflows/publish.yml

@@ -1,7 +1,6 @@
 
-# https://github.com/actions/deploy-pages
-# https://github.com/actions/upload-pages-artifact
-name: Publish/Deploy
+# https://docs.github.com/en/actions
+name: Build/Publish/Deploy
 
 on:
   push:
@@ -34,23 +33,27 @@ jobs:
       #      ~/.npm
       #    key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
 
+      - uses: cargo-bins/cargo-binstall@main
       - name: Install Dioxus and TailwindCSS
         run: |
-            cargo install dioxus-cli
-            npm -g install -D tailwindcss
+            cargo binstall dioxus-cli
+            npm install tailwindcss -D -g
 
       - name: Build Project
         run: | #cargo r --bin syncd -F syncdep
             npx tailwindcss -m -i tailwind_base.css -o assets/tailwind.css
-            dx build --release
+            dx build -r --platform web
             cargo t
 
       #- name: Setup GitHub Pages
       #  uses: actions/configure-pages@v4
       - name: Upload Artifacts
         uses: actions/upload-pages-artifact@v3
-        with:
-          path: dist
+        #env:
+        #  REPO_NAME: ${GITHUB_REPOSITORY#$GITHUB_REPOSITORY_OWNER/}
+        with:   # https://github.com/actions/upload-pages-artifact
+          path: target/dx/${{ github.event.repository.name }}/release/web/public
+        #  path: target/dx/${{ env.REPO_NAME }}/release/web/public
 
   deploy:
     #if: github.ref == 'refs/heads/master'
@@ -65,7 +68,7 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
 
-    steps:
+    steps:  # https://github.com/actions/deploy-pages
       - name: Deploy to GitHub Pages
         uses: actions/deploy-pages@v4
         id: deployment

Cargo.toml

@@ -13,27 +13,23 @@ keywords = ["periodic", "periodic-table", "elements", "chemistry-elements", "dio
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { version = "0.5", features = ["web"], optional = true } # "web", "fullstack", "router"
-#dioxus-sdk = { version = "0.5", features = ["i18n"] }
-#dioxus-logger = "0.5"   # Debug
-#manganis = "0.2"
+dioxus = { version = "0.6", optional = true }   # features = ["fullstack", "router"],
+#dioxus-sdk = { version = "0.6", features = ["i18n"], optional = true }
 
-#mendeleev = "0.8"
-
-reqwest = { version = "0.12", optional = true }  #, features = ["blocking"] #, "json"
+reqwest = { version = "0.12", optional = true } # features = ["blocking"], #, "json"
 tokio = { version = "1.42", features = ["full"], optional = true }
 serde = { version = "1.0", features = ["derive"], optional = true }
 serde_json = { version = "1.0", optional = true }
 scraper = { version = "0.21", optional = true }
 csv = { version = "1.3", optional = true }
 
 [features]
-default = []
+default = [] # "desktop", "web", "mobile"
 syncdep = ["reqwest", "tokio", "serde", "serde_json", "scraper", "csv"]
 
-desktop = ["dioxus/desktop"]
-server  = ["dioxus/axum"]
-web = ["dioxus/web"]
+desktop = ["dioxus", "dioxus/desktop"]
+mobile  = ["dioxus", "dioxus/mobile"]
+web     = ["dioxus", "dioxus/web"]
 
 [[bin]]
 name = "inperiod"
@@ -44,13 +40,6 @@ name = "syncd"
 path = "src/syncd.rs"   # default in src/bin/
 required-features = ["syncdep"]
 
-[profile.dev]
-opt-level = 1
-#incremental = false
-
-#[profile.dev.package."*"]
-#opt-level = 3
-
 [profile.release]
 codegen-units = 1
 strip = true # "debuginfo"
@@ -60,5 +49,21 @@ lto = true
 #debug = false
 #incremental = false
 
+[profile.dev]
+opt-level = 1
+#incremental = false
+
+#[profile.dev.package."*"]
+#opt-level = 3
+
+[profile.wasm-dev]
+inherits = "dev"
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"
+
 [workspace]
 

Dioxus.toml

@@ -1,16 +1,22 @@
 
-# cargo install dioxus-cli # --git https://github.com/Dioxuslabs/cli
+# cargo binstall dioxus-cli # dx new foo
+# https://github.com/DioxusLabs/dioxus/blob/main/packages/cli/assets/dioxus.toml
 
 [application]
-name = "inperiod"   # App (Project) Name
-out_dir = "dist"    # `build` & `serve` dist path
-asset_dir = "assets"	# resource (assets) file folder
+name = "inperiod"   # dioxus project name
 
-# Dioxus App Default Platform: web, desktop, fullstack
-default_platform = "web"
+# you can also use `dx serve/build --platform XXX` to use other platform
+default_platform = "web"    # value: web | desktop | mobile
+
+#asset_dir = "assets"       # resource (static) file folder
+#out_dir = "dist"    # Web `build` & `serve` dist path
+#hot_reload = true   # hot reload by default
+
+[web.wasm_opt]
+level = "4"     # The level wasm-opt should target. z is the smallest. 4 is the fastest.
 
 [web.app]
-title = "Elements Periodic Table"   # HTML title tag content
+#title = "Elements Periodic Table"   # HTML title tag content
 base_path = "inperiod" # "/"
 #index_on_404 = true
 
@@ -20,9 +26,9 @@ reload_html = true  # when watcher trigger, regenerate the `index.html`
 # which files or dirs will be watcher monitoring
 watch_path = ["src", "assets", "index.html", "tailwind_base.css", "tailwind.config.js"]
 
-[web.resource]	# include `assets` in web platform
-style = ["tailwind.css"]    # CSS style file
-script = []	# Javascript code file
+#[web.resource]	# include `assets` in web platform, DEPRECATED
+#style = ["assets/tailwind.css"]    # CSS style file
+#script = []	# Javascript code file
 
 [web.resource.dev]
 script = []	# Javascript code file, serve: [dev-server] only
@@ -31,3 +37,15 @@ script = []	# Javascript code file, serve: [dev-server] only
 [bundle]
 icon = ["assets/ptable.svg"]
 
+identifier = "io.github.mhfan"
+publisher = "MeiHui FAN"
+resources = ["public/*"]
+category = "Utility"
+
+copyright = "All rights reserved. © 2024 M.H.Fan"
+short_description = "Modern fancy interactive online periodic table of chemistry elements"
+
+#long_description = """
+#An amazing dioxus application.
+#"""
+

README.md

@@ -36,17 +36,20 @@ all kinds of information and data about the elements.
 3. Run the following command in the root of the project to start the tailwind CSS compiler:
 
 ```bash
-npx tailwindcss -i tailwind_base.css -o assets/tailwind.css --watch
+npm install tailwindcss -D -g
+
+npx tailwindcss -i tailwind_base.css -o assets/tailwind.css -w #-m
 ```
 
-Launch the Dioxus Web/Desktop app:
+Launch the Dioxus Web/Desktop/Mobile app:
 
 ```bash
-dx serve #--verbose
-dx serve --platform web
+dx serve --platform web #--verbose
 
 dx serve --platform desktop #rm -rf dist
-cd dist && cargo r --features desktop
+#cd dist && cargo r -F desktop
+
+dx serve --platform android #ios
 ```
 
 Open the browser to <http://localhost:8080/inperiod>

index.html

@@ -4,42 +4,39 @@
   <meta charset="UTF-8" />
   <!--meta content="text/html; charset=utf-8" http-equiv="Content-Type" /-->
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-  <title>{app_title}</title>
-  <base href="/{base_path}/"/>
-  <link rel='icon' href='ptable.svg'/>
-
-  <style> @media print {
-      @page { size: A4 landscape; margin: 0; }  /* 设置页面的方向为横向并清除默认页边距 */
-      body { width: 297mm; margin: auto; }      /* 设置主体样式以适应横向打印 */
-      .non-printable { display: none; }         /* 隐藏非打印元素 */
-  } </style>
-
-  {style_include}{script_include}
-
-  <script type="module">
-    import init from "/{base_path}/assets/dioxus/{app_name}.js";
-    init("/{base_path}/assets/dioxus/{app_name}_bg.wasm").then(wasm => {
-      if (wasm.__wbindgen_start == undefined) { wasm.main(); }
-    });
-  </script>
+  <title>{app_title}</title> <base href="/{base_path}/"/>
 </head>
 
 <body id="main"> <!--div id="main"></div-->
   <script>
-    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-    if (isChrome) { document.body.style.zoom = '0.5'; } else {
-    /* if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) */
-      /* const elem = document.documentElement; <html> */
-      const elem = document.body;
-      const scale = 0.5;
-      const width  = scale * elem.offsetWidth;
-      const height = scale * elem.offsetHeight;
-      elem.style.transform = `scale(${scale})`;
-      elem.style.transformOrigin = '0 0';
-      elem.style.width  = width  + 'px';
-      elem.style.height = height + 'px';
-    }
+const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+if (isChrome) { document.body.style.zoom = '0.5'; } else {
+/* if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) */
+  /* const elem = document.documentElement; <html> */
+  const elem = document.body;
+  const scale = 0.5;
+  const width  = scale * elem.offsetWidth;
+  const height = scale * elem.offsetHeight;
+  elem.style.transform = `scale(${scale})`;
+  elem.style.transformOrigin = '0 0';
+  elem.style.width  = width  + 'px';
+  elem.style.height = height + 'px';
+
+  const style = document.createElement('style');
+  style.innerHTML = `
+select { appearance: none; }
+select:not([size]) { /* https://flowbite.com/docs/forms/select/ */
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");
+  background-position: right .75rem center;
+  background-repeat: no-repeat;
+  background-size: .75em .75em;
+  padding-right: 2.25rem;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+`;
+  document.head.appendChild(style);
+}
   </script>
 </body>
 </html>