random refined and amend code layout of ElemTile

.github/workflows/publish.yml

@@ -1,5 +1,7 @@
 
-name: Publish
+# https://github.com/actions/deploy-pages
+# https://github.com/actions/upload-pages-artifact
+name: Publish/Deploy
 
 on:
   push:
@@ -39,19 +41,19 @@ jobs:
 
       - name: Build Project
         run: | #cargo r --bin syncd -F syncdep
-            npx tailwindcss -m -i ./tailwind_base.css -o ./assets/tailwind.css
+            npx tailwindcss -m -i tailwind_base.css -o assets/tailwind.css
             dx build --release
             cargo t
 
       #- name: Setup GitHub Pages
-      #  uses: actions/configure-pages@v3
+      #  uses: actions/configure-pages@v4
       - name: Upload Artifacts
         uses: actions/upload-pages-artifact@v3
         with:
           path: dist
 
   deploy:
-    if: github.ref == 'refs/heads/master'
+    #if: github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
     needs: build
 

Dioxus.toml

@@ -12,6 +12,7 @@ default_platform = "web"
 [web.app]
 title = "Elements Periodic Table"   # HTML title tag content
 base_path = "inperiod" # "/"
+#index_on_404 = true
 
 [web.watcher]
 reload_html = true  # when watcher trigger, regenerate the `index.html`

README.md

@@ -36,7 +36,7 @@ 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
+npx tailwindcss -i tailwind_base.css -o assets/tailwind.css --watch
 ```
 
 Launch the Dioxus Web/Desktop app:

build.rs

@@ -13,15 +13,15 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
 /*  npm install -D tailwindcss; npm install tw-elements
     sh -c "[ ! -d node_modules ] && npm i; npm run build_css"
 
-    process::Command::new("npm").args(["run", "build_css"]).status().unwrap();
+    process::Command::new("npm").args(["run", "build_css"]).status()?;
 
     npx tailwindcss init  # generate a mininum tailwind.config.js
-    npx tailwindcss -m -i tailwind_base.css -o dist/tailwind.css #-c tailwind.config.js #-w */
+    npx tailwindcss -m -i tailwind_base.css -o assets/tailwind.css #-c tailwind.config.js #-w */
 
     let minify = if let Ok("release") =
         std::env::var("PROFILE").as_deref() { "-m" } else { "" };
     process::Command::new("npx").args(["tailwindcss", minify, //"-c", twcfg,
-        "-i", twcss, "-o", "dist/tailwind.css"]).status()?;
+        "-i", twcss, "-o", "assets/tailwind.css"]).status()?;
     Ok(())
 }
 

src/syncd.rs

@@ -5,7 +5,6 @@
  * Copyright (c) 2024 M.H.Fan, All rights reserved.             *
  ****************************************************************/
 
-#![allow(non_snake_case)] #![allow(unused)]
 use std::{error::Error, fs::{self, File}, io::Write, path::PathBuf};
 use reqwest::blocking::get as reqwest_get;  // TODO: reqwest::get(url).await?.text().await?;
 use scraper::{Html, Selector};
@@ -231,7 +230,7 @@ fn parse_ciaaw() -> Result<(), Box<dyn Error>> {
 }
 
 /// https://pubchem.ncbi.nlm.nih.gov/periodic-table/
-fn parse_pubchem() -> Result<(), Box<dyn Error>> {
+#[allow(non_snake_case)] fn parse_pubchem() -> Result<(), Box<dyn Error>> {
     use serde::Deserialize;
     #[derive(Deserialize)] struct AllElem { Table: Table, }
     #[derive(Deserialize)] struct Table { Columns: Columns, Row: Vec<Row>, }

tailwind.config.js

@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
-  mode: "all",
+  //mode: "all",
 
   theme: {
     //container: { center: true, },
@@ -20,10 +20,10 @@ module.exports = {
     //require('@tailwindcss/typography'),
     //require('@tailwindcss/aspect-ratio'),
     //require('@tailwindcss/line-clamp'),
-    //require('tw-elements/dist/plugin'),
+    //require('tw-elements/plugin.cjs'), // npm install tw-elements
   ],
 
   //presets: [ require('@acmecorp/tailwind-base') ],
   // https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js
   // npm install -D tailwindcss // npx tailwindcss init #--full
-};
+}

tailwind_base.css

@@ -18,7 +18,3 @@
 .text-liquid    { @apply text-blue-700; }
 .text-gas       { @apply text-red-700; }
 
-/* .custom-class {
-    @apply text-center font-bold text-blue-500 p-4;
-} */
-