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

package/components/AdminPanel.ts

@@ -11,7 +11,7 @@ export default () => {
   return html`
     <div class="admin-panel" id="admin_panel">
       <h1>
-        <a href="/admin" aria-label="Go to dashboard"> ${logo} </a>
+        <a href="/studio" aria-label="Go to dashboard"> ${logo} </a>
       </h1>
 
       <aside style="width: 100%;">
@@ -24,7 +24,7 @@ export default () => {
                 <ul>
                   <li>
                     <a
-                      href="/admin/entry/${data.id}"
+                      href="/studio/entry/${data.id}"
                       id="block_link_${data.id}"
                     >
                       ${block.label}
@@ -37,7 +37,7 @@ export default () => {
 
           return html`
           <form
-              data-on-submit="@post('/admin/api/block', { contentType: 'form' })"
+              data-on-submit="@post('/studio/api/block', { contentType: 'form' })"
               style="display: flex; align-items: center; gap: 1rem;"
             >
               <input type="hidden" name="name" value="${name}" />
@@ -60,14 +60,27 @@ export default () => {
       <footer>
         <a
           role="button"
-          href="/admin/settings"
+          href="/studio/settings"
           class="ghost"
           style="padding: 10px; margin: 0 -13px; display: flex;"
           data-tooltip="Settings"
           data-placement="right"
+          aria-label="Settings"
         >
           ${icons.cog}
         </a>
+        
+        <a
+          role="button"
+          href="/"
+          class="ghost"
+          style="padding: 10px; margin: 0 -13px; display: flex;"
+          data-tooltip="Leave Studio"
+          data-placement="right"
+          aria-label="Leave"
+        >
+          ${icons.leave}
+        </a>
       </footer>
     </div>
   `

package/components/Backup.ts

@@ -1,10 +1,13 @@
 import { html } from 'hono/html'
 
 export default () => {
-  return html`<article>
+  return html`<article data-signals="{ status: null, message: '' }">
       <header>Backup</header>
-      <form data-on-submit="@post('/admin/api/backup', { contentType: 'form' })">
+      <form
+        data-on-submit="@post('/studio/api/backup', { contentType: 'form' })"
+      >
         <button type="submit">Backup database</button>
+        <p data-style-color="$status === 200 ? 'green' : 'red'" data-text="$message || '&nbsp;'"></p>
       </form>
     </article>`
 }

package/components/BlockFieldRenderer.ts

@@ -42,7 +42,7 @@ export default (props: {
               return html`
                 <li>
                   <form
-                    data-on-submit="@post('/admin/api/new-block', { contentType: 'form' })"
+                    data-on-submit="@post('/studio/api/new-block', { contentType: 'form' })"
                   >
                     <button type="submit" class="ghost">${block.label}</button>
                     <input type="hidden" name="type" value="${block.type}" />
@@ -78,6 +78,10 @@ export default (props: {
                 ${struct.label}
 
                 <aside>
+                  <!-- <label style="margin: 0; border-bottom: none" data-tooltip="Disable" data-placement="top">
+                    <input name="enable" type="checkbox" role="switch" checked />
+                  </label> -->
+
                   <button
                     data-handle-for="${data.id}"
                     class="ghost handle text-secondary"
@@ -87,7 +91,7 @@ export default (props: {
                   </button>
 
                   <form
-                    data-on-submit="@delete('/admin/api/block', { contentType: 'form' })"
+                    data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
                   >
                     <button
                       type="submit"

package/components/Entries.ts

@@ -17,12 +17,12 @@ export default ({ name }: { name: string }) => {
 
           return html`
             <li>
-              <a href="/admin/entry/${block.id}" id="block_link_${block.id}">
+              <a href="/studio/entry/${block.id}" id="block_link_${block.id}">
                 ${title?.value || 'Untitled'}
               </a>
 
               <form
-                data-on-submit="@delete('/admin/api/block', { contentType: 'form' })"
+                data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
               >
                 <input type="hidden" name="id" value="${block.id}" />
                 <button

package/components/FieldRenderer.ts

@@ -17,7 +17,7 @@ export default (props: {
     }
 
     case 'slug': {
-      return Field.Text({ entryId, parentId, name, id, structure })
+      return Field.Slug({ entryId, parentId, name, id, structure })
     }
 
     case 'markdown': {

package/components/Settings.ts

@@ -3,6 +3,7 @@ import { html } from 'hono/html'
 import { sql } from '../utils/sql.ts'
 import * as icons from './icons.ts'
 import Backup from './Backup.ts'
+import Users from './Users.ts'
 
 export default () => {
   const apiKeys = db.database
@@ -23,30 +24,30 @@ export default () => {
         <ul>
           ${apiKeys.map((apiKey) => {
             return html`<li>
-                <p>${apiKey.name}</p>
-                <input type="text" disabled value="${apiKey.hint}" />
-                <form
-                  data-on-submit="@delete('/admin/api/api-key', { contentType: 'form' })"
+              <p>${apiKey.name}</p>
+              <input type="text" disabled value="${apiKey.hint}" />
+              <form
+                data-on-submit="@delete('/studio/api/api-key', { contentType: 'form' })"
+              >
+                <button
+                  data-tooltip="Delete API key"
+                  data-placement="left"
+                  type="submit"
+                  class="ghost"
                 >
-                  <button
-                    data-tooltip="Delete API key"
-                    data-placement="left"
-                    type="submit"
-                    class="ghost"
-                  >
-                    ${icons.trash}
-                  </button>
+                  ${icons.trash}
+                </button>
 
-                  <input type="hidden" name="value" value="${apiKey.value}" />
-                </form>
-              </li>`
+                <input type="hidden" name="value" value="${apiKey.value}" />
+              </form>
+            </li>`
           })}
         </ul>
 
         <form
-          data-on-submit="@post('/admin/api/api-key', { contentType: 'form' })"
+          data-on-submit="@post('/studio/api/api-key', { contentType: 'form' })"
         >
-          <label for="api_key_name">Generate API Key</label>
+          <label for="api_key_name"><small>Generate API Key</small></label>
 
           <input
             data-bind="name"
@@ -95,7 +96,9 @@ export default () => {
         </dialog>
       </article>
 
-      <!-- {Backup()} -->
+      ${Backup()}
+
+      ${Users()}
     </div>
   `
 }

package/components/SiteLayout.ts

@@ -3,13 +3,14 @@ import { html } from 'hono/html'
 import { type HtmlEscapedString } from 'hono/utils/html'
 import { studioConfig } from '../index.ts'
 
-export default (props: {
+export default (
   content:
     | string
     | Promise<string>
     | HtmlEscapedString
-    | Promise<HtmlEscapedString>
-}) => {
+    | Promise<HtmlEscapedString>,
+  includeAdminPanel = true,
+) => {
   return html`
     <!DOCTYPE html>
     <html lang="en">
@@ -45,11 +46,13 @@ export default (props: {
       </head>
 
       <body data-barba="wrapper">
-        <section style="margin-bottom: 0;">${adminPanel()}</section>
+        ${includeAdminPanel
+          ? html`<section style="margin-bottom: 0;">${adminPanel()}</section>`
+          : html`<div></div>`}
 
         <main>
           <section data-barba="container" data-barba-namespace="default">
-            ${props.content}
+            ${content}
           </section>
         </main>
       </body>

package/components/Users.ts

@@ -0,0 +1,46 @@
+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>
+      <ul>
+        ${users.map(user => html`<li>${user.email}</li>`)}
+      </ul>
+      <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/components/fields/Markdown.ts

@@ -17,7 +17,7 @@ export default (props: {
 
   return html`
   <form
-      data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
     >
       <hgroup>
         <label for="block-${data.id}">${structure.label}</label>

package/components/fields/Slug.ts

@@ -0,0 +1,113 @@
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+import type { FieldDefStructure } from '../../types.ts'
+import * as icons from '../icons.ts'
+import { Hono } from 'hono'
+import { type HttpBindings } from '@hono/node-server'
+import { streamSSE } from 'hono/streaming'
+import { query } from '../../queries/index.ts'
+import { slugify } from '../../utils/slugify.ts'
+
+const app = new Hono<{ Bindings: HttpBindings }>()
+
+app.get('/slug', async (c) => {
+  try {
+    const params = await c.req.query()
+
+    if (!params.entryId) {
+      return c.json({
+        status: 404,
+        message: 'Needs an entryId to generate slug',
+      })
+    }
+
+    const entry = query.root({ id: params.entryId })
+    const title = entry?.fields?.title?.value
+
+    if (!title) {
+      return c.json({ status: 404, message: 'No title to generate slug from' })
+    }
+
+    console.log('slug', slugify(title))
+
+    return streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        event: 'datastar-patch-signals',
+        data: `signals { slug: '${slugify(title)}' }`,
+      })
+    })
+  } catch (error) {
+    console.log(error)
+    return c.text('Error generating slug')
+  }
+})
+
+export const routes = app
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: FieldDefStructure
+  sortOrder?: number
+}) => {
+  const { entryId, parentId, name, structure, sortOrder = 0, id } = props
+
+  const data = getOrCreateRow({
+    parentId,
+    name,
+    field: structure,
+    sortOrder,
+    id,
+  })
+
+  if (!data) return html`<p>No block</p>`
+
+  return html`
+    <div
+      style="display: flex; align-items: center"
+      data-signals="{ slug: '${data.value}' }"
+    >
+      <form
+        data-ref="form"
+        data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
+        data-on-submit="@patch('/studio/api/block', { contentType: 'form' })"
+        data-on-signal-patch="$form.requestSubmit()"
+      >
+        <hgroup>
+          <label for="block-${data.id}">${structure.label}</label>
+          <p><small>${structure.description}</small></p>
+        </hgroup>
+
+        <input
+          id="block-${data.id}"
+          name="value"
+          type="text"
+          data-bind="slug"
+        />
+
+        <input type="hidden" name="type" value="${structure.type}" />
+        <input type="hidden" name="id" value="${data.id}" />
+        <input type="hidden" name="entryId" value="${entryId}" />
+        <input type="hidden" name="parentId" value="${parentId}" />
+        <input type="hidden" name="name" value="${name}" />
+      </form>
+
+      <form
+        style="margin-top: 21px"
+        data-on-submit="@get('/studio/api/field/slug', { contentType: 'form' })"
+      >
+        <input type="hidden" name="entryId" value="${entryId}" />
+        <button
+          class="ghost"
+          aria-label="Generate slug"
+          data-tooltip="Generate slug"
+          data-placement="top"
+        >
+          ${icons.arrowsRound}
+        </button>
+      </form>
+    </div>
+`
+}

package/components/fields/Text.ts

@@ -18,7 +18,7 @@ export default (props: {
 
   return html`
   <form
-      data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
     >
       <hgroup>
         <label for="block-${data.id}">${structure.label}</label>

package/components/fields/index.ts

@@ -1,4 +1,7 @@
 import Text from './Text.ts'
 import Markdown from './Markdown.ts'
+import Slug, { routes as slugRoutes } from './slug.ts'
 
-export const Field = { Text, Markdown }
+export const Field = { Text, Markdown, Slug }
+
+export const fieldRoutes = [slugRoutes]

package/components/icons.ts

@@ -194,3 +194,39 @@ export const clipboard = html`
     />
   </svg>
 `
+
+export const leave = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 20 20"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+      <path
+        d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75z"
+      />
+      <path
+        d="M19 10a.75.75 0 0 0-.75-.75H8.704l1.048-.943a.75.75 0 1 0-1.004-1.114l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 1 0 1.004-1.114l-1.048-.943h9.546A.75.75 0 0 0 19 10"
+      />
+    </g>
+  </svg>
+`
+
+export const arrowsRound = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 20 20"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138a.75.75 0 0 0-1.449-.39m1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219"
+      clip-rule="evenodd"
+    />
+  </svg>
+`

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,7 +30,8 @@ export let studioConfig: types.StudioConfig = {
 }
 
 const createStudio = async (config: types.StudioConfig) => {
-  const refresher = await createRefresher({ rootdir: '.' })
+  // const refresher = await createRefresher({ rootdir: ['.', import.meta.dirname] })
+  const refresher = await createRefresher({ rootdir: ['.'] })
 
   loadDb('./studio.db')
   createStudioTables()
@@ -44,26 +52,46 @@ 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) => {
+    if (err instanceof HTTPException) {
+      // Get the custom response
+      const error = err.getResponse()
+      return c.html(ErrorPage(err))
+    }
+
+    return c.notFound()
+  })
+
+  /**
+   * 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.11",
   "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/refresher": "0.0.0-beta.3",
+    "@alstar/db": "0.0.0-beta.1",
     "@alstar/ui": "0.0.0-beta.1",
-    "@alstar/db": "0.0.0-beta.1"
+    "@alstar/refresher": "0.0.0-beta.3"
   },
   "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}</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,
+  )
+})