More changes to structure and UI

pages/index.tsx

@@ -1,46 +1,17 @@
-import Link from 'next/link';
 import React from 'react';
 import Layout from '../components/layout';
-import Pages from '../public/pages.json';
-import style from '../styles/home.module.css';
-import prettyDatePrint from '../util/pretty-date';
+import QuickLinks from '../components/quick-links';
+import RecentPosts from '../components/recent-posts';
 import { getPostsMeta, PostMeta } from '../util/slug';
 
-function HomePage(props: { postsMeta: PostMeta[] }) {
-    props.postsMeta.sort((x, y) => { return (x.title).localeCompare(y.title) });
+function HomePage({ postsMeta }: { postsMeta: PostMeta[] }) {
     return (
         <Layout name='' title='PaulW.XYZ'>
             <section className='block'>
-                <div className='h2'>Welcome!</div>
-                {
-                    Pages.map(obj => {
-                        return <span key={obj.link}>
-                            <Link href={obj.link}>
-                                {
-                                    obj.link.match(/^http/)
-                                        ? <a className={`button blue ${style.button} ${style.blueButton}`}>{obj.title}</a>
-                                        : <a className={`${style.button} button`}>{obj.title}</a>
-                                }
-                            </Link>
-                        </span>
-                    })
-                }
+                <QuickLinks />
             </section>
             <section className='block'>
-                <table style={{ width: '100%' }}>
-                    <th className='h2'>Posts</th> <th>Posted</th>
-                    {props.postsMeta?.map((post: any) => {
-                        return <tr key={post.slug}>
-                            <td className='h5'>
-                                <Link href={`posts/${post.slug}`}>
-                                    {post.title}
-                                </Link>
-                            </td>
-                            <td>{prettyDatePrint(new Date(post.created_at))}</td>
-
-                        </tr>
-                    })}
-                </table>
+                <RecentPosts postsMeta={postsMeta} />
             </section>
         </Layout>
     )

pages/playlists.tsx

@@ -1,70 +1,19 @@
 import React, { ReactElement } from 'react';
 import Layout from '../components/layout';
+import { mapChild, toListItem } from '../components/lists';
 import pl from '../public/playlists.yaml';
 
-type listItem = {
-    children?: listItem[];
-    url?: string;
-    title: string;
-};
-
-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)
-        return <li key=''><a href={obj.url}>{obj.title}</a></li>
-
-    if (!obj.children)
-        return <></> // ignore playlists without links
-
-    let title: ReactElement;
-    if (level >= 0 && level <= 3)
-        title = React.createElement(`h${level + 3}`, {}, obj.title);
-    else
-        title = React.createElement('strong', {}, obj.title);
-
-    return (
-        <>
-            {title}
-            <ul>
-                {obj.children.map(l => mapChild(l, level + 1))}
-            </ul>
-        </>
-    );
-}
-
 function Playlists() {
     return (
         <Layout name='Playlists'>
-            <section className='block'>
-                <h2>Music</h2>
-                {
-                    pl.map((item: Record<string, any>) => {
-                        const lItem = toListItem(item)
-                        if (lItem)
-                            return mapChild(lItem, 0)
-                    })
-                }
-            </section>
+            <h2>Music</h2>
+            {
+                pl.map((item: Record<string, any>) => {
+                    const lItem = toListItem(item)
+                    if (lItem)
+                        return mapChild(lItem, 0)
+                })
+            }
         </Layout>
     );
 }

pages/posts/index.tsx

@@ -1,28 +1,30 @@
 import Link from 'next/link';
-import React from 'react';
 import Layout from '../../components/layout';
-import prettyDatePrint from '../../util/pretty-date';
+import date from '../../util/date';
 import { getPostsMeta, PostMeta } from '../../util/slug';
 
-function HomePage(props: {postsMeta: PostMeta[]}) {
-    props.postsMeta.sort((x: any, y: any) => { return (x as any).title.localeCompare((y as any).title) });
+function HomePage({ postsMeta }: { postsMeta: PostMeta[] }) {
     // todo: create a table-like user interface
-    return (
+    return ( // wow this is horrible
         <Layout name='Posts'>
-            <>
             <section className='h4 block'>
-            Post Name <span style={{float: 'right', margin: 'auto 1rem'}}> Created on </span> <span style={{float: 'right', margin: 'auto 1rem'}}>Last Updated </span> 
+                Post Name
+                <span style={{ float: 'right', margin: 'auto 1rem' }}> Created on </span>
+                <span style={{ float: 'right', margin: 'auto 1rem' }}>Last Updated </span>
             </section>
-            {props.postsMeta.map((post: any) => {
-                return <section key='' className='h5 block'>
-                    <Link href={`posts/${post.slug}`}>
+            {postsMeta.map((post: PostMeta, i) => {
+                return <section key={i} className='h5 block'>
+                    <Link href={`/posts/${post.slug}`}>
                         {post.title}
                     </Link>
-                    <span className='h6' style={{float: 'right', margin: 'auto 1rem'}}>{prettyDatePrint(new Date(post.created_at))}</span>
-                    {post.last_updated ? <span className='h6' style={{float: 'right', margin: 'auto 1rem'}}>{prettyDatePrint(new Date(post.last_updated))}</span> : ''}
+                    <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
+                        {date.prettyPrint(new Date(post.created_at))}
+                    </span>
+                    {post.last_updated && <span className='h6' style={{ float: 'right', margin: 'auto 1rem' }}>
+                        {date.prettyPrint(new Date(post.last_updated))}
+                    </span>}
                 </section>
             })}
-            </>
         </Layout>
     )
 }

pages/recommended.tsx

@@ -1,6 +1,6 @@
 import Layout from '../components/layout';
 import rec from '../public/recommended.yaml';
-import { toListItem, mapChild } from '../util/resrec';
+import { toListItem, mapChild } from '../components/lists';
 
 function Recommended() {
     return (

pages/resources.tsx

@@ -1,6 +1,6 @@
 import Layout from '../components/layout';
 import res from '../public/resources.yaml';
-import { toListItem, mapChild } from '../util/resrec';
+import { toListItem, mapChild } from '../components/lists';
 
 function Resources() {
     return (