@alstar/studio 0.0.0-beta.10 → 0.0.0-beta.12

package/components/settings/ApiKeys.ts

@@ -0,0 +1,122 @@
+import { html } from 'hono/html'
+import * as icons from '../icons.ts'
+import { db } from '@alstar/db'
+import { sql } from '../../utils/sql.ts'
+
+export default () => {
+  const apiKeys = db.database
+    .prepare(sql`
+      select
+        *
+      from
+        api_keys
+    `)
+    .all()
+
+  return html`
+  <article data-signals="{ apiKey: '', copied: false }">
+      <header>API Keys</header>
+
+      <table class="striped">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Value</th>
+            <th scope="col">Delete</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${apiKeys.map((apiKey) => {
+            return html`
+              <tr>
+                <th scope="row">${apiKey.name}</th>
+                <td><input type="text" disabled value="${apiKey.hint}" /></td>
+                <td>
+                  <form
+                    data-on-submit="@delete('/studio/api/api-key', {
+                      contentType: 'form',
+                      headers: {
+                        render: 'Settings'
+                      }
+                    })"
+                  >
+                    <button
+                      data-tooltip="Delete API key"
+                      data-placement="left"
+                      type="submit"
+                      class="ghost"
+                    >
+                      ${icons.trash}
+                    </button>
+
+                    <input type="hidden" name="value" value="${apiKey.value}" />
+                  </form>
+                </td>
+              </tr>`
+          })}
+        </tbody>
+      </table>
+
+      <form
+        data-on-submit="@post('/studio/api/api-key', {
+          contentType: 'form',
+          headers: {
+            render: 'Settings'
+          }
+        })"
+      >
+        <label for="api_key_name"><small>Generate API Key</small></label>
+
+        <input
+          data-bind="name"
+          type="text"
+          name="name"
+          id="api_key_name"
+          placeholder="Name"
+        />
+
+        <button type="submit" class="ghost">Generate key</button>
+      </form>
+
+      <dialog data-attr="{ open: $apiKey !== '' }">
+        <article>
+          <header>
+            <p>API Key</p>
+          </header>
+          <p>Be sure to save this key, as it wont be shown again.</p>
+
+          <div style="display: flex; gap: 1rem; align-items: center;">
+            <h3 style="margin: 0;">
+              <code data-text="$apiKey"></code>
+            </h3>
+
+            <button
+              style="display: flex; align-items: center;"
+              data-attr="{ id: $apiKey }"
+              data-on-click="navigator.clipboard.writeText($apiKey); $copied = true"
+              class="ghost"
+              aria-label="Copy key to clipboard"
+            >
+              ${icons.clipboard}
+              <span
+                style="display: none; margin-left: 0.5rem; color: green;"
+                data-style="{ display: $copied && 'block' }"
+              >
+                Copied
+              </span>
+            </button>
+          </div>
+
+          <footer>
+            <button
+              class="ghost"
+              data-on-click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
+            >
+              Close
+            </button>
+          </footer>
+        </article>
+      </dialog>
+    </article>
+  `
+}

package/components/settings/Backup.ts

