New notes

pages/about.tsx

@@ -6,7 +6,7 @@ import Layout from '../components/layout';
 
 function AboutPage() {
     return (
-        <Layout name='About' title='About this website'>
+        <Layout name='About' title='About PaulW.XYZ'>
             <section className='block'>
                 This is a personal website written by <a href='https://github.com/LambdaPaul'>@LambdaPaul</a>.<br /><br />
                 Why did I write this?
@@ -17,7 +17,9 @@ function AboutPage() {
                 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.replace(/#{1,5} /g, (s: string) => { return `#${s}` })}</ReactMarkdown>
+                <ReactMarkdown>
+                    {ReadmeMd.replace(/^#{1,5} /g, (s: string) => { return `#${s}` })}
+                </ReactMarkdown>
             </section>
         </Layout>
     )

pages/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import Layout from '../components/layout';
 import QuickLinks from '../components/quick-links';
+import RecentNotes from '../components/recent-notes';
 import RecentPosts from '../components/recent-posts';
-import { getPostsMeta, PostMeta } from '../util/slug';
+import { getNotesMeta, getPostsMeta, NoteMeta, PostMeta } from '../util/slug';
 
-function HomePage({ postsMeta }: { postsMeta: PostMeta[] }) {
+function HomePage({ postsMeta, notesMeta }: { postsMeta: PostMeta[], notesMeta: NoteMeta[] }) {
     return (
         <Layout name='' title='PaulW.XYZ'>
             <section className='block'>
@@ -13,13 +14,16 @@ function HomePage({ postsMeta }: { postsMeta: PostMeta[] }) {
             <section className='block'>
                 <RecentPosts postsMeta={postsMeta} />
             </section>
+            <section className='block'>
+                <RecentNotes notesMeta={notesMeta} />
+            </section>
         </Layout>
     )
 }
 
 export async function getStaticProps() {
     return {
-        props: { postsMeta: getPostsMeta() }
+        props: { postsMeta: getPostsMeta(), notesMeta: getNotesMeta() }
     };
 }
 

pages/notes/[page].tsx

@@ -0,0 +1,59 @@
+import Layout from '../../components/layout';
+import { getAllNotes, getNote } from '../../util/slug';
+import ReactMarkdown from 'react-markdown';
+import { Prism } from 'react-syntax-highlighter';
+import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-oceanic';
+import remarkGfm from 'remark-gfm';
+
+function Note({ note }: any) {
+    return (<>
+        <Layout name={note.title} title={note.title} ancestors={[{ name: 'Notes', path: 'notes' }]}>
+            <section className='block'>
+                <ReactMarkdown
+                    remarkPlugins={[remarkGfm]} 
+                    components={{
+                        code({ node, inline, className, children, ...props }) {
+                            const match = /language-(\w+)/.exec(className || '')
+                            return !inline && match ? (
+                                <Prism 
+                                    language={match[1]}
+                                    style={dark}
+                                    PreTag='div'
+                                    {...props}
+                                >{String(children).replace(/\n$/, '')}</Prism>
+                            ) : <code className={className} {...props}>
+                                {children}
+                            </code>
+                        }
+                    }}
+                >{note.content}</ReactMarkdown>
+            </section>
+        </Layout>
+    </>
+    );
+}
+
+export async function getStaticProps({ params }: any) {
+    const note = getNote(params.page);
+
+    return {
+        props: { note }
+    };
+}
+
+export async function getStaticPaths() {
+    const notes = getAllNotes();
+    return {
+        paths: notes.map((note: any) => {
+            return {
+                params: {
+                    page: note.slug
+                }
+            }
+        }),
+        fallback: false
+    };
+}
+
+
+export default Note;

pages/notes/index.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+import Layout from '../../components/layout';
+import { getNotesMeta, NoteMeta } from '../../util/slug';
+
+function NotesPage({ notesMeta }: { notesMeta: NoteMeta[] }) {
+    return (
+        <Layout name='Notes'>
+            {notesMeta && notesMeta.map((note: NoteMeta, i) => {
+                return <section key={i} className='h5 block'>
+                    <Link href={`/notes/${note.slug}`}>
+                        {note.title}
+                    </Link>
+                </section>
+            })}
+        </Layout>
+    )
+}
+
+export async function getStaticProps() {
+    return {
+        props: { notesMeta: getNotesMeta() }
+    };
+}
+
+export default NotesPage;

pages/posts/index.tsx

@@ -3,7 +3,7 @@ import Layout from '../../components/layout';
 import date from '../../util/date';
 import { getPostsMeta, PostMeta } from '../../util/slug';
 
-function HomePage({ postsMeta }: { postsMeta: PostMeta[] }) {
+function PostsPage({ postsMeta }: { postsMeta: PostMeta[] }) {
     // todo: create a table-like user interface
     return ( // wow this is horrible
         <Layout name='Posts'>
@@ -35,4 +35,4 @@ export async function getStaticProps() {
     };
 }
 
-export default HomePage;
+export default PostsPage;