lambdapaul/www
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Type error and other fixes

Browse Source
This commit is contained in:
Paul W. 2022-04-23 20:35:53 -04:00
parent 8538512fa4
commit 103eec9551
8 changed files with 139 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
pages/playlists.tsx
View File

@ -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>
);

5
pages/posts/[page].tsx
View File

@ -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>

55
pages/recommended.tsx
View File

@ -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';
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>
</>
);
}
import {toListItem, mapChild} from '../util/resrec';
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>
);

54
pages/resources.tsx
View File

@ -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';
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>
</>
);
}
import {toListItem, mapChild} from '../util/resrec';
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>);
}

4
shims.d.ts vendored Normal file
View File

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

9
styles/global.css
View File

@ -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;
}

2
tsconfig.json
View File

@ -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"]
}

80
util/resrec.tsx Normal file
View File

@ -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>
</>
);
}