From 7afb40c2ff9696be45fd415632d151179c4060f8 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 15 Aug 2024 10:30:09 +0200
Subject: [PATCH] wiki errors
---
src/components/Filter.tsx | 74 ++++++++++++++++++++++-----------------
src/contents/wiki.tsx | 55 +++++++++++++++++++++++++++++
2 files changed, 96 insertions(+), 33 deletions(-)
diff --git a/src/components/Filter.tsx b/src/components/Filter.tsx
index ec57531e..905e905a 100644
--- a/src/components/Filter.tsx
+++ b/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;
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index 3a95e023..aaa97b11 100644
--- a/src/contents/wiki.tsx
+++ b/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({</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({</p>
+ <p>base: `/${stringToSlug(env.VITE_TEAM_NAME)}/`,</p>
+ <p>...</p>
+ </Code>
+ </Collapsible>
+ </div>
+ <div className="filterable all console">
+ <Collapsible title="NS_ERROR_CORRUPTED_CONTENT error in console">
+ <p> → 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: { </p>
+ <p>outDir: "dist",</p>
+ <p>rollupOptions: {</p>
+ <p>output: {</p>
+ <p> assetFileNames: `assets/[ext]/[name]-[hash].[ext]`</p>
+ <p>} } } , </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: {</p>
+ <p>preprocessorOptions: {</p>
+ <p>css: {</p>
+ <p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
+ <p> } } },</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> → See also "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>
+ <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> → 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>
--
GitLab