Type error and other fixes

pages/playlists.tsx

@@ -8,7 +8,26 @@ type listItem = {
     title: string;
 };
 
-const list: listItem[] = pl;
+function toListItem(record: Record<string, any>): listItem | null {
+    if (!record.title)
+        return null;
+
+    let children: listItem[]= [];
+    if (record.children)
+        for (const child of record.children) {
+            const lChild = toListItem(child);
+            if (lChild)
+                children.push(lChild);
+        }
+
+    return {
+        title: record.title,
+        url: record.url,
+        children: children.length? children : undefined,
+    };
+}
+
+const list: listItem[] = [];
 
 function mapChild(obj: listItem, level: number) {
     if (obj.url)
@@ -38,7 +57,13 @@ function Playlists() {
         <Layout name='Playlists'>
             <section className='block'>
                 <h2>Music</h2>
-                {list.map(l => mapChild(l, 0))}
+                {
+                    pl.map((item: Record<string, any>) => {
+                        const lItem = toListItem(item)
+                        if (lItem)
+                            return mapChild(lItem, 0)
+                    })
+                }
             </section>
         </Layout>
     );

pages/posts/[page].tsx

@@ -9,7 +9,10 @@ function Post({post} : any) { // eh
     return (
         <Layout name={post.title} title={post.title} ancestors={[{name:'Posts', path: 'posts'}]}>
             <section className='block'>
-                {post.cover ? <Image width={640} height={360} layout="intrinsic" src={`/assets/images/${post.cover}`} alt={`${post.title} Cover Image`} /> : ''}
+                <div className="block" style={{position: 'relative', height: '360px', width: '640px'}}>
+                {post.cover ? <Image width={640} height={360} layout="fill" src={`/assets/images/${post.cover}`} alt={`${post.title} Cover Image`} /> : ''}
+
+                </div>
                 <ReactMarkdown>{post.content}</ReactMarkdown>
             </section>
         </Layout>

pages/recommended.tsx

@@ -1,51 +1,6 @@
-import React, { ReactElement } from 'react';
 import Layout from '../components/layout';
-import style from '../styles/lists.module.css';
 import rec from '../public/recommended.yaml';
-
+import {toListItem, mapChild} from '../util/resrec';
-type listItem = {
-    children?: listItem[] | string[];
-    url?: string;
-    title: string;
-    description?: string
-};
-
-const list: listItem[] = rec // todo: validate this
-
-function mapChild(obj: listItem | string, level: number) {
-console.log(list)
-if (typeof obj === 'string') {
-        if (obj === '')
-            return <></>
-        return <span className={style.listItem}>{obj}</span>
-    }
-
-    if (obj.title === '')
-        return <></>
-
-    if (obj.url)
-        return <span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
-
-    if (!obj.children)
-        return <span className={style.listItem}>{obj.title}</span>
-
-    let title: ReactElement;
-
-    if (level >= 0 && level <= 4)
-        title = React.createElement(`h${level + 2}`, {}, obj.title);
-    else
-        title = React.createElement('strong', {}, obj.title);
-
-    return (
-        <>
-            {title}
-            {obj.description ? <p>{obj.description}</p> : <></>}
-            <div>
-                {obj.children.map(l => mapChild(l, level + 1))}
-            </div>
-        </>
-    );
-}
 
 function Recommended() {
     return (
@@ -53,7 +8,13 @@ function Recommended() {
             <section className='block'>
                 <p>This page is really for me to not forget/revisit the good things I have read, seen, heard, and/or experienced. This list may change, just as my opinions.</p>
                 <p>If the one you are looking for is not on this list, it is most likely I have not had the chance to read/listen to/watch it yet.</p>
-                {list.map(l => mapChild(l, 0))}
+                {
+                    rec.map((item: Record<string, any>) => {
+                        const lItem = toListItem(item)
+                        if (lItem)
+                            return mapChild(lItem, 0)
+                    })
+                }
             </section>
         </Layout>
     );

pages/resources.tsx

@@ -1,56 +1,18 @@
-import React, { ReactElement } from 'react';
 import Layout from '../components/layout';
-import style from '../styles/lists.module.css';
 import res from '../public/resources.yaml';
-
+import {toListItem, mapChild} from '../util/resrec';
-type listItem = {
-    children?: listItem[] | string[];
-    url?: string;
-    title: string;
-    description?: string
-};
-
-const list: listItem[] = res;
-
-function mapChild(obj: listItem | string, level: number) {
-    if (typeof obj === 'string') {
-        if (obj === '')
-            return <></>
-        return <span className={style.listItem}>{obj}</span>
-    }
-
-    if (obj.title === '')
-        return <></>
-
-    if (obj.url)
-        return <span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
-
-    if (!obj.children)
-        return <span className={style.listItem}>{obj.title}</span>
-
-    let title: ReactElement;
-
-    if (level >= 0 && level <= 4)
-        title = React.createElement(`h${level + 2}`, {}, obj.title);
-    else
-        title = React.createElement('strong', {}, obj.title);
-
-    return (
-        <>
-            {title}
-            {obj.description ? <p>{obj.description}</p> : <></>}
-            <div>
-                {obj.children.map(l => mapChild(l, level + 1))}
-            </div>
-        </>
-    );
-}
 
 function Resources() {
     return (
         <Layout name='Resources' title='Some Useful Resources'>
             <section className='block'>
-                {list.map(l => mapChild(l, 0))}
+                {
+                    res.map((item: Record<string, any>) => {
+                        const lItem = toListItem(item)
+                        if (lItem)
+                            return mapChild(lItem, 0)
+                    })
+                }
             </section>
         </Layout>);
 }

shims.d.ts

@@ -0,0 +1,4 @@
+declare module '*.yaml' {
+    const record: Record<string, any>;
+    export default record;
+}

styles/global.css

@@ -140,6 +140,11 @@ section {
     margin: 0.5rem;
 }
 
+img {
+    border: 1px solid #FFFFFF;
+    border-radius: 1rem;
+}
+
 .lambda-logo {
     width: 256px;
     height: 256px;
@@ -150,9 +155,9 @@ section {
 }
 
 .block {
-    margin: 0 2rem;
+    max-width: 1018px;
+    margin: 0 auto;
     padding: 2rem;
-    /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */
     border: 1px solid #ffffff;
     border-bottom: none;
 }

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "importHelpers": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "shims.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

util/resrec.tsx

@@ -0,0 +1,80 @@
+import style from '../styles/lists.module.css';
+import React, { ReactElement } from 'react';
+
+interface listItem {
+    children?: listItem[] | string[];
+    url?: string;
+    title: string;
+    description?: string;
+};
+
+export function toListItem(record: Record<string, any>): listItem | null {
+    if (!record.title)
+        return null;
+
+    let children: listItem[] | string[] = [];
+    if (Array.isArray(record.children) && record.children.length) {
+
+        let lchildren: listItem[] = [];
+        let schildren: string[] = [];
+        for (const child of record.children) {
+            if (typeof child === 'string') {
+                schildren.push(child);
+                continue;
+            }
+            const lChild = toListItem(child);
+            if (lChild)
+                lchildren.push(lChild);
+        }
+
+        if (!lchildren.length) {
+            children = schildren;
+        }
+        else {
+            children = [...lchildren, ... schildren.map((s: string): listItem => {
+                return { title: s };
+            }) ];
+        }
+    }
+
+    return {
+        title: record.title,
+        url: record.url,
+        children: children.length? children : undefined,
+        description: record.description,
+    };
+}
+
+export function mapChild(obj: listItem | string, level: number) {
+    if (typeof obj === 'string') {
+        if (obj === '')
+            return <></>
+        return <span className={style.listItem}>{obj}</span>
+    }
+
+    if (obj.title === '')
+        return <></>
+
+    if (obj.url)
+        return <span className={style.listItem}><a href={obj.url}>{obj.title}</a></span>
+
+    if (!obj.children)
+        return <span className={style.listItem}>{obj.title}</span>
+
+    let title: ReactElement;
+
+    if (level >= 0 && level <= 4)
+        title = React.createElement(`h${level + 2}`, {}, obj.title);
+    else
+        title = React.createElement('strong', {}, obj.title);
+
+    return (
+        <>
+            {title}
+            {obj.description ? <p>{obj.description}</p> : <></>}
+            <div>
+                {obj.children.map(l => mapChild(l, level + 1))}
+            </div>
+        </>
+    );
+}