1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { resetStyle } from "https://esm.town/v/nbbaier/resetStyle";
import { sqlToCSV, sqlToJSON } from "https://esm.town/v/nbbaier/sqliteExportHelpers";
import {
EditorSection,
MockTable,
Separator,
Table,
TablesList,
} from "https://esm.town/v/nbbaier/sqliteStudioComponents";
import { RunSVG, TableSVG } from "https://esm.town/v/nbbaier/sqliteStudioSVGs";
import { sqliteStyle } from "https://esm.town/v/nbbaier/sqliteStyle";
import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth";
import {
type AuthContextVariables,
authMiddlewareCookie,
userActionsDisplay,
} from "https://esm.town/v/postpostscript/authMiddleware";
import { LibsqlError } from "https://esm.town/v/postpostscript/sqliteBuilder";
import { sqliteReadonly } from "https://esm.town/v/postpostscript/sqliteReadonly";
import { sqlite } from "https://esm.town/v/std/sqlite";
import { type Context, Hono } from "npm:hono";
import { getCookie, setCookie } from "npm:hono/cookie";
import type { FC } from "npm:hono/jsx";
import { jsxRenderer, useRequestContext } from "npm:hono/jsx-renderer";
const authStyle = `
h1, .user-details {
display: inline-block;
}
.user-details {
float: right;
padding: 0.7em 2em 0 0;
}
.logout {
margin-left: 1.5em;
}
.auth-middleware, .sign-in-form {
padding: 1em;
}
label {
display: block;
padding-bottom: 1em;
}
`;
const HTML: FC = ({ children }) => {
const c = useRequestContext<HonoEnv>();
const source = c.get("source");
return (
<html>
<head>
<title>SQLite Explorer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet"
/>
<style
dangerouslySetInnerHTML={{ __html: resetStyle }}
/>
<style
dangerouslySetInnerHTML={{ __html: sqliteStyle }}
/>
<style
dangerouslySetInnerHTML={{ __html: authStyle }}
/>
<script src="https://unpkg.com/htmx.org@1.9.9/dist/htmx.min.js"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
<script type="module" src="https://esm.town/v/nbbaier/resizeScript" />
</head>
<body _="
on keydown[event.metaKey and key is 'Enter'] log 'command + enter' then send submitForm to #sql-editor
on keydown[event.ctrlKey and key is 'Enter'] log 'ctrl + enter' then send submitForm to #sql-editor
">
<div class="root-container">
<header>
{c.get("auth") && (
<span
class="user-details"
dangerouslySetInnerHTML={{
__html: userActionsDisplay(c.get("auth"), { order: ["profile", "username", "logout"] }).toString(),
}}
/>
)}
<h1>sqlite explorer</h1>
<select hx-get="/?set-source=1" hx-target=".sidebar" name="source">
<option value="default" selected={source === "default"}>Default (@std/sqlite)</option>
<option value="universe" selected={source === "universe"}>
Universe (@postpostscript/sqliteReadonly)
</option>
</select>
</header>
{children}
</div>
<script type="module" src="https://esm.town/v/nbbaier/downloadScript" />
<script type="module" src="https://esm.town/v/nbbaier/enableButtonsScript" />
</body>