add markdown rendering, copy in old posts

4 files changed, 53 insertions, 10 deletions

diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 1ed2eb8..e596fb7 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -10,18 +10,18 @@ export default function Contact() {
   const [submitting, setSubmitting] = useState(false)
   const [status, setStatus] = useState('')
 
-  const nameRef = useRef()
-  const emailRef = useRef()
-  const messageRef = useRef()
+  const nameRef = useRef<HTMLInputElement>()
+  const emailRef = useRef<HTMLInputElement>()
+  const messageRef = useRef<HTMLTextAreaElement>()
 
   const submit = async (ev: FormEvent<HTMLFormElement>) => {
     ev.preventDefault()
 
     setStatus('')
 
-    const name: string = nameRef.current?.value ?? ''
-    const email: string = emailRef.current?.value ?? ''
-    const message: string = messageRef.current?.value ?? ''
+    const name = nameRef.current.value
+    const email = emailRef.current.value
+    const message = messageRef.current.value
 
     if (!name) setStatus(s => s + ' Name required.')
     if (!email) setStatus(s => s + ' Email required.')
diff --git a/app/page.tsx b/app/page.tsx
index bc84594..ce8241b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -39,7 +39,7 @@ export default function Index() {
 
       <p>
         <em>Note:</em> This is the information for our system in aggregate,
-        for individual info see our <a href="/system">about</a> page
+        for individual info see our <a href="/about">about</a> page
       </p>
     </main>
   )
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
new file mode 100644
index 0000000..2110a35
--- /dev/null
+++ b/app/posts/[slug]/page.tsx
@@ -0,0 +1,28 @@
+import { notFound } from 'next/navigation'
+import Markdown from 'markdown-to-jsx'
+
+import InfoBar from '~/components/InfoBar'
+import { getPostSlugs, loadSinglePage } from '~/utils/post'
+
+export async function generateStaticParams() {
+  const slugs = await getPostSlugs()
+  return slugs.map((slug: string) => ({ slug }))
+}
+
+export default async function Post({ params: { slug } }) {
+  const post = await loadSinglePage(slug)
+  if (!post) notFound()
+
+  return (
+    <>
+      <h1 className="pageTitle">
+        {post.title}
+      </h1>
+      <main className="mainColumn">
+        <InfoBar authorName={post.author} publishedDate={post.date} />
+        <Markdown>{post.body}</Markdown>
+      </main>
+    </>
+  )
+}
+
diff --git a/app/posts/page.tsx b/app/posts/page.tsx
index 34f0e7f..e713259 100644
--- a/app/posts/page.tsx
+++ b/app/posts/page.tsx
@@ -1,11 +1,26 @@
-export default function Posts() {
+import InfoBar from "~/components/InfoBar"
+import { Post, getPostSlugs, loadSinglePage } from "~/utils/post"
+
+export default async function Posts() {
+  const slugs = await getPostSlugs()
+  const posts = await Promise.all(slugs.map(loadSinglePage))
+
+  const sortedPosts = posts.sort((a: Post, b: Post) => b.date.valueOf() - a.date.valueOf())
+
   return (
     <>
       <h1 className="pageTitle">
         Posts
       </h1>
-      <main className="mainColumn">
-        <p>This will have posts here eventually we promise</p>
+      <main>
+        {sortedPosts.map((post: Post) => (
+          <div className="mainColumn">
+            <InfoBar authorName={post.author} publishedDate={post.date} />
+            <h2>{post.title}</h2>
+            <p>{post.subtitle}</p>
+            <a href={`/posts/${post.slug}`}>Read Post =&gt;</a>
+          </div>
+        ))}
       </main>
     </>
   )