navbar for pages from subdirectories now displaying properly

Dioxus.toml

@@ -8,10 +8,11 @@ out_dir = "target/d-dist"
 serve_dir = "target/d-dist"
 
 [web.app]
-title = "Eric Machmer TEST"
+title = "Eric Machmer"
 
 [web.resource]
-style = ["./assets/styles/tailwind.css"]
+# Include the '/' at the start of the file path below to ensure pages in subdirectories properly reference the css file
+style = ["/assets/styles/tailwind.css"] # This is injected into the head of the index.html document
 script = []
 
 [web.resource.dev]

__about_these_files.md

@@ -1,13 +1,20 @@
 
-
-
 # Currently best approach to running (without Docker)
         npm run build [to create the tailwinds.css before dioxus builds]
      then:
         dx serve --platform web [to serve the app locally]
         Serving at: http://127.0.0.1:8080     
 
+        'npm run build' will create a tailwinds.css file in an assets/styles directory in the root -- this will then be copied over later to the public folder in target. Essenialy two identical tailwind.css files will be in the proejct -- this is ok. The assets directory located in the final output (e.g., public/assets/styles/tailwind.css) is the one referenced by the <link> tag in index.html. The root-level assets folder in your project is just a source directory that dx build copies into the final output directory.
+
+        Detailed Explanation:
+
+        Your project root may contain an assets folder with CSS, images, or other static files.
+        When you run dx build, Dioxus copies these static assets into the final build output directory, often something like target/dx/<app_name>/release/web/public.
+        The index.html generated or processed by Dioxus references these files using relative paths like assets/styles/tailwind.css. This path points to the assets folder inside the output directory (e.g., public/assets/styles/tailwind.css), not the original assets folder at your project root.
 
+
+# REWORK THIS IF RETRYING WITH DOCKER
 IF USING DOCKER:
 1) open the Docker Desktop application to start the Docker daemon.
 2) With -t githubio-app assigns the name githubio-app to the image and 
@@ -23,39 +30,3 @@ IF USING DOCKER:
 Info:
 https://dioxuslabs.com/learn/0.5/cookbook/tailwind/
 
-run this to build tailwind.css and dx serve index.html:
- npm run serve   
-
-[Since now using unhashed tailwind filename this is no longer necessary:] Ensure 'cargo add manganis' has been run in terminal so manganis will be able to collect and link the css within the index.html file compiled by Dioxus. (Otherwise it will be necessary to handcode this css link in the dist/assets/index.html file: <link rel="stylesheet" href="assets/styles/tailwind.css"> )
-
-
-______
-
-Dioxus Builds to Static Files:
-
-When you build your Dioxus project (using trunk build or a similar command), it generates a dist directory containing: index.html, *.js (JavaScript files), *.wasm (WebAssembly files), CSS and other assets.
-
-GitHub Pages Serves the Files
-You simply push the contents of the dist directory to a branch like gh-pages (or main if configured) in your GitHub repository. GitHub Pages will host these files and serve them as a static website.
-
-First build Your Dioxus App: 
-Then run:
-trunk build --release (er: or something similar)
-This creates a dist directory with all the files needed to deploy.
-
-Configure GitHub Pages: 
-Ensure your repository has GitHub Pages enabled:
-Go to your repository's Settings > Pages.
-Select the branch (e.g., gh-pages) and specify / (root directory) for the source.
-
-Push the Files...if you’re using a gh-pages branch, copy the contents of the dist directory into the branch and push:
-git checkout --orphan gh-pages
-git rm -rf .
-cp -r dist/* .
-git add .
-git commit -m "Deploy Dioxus app"
-git push origin gh-pages
-Alternatively, use a deploy script like trunk serve with GitHub Pages.
-
-Access Your Site:
-Your site will be available at https://ericmachmer.github.io.

assets/styles/tailwind.css

@@ -554,18 +554,6 @@ video {
   display: none;
 }
 
-.visible {
-  visibility: visible;
-}
-
-.collapse {
-  visibility: collapse;
-}
-
-.relative {
-  position: relative;
-}
-
 .clear-both {
   clear: both;
 }
@@ -610,30 +598,6 @@ video {
   display: flex;
 }
 
-.table {
-  display: table;
-}
-
-.contents {
-  display: contents;
-}
-
-.hidden {
-  display: none;
-}
-
-.border-collapse {
-  border-collapse: collapse;
-}
-
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.resize {
-  resize: both;
-}
-
 .list-none {
   list-style-type: none;
 }
@@ -652,10 +616,6 @@ video {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.border {
-  border-width: 1px;
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -735,18 +695,10 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 
-.underline {
-  text-decoration-line: underline;
-}
-
 .no-underline {
   text-decoration-line: none;
 }
 
-.outline {
-  outline-style: solid;
-}
-
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package.json

@@ -7,7 +7,7 @@
     "tailwindcss": "^3.4.16"
   },
   "scripts": {
-    "build:css": "npx tailwindcss -i ./src/styles/input.css -o ./assets/styles/tailwind.css",
+    "build:css": "npx tailwindcss -i src/styles/input.css -o assets/styles/tailwind.css",
     "build:dioxus": "dx build --release --platform web",
     "build": "npm run build:css && npm run build:dioxus",
     "serve": "serve target/d-dist"

tailwind.config.js

@@ -6,7 +6,6 @@ module.exports = {
   mode: "all",
   content: [
     "./src/**/*.{rs,html,css}",
-    "./assets/**/*.css"
   ],
   theme: {
     extend: {