Add posts and old grade-calc

Fix small bugs
>bad commit

pages/about.tsx

@@ -13,12 +13,11 @@ function AboutPage() {
                 I do not really know, at least the content I put here. I guess I wanted a place on the web where I wanted to put everything I think is worth looking at some point in the future.
                 <br />
                 <br />
-                It seems wise to have things up here even though they may embarrass me at some point in the future, as many of the things I have done in the past have. Especially the web sites I made in high school. I will never forget those.
-                <hr />
+                It seems wise to have things up here even though they may embarrass me at some point in the future, as many of the things I have done in the past have.
                 Got any questions, concerns, or issues? Feel free to contact me via my email: <code>lambdapaul [at] pm [dot] me</code>.
             </section>
             <section className='block'>
-                <ReactMarkdown>{ReadmeMd}</ReactMarkdown>
+                <ReactMarkdown>{ReadmeMd.replace(/#{1,5} /g, (s: string) => {return `#${s}`})}</ReactMarkdown>
             </section>
         </Layout>
     )

pages/grade-calc/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 import Layout from '../../components/layout';
 import Link from 'next/link';
 import GradeCalc from '../../components/_gc';
@@ -77,9 +77,22 @@ function GradeCalcPage() {
 // export default GradeCalcPage;
 
 export default function WIP() {
+    useEffect(() => {
+        const script = document.createElement('script');
+      
+        script.src = '/grade-calc/vanilla.js';
+        script.async = true;
+      
+        document.body.appendChild(script);
+      
+        return () => {
+          document.body.removeChild(script);
+        }
+      }, []);
+
     return (
     <Layout name='Grade Calc' title='[WIP] Grade Calculator'>
-        <section className='block' style={{textAlign: 'center'}}>
+        <section className='grade-calc'>
             Check back later as the port of this page is a Work in Progress.
         </section>
     </Layout>);

pages/index.tsx

@@ -2,29 +2,46 @@ import Link from 'next/link';
 import React from 'react';
 import Layout from '../components/layout';
 import Pages from '../public/pages.json';
+import cachePostLinkData from '../util/post-cache';
 
-// import { GetStaticProps } from 'next';
 
-function HomePage() {
+function HomePage({posts}: any) {
+    Pages.sort((x, y) => { return ('' + x.title).localeCompare(y.title) });
     return (
         <Layout name='' title='PaulW.XYZ'>
-            <section className='block' style={{ textAlign: 'center' }}>
-                <div className='h2'>Welcome to my website!</div>                {
+            <section className='block'>
+                <div className='h2'>Welcome!</div>
+                {
                     Pages.map(obj => {
-                        return <div key='' className='h3'>
+                        return <div key='' className='h5'>
                             <Link href={obj.link}>
-                                <a>{obj.title}</a>
+                                <a>{obj.title}{obj.link.match('^http*')? ' ↗' : ''}</a>
                             </Link>
                         </div>
                     })
                 }
             </section>
+            <section className='block'>
+                <div className='h2'>Posts</div>
+                <div>
+                    {posts?.map((post: any) => {
+                        return <div key={post.slug} className='h5'>
+                            [{ (new Date(post.last_updated)).toLocaleString()}] <Link href={`posts/${post.slug}`}>
+                                {post.title}
+                            </Link>
+                        </div>
+                    })}
+                </div>
+            </section>
         </Layout>
     )
 }
 
-export default HomePage;
+export async function getStaticProps() {
+    // make this webpack plugin
+    return {
+        props: {posts: cachePostLinkData()} 
+    };
+}
 
-// export async function getStaticProps(context): GetStaticProps {
-
-// }
+export default HomePage;

pages/posts/[page].tsx

@@ -0,0 +1,42 @@
+import Layout from '../../components/layout';
+import { useRouter } from 'next/router';
+import { getAllPosts, getPost } from '../../lib/slug';
+import ReactMarkdown from 'react-markdown';
+import Image from 'next/image';
+
+function Post({post} : any) { // eh
+    const router = useRouter();
+    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`} /> : ''}
+                <ReactMarkdown>{post.content}</ReactMarkdown>
+            </section>
+        </Layout>
+    );
+}
+
+export async function getStaticProps({params}: any) {
+    const post = getPost(params.page);
+
+    return {
+        props: {post}
+    };
+}
+
+export async function getStaticPaths() {
+    const posts = getAllPosts();
+    return {
+        paths: posts.map(post => {
+            return {
+                params: {
+                    page: post.slug
+                }
+            }
+        }),
+        fallback: false
+    };
+}
+
+
+export default Post;

pages/posts/index.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import React from 'react';
+import Layout from '../../components/layout';
+import { getAllPosts } from '../../lib/slug';
+import Pages from '../../public/pages.json';
+import cachePostLinkData from '../../util/post-cache';
+
+
+function HomePage({posts}: any) {
+    Pages.sort((x, y) => { return ('' + x.title).localeCompare(y.title) });
+    return (
+        <Layout name='Posts'>
+            {posts.map((post: any) => {
+                return <section key='' className='h5 block'>
+                    <Link href={`posts/${post.slug}`}>
+                        {post.title}
+                    </Link>
+                    <div>[{ (new Date(post.last_updated)).toLocaleString()}]</div>
+                </section>
+            })}
+        </Layout>
+    )
+}
+
+export async function getStaticProps() {
+
+    return {
+        props: {posts: cachePostLinkData()}
+    };
+}
+
+export default HomePage;