@@ -0,0 +1,82 @@
+import fsp from 'node:fs/promises'
+import { html } from 'hono/html'
+import * as icons from '../icons.ts'
+
+export default async () => {
+  const backupDir = './backups'
+  const backups = await fsp.readdir(backupDir)
+
+  return html`
+    <article data-signals="{ status: null, message: '' }">
+      <header>Backup</header>
+
+      <table class="striped">
+        <thead>
+          <tr>
+            <th scope="col">File</th>
+            <th scope="col">Download</th>
+            <th scope="col">Delete</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${backups.map(
+            (filename) => html`
+              <tr>
+                <th scope="row">${filename}</th>
+                <th>
+                  <a
+                    href="/studio/backups/${filename}"
+                    role="button"
+                    target="_blank"
+                    download
+                    class="ghost square"
+                    aria-label="Download backup"
+                  >
+                    ${icons.download}
+                  </a>
+                </th>
+                <th>
+                  <form
+                    data-on-submit="@delete('/studio/api/backup', {
+                      contentType: 'form',
+                      headers: {
+                        render: 'Settings'
+                      }
+                    })"
+                  >
+                    <input type="hidden" name="filename" value="${filename}" />
+                    <button class="ghost square">${icons.trash}</button>
+                  </form>
+                </th>
+              </tr>
+          `,
+          )}
+        </tbody>
+      </table>
+
+      <form
+        data-on-submit="@post('/studio/api/backup', {
+          contentType: 'form',
+          headers: {
+            render: 'Settings'
+          }
+        })"
+      >
+        <button type="submit">Backup database</button>
+      </form>
+
+      <hr>
+
+      <form
+        data-on-submit="@post('/studio/api/backup', { contentType: 'form' })"
+      >
+        <input type="file" name="file" />
+        <button type="submit" class="ghost">Restore database</button>
+        <!-- <p
+          data-style-color="$status === 200 ? 'green' : 'red'"
+          data-text="$message || '&nbsp;'"
+        ></p> -->
+      </form>
+    </article>
+`
+}

package/components/settings/Users.ts

@@ -0,0 +1,63 @@
+import { db } from '@alstar/db'
+import { html } from 'hono/html'
+import { sql } from '../../utils/sql.ts'
+
+export default () => {
+  const users = db.database
+    .prepare(sql`
+      select
+        email
+      from
+        users
+    `)
+    .all()
+
+  return html`
+    <article>
+      <header>Users</header>
+      
+      <table class="striped">
+        <thead>
+          <tr>
+            <th scope="col">Email</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${users.map(
+            (user) => html`
+              <tr>
+                <th scope="row">${user.email}</th>
+              </tr>
+          `,
+          )}
+        </tbody>
+      </table>
+
+      <hr>
+
+      <article>
+        <header>Register user</header>
+        <form
+          data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+        >
+          <label for="register_email"><small>Email</small></label>
+          <input
+            id="register_email"
+            name="email"
+            type="email"
+            placeholder="Email"
+          />
+          <label for="register_password"><small>Password</small></label>
+          <input
+            id="register_password"
+            name="password"
+            type="password"
+            placeholder="Password"
+          />
+          <br />
+          <button type="submit" class="ghost">Create</button>
+        </form>
+      </article>
+    </article>
+  `
+}

package/index.ts

@@ -1,17 +1,24 @@
+import path from 'node:path'
+
 import { Hono } from 'hono'
-import { loadDb } from '@alstar/db'
 import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
+import { HTTPException } from 'hono/http-exception'
+
+import { loadDb } from '@alstar/db'
 import { createRefresher } from '@alstar/refresher'
 
-import * as types from './types.ts'
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
 import { getConfig } from './utils/get-config.ts'
 import startupLog from './utils/startup-log.ts'
-import { api } from './api/index.ts'
-import mcp from './api/mcp.ts'
-import path from 'path'
+import { apiRoutes } from './api/index.ts'
+import { mcpRoutes } from './api/mcp.ts'
+
+import auth from './utils/auth.ts'
+import ErrorPage from './pages/error.ts'
+
+import * as types from './types.ts'
 
 export let rootdir = './node_modules/@alstar/studio'
 
