cards view

app/src/app.css

@@ -1,3 +1,11 @@
+:root {
+  font-size: 12px;
+}
+
+body {
+  max-inline-size: 80rem;
+}
+
 header {
   display: flex;
   align-items: center;

app/src/components/card.css

@@ -0,0 +1,22 @@
+.card {
+  margin: unset;
+  padding: 1rem;
+  aspect-ratio: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--nc-bg-2);
+  color: var(--nc-tx-2);
+  border-width: 0.75rem;
+  border-top-style: solid;
+  border-top-color: var(--nc-bg-3);
+  box-shadow: 0 1px var(--nc-bg-3);
+}
+
+.card h2 {
+  padding: unset;
+  font-size: unset;
+}
+
+.card p {
+  white-space: pre-wrap;
+}

app/src/components/card.tsx

@@ -0,0 +1,10 @@
+import "./card.css";
+
+export default (props: { id: number; title: string; text: string }) => {
+  return (
+    <article class="card">
+      <h2>{props.title}</h2>
+      <p>{props.text.slice(props.title.length + 1)}</p>
+    </article>
+  );
+};

app/src/components/cards.css

@@ -0,0 +1,5 @@
+.cards {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+}

app/src/components/cards.tsx

@@ -0,0 +1,6 @@
+import type { JSX } from "solid-js";
+import "./cards.css";
+
+export default (props: { children: JSX.Element }) => (
+  <div class="cards">{props.children}</div>
+);

app/src/pages/index.tsx

@@ -1,5 +1,7 @@
-import { createResource } from "solid-js";
+import { createResource, For } from "solid-js";
 import type Pages from "../protocol/pages";
+import Cards from "../components/cards";
+import Card from "../components/card";
 
 async function fetchPages(): Promise<Pages.Response> {
   const res = await fetch(
@@ -14,7 +16,17 @@ export default () => {
 
   return (
     <main>
-      <pre>{() => JSON.stringify(pages(), null, " ")}</pre>
+      {() => (
+        <Cards>
+          <For each={pages()}>
+            {(page) => (
+              <a href={`/${page.id}`}>
+                <Card {...page} />
+              </a>
+            )}
+          </For>
+        </Cards>
+      )}
     </main>
   );
 };

app/src/pages/page.tsx

@@ -1,6 +1,7 @@
 import { createResource } from "solid-js";
 import type Pages from "../protocol/pages";
 import Editor from "../components/editor";
+import Card from "../components/card";
 import beforeunload from "../helpers/beforeunload";
 import throttle from "../helpers/throttle";
 
@@ -51,7 +52,7 @@ export default (props: { id: number }) => {
   return (
     <main>
       <Editor id={props.id} onUpdatePage={onUpdatePage} />
-      <pre>{() => JSON.stringify(page(), null, " ")}</pre>
+      {() => <Card id={props.id} title="" text="" {...page()} />}
     </main>
   );
 };