feat: add logging

routes/admin/log/index.tsx

@@ -0,0 +1,81 @@
+import { MainLayout } from "@components/layouts/main.tsx";
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { AccessDeniedError } from "@lib/errors.ts";
+import { getLogs, Log } from "@lib/cache/logs.ts";
+import { formatDate } from "@lib/string.ts";
+import { renderMarkdown } from "@lib/documents.ts";
+
+const renderLog = (t: unknown) =>
+  renderMarkdown(`\`\`\`js
+${typeof t === "string" ? t : JSON.stringify(t).trim()}
+\`\`\``);
+
+export const handler: Handlers = {
+  async GET(_, ctx) {
+    const logs = await getLogs();
+    if (!("session" in ctx.state)) {
+      throw new AccessDeniedError();
+    }
+    return ctx.render({
+      logs: logs.map((l) => {
+        return {
+          ...l,
+          html: l.args.map(renderLog).join("\n"),
+        };
+      }),
+    });
+  },
+};
+
+function LogLine(
+  { log }: {
+    log: Log;
+  },
+) {
+  return (
+    <div
+      class="mt-4 flex flex-col gap-2 bg-gray-900 px-4 py-2 rounded-2xl"
+      style={{ background: "var(--light)" }}
+    >
+      <div class="flex gap-2">
+        <span class="bg-gray-600 py-1 px-2 text-xs rounded-xl text-white">
+          {log.date.getHours().toString().padStart(2, "0")}:{log.date
+            .getMinutes().toString().padStart(2, "0")}:{log.date.getSeconds()
+            .toString().padStart(2, "0")} {formatDate(log.date)}
+        </span>
+        <span class="bg-gray-600 py-1 px-2 text-xs rounded-xl text-white">
+          {log.scope}
+        </span>
+        <span class="bg-gray-600 py-1 px-2 text-xs rounded-xl text-white">
+          {log.level}
+        </span>
+      </div>
+      <div
+        class="flex gap-1 text-white"
+        dangerouslySetInnerHTML={{ __html: log.html }}
+      >
+        <pre>
+          {log.html}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+export default function Greet(
+  { data: { logs }, url }: PageProps<{ logs: Log[] }>,
+) {
+  return (
+    <MainLayout url={url}>
+      <h1 class="text-white text-4xl ">Performance</h1>
+
+      {logs.map((r) => {
+        return (
+          <LogLine
+            log={r}
+          />
+        );
+      })}
+    </MainLayout>
+  );
+}

routes/admin/performance/index.tsx

@@ -1,10 +1,6 @@
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Handlers, PageProps } from "$fresh/server.ts";
-import {
-  getPerformances,
-  PerformancePoint,
-  PerformanceRes,
-} from "@lib/cache/performance.ts";
+import { getPerformances, PerformanceRes } from "@lib/cache/performance.ts";
 import { AccessDeniedError } from "@lib/errors.ts";
 
 export const handler: Handlers = {