@@ -23,6 +30,7 @@ export let studioConfig: types.StudioConfig = {
 }
 
 const createStudio = async (config: types.StudioConfig) => {
+  // const refresher = await createRefresher({ rootdir: ['.', import.meta.dirname] })
   const refresher = await createRefresher({ rootdir: '.' })
 
   loadDb('./studio.db')
@@ -44,26 +52,58 @@ const createStudio = async (config: types.StudioConfig) => {
   app.use('*', serveStatic({ root: path.join(rootdir, 'public') }))
   app.use('*', serveStatic({ root: './public' }))
 
+  /**
+   * Require authentication to access Studio
+   */
+  app.use('/studio/*', auth)
+
   /**
    * Studio API routes
    */
-  app.route('/admin/api', api(studioStructure))
-  app.route('/admin/mcp', mcp())
+  app.route('/studio/api', apiRoutes)
+  app.route('/studio/mcp', mcpRoutes)
 
   /**
    * Studio pages
    */
-  const adminPages = await fileBasedRouter(path.join(rootdir, 'pages'))
-
-  if (adminPages) app.route('/admin', adminPages)
+  const studioPages = await fileBasedRouter(path.join(rootdir, 'pages'))
+  if (studioPages) app.route('/studio', studioPages)
 
   /**
    * User pages
    */
   const pages = await fileBasedRouter('./pages')
-
   if (pages) app.route('/', pages)
 
+  /**
+   * Error pages
+   */
+  app.notFound((c) => c.html(ErrorPage()))
+  app.onError((err, c) => {
+    console.log(err)
+
+    if (err instanceof HTTPException) {
+      // Get the custom response
+      const error = err.getResponse()
+      return c.html(ErrorPage(err))
+    }
+
+    return c.notFound()
+  })
+
+  app.use(
+    '/studio/backups/*',
+    serveStatic({
+      root: './',
+      rewriteRequestPath: (path) => path.replace(/^\/studio\/backups/, '/backups'),
+    }),
+  )
+
+  // console.log(app.routes)
+
+  /**
+   * Run server
+   */
   const server = serve({
     fetch: app.fetch,
     port: studioConfig.port,

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.10",
+  "version": "0.0.0-beta.12",
   "type": "module",
   "main": "index.ts",
+  "engines": {
+    "node": ">=23.8"
+  },
   "dependencies": {
     "@hono/node-server": "^1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
+    "@alstar/db": "0.0.0-beta.1",
     "@alstar/refresher": "0.0.0-beta.3",
-    "@alstar/ui": "0.0.0-beta.1",
-    "@alstar/db": "0.0.0-beta.1"
+    "@alstar/ui": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/pages/entry/[id].ts

@@ -11,7 +11,5 @@ export default defineEntry((c) => {
     return html`<p>Entry page url needs an ID param: "${id}"</p>`
   }
 
-  return SiteLayout({
-    content: Entry({ entryId: parseInt(id) }),
-  })
+  return SiteLayout(Entry({ entryId: parseInt(id) }))
 })

package/pages/error.ts

@@ -0,0 +1,14 @@
+import { html } from "hono/html";
+import SiteLayout from "../components/SiteLayout.ts";
+import type { HTTPResponseError } from "hono/types";
+
+export default ((err?: Error | HTTPResponseError) => {
+
+  return SiteLayout(html`
+    <article>
+      <header>Something went wrong</header>
+      <p>Try again</p>
+      <p>${err?.message || '404 - Not found'}</p>
+    </article>
+  `, false)
+})

package/pages/index.ts

@@ -29,5 +29,5 @@ export default defineEntry(() => {
       </article>
     </div>`
 
-  return SiteLayout({ content: !Object.values(studioStructure).length ? Discamer : '' })
+  return SiteLayout(!Object.values(studioStructure).length ? Discamer : '')
 })

package/pages/login.ts

@@ -0,0 +1,21 @@
+import { html } from "hono/html";
+import { defineEntry } from "../utils/define.ts";
+import SiteLayout from "../components/SiteLayout.ts";
+
+export default defineEntry(c => {
+  return SiteLayout(html`
+  <div class="login-form">
+    <article>
+      <header>Login</header>
+      <form data-on-submit="@post('/studio/api/auth/login', { contentType: 'form' })">
+        <label for="email">Email</label>  
+        <input id="email" name="email" type="text" placeholder="Email">
+        <label for="password">Password</label>  
+        <input id="password" name="password" type="password" placeholder="Password">
+        <br>
+        <button style="width: 100%;">Login</button>
+      </form>
+    </article>
+    </div>
+  `, false)
+})

package/pages/register.ts

@@ -0,0 +1,33 @@
+import { html } from 'hono/html'
+import { defineEntry } from '../utils/define.ts'
+import SiteLayout from '../components/SiteLayout.ts'
+
+export default defineEntry((c) => {
+  return SiteLayout(
+    html`
+      <div class="register-form" style="width: 300px">
+        <article>
+          <header>Register user</header>
+          <form
+            data-signals="{ status: 0 }"
+            data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+            data-on-signal-patch="patch.status === 200 && window.location.reload()"
+          >
+            <label for="email">Email</label>
+            <input id="email" name="email" type="text" placeholder="Email" />
+            <label for="password">Password</label>
+            <input
+              id="password"
+              name="password"
+              type="password"
+              placeholder="Password"
+            />
+            <br />
+            <button style="width: 100%;">Register</button>
+          </form>
+        </article>
+      </div>
+  `,
+    false,
+  )
+})

package/pages/settings.ts

@@ -4,7 +4,5 @@ import SiteLayout from '../components/SiteLayout.ts'
 import Settings from '../components/Settings.ts'
 
 export default defineEntry(() => {
-  return SiteLayout({
-    content: Settings(),
-  })
+  return SiteLayout(Settings())
 })

package/public/studio/css/settings.css

@@ -1,24 +1,16 @@
 #settings {
-  ul {
-    padding: 0;
-  }
-
-  li {
-    width: 100%;
-    display: grid;
-    align-items: center;
-    grid-template-columns: 15% 1fr auto;
-    gap: 1rem;
-    border-bottom: 1px solid var(--pico-form-element-border-color);
-    margin-bottom: 0;
-    padding: 1rem 0;
-
+  tr {
     input {
+      width: 100%;
       font-family: var(--pico-font-family-monospace);
     }
 
     * {
-      margin-bottom: 0;
+      margin: 0;
     }
   }
 }
+
+.login-form {
+  width: 100%;
+}

package/public/studio/js/markdown-editor.js

@@ -9,7 +9,7 @@ class MarkdownEditor extends HTMLElement {
     this.instance = ink(this, {
       hooks: {
         afterUpdate: async (e) => {
-          await fetch('/admin/api/value', {
+          await fetch('/studio/api/value', {
             method: 'PATCH',
             body: JSON.stringify({
               value: e,

package/public/studio/js/sortable-list.js

@@ -22,7 +22,7 @@ class SortableList extends HTMLElement {
           searchParams.set('id', child.dataset.id)
           searchParams.set('sort-order', idx)
 
-          await fetch(`/admin/api/sort-order?${searchParams.toString()}`, {
+          await fetch(`/studio/api/sort-order?${searchParams.toString()}`, {
             method: 'post',
           })
         })

package/public/studio/main.css

@@ -1,4 +1,3 @@
-/* @import './../node_modules/@alstar/ui/red.css'; */
 @import 'https://esm.sh/@alstar/ui/red.css';
 @import './css/admin-panel.css';
 @import './css/blocks-field.css';
@@ -16,6 +15,7 @@ body {
     padding: 40px;
     height: 100vh;
     overflow: auto;
+    width: 100%;
 
     section {
       max-width: 900px;
@@ -24,6 +24,10 @@ body {
   }
 }
 
+button svg, a svg {
+  pointer-events: none;
+}
+
 .entry > .fields > .block {
   padding-block: var(--pico-spacing);
 

package/public/studio/main.js

@@ -4,6 +4,19 @@ import './js/markdown-editor.js'
 import './js/sortable-list.js'
 
 barba.init({
+  debug: true,
   cacheIgnore: true,
   views: [{ namespace: 'default' }],
 })
+
+// client side script
+// const eventSource = new EventSource('http://localhost:5432')
+// eventSource.onmessage = ({ data }) => {
+//   const delay = data.split(' - ').at(-1) === 'true'
+//   setTimeout(() => window.location.reload(), delay ? 0 : 1000)
+// }
+
+// console.log(
+//   '%c REFRESHER ACTIVE ',
+//   'color: green; background: lightgreen; border-radius: 2px'
+// )