fix: resolve image and font access, improve render, use new Trunk

Author: MarcAntoine-Arnaud

Cargo.lock

@@ -13,7 +13,7 @@ browser-panic-hook = "0.2"
 chrono = { version = "0.4.30", default-features = false, features = ["wasmbind"] }
 gloo-utils = "0.2"
 log = "0.4"
-patternfly-yew = { version = "0.7", features = ["tree", "icons-fab"] }
+patternfly-yew = { version = "0.7.3", features = ["tree", "icons-fab"] }
 popper-rs = { version = "0.4", features = ["yew", "debug"] }
 serde_json = "1"
 strum = { version = "0.27", features = ["derive"] }

Cargo.toml

@@ -5,32 +5,32 @@ export default function initializer() {
       console.time("trunk-initializer");
 
       document.body.insertAdjacentHTML("afterbegin", `
-<div class="pf-v5-l-bullseye">
-  <div class="pf-v5-l-bullseye__item" style="width: 50%;">
-    <div id="initializer" class="pf-v5-c-progress">
+<div class="pf-v6-l-bullseye">
+  <div class="pf-v6-l-bullseye__item" style="width: 50%;">
+    <div id="initializer" class="pf-v6-c-progress">
       <div
-        class="pf-v5-c-progress__description"
+        class="pf-v6-c-progress__description"
         id="initializerState"
       >Loading</div>
-      <div id="initializerStatus" class="pf-v5-c-progress__status" aria-hidden="true">
-        <span id="initializerLabel" class="pf-v5-c-progress__measure">0%</span>
+      <div id="initializerStatus" class="pf-v6-c-progress__status" aria-hidden="true">
+        <span id="initializerLabel" class="pf-v6-c-progress__measure">0%</span>
       </div>
       <div
-        class="pf-v5-c-progress__bar"
+        class="pf-v6-c-progress__bar"
         id="initializerBar"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="0"
         aria-labelledby="progress-simple-example-description"
       >
-        <div id="initializerValue" class="pf-v5-c-progress__indicator" style="width:0;"></div>
+        <div id="initializerValue" class="pf-v6-c-progress__indicator" style="width:0;"></div>
       </div>
     </div>
-    <div id="initializerHelper" class="pf-v5-c-progress__helper-text pf-m-hidden">
-      <div class="pf-v5-c-helper-text">
-        <div class="pf-v5-c-helper-text__item">
-          <span id="initializerHelperText" class="pf-v5-c-helper-text__item-text"></span>
+    <div id="initializerHelper" class="pf-v6-c-progress__helper-text pf-m-hidden">
+      <div class="pf-v6-c-helper-text">
+        <div class="pf-v6-c-helper-text__item">
+          <span id="initializerHelperText" class="pf-v6-c-helper-text__item-text"></span>
         </div>
       </div>
     </div>
@@ -93,7 +93,7 @@ function setState(value, helperText) {
     }
     const status = document.getElementById("initializerStatus");
     status.innerHTML = `
-      <span class="pf-v5-c-progress__status-icon">
+      <span class="pf-v6-c-progress__status-icon">
         <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
       </span>
     `;

assets/initializer.mjs

@@ -1,8 +1,16 @@
 // only required if you are using the icons-far or icons-fab feature
 // $fa-font-path: "webfonts";
-@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
-@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
+@import "../target/node_modules/@fortawesome/fontawesome-free/7.1.0/scss/fontawesome";
+@import "../target/node_modules/@fortawesome/fontawesome-free/7.1.0/scss/brands";
 
 // PatternFly styles
-@import "../node_modules/@patternfly/patternfly/patternfly.scss";
-@import "../node_modules/@patternfly/patternfly/patternfly-addons.scss";
+@import "../target/node_modules/@patternfly/patternfly/6.4.0/patternfly.scss";
+@import "../target/node_modules/@patternfly/patternfly/6.4.0/patternfly-addons.scss";
+
+@font-face {
+  font-family: "Font Awesome 7 Brands";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./webfonts/fa-brands-400.woff2");
+}

assets/style.scss

@@ -12,12 +12,12 @@
 
   <link data-trunk rel="scss" href="assets/style.scss">
   <!-- This path needs to be here, otherwise icons won't render correctly -->
-  <link data-trunk rel="copy-dir" href="node_modules/@patternfly/patternfly/assets" data-target-path="assets/">
+  <link data-trunk rel="copy-dir" href="target/node_modules/@patternfly/patternfly/6.4.0/assets" data-target-path="assets/">
   <link data-trunk rel="copy-dir" href="assets/images">
 
   <!-- include when using the icons-far or icons-fab feature -->
   <!-- also requires includes in the assets/styles.scss file -->
-  <link data-trunk rel="copy-dir" href="node_modules/@fortawesome/fontawesome-free/webfonts">
+  <link data-trunk rel="copy-dir" href="target/node_modules/@fortawesome/fontawesome-free/7.1.0/webfonts">
 
   <link data-trunk rel="rust" href="Cargo.toml" data-wasm-opt="z" data-initializer="assets/initializer.mjs"/>
 

index.html

@@ -525,7 +525,7 @@ fn page(props: &PageProps) -> Html {
         <MastheadBrand>
             <div className="show-light">
                 <Brand
-                    src="/images/pf-logo.svg"
+                    src="./images/pf-logo.svg"
                     alt="Patternfly Logo"
                     style="--pf-v6-c-brand--Height: 36px;"
                 />
@@ -600,5 +600,5 @@ fn page(props: &PageProps) -> Html {
         </Toolbar>
     );
 
-    html! (<Page {brand} {sidebar} {tools}>{ for props.children.iter() }</Page>)
+    html! (<Page {brand} {sidebar} {tools} full_height=true>{ for props.children.iter() }</Page>)
 }

package-lock.json

@@ -1,3 +1,3 @@
 html!(
-    <Brand src="/images/pf-logo.svg" alt="PatternFly logo" />
+    <Brand src="./images/pf-logo.svg" alt="PatternFly logo" />
 )