random page

app/views/app.css

@@ -1,5 +1,5 @@
 :root {
-  font-size: 12px;
+  font-size: 14px;
   --nc-font-sans: sans-serif;
   --nc-font-mono: monospace;
   --nc-lk-1: #1875d1;
@@ -9,11 +9,13 @@
 }
 
 body {
-  padding-inline: 1rem;
+  padding-inline: 0.75rem;
   max-inline-size: 80rem;
 }
 
 header {
+  padding-block: 1.25rem;
+  margin-bottom: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
@@ -21,6 +23,7 @@ header {
 
 header h1 {
   margin: 0;
+  font-size: 1.85rem;
 }
 
 header h1 > :is(a, a:hover) {
@@ -28,7 +31,8 @@ header h1 > :is(a, a:hover) {
 }
 
 header nav > * {
-  font-size: 1.55rem;
+  margin: 0.75rem;
+  font-size: 1.25rem;
 }
 
 a[href^="/"] {

app/views/app.tsx

@@ -2,11 +2,13 @@ import "./app.css";
 import { createSignal } from "solid-js";
 import Index from "./pages/index";
 import Page from "./pages/page";
+import Random from "./pages/random";
 import random from "./helpers/random";
 import { decodeJwt } from "jose";
 
 const routes = {
   "/": Index,
+  "/random": Random,
 };
 
 async function updateUser(jwt: string): Promise<boolean> {
@@ -70,6 +72,7 @@ export default () => {
         </h1>
         <nav>
           <a href={authenticated ? "/new" : "/login"}>📄</a>
+          <a href="/random">🔀</a>
         </nav>
       </header>
       {routes[pathname()] ?? (

app/views/components/card.css

@@ -1,6 +1,7 @@
 .card {
   margin: unset;
-  padding: 1rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
   aspect-ratio: 1;
   box-sizing: border-box;
   overflow: hidden;
@@ -13,6 +14,7 @@
 }
 
 .card h2 {
+  margin: unset;
   padding: unset;
   font-size: unset;
 }

app/views/components/cards.css

@@ -1,7 +1,7 @@
 .cards {
   display: grid;
-  gap: 1rem;
+  gap: 0.75rem;
-  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
 }
 
 .cards > a:hover::after {

app/views/components/editor.css

@@ -1,5 +1,6 @@
 .editor {
-  padding: 1rem;
+  padding: 0.75rem;
+  font-size: 1rem;
   box-sizing: border-box;
   background-color: var(--nc-bg-2);
   color: var(--nc-tx-2);
@@ -11,7 +12,7 @@
 
 .editor :is(h1, h2, h3, h4, h5, h6) {
   padding: unset;
-  font-size: unset;
+  font-size: 1.25rem;
 }
 
 .editor p {

app/views/components/editor.tsx

@@ -75,7 +75,9 @@ export default (props: {
           return `${" ".repeat(indent)}${line.getTextContent()}`;
         });
         const text = [title, ...lines].join("\n");
+        if (props.text !== text) {
           props.onUpdatePage({ id: props.id, title, text });
+        }
       })
     )
   );

app/views/pages/random.tsx

@@ -0,0 +1,21 @@
+import { createEffect, createResource } from "solid-js";
+import type Pages from "../../protocol/pages";
+import random from "../helpers/random";
+
+async function randomPage(): Promise<Pages.ResponsePage> {
+  const jwt = window.localStorage.getItem("jwt");
+  const res = await fetch(
+    `${import.meta.env.QUOT_API_ENDPOINT}/pages?order=random&limit=1`,
+    { headers: jwt ? { authorization: `Bearer ${jwt}` } : {} }
+  );
+  const data = (await res.json()) as Pages.Response;
+  return data[0]!;
+}
+
+export default () => {
+  const [page] = createResource(random(), randomPage);
+  createEffect(() => {
+    if (!page.loading) window.location.replace(`/${page()!.id.toString(16)}`);
+  });
+  return null;
+};

db/migrations/20220907130637_random_pages.sql

@@ -0,0 +1,7 @@
+-- migrate:up
+CREATE FUNCTION random(pages) RETURNS DOUBLE PRECISION LANGUAGE SQL AS $$
+  SELECT random();
+$$;
+
+-- migrate:down
+DROP FUNCTION random(pages);

db/schema.sql

@@ -9,20 +9,6 @@ SET xmloption = content;
 SET client_min_messages = warning;
 SET row_security = off;
 
---
--- Name: update_timestamp(); Type: FUNCTION; Schema: public; Owner: -
---
-
-CREATE FUNCTION public.update_timestamp() RETURNS trigger
-    LANGUAGE plpgsql
-    AS $$
-  BEGIN
-    NEW.updated = CURRENT_TIMESTAMP;
-    RETURN NEW;
-  END
-$$;
-
-
 SET default_tablespace = '';
 
 SET default_table_access_method = heap;
@@ -42,6 +28,31 @@ CREATE TABLE public.pages (
 );
 
 
+--
+-- Name: random(public.pages); Type: FUNCTION; Schema: public; Owner: -
+--
+
+CREATE FUNCTION public.random(public.pages) RETURNS double precision
+    LANGUAGE sql
+    AS $$
+  SELECT random();
+$$;
+
+
+--
+-- Name: update_timestamp(); Type: FUNCTION; Schema: public; Owner: -
+--
+
+CREATE FUNCTION public.update_timestamp() RETURNS trigger
+    LANGUAGE plpgsql
+    AS $$
+  BEGIN
+    NEW.updated = CURRENT_TIMESTAMP;
+    RETURN NEW;
+  END
+$$;
+
+
 --
 -- Name: pages_id_seq; Type: SEQUENCE; Schema: public; Owner: -
 --
@@ -186,4 +197,5 @@ CREATE POLICY users_policy ON public.users USING ((id = ((current_setting('reque
 --
 
 INSERT INTO public.schema_migrations (version) VALUES
-    ('0');
+    ('0'),
+    ('20220907130637');