better fonts, several bug fixes

flake.nix

···
               description = "Port to run plonk on";
             };
             cookie_secret = mkOption {
-              type = types.string;
+              type = types.str;
               default = "00000000000000000000000000000000";
               description = "Cookie secret";
             };

package.json

···
       "!src/**/*.test.*"
     ],
     "loader": {
-      ".pug": "copy"
+      ".pug": "copy",
+      ".woff2": "copy"
     },
     "splitting": false,
     "sourcemap": true,

src/auth/client.ts

···
 
 export const createClient = async (db: Database) => {
 	const publicUrl = env.PLONK_PUBLIC_URL;
-	const url = publicUrl || `http://${env.PLONK_HOST}:${env.PLONK_PORT}`;
+	const url = publicUrl || `http://127.0.0.1:${env.PLONK_PORT}`;
 	const enc = encodeURIComponent;
 	return new NodeOAuthClient({
 		clientMetadata: {

src/mixins/head.pug

···
   head
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
     meta(charset='UTF-8')
-    title #{title}
+    title #{title} · plonk.li
     link(rel="stylesheet", href="/styles.css")
     link(rel="preconnect" href="https://rsms.me/")
     link(rel="stylesheet" href="https://rsms.me/inter/inter.css")

src/mixins/header.pug

···
 mixin header(ownDid, didHandleMap)
   div.header
     div.left-side
-      if ownDid
-        | logged in as @#{didHandleMap[ownDid]}
     div.right-side
     p
       a(href="/") home

src/public/styles.css

···
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
+@font-face {
+    font-family: 'NerdIosevka';
+    src: url('../assets/NerdIosevka-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: monospace;
+}
 
 :root {
   /* Light mode colors */
···
 }
 
 * {
-  font-family: 'IBM Plex Mono', monospace;
+  font-family: 'NerdIosevka', monospace;
+  font-size: 0.9rem;
 }
 
 body {
···
   background-color: var(--bg-color-muted);
   padding: 1rem;
   overflow-x: auto;
+}
+
+.comment-body {
+  background-color: var(--bg-color);
+  padding: 0;
 }
 
 input, textarea, select, button {

src/routes.ts

···
 export const createRouter = (ctx: Ctx) => {
 	const router = express.Router();
 
+	router.use("/assets", express.static(path.join(__dirname, "assets")));
 	// OAuth metadata
 	router.get("/client-metadata.json", async (_req, res) => {
 		return res.json(ctx.oauthClient.clientMetadata);
···
 			authorDid: pasteAuthorDid,
 		};
 
-		const comments = ret.map((row) => {
-			return {
-				uri: row.commentUri,
-				authorDid: row.commentAuthorDid,
-				body: row.commentBody,
-				createdAt: row.commentCreatedAt,
-			};
-		});
+		const comments = ret
+			.filter((row) => row.commentUri)
+			.map((row) => {
+				return {
+					uri: row.commentUri,
+					authorDid: row.commentAuthorDid,
+					body: row.commentBody,
+					createdAt: row.commentCreatedAt,
+				};
+			});
 
 		const ownAgent = await getSessionAgent(req, res, ctx);
 		if (!ownAgent) {

src/views/login.pug

···
+include ../mixins/head
+
 doctype html
 html
-  head
-    meta(name="viewport" content="width=device-width, initial-scale=1.0")
-    meta(charset='UTF-8')
-    title login
-    link(rel="stylesheet", href="/styles.css")
-    link(rel="preconnect" href="https://rsms.me/")
-    link(rel="stylesheet" href="https://rsms.me/inter/inter.css")
-    script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
+  +head("login")
   body
     main#content
       h1 login

src/views/paste.pug

···
 include ../mixins/utils
 doctype html
 html
-  +head(paste.title)
+  +head(`${paste.title} · ${didHandleMap[paste.authorDid]}`)
   body
     main#content
       +header(ownDid, didHandleMap)
       h1 #{paste.title}
       p 
-        | by @#{didHandleMap[paste.authorDid]} ·
+        | @#{didHandleMap[paste.authorDid]} ·
         | #{timeDifference(now, Date.parse(paste.createdAt))} ago ·
         | #{paste.lang} · 
         | #{paste.code.split('\n').length} loc · 
···
         | #{paste.code}
       hr
 
-      div.comments
-        each comment in comments
-          div.comment(id=`${encodeURIComponent(comment.uri)}`)
-            p 
-              | by @#{didHandleMap[comment.authorDid]} ·
-              | #{timeDifference(now, Date.parse(paste.createdAt))} ago
-            p 
-              | #{comment.body}
-      hr
+      if comments.length != 0
+        h1 comments
+        div.comments
+          each comment in comments
+            div.comment(id=`${encodeURIComponent(comment.uri)}`)
+              p 
+                a(href=`/u/${comment.authorDid}`)
+                  | @#{didHandleMap[comment.authorDid]}
+                |  ·
+                | #{timeDifference(now, Date.parse(paste.createdAt))} ago
+              p 
+                pre.comment-body #{comment.body}
+        hr
 
       form(action=`/${encodeURIComponent(paste.uri)}/comment` method="post").post-form
         div.post-row