app/src/app.css

@@ -1,11 +1,3 @@
-:root {
-  font-size: 12px;
-}
-
-body {
-  max-inline-size: 80rem;
-}
-
 header {
   display: flex;
   align-items: center;
@@ -15,7 +7,3 @@ header {
 a[href^="/"] {
   text-decoration: none;
 }
-
-main * {
-  line-height: 2;
-}

app/src/app.tsx

@@ -2,7 +2,6 @@ import "./app.css";
 import { createSignal } from "solid-js";
 import Index from "./pages/index";
 import Page from "./pages/page";
-import random from "./helpers/random";
 
 const routes = {
   "/": Index,
@@ -37,9 +36,7 @@ export default () => {
         </h1>
         <a href="/new">📄</a>
       </header>
-      {routes[pathname()] ?? (
+      {routes[pathname()] ?? <Page id={Number(pathname().slice(1))} />}
-        <Page id={Number(pathname().slice(1)) || random()} />
-      )}
     </>
   );
 };

app/src/components/card.css

@@ -1,22 +0,0 @@
-.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

@@ -1,10 +0,0 @@
-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

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

app/src/components/cards.tsx

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

app/src/components/editor.tsx

@@ -4,7 +4,8 @@ import "./editor.css";
 export default (props: {
   id: number;
   onUpdatePage: (content: Pages.RequestContentPage) => void;
-}) => (
+}) => {
+  return (
     <textarea
       id={String(props.id)}
       class="editor"
@@ -16,4 +17,5 @@ export default (props: {
         e.currentTarget.setAttribute("rows", String(Math.max(2, lines.length)));
       }}
     ></textarea>
-);
+  );
+};

app/src/helpers/random.ts

@@ -1,5 +0,0 @@
-function random(): number {
-  return window.crypto.getRandomValues(new Uint16Array(1))[0]!;
-}
-
-export default random;

app/src/pages/index.tsx

@@ -1,7 +1,5 @@
-import { createResource, For } from "solid-js";
+import { createResource } 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(
@@ -16,17 +14,7 @@ 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,7 +1,6 @@
 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";
 
@@ -38,7 +37,6 @@ export default (props: { id: number }) => {
       if (await updatePage(id, content)) {
         unblock();
         refetch();
-        window.history.replaceState({}, "", `/${id}`);
       }
     },
     intervalMs
@@ -52,7 +50,7 @@ export default (props: { id: number }) => {
   return (
     <main>
       <Editor id={props.id} onUpdatePage={onUpdatePage} />
-      {() => <Card id={props.id} title="" text="" {...page()} />}
+      <pre>{() => JSON.stringify(page(), null, " ")}</pre>
     </main>
   );
 };