wiki errors

src/components/Filter.tsx

@@ -20,40 +20,48 @@ const wikioptions =[
 ]
 
 
-      function filterMultiSelection(arr: Array<Props>){
-        let nono = document.getElementById("nono");
-        nono!.className = "noshow"; 
-        var x: string | any[] | HTMLCollectionOf<Element>, i: number;
-        x = document.getElementsByClassName("filterable");
-        for (i = 0; i < x.length; i++) {
-          let el = x[i]; 
-          w3RemoveClass(el, "show");
-        }
-        let shownum = 0; 
-        let boo = true;
-        for (i = 0; i < x.length; i++) {
-          
-          arr.forEach((entry) => {
-             if (x[i].className.indexOf(entry.value) <= -1){
-              boo = false; 
-             }
-             else{
-                if (!x[i].classList.contains(entry.value)){
-                  boo = false; 
-                }
-             }
-          }) 
-          if (boo){
-            w3AddClass(x[i], "show");
-            shownum++; 
-          }
-        }
-        let y = document.getElementsByClassName("show").length;
-        if (y < 1){
-            console.log(y)
-            nono!.className = "show"; 
-        }
+export function filterMultiSelection(arr: Array<Props>) {
+  const nono = document.getElementById("nono");
+  if (nono) {
+    nono.className = "noshow";
+  }
+
+  const filterableElements = document.getElementsByClassName("filterable");
+
+  // Remove "show" class from all elements
+  for (let i = 0; i < filterableElements.length; i++) {
+    const el = filterableElements[i];
+    w3RemoveClass(el, "show");
+  }
+
+  console.log("Begin");
+
+  // Apply filter criteria
+  for (let i = 0; i < filterableElements.length; i++) {
+    const el = filterableElements[i];
+    let shouldShow = true;
+
+    for (const entry of arr) {
+      console.log(`entry: ${entry.value}`);
+      if (!el.classList.contains(entry.value)) {
+        shouldShow = false;
+        break;
       }
+    }
+
+    console.log(`shouldShow: ${shouldShow}`);
+    if (shouldShow) {
+      w3AddClass(el, "show");
+    }
+  }
+
+  // Check if any element is shown
+  const shownElements = document.getElementsByClassName("show");
+  if (shownElements.length < 1 && nono) {
+    console.log(shownElements.length);
+    nono.className = "show";
+  }
+}
 
 /* function filterSelection(label: string) {
   var x, i;

src/contents/wiki.tsx

@@ -275,6 +275,61 @@ function Troubleshooting(){
         <h6>Solutions</h6>
         </Collapsible>
       </div>
+      <div className="filterable all pipeline">
+        <Collapsible title="The pipeline passed but the Wiki is not visible under the url">
+        <p>This error could be a result of a wrong base url in the vite.config.js file.</p>
+        <p>E.g. if you switched from plain HTML to the react framework. </p>
+        <h6>Example</h6>
+        <Code>
+          <p>return defineConfig(&#123;</p>
+          <p>base: `/`,</p>
+          <p>...</p>
+        </Code>
+        <h6>Solution</h6>
+        <p>Change the base url to reflect the correct team url.</p>
+        <Code>
+          <p>return defineConfig(&#123;</p>
+          <p>base: `/$&#123;stringToSlug(env.VITE_TEAM_NAME)&#125;/`,</p>
+          <p>...</p>
+        </Code>
+        </Collapsible>
+      </div>
+      <div className="filterable all console">
+        <Collapsible title="NS_ERROR_CORRUPTED_CONTENT error in console">
+        <p> &rarr; See also "The pipeline passed but the Wiki is not visible under the url" as these errors can be connected.</p>
+        <p> This error for css and js files can be the result of wrong <b>rollupOptions</b> in for the build, to be specific wrong <b>output</b> and <b>assetFileNames</b> options and possibly wrong/empty <b>css</b> options in your vite.config.js. </p>
+        <h6>Example</h6>
+        <p>In our case, we had the following code on our vite.config.js</p>
+        <Code>
+        <p>build: &#123; </p>
+      <p>outDir: "dist",</p>
+      <p>rollupOptions: &#123;</p>
+        <p>output: &#123;</p>
+          <p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
+        <p>&#125; &#125; &#125; , </p>
+        </Code>
+        <p> Our <b>css</b> options were empty, which could also have played a factor for the css files.</p>
+        <Code>
+        <p>css: &#123;</p>
+      <p>preprocessorOptions: &#123;</p>
+        <p>css: &#123;</p>
+          <p>  //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
+       <p> &#125; &#125; &#125;,</p>
+        </Code>
+        </Collapsible>
+      </div>
+      <div className="filterable all console">
+        <Collapsible title="Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)">
+        <p> &rarr; See also "Refused to apply style from &lt;&lt;css file&gt;&gt; because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)"</p>
+        <p>This error could </p>
+        </Collapsible>
+      </div>
+      <div className="filterable all console">
+        <Collapsible title="Refused to apply style from <<css file>> because its MIME type ('text/html') is not a supported stylesheet MIME type, strict MIME checking is enabled (Edge)">
+        <p> &rarr; See also "Blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p>
+        <p>This error could </p>
+        </Collapsible>
+      </div>
       <div className="filterable all react type">
         <Collapsible title="Type 'undefined' cannot be used as an index type">
         <h6>Example</h6>