Merge pull request #6 from LambdaPaul/debug

Add resources

components/_fuzzy.tsx

@@ -43,17 +43,11 @@ export default class Fuzzy {
     showSearchResults(): void {
         let searchValue: string = this.searchValue.toLowerCase();
         searchValue = searchValue.trimStart().trimEnd();
-        if (
+        if (this.maxResults !== undefined && searchValue === ''){
-            (this.maxResults !== undefined && searchValue === '') ||
-            searchValue === '?' ||
-            searchValue === 'help') {
             this.setResultsValue(
                 <>
-                    <h2>Help</h2>
+                    <h2>Search PaulW.XYZ</h2>
-                    <div>Enter a page or directory name. If do not know any, clear the search field to list everything.</div>
+                    <div>Enter a page or directory name in the search bar above.</div>
-                    <div>Using the <code>Enter</code> key would take you to the first page in list, if the list is not empty.</div>
-                    <div>Alternatively, use the <code>Up</code> and <code>Down</code> arrow keys to select the page you want and use the <code>Enter</code> key.</div>
-                    <div>Use <code>Backspace</code> to go back to the search.</div>
                 </>
             )
             return;

pages/resources.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import Layout from '../components/layout';
+import style from '../styles/lists.module.css';
 
 type listItem = {
     children?: listItem[] | string[];
@@ -87,17 +88,17 @@ function mapChild(obj: listItem | string, level: number) {
     if (typeof obj === 'string') {
         if (obj === '')
             return <></>
-        return <li>{obj}</li>
+        return <span className={style.listItem}>{obj}</span>
     }
 
     if (obj.title === '')
         return <></>
 
     if (obj.url)
-        return <li key=''><a href={obj.url}>{obj.title}</a></li>
+        return <span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
 
     if (!obj.children)
-        return <li>{obj.title}</li>
+        return <span className={style.listItem}>{obj.title}</span>
 
     let title: ReactElement;
 
@@ -110,9 +111,9 @@ function mapChild(obj: listItem | string, level: number) {
         <>
             {title}
             {obj.description ? <p>{obj.description}</p> : <></>}
-            <ul>
+            <div>
                 {obj.children.map(l => mapChild(l, level + 1))}
-            </ul>
+            </div>
         </>
     );
 }
@@ -121,7 +122,7 @@ function Resources() {
     return (
         <Layout name='Resources' title='Some Useful Resources'>
             <section className='block'>
-
+                {list.map(l => mapChild(l, 0))}
             </section>
         </Layout>);
 }