Refactor, update UI, and add notes

pages/about.tsx

@@ -17,7 +17,7 @@ function AboutPage({usr}: any) {
                 <p>Got any questions, concerns, or issues? Contact me via email: <code>lambdapaul [at] pm [dot] me</code>.</p>
             </section>
             <section className='block'>
-                <GitHubProfile user={usr} />
+                {usr && <GitHubProfile user={usr} />}
             </section>
             <hr />
             <section className='block'>
@@ -39,12 +39,15 @@ function AboutPage({usr}: any) {
 }
 
 export async function getStaticProps() {
-    const res = await fetch('https://api.github.com/users/lambdapaul');
-    const usr = await res.json();
-
-    return {
-        props: { usr }
-    };
+    try {
+        const res = await fetch('https://api.github.com/users/lambdapaul');
+        const usr = await res.json();
+        return {
+            props: { usr }
+        };
+    } catch (e) {
+        return {props: {}}
+    }
 }
 
 export default AboutPage;

pages/index.tsx

@@ -1,16 +1,33 @@
 import React from 'react';
+import Link from 'next/link';
 import Layout from '../components/layout';
 import QuickLinks from '../components/quick-links';
 import RecentNotes from '../components/recent-notes';
 import RecentPosts from '../components/recent-posts';
-import { getNotesMeta, getPostsMeta, NoteMeta, PostMeta } from '../util/slug';
+import { getNotesMeta, getPostsMeta, INoteMeta, IPostMeta } from '../lib/slug';
 
-function HomePage({ postsMeta, notesMeta }: { postsMeta: PostMeta[], notesMeta: NoteMeta[] }) {
+function Nav() {
+    const nav = {'Posts': '/posts', 'Notes': '/notes', 'About': '/about', };
+    return (
+        <div className='block' style={{textAlign: 'center'}}>
+            {
+                Object.entries(nav).map(([k, v]) => {
+                    return <Link href={v}> 
+                        <a className='button green'>{k}</a>
+                    </Link>       
+                })
+            }
+        </div>
+    )
+}
+
+function HomePage({ postsMeta, notesMeta }: { postsMeta: IPostMeta[], notesMeta: INoteMeta[] }) {
     return (
         <Layout name='' title='PaulW.XYZ'>
+            <Nav />
             <QuickLinks />
-            <RecentPosts postsMeta={postsMeta} />
             <RecentNotes notesMeta={notesMeta} />
+            <RecentPosts postsMeta={postsMeta} />
         </Layout>
     )
 }

pages/notes/[note].tsx

@@ -1,9 +1,10 @@
 import Layout from '../../components/layout';
-import { getAllNotes, getNote } from '../../util/slug';
+import { getAllNotes, getNote } from '../../lib/slug';
 import ReactMarkdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { monokaiSublime } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import { monokaiSublime as hlTheme } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 
 function Note({ note }: any) {
     return (<>
@@ -11,6 +12,7 @@ function Note({ note }: any) {
             <section className='block'>
                 <ReactMarkdown
                     remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeRaw]}
                     components={{
                         code({ node, inline, className, children, ...props }) {
                             const match = /language-(\w+)/.exec(className || '')
@@ -20,7 +22,7 @@ function Note({ note }: any) {
                                         showLineNumbers={true}
                                         language={match[1]}
                                         //@ts-ignore
-                                        style={monokaiSublime}
+                                        style={hlTheme}
                                         PreTag='div'
                                         codeTagProps={{ style: { display: 'block' } }}
                                         customStyle={{ padding: '0', borderRadius: '1rem' }}
@@ -40,7 +42,7 @@ function Note({ note }: any) {
 }
 
 export async function getStaticProps({ params }: any) {
-    const note = getNote(params.page);
+    const note = getNote(params.note);
 
     return {
         props: { note }
@@ -53,7 +55,7 @@ export async function getStaticPaths() {
         paths: notes.map((note: any) => {
             return {
                 params: {
-                    page: note.slug
+                    note: note.slug
                 }
             }
         }),

pages/notes/index.tsx

@@ -1,19 +1,28 @@
 import Link from 'next/link';
 import Layout from '../../components/layout';
-import { getNotesMeta, NoteMeta } from '../../util/slug';
+import date from '../../lib/date';
+import { getNotesMeta, INoteMeta } from '../../lib/slug';
 
-function NotesPage({ notesMeta }: { notesMeta: NoteMeta[] }) {
+function NotesPage({ notesMeta }: { notesMeta: INoteMeta[] }) {
     return (
         <Layout name='Notes'>
-            <div className='text center block'>
-                {notesMeta && notesMeta.map((note: NoteMeta, i) => {
-                    return <div key={i} className='h5'>
-                        <Link href={`/notes/${note.slug}`}>
-                            {note.title}
-                        </Link>
-                    </div>
-                })}
-            </div>
+            <table>
+                <tbody>
+                {notesMeta && notesMeta.map((note: INoteMeta, i) => {
+                    return (
+                    <tr key={i}>
+                        <td style={{flex: '1 0 50%'}}>
+                            <Link href={`/notes/${note.slug}`}>
+                                {note.title}
+                            </Link>
+                        </td>
+                        <td style={{fontStyle: 'italic'}}>
+                            {note.last_updated && date.toRelativeDate(new Date(note.last_updated))}
+                        </td>
+                    </tr>
+                )})}
+                </tbody>
+            </table>
         </Layout>
     )
 }

pages/posts/[post].tsx

@@ -1,18 +1,23 @@
 import Layout from '../../components/layout';
-import { getAllPosts, getPost } from '../../util/slug';
+import { getAllPosts, getPost } from '../../lib/slug';
 import ReactMarkdown from 'react-markdown';
 import style from '../../styles/post.module.css';
 
 function Post({ post }: any) { // eh
     return (<>
-        <Layout name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
-            {post.cover
-                && <div className={style.imageBlock} style={{ backgroundImage: `url(/assets/images/${post.cover})` }}></div>}
+        <Layout removeContainer={true} name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
+            {<div className={style.imageBlock} 
+                style={{ backgroundImage: 
+                    post.cover ? 
+                        `url(/assets/images/${post.cover})` : 
+                        'linear-gradient(to bottom right, #565a0f, #08432c 15%, rgb(5, 39, 10) 40%, rgb(0, 22, 46) 80%)'
+                }}></div>}
             <div className={style.spacer}></div>
             <section className={`${style.block} block`}>
-                <ReactMarkdown>{post.content}</ReactMarkdown>
+                <div className='container'>
+                    <ReactMarkdown>{post.content}</ReactMarkdown>
+                </div>
             </section>
-            <div className={style.spacer}></div>
         </Layout>
 
     </>
@@ -20,7 +25,7 @@ function Post({ post }: any) { // eh
 }
 
 export async function getStaticProps({ params }: any) {
-    const post = getPost(params.page);
+    const post = getPost(params.post);
 
     return {
         props: { post }
@@ -33,7 +38,7 @@ export async function getStaticPaths() {
         paths: posts.map((post: any) => {
             return {
                 params: {
-                    page: post.slug
+                    post: post.slug
                 }
             }
         }),

pages/posts/index.tsx

@@ -1,39 +1,39 @@
 import Link from 'next/link';
 import Layout from '../../components/layout';
-import date from '../../util/date';
-import { getPostsMeta, PostMeta } from '../../util/slug';
+import date from '../../lib/date';
+import { getPostsMeta, IPostMeta } from '../../lib/slug';
 
-function PostsPage({ postsMeta }: { postsMeta: PostMeta[] }) {
+function PostsPage({ postsMeta }: { postsMeta: IPostMeta[] }) {
     return ( 
         <Layout name='Posts'>
-            <table  className='h5'>
-                <thead>
-                    <tr>
-                        <th style={{flex: '1 0 30%'}}>Name</th>
-                        <th>Created on</th>
-                        <th>Last Updated</th>
-                    </tr>
-                </thead>
+            <table>
                 <tbody>
-                    {postsMeta.map((post: PostMeta, i) => {
-                        return <tr key={i}>
-                            <td style={{flex: '1 0 30%'}}>
-                                <Link href={`/posts/${post.slug}`}>
-                                    {post.title}
+                {
+                    postsMeta.length &&
+                    postsMeta.map((post: IPostMeta, i) => {
+                        return <tr key={i} style={{alignItems: 'center'}}>
+                            <td style={{display: 'inline-block', textAlign: 'right', fontSize: '0.9rem'}}>
+                                <div style={{fontStyle: 'italics', fontSize: '.8rem'}}>{
+                                    post.last_updated && `updated ${date.toRelativeDate(new Date(post.last_updated))}`
+                                }</div>
+                                <div>{ date.toRelativeDate(new Date(post.created_at)) }</div>
+                            </td>
+                            <td style={{
+                                flex: '1 1 60%', 
+                                alignItems: 'center',
+                                fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`}}>
+                                <Link href={`/posts/${post.slug}`} >
+                                    <a style={{textDecoration: 'none'}}>{post.title}</a>
                                 </Link>
                             </td>
-                            <td>
-                                {date.prettyPrint(new Date(post.created_at))}
-                            </td>
-                            <td>
-                                {
-                                    post.last_updated
-                                    ? date.prettyPrint(new Date(post.last_updated))
-                                    : '-'
-                                }
-                            </td>
                         </tr>
-                    })}
+                    }) || 
+                    <div className='text center'>
+                        <div>**crickets**</div>
+                        <div>No posts found...</div>
+                        <div><Link href='/'><a className='link button green back'>Go Home</a></Link></div>
+                    </div>
+                }
                 </tbody>
             </table>
         </Layout>