From 183c5cbbd97fab3db0e8f608ba614f67cf23e9ff Mon Sep 17 00:00:00 2001
From: Andre Wiggins <andrewiggins@live.com>
Date: Fri, 27 Dec 2024 23:22:53 -0600
Subject: [PATCH] Migrate PageLayout

---
 app/elements/page-layout.mjs      | 12 ------------
 app/pages/$$.mjs                  | 18 ------------------
 app/pages/404.html                |  3 ---
 src/components/PageLayout.tsx     | 25 +++++++++++++++++++++++++
 src/utils/createMarkdownRoute.tsx | 26 +++++++-------------------
 5 files changed, 32 insertions(+), 52 deletions(-)
 delete mode 100644 app/elements/page-layout.mjs
 delete mode 100644 app/pages/$$.mjs
 delete mode 100644 app/pages/404.html
 create mode 100644 src/components/PageLayout.tsx

diff --git a/app/elements/page-layout.mjs b/app/elements/page-layout.mjs
deleted file mode 100644
index 010ec52..0000000
--- a/app/elements/page-layout.mjs
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function ({ html, state }) {
-  return html`
-    <my-layout>
-      <div id="page">
-        <div class="page-title"><h1>${state.title}</h1></div>
-        <div class="page-body">
-          <slot></slot>
-        </div>
-      </div>
-    </my-layout>
-  `
-}
diff --git a/app/pages/$$.mjs b/app/pages/$$.mjs
deleted file mode 100644
index 0393c1a..0000000
--- a/app/pages/$$.mjs
+++ /dev/null
@@ -1,18 +0,0 @@
-import { marked } from 'marked'
-
-/**
- * Page view: catchall for pages authored in markdown
- */
-export default function ({ html, state }) {
-  let { store } = state
-  let { attributes, body } = store
-  let title = attributes?.title
-  return html` <my-layout>
-    <div id="page">
-      <div class="page-title">
-        <div><h1>${title}</h1></div>
-      </div>
-      <div class="page-body">${marked(body)}</div>
-    </div>
-  </my-layout>`
-}
diff --git a/app/pages/404.html b/app/pages/404.html
deleted file mode 100644
index faf0a50..0000000
--- a/app/pages/404.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<my-layout>
-  <my-404></my-404>
-</my-layout>
diff --git a/src/components/PageLayout.tsx b/src/components/PageLayout.tsx
new file mode 100644
index 0000000..fd19049
--- /dev/null
+++ b/src/components/PageLayout.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from 'preact/hooks'
+import Layout from './Layout'
+
+export default function PageLayout({
+  title,
+  children,
+}: {
+  title: string
+  children: preact.ComponentChildren
+}) {
+  useEffect(() => {
+    document.title = `${title} | SeattleJS`
+  }, [title])
+
+  return (
+    <Layout>
+      <div id="page">
+        <div class="page-title">
+          <h1>{title}</h1>
+        </div>
+        <div class="page-body">{children}</div>
+      </div>
+    </Layout>
+  )
+}
diff --git a/src/utils/createMarkdownRoute.tsx b/src/utils/createMarkdownRoute.tsx
index 96c096f..59536fb 100644
--- a/src/utils/createMarkdownRoute.tsx
+++ b/src/utils/createMarkdownRoute.tsx
@@ -1,6 +1,5 @@
-import { useEffect } from 'preact/hooks'
-import Layout from '../components/Layout'
 import { memo } from './memo'
+import PageLayout from '../components/PageLayout'
 
 export async function createMarkdownRoute(
   markdownPath: string
@@ -17,24 +16,13 @@ export async function createMarkdownRoute(
   const html = await marked.marked(body)
 
   function MarkdownRoute() {
-    useEffect(() => {
-      document.title = `${attributes.title} | SeattleJS`
-    }, [])
-
     return (
-      <Layout>
-        <div id="page">
-          <div class="page-title">
-            <div>
-              <h1>{attributes.title}</h1>
-            </div>
-          </div>
-          <div
-            class="page-body"
-            dangerouslySetInnerHTML={{ __html: html }}
-          ></div>
-        </div>
-      </Layout>
+      <PageLayout title={attributes.title}>
+        <div
+          class="markdown-content"
+          dangerouslySetInnerHTML={{ __html: html }}
+        ></div>
+      </PageLayout>
     )
   }