diff --git a/src/contents/Contribution/Wiki/Filterables.tsx b/src/contents/Contribution/Wiki/Filterables.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8b0d913e72bd280b6847a9cfef77a5dfa8182f03
--- /dev/null
+++ b/src/contents/Contribution/Wiki/Filterables.tsx
@@ -0,0 +1,29 @@
+import Collapsible from "../../../components/Collapsible";
+import { H5 } from "../../../components/Headings";
+import { Troubleshoot } from "./trouble-data";
+
+
+export function Filterables(data: Array<Troubleshoot>){
+ let count = 2;
+ let results = [];
+ for (let index = 0; index < data.length; index++) {
+ let tags = ""
+ for (let i = 0; i < data[index].tags.length; i++) {
+ tags += data[index].tags[i] + " ";
+ }
+ results.push(
+ <div className={`filterable all ${tags}`} id={`wiki-trouble-${count}`}>
+ <Collapsible title={data[index].title} id={`wiki-trouble-${count}-collapsible`}>
+ {data[index].text}
+ <H5 text="Example"/>
+ {data[index].examplechildren}
+ <H5 text="Solution"/>
+ {data[index].solutionchildren}
+ </Collapsible>
+ </div>
+ )
+ count ++;
+ }
+ return results;
+}
+
diff --git a/src/contents/Contribution/Wiki/trouble-data.tsx b/src/contents/Contribution/Wiki/trouble-data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d2288f80320e016d4f1a36774afc3d8cc67531b1
--- /dev/null
+++ b/src/contents/Contribution/Wiki/trouble-data.tsx
@@ -0,0 +1,233 @@
+import { Code } from "../../../components/Code";
+
+export interface Troubleshoot{
+ tags: Array<Searchcriteria>;
+ title: string;
+ examplechildren: React.ReactNode;
+ solutionchildren: React.ReactNode;
+ text?: React.ReactNode;
+}
+
+type Searchcriteria = "html" | "script" | "css" | "react" | "type" | "properties" | "pipeline" | "module" | "browser" | "console" |"overload" ;
+
+export const troubledata: Array<Troubleshoot> = [
+ {
+ tags: ["react", "type"],
+ title: "Type X is not assignable to type Y.",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["pipeline"],
+ title: "The pipeline passed but the Wiki is not visible under the url",
+ text: <><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></>,
+ examplechildren: <><Code>
+ <p>return defineConfig({</p>
+ <p>base: `/`,</p>
+ <p>...</p>
+ </Code></>,
+ solutionchildren: <><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></>
+ },
+ {
+ tags: ["console"],
+ title: "NS_ERROR_CORRUPTED_CONTENT error in console",
+ text: <><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>
+ </>,
+ examplechildren: <><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></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["browser", "console"],
+ title: "Blocked due to MIME type (“text/htmlâ€) mismatch (X-Content-Type-Options: nosniff) (Firefox)",
+ examplechildren: <><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>
+ </>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["console", "browser"],
+ 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)",
+ examplechildren: <><p> → See also "Blocked due to MIME type (“text/htmlâ€) mismatch (X-Content-Type-Options: nosniff) (Firefox)"</p> </>,
+ solutionchildren: <><p>This error could </p></>
+ },
+ {
+ tags: ["react", "type"],
+ title: "Type 'undefined' cannot be used as an index type",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "overload"],
+ title: "No overload matches this call.",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "module"],
+ title: "Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.",
+ examplechildren: <>index.tsx:
+ <p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
+ </>,
+ solutionchildren: <><p>Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
+ </p></>
+ },
+ {
+ tags: ["pipeline"],
+ title: "error TS6133: 'event' is declared but its value is never read.",
+ examplechildren: <>HorizontalTimeline.tsx:
+ <div className="terminal-box">
+ $ yarn build
+ <p>yarn run v1.22.19</p>
+ <p>$ tsc && vite build</p>
+ <p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
+ error Command failed with exit code 2.</p>
+ <p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
+ </div>
+ <p>in</p>
+ <Code>
+ const openPop = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {}
+ </Code></>,
+ solutionchildren: <><p>Change to: </p>
+ <Code>
+ const openPop = (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {}
+ </Code></>
+ },
+ {
+ tags: ["html"],
+ title: "Unexpected token. Did you mean `{'>'}` or `>`?\" id=\"wiki-trouble-16",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "type"],
+ title: "Type 'x | undefined' is not assignable to type 'x'",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "type", "properties"],
+ title: "Type X is missing the following properties from type Y: a, b, c",
+ examplechildren: <><p className="problem-error">
+ Type '{ date: string; text: string; }' is missing the following properties from type 'TextEventProps': marker, card
+ </p>
+ <p>In reference of the interface TextEventProps:</p>
+ <Code>
+ <p>interface TextEventProps { </p>
+ <p>date: string; </p>
+ <p>text: string; </p>
+ <p>marker: React.ReactNode; </p>
+ <p>id: string; </p>
+ <p>card: Function; </p>
+ }
+ </Code>
+ <p>For the code:</p>
+ <Code>
+ <p> <TextEvent </p>
+ <p> id="05"</p>
+ <p> date="14-06-2024"</p>
+ <p> text="Test test"</p>
+ <p> /></p>
+ </Code></>,
+ solutionchildren: <>
+ <h6>Solutions</h6>
+ <p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
+ <p>If you want to stick to more general Interfaces, you can make properties optional:</p>
+ <Code>
+ <p>interface TextEventProps { </p>
+ <p>date: string; </p>
+ <p>text: string; </p>
+ <p>marker?: React.ReactNode; </p>
+ <p>id: string; </p>
+ <p>card?: Function; </p>
+ }
+ </Code>
+ <p>Remember that this can lead to different return cases for your functions.</p></>
+ },
+ {
+ tags: ["react", "type", "properties"],
+ title: "Property x does not exist on type Y.",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "type", "properties"],
+ title: "Property x is missing in type y but required in type z.",
+ examplechildren: <><p className="problem-error"> Argument of type '{ [x: string]: any; }' is not assignable to parameter of type '{ classNames: string[]; }'.
+ Property 'classNames' is missing in type '{ [x: string]: any; }' but required in type '{ classNames: string[]; }'.</p>
+ <p> for </p>
+ <Code>className={joinClassNames({['text-event', className]})} </Code>
+ </>,
+ solutionchildren: <><p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
+ <p>Changing it to </p>
+ <Code>className={joinClassNames({<b>classNames:</b>['text-event ', className]})}</Code>
+ </>
+ },
+ {
+ tags: ["css"],
+ title: "I added css styles but they do not show",
+ examplechildren: <><p>The color is not showing on hover.</p>
+ <Code>.nav-link:hover {
+ color: var(--darkpurple);
+ background-color: var(--yellow) !important;
+ border-radius: 3px;
+ }</Code></>,
+ solutionchildren: <><p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
+ <p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
+ <p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
+ <Code> .nav-link:hover {
+ color: var(--darkpurple) <b>!important</b>;
+ background-color: var(--yellow) !important;
+ border-radius: 3px;
+ }
+ </Code></>
+ },
+ {
+ tags: ["css", "script"],
+ title: "(subtabs[i] as HTMLElement).style.display = \"x\"; is not working.",
+ examplechildren: <></>,
+ solutionchildren: <></>
+ },
+ {
+ tags: ["react", "script"],
+ title: "Property 'style' does not exist on type 'Element'.",
+ examplechildren: <>
+ <p className="problem-error">
+ Property 'style' does not exist on type 'Element'.
+ </p>
+ <p>for the Code: </p>
+ <Code>
+ const subtabs = document.getElementsByClassName("sidesubtab");
+
+ for (let i = 0; i < subtabs.length; i++) {
+ (subtabs[i]).style.display = "none";
+ console.log(\`Hiding subtab: ${subtabs[i].id}\`);
+ }
+ </Code>
+ </>,
+ solutionchildren: <></>
+ },
+
+
+ ]
\ No newline at end of file
diff --git a/src/contents/Contribution/Wiki/troubleshooting.tsx b/src/contents/Contribution/Wiki/troubleshooting.tsx
index 0f0e23972728f8f15b95bad81301854f01591779..27512116f44bb91228565ff8d8b9595dc36e943f 100644
--- a/src/contents/Contribution/Wiki/troubleshooting.tsx
+++ b/src/contents/Contribution/Wiki/troubleshooting.tsx
@@ -1,9 +1,9 @@
-import { Code } from "../../../components/Code";
-import Collapsible from "../../../components/Collapsible";
import { WikiSelector } from "../../../components/Filter";
+import { Filterables } from "./Filterables";
+import { troubledata } from "./trouble-data";
export function Troubleshooting(){
-
+ let items = Filterables(troubledata)
return(
<div>
Please select what you want to troubleshoot for.
@@ -11,203 +11,16 @@ export function Troubleshooting(){
<div id="nono" className="noshow">
This combination returns no instances.
</div>
- <div className="filterable all react type property">
- <Collapsible id="wiki-trouble-1" title="Argument of type X is not assignable to parameter of type Y. ">
- <h6>Example</h6>
- <h6>Solutions</h6>
-
- </Collapsible>
- </div>
- <div className="filterable all react type">
- <Collapsible id="wiki-trouble-2" title="Type X is not assignable to type Y.">
- <h6>Example</h6>
- <h6>Solutions</h6>
- </Collapsible>
- </div>
- <div className="filterable all css">
- <Collapsible id="wiki-trouble-3" title="I added css styles but they do not show">
- <h6>Example</h6>
- <p>The color is not showing on hover.</p>
- <Code>.nav-link:hover {
- color: var(--darkpurple);
- background-color: var(--yellow) !important;
- border-radius: 3px;
- }</Code>
- <h6>Solution</h6>
- <p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
- <p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
- <p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
- <Code> .nav-link:hover {
- color: var(--darkpurple) <b>!important</b>;
- background-color: var(--yellow) !important;
- border-radius: 3px;
- }
- </Code>
- </Collapsible>
- </div>
- <div className="filterable all react type property">
- <Collapsible id="wiki-trouble-4" title="Property x is missing in type y but required in type z.">
- <h6>Example</h6>
- <p className="problem-error"> Argument of type '{ [x: string]: any; }' is not assignable to parameter of type '{ classNames: string[]; }'.
- Property 'classNames' is missing in type '{ [x: string]: any; }' but required in type '{ classNames: string[]; }'.</p>
- <p> for </p>
- <Code>className={joinClassNames({['text-event', className]})} </Code>
- <h6>Solutions</h6>
- <p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
- <p>Changing it to </p>
- <Code>className={joinClassNames({<b>classNames:</b>['text-event ', className]})}</Code>
- </Collapsible>
- </div>
- <div className="filterable all react type property">
- <Collapsible id="wiki-trouble-5" title="Property x does not exist on type Y.">
- <h6>Example</h6>
- <h6>Solutions</h6>
- </Collapsible>
- </div>
- <div className="filterable all react type property">
- <Collapsible id="wiki-trouble-6" title="Type X is missing the following properties from type Y: a, b, c">
- <h6>Example</h6>
- <p className="problem-error">
- Type '{ date: string; text: string; }' is missing the following properties from type 'TextEventProps': marker, card
- </p>
- <p>In reference of the interface TextEventProps:</p>
- <Code>
- <p>interface TextEventProps { </p>
- <p>date: string; </p>
- <p>text: string; </p>
- <p>marker: React.ReactNode; </p>
- <p>id: string; </p>
- <p>card: Function; </p>
- }
- </Code>
- <p>For the code:</p>
- <Code>
- <p> <TextEvent </p>
- <p> id="05"</p>
- <p> date="14-06-2024"</p>
- <p> text="Test test"</p>
- <p> /></p>
- </Code>
- <h6>Solutions</h6>
- <p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
- <p>If you want to stick to more general Interfaces, you can make properties optional:</p>
- <Code>
- <p>interface TextEventProps { </p>
- <p>date: string; </p>
- <p>text: string; </p>
- <p>marker?: React.ReactNode; </p>
- <p>id: string; </p>
- <p>card?: Function; </p>
- }
- </Code>
- <p>Remember that this can lead to different return cases for your functions.</p>
- </Collapsible>
- </div>
- <div className="filterable all react type">
- <Collapsible id="wiki-trouble-7" title="Type 'x | undefined' is not assignable to type 'x'.">
- <h6>Example</h6>
- <h6>Solutions</h6>
- </Collapsible>
- </div>
- <div className="filterable all pipeline">
- <Collapsible id="wiki-trouble-8" 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 id="wiki-trouble-9" 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 id="wiki-trouble-10" 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 id="wiki-trouble-11" 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 id="wiki-trouble-12" title="Type 'undefined' cannot be used as an index type">
- <h6>Example</h6>
- <h6>Solutions</h6>
- </Collapsible>
- </div>
- <div className="filterable all react overload">
- <Collapsible id="wiki-trouble-13" title="No overload matches this call.">
- <h6>Example</h6>
- <h6>Solutions</h6>
- </Collapsible>
- </div>
- <div className="filterable all react module">
- <Collapsible id="wiki-trouble-14" title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
- <h6>Example</h6>
- index.tsx:
- <p className="problem-error"> Module "./Bfh.tsx" has already exported a member named 'LabTabs'. Consider explicitly re-exporting to resolve the ambiguity.</p>
- <h6>Solutions</h6>
- Simply rename the function in one of the modules or consider making it a component if you plan on using it frequently.
- </Collapsible>
- </div>
- <div className="filterable all pipeline">
- <Collapsible id="wiki-trouble-15" title="error TS6133: 'event' is declared but its value is never read.">
- <h6>Example</h6>
- HorizontalTimeline.tsx:
- <div className="terminal-box">
- $ yarn build
- <p>yarn run v1.22.19</p>
- <p>$ tsc && vite build</p>
- <p className="terminal-error">src/components/HorizontalTimeline.tsx(67,23): error TS6133: 'event' is declared but its value is never read.
- error Command failed with exit code 2.</p>
- <p>info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.</p>
- </div>
- <p>in</p>
- <Code>
- const openPop = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {}
- </Code>
- <h6>Solutions</h6>
- <p>Change to: </p>
- <Code>
- const openPop = (_event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {}
- </Code>
- </Collapsible>
- </div>
+ {items}
+
+
+
+
+
+
+
+
+
</div>
)
}
diff --git a/src/contents/Contribution/Wiki/wiki-start.tsx b/src/contents/Contribution/Wiki/wiki-start.tsx
index 31db00771b3f8281d334404c85957fe62d69b5e1..9f2a15727801af13b8b3cc6cac1f003a56089b75 100644
--- a/src/contents/Contribution/Wiki/wiki-start.tsx
+++ b/src/contents/Contribution/Wiki/wiki-start.tsx
@@ -3,7 +3,7 @@ export function Started(){
return(
<>
<h3>Differences between React and plain HTML</h3>
- <p>There are some differences in the syntax that can lead to errors.</p>
+ <p>These can lead to confusing errors if you are used to HTML.</p>
<table>
<thead>
<tr>
@@ -17,7 +17,7 @@ export function Started(){
<th> <code><tags> </code> </th>
<th>
<p> Most tags have to be opened and closed, but some can be only opened. </p>
- <p> e.g. img, br, ... <code> <img src:"somesource" alt="alt"> </code> </p>
+ <p> e.g. img, br, ... <code> <img src:"somesource" alt="alt"> </code> </p>
</th>
<th>
<p> Every tag has to be closed. </p>
@@ -53,6 +53,7 @@ export function Started(){
</tr>
</tbody>
</table>
+ <h3>Good to knows</h3>
</>
)
}