6 files changed, 164 insertions, 11 deletions
diff --git a/lib/pages/BlogIndex.mlx b/lib/pages/BlogIndex.mlx
new file mode 100644
index 0000000..3e036aa
--- /dev/null
+++ b/lib/pages/BlogIndex.mlx
@@ -0,0 +1,76 @@
+open Shared
+
+let header ~title () = <header><h1>title</h1></header>
+
+let page =
+  <html>
+    <body>
+      <header title="Hello, world!" /> <div>(React.string "Some content goes here")</div>
+    </body>
+  </html>
+;;
+
+module Layout = struct
+  let[@react.component] make ~children =
+    <html>
+      <head>
+        <title>(React.string "Bloody Shovel 5")</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta charSet="UTF-8" />
+      </head>
+      <body>children</body>
+    </html>
+  ;;
+end
+
+module PostPreviews = struct
+  let[@react.component] make ~(conn : Query.conn) =
+    let posts =
+      match Query.get_poasts () conn with
+      | Error _err -> []
+      | Ok posts -> posts
+    in
+    let tests = "This is 'a 'weird <thingy>" in
+    <div>
+      (match posts with
+       | [] -> React.string "No posts"
+       | posts ->
+         let ps =
+           posts
+           |> List.map (fun (p : Query.post_summary) ->
+             Logs.info (fun d -> d "poast %s\n" p.title);
+             <h1>(React.string p.title)</h1>)
+         in
+         let pp = React.string tests :: ps in
+         pp |> Array.of_list |> React.array)
+    </div>
+  ;;
+end
+
+let[@react.component] make (conn : Query.conn) =
+  <Layout>
+    <div className="min-h-screen bg-gray-50">
+      <Navbar />
+      <main className="container mx-auto px-4 py-8">
+        <SiteTitle />
+        <div className="max-w-4xl mx-auto space-y-12"><PostPreviews conn /></div>
+      </main>
+    </div>
+  </Layout>
+;;
+
+(* let[@react.component] make (conn : Query.conn) = *)
+(* let posts = *)
+(* match Query.get_poasts () conn with *)
+(* | Error _err -> [] *)
+(* | Ok posts -> posts *)
+(* in *)
+(* <div> *)
+(* (match posts with *)
+(* | [] -> React.string "No posts" *)
+(* | hd :: _tl -> React.string hd.title) *)
+(* </div> *)
+(* ;; *)
+
+(* # formatter = {command = "ocamlformat-mlx", args = ["-", "--impl"]} *)
+(*  List.map (fun _p -> <p>(React.string "wtf")</p>) posts |> React.list *)
diff --git a/lib/pages/BlogIndex.re b/lib/pages/BlogIndex.re
deleted file mode 100644
index 50beaed..0000000
--- a/lib/pages/BlogIndex.re
+++ /dev/null
@@ -1,11 +0,0 @@
-[@react.component]
-let make = () => {
-  <html>
-    <head>
-      <meta charSet="utf-8" />
-      <title> {React.string("Bloody Shovel 5")} </title>
-    </head>
-    // <link rel="stylesheet" href="/output.css" />
-    <body> <h1> {React.string("Oh hai")} </h1> </body>
-  </html>;
-};
diff --git a/lib/pages/components/Navbar.mlx b/lib/pages/components/Navbar.mlx
new file mode 100644
index 0000000..68003fe
--- /dev/null
+++ b/lib/pages/components/Navbar.mlx
@@ -0,0 +1,34 @@
+module Link = struct
+  let[@react.component] make ~children ~href ?(className = "") =
+    let base_class = "hover:text-gray-300 transition-colors" in
+    let clas = Printf.sprintf "%s %s" base_class className in
+    <a className=clas href>children</a>
+  ;;
+end
+
+let rs = React.string
+
+let[@react.component] make () =
+  <header className="bg-black text-white">
+    <div className="flex items-center space-x-6 justify-between py-2 px-4">
+      <Link href="/">
+        <img className="w-[60px]" src="https://s3.spandrell.ch/assets/icons/tianming.svg"
+        />
+      </Link>
+      <nav className="flex items-center space-x-6 text-sm font-medium">
+        <Link href="/blog">(rs "BLOG")</Link>
+        <Link href="/chat">(rs "CHAT")</Link>
+        <Link href="/board">(rs "BOARD")</Link>
+        <Link href="#">(rs "FEED")</Link>
+        <Link href="/tv">(rs "TV")</Link>
+        <Link href="#">(rs "WIKI")</Link>
+        <Link href="#">(rs "BOOKS")</Link>
+        <Link href="#">(rs "ABOUT")</Link>
+      </nav>
+      <div className="flex items-center space-x-6 text-sm font-medium">
+        <Link href="/search"><span>(rs "SEARCH")</span></Link>
+        <Link href="/login"><span>(rs "LOGIN")</span></Link>
+      </div>
+    </div>
+  </header>
+;;
diff --git a/lib/pages/components/SiteTitle.mlx b/lib/pages/components/SiteTitle.mlx
new file mode 100644
index 0000000..cfee4f3
--- /dev/null
+++ b/lib/pages/components/SiteTitle.mlx
@@ -0,0 +1,10 @@
+let[@react.component] make () =
+  <div className="text-center mb-8">
+    <a href="/">
+      <h1 className="text-5xl text-gray-900 mb-2 hover:text-gray-700 transition-colors">
+        (React.string "BLOODY SHOVEL 5")
+      </h1>
+    </a>
+    <p className="text-gray-600 text-2xl italic">(React.string "Nemo nos Salvabit")</p>
+  </div>
+;;
diff --git a/lib/pages/dune b/lib/pages/dune
index 8cc2720..8ec2184 100644
--- a/lib/pages/dune
+++ b/lib/pages/dune
@@ -3,6 +3,10 @@
 (library
  (name pages)
  (libraries
+  ; local
+  shared
+  ; 
+  logs
   lwt.unix
   server-reason-react.belt
   server-reason-react.js
diff --git a/lib/pages/lmao.re b/lib/pages/lmao.re
new file mode 100644
index 0000000..24c630e
--- /dev/null
+++ b/lib/pages/lmao.re
@@ -0,0 +1,40 @@
+[@react.component]
+let make = () => {
+  <html>
+
+      <head>
+        <meta charSet="utf-8" />
+        <title> {React.string("Bloody Shovel 5")} </title>
+      </head>
+      <body> <h1> {React.string("Oh hai")} </h1> </body>
+    </html>;
+    //   let _lol = conn;
+    // let make = (~conn) => {
+};
+// [@react.component]
+// let make = (~conn: Query.conn) => {
+//   let posts =
+//     switch (Query.get_poasts(conn)) {
+//     | Ok(posts) => posts
+//     | Error(_) => []
+//     };
+
+//   <html>
+//     <head>
+//       <meta charSet="utf-8" />
+//       <title> {React.string("Bloody Shovel 5")} </title>
+//     </head>
+//     <body>
+//       <h1> {React.string("Oh hai")} </h1>
+//       <ul>
+//         {posts
+//          |> List.map(post =>
+//               <li key={string_of_int(post.Query.id)}>
+//                 {React.string(post.title)}
+//               </li>
+//             )
+//          |> React.array}
+//       </ul>
+//     </body>
+//   </html>;
+// };