New notes

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;