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

package/api/api-key.ts

@@ -4,11 +4,9 @@ import { Hono } from 'hono'
 import { streamSSE } from 'hono/streaming'
 import { db } from '@alstar/db'
 import crypto from 'node:crypto'
-
-import { stripNewlines } from '../utils/strip-newlines.ts'
 import { sql } from '../utils/sql.ts'
-import Settings from '../components/Settings.ts'
 import { createHash } from '../utils/create-hash.ts'
+import { renderSSE } from '../utils/renderSSE.ts'
 
 const app = new Hono<{ Bindings: HttpBindings }>()
 
@@ -36,10 +34,7 @@ app.post('/api-key', async (c) => {
       data: `signals { apiKey: '${apiKey}', name: '' }`,
     })
 
-    await stream.writeSSE({
-      event: 'datastar-patch-elements',
-      data: `elements ${stripNewlines(Settings())}`,
-    })
+    await renderSSE(stream, c)
   })
 })
 
@@ -59,10 +54,7 @@ app.delete('/api-key', async (c) => {
       `)
       .run(value)
 
-    await stream.writeSSE({
-      event: 'datastar-patch-elements',
-      data: `elements ${stripNewlines(Settings())}`,
-    })
+    await renderSSE(stream, c)
   })
 })
 

package/api/auth.ts

@@ -59,8 +59,6 @@ app.post('/login', async (c) => {
   setCookie(c, 'login', 'yes')
 
   return c.redirect('/studio')
-
-  // return c.json({ status: 200, message: 'Logged in!' })
 })
 
 export const authRoutes = app

package/api/backup.ts

@@ -5,6 +5,10 @@ import { Hono } from 'hono'
 import { type HttpBindings } from '@hono/node-server'
 import { streamSSE } from 'hono/streaming'
 import { db } from '@alstar/db'
+import { stripNewlines } from '../utils/strip-newlines.ts'
+import Settings from '../components/Settings.ts'
+import path from 'node:path'
+import { renderSSE } from '../utils/renderSSE.ts'
 
 const app = new Hono<{ Bindings: HttpBindings }>()
 
@@ -17,23 +21,28 @@ app.post('/backup', async (c) => {
 
     await backup(db.database, name)
 
-    console.log('Backup')
-
-    return streamSSE(c, async (stream) => {
-      await stream.writeSSE({
-        event: 'datastar-patch-signals',
-        data: `signals { status: 200, message: '${name} created' }`,
-      })
-    })
+    return streamSSE(c, async (stream) => await renderSSE(stream, c))
   } catch (error) {
     console.log(error)
+    return c.json({ status: 500, message: 'Something went wrong' })
+  }
+})
+
+app.delete('/backup', async (c) => {
+  const formData = await c.req.formData()
+  const data = Object.fromEntries(formData.entries())
+
+  if (!data.filename) {
+    return c.json({ status: 404, message: 'Need a filename to remove' })
+  }
+
+  try {
+    await fsp.rm(path.join('./backups', data.filename.toString()))
 
-    return streamSSE(c, async (stream) => {
-      await stream.writeSSE({
-        event: 'datastar-patch-signals',
-        data: `signals { status: 500, message: '${name} failed' }`,
-      })
-    })
+    return streamSSE(c, async (stream) => await renderSSE(stream, c))
+  } catch (error) {
+    console.log(error)
+    return c.json({ status: 500, message: 'Something went wrong' })
   }
 })
 

package/api/block.ts

@@ -2,18 +2,14 @@ import { type HttpBindings } from '@hono/node-server'
 import { ServerSentEventGenerator } from '@starfederation/datastar-sdk'
 import { Hono } from 'hono'
 import { streamSSE } from 'hono/streaming'
-import { stripNewlines } from '../utils/strip-newlines.ts'
 import { sql } from '../utils/sql.ts'
-import { type Structure } from '../types.ts'
 import { db } from '@alstar/db'
-import Entry from '../components/Entry.ts'
 import {
   blockWithChildren,
   deleteBlockWithChildren,
 } from '../queries/block-with-children.ts'
-import AdminPanel from '../components/AdminPanel.ts'
 import { query } from '../queries/index.ts'
-import { studioStructure } from '../index.ts'
+import { renderSSE } from '../utils/renderSSE.ts'
 
 const app = new Hono<{ Bindings: HttpBindings }>()
 
@@ -22,40 +18,19 @@ app.post('/block', async (c) => {
     const formData = await c.req.formData()
     const data = Object.fromEntries(formData.entries())
 
-    const row = studioStructure[data.name?.toString()]
+    const definedData = JSON.parse(
+      JSON.stringify({
+        type: data.type?.toString(),
+        name: data.name?.toString(),
+        label: data.label?.toString(),
+        parent_id: data.parent_id?.toString(),
+        sort_order: data.sort_order?.toString(),
+      }),
+    )
 
-    if (!row) return
+    db.insertInto('blocks', definedData)
 
-    db.insertInto('blocks', {
-      name: data.name?.toString(),
-      label: row.label,
-      type: row.type,
-    })
-
-    await stream.writeSSE({
-      event: 'datastar-patch-elements',
-      data: `elements ${stripNewlines(AdminPanel())}`,
-    })
-  })
-})
-
-app.post('/new-block', async (c) => {
-  return streamSSE(c, async (stream) => {
-    const formData = await c.req.formData()
-    const data = Object.fromEntries(formData)
-
-    db.insertInto('blocks', {
-      type: data.type.toString(),
-      name: data.name.toString(),
-      label: data.label.toString(),
-      parent_id: data.parent_id.toString(),
-      sort_order: data.sort_order.toString(),
-    })
-
-    await stream.writeSSE({
-      event: 'datastar-patch-elements',
-      data: `elements ${stripNewlines(Entry({ entryId: parseInt(data.entry_id.toString()) }))}`,
-    })
+    await renderSSE(stream, c)
   })
 })
 
@@ -65,10 +40,9 @@ app.patch('/block', async (c) => {
 
     const id = formData.get('id')?.toString()
     const value = formData.get('value')?.toString()
-    const name = formData.get('name')?.toString()
-    const entryId = formData.get('entryId')?.toString()
-    const parentId = formData.get('parentId')?.toString()
-    // const sortOrder = formData.get('sort_order')?.toString()
+    // const name = formData.get('name')?.toString()
+    // const entryId = formData.get('entryId')?.toString()
+    // const parentId = formData.get('parentId')?.toString()
 
     if (!id || !value) return
 
@@ -82,18 +56,20 @@ app.patch('/block', async (c) => {
 
     transaction.run(value, id)
 
-    if (entryId === parentId && name?.toString() === 'title') {
-      const rootBlock = query.block({
-        id: parentId?.toString() || null,
-      })
-
-      if (rootBlock.type !== 'single') {
-        await stream.writeSSE({
-          event: 'datastar-patch-elements',
-          data: `elements <a href="/studio/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
-        })
-      }
-    }
+    await renderSSE(stream, c)
+
+    // if (entryId === parentId && name?.toString() === 'title') {
+    //   const rootBlock = query.block({
+    //     id: parentId?.toString() || null,
+    //   })
+
+    //   if (rootBlock.type !== 'single') {
+    //     await stream.writeSSE({
+    //       event: 'datastar-patch-elements',
+    //       data: `elements <a href="/studio/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+    //     })
+    //   }
+    // }
   })
 })
 
@@ -116,27 +92,13 @@ app.patch('/value', async (c) => {
 app.delete('/block', async (c) => {
   return streamSSE(c, async (stream) => {
     const formData = await c.req.formData()
-
     const id = formData.get('id')?.toString()
-    const entryId = formData.get('entry_id')?.toString()
 
     if (!id) return
 
-    const transaction = db.database.prepare(deleteBlockWithChildren)
-
-    transaction.all(id)
-
-    if (entryId) {
-      await stream.writeSSE({
-        event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entry({ entryId: parseInt(entryId.toString()) }))}`,
-      })
-    } else {
-      await stream.writeSSE({
-        event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(AdminPanel())}`,
-      })
-    }
+    db.database.prepare(deleteBlockWithChildren).all(id)
+
+    await renderSSE(stream, c)
   })
 })
 

package/components/AdminPanel.ts

@@ -37,10 +37,20 @@ export default () => {
 
           return html`
           <form
-              data-on-submit="@post('/studio/api/block', { contentType: 'form' })"
+              data-on-submit="@post('/studio/api/block', {
+                contentType: 'form',
+                headers: {
+                  'render': 'AdminPanel',
+                },
+              })"
               style="display: flex; align-items: center; gap: 1rem;"
             >
+              <input type="hidden" name="return" value="AdminPanel" />
+
               <input type="hidden" name="name" value="${name}" />
+              <input type="hidden" name="label" value="${block.label}" />
+              <input type="hidden" name="type" value="${block.type}" />
+
               <button
                 class="ghost"
                 style="padding: 10px; margin: 0 -13px; display: flex;"
@@ -49,6 +59,7 @@ export default () => {
               >
                 ${icons.newDocument}
               </button>
+
               <p style="user-select: none;"><small>${block.label}</small></p>
             </form>
 
@@ -69,8 +80,9 @@ export default () => {
         >
           ${icons.cog}
         </a>
-        
+
         <a
+          data-barba-prevent
           role="button"
           href="/"
           class="ghost"

package/components/BlockFieldRenderer.ts

@@ -42,7 +42,13 @@ export default (props: {
               return html`
                 <li>
                   <form
-                    data-on-submit="@post('/studio/api/new-block', { contentType: 'form' })"
+                    data-on-submit="@post('/studio/api/block', {
+                      contentType: 'form',
+                      headers: {
+                        render: 'Entry',
+                        props: '${JSON.stringify({ entryId: entryId })}'
+                      }
+                    })"
                   >
                     <button type="submit" class="ghost">${block.label}</button>
                     <input type="hidden" name="type" value="${block.type}" />
@@ -66,7 +72,7 @@ export default (props: {
       <hr style="margin-top: 0;" />
 
       <sortable-list data-id="${data.id}">
-        ${rows.map((row, idx) => {
+        ${rows.map((row) => {
           const [name, struct] =
             entries.find(([name]) => name === row.name) || []
 
@@ -91,7 +97,13 @@ export default (props: {
                   </button>
 
                   <form
-                    data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
+                    data-on-submit="@delete('/studio/api/block', {
+                      contentType: 'form',
+                      headers: {
+                        render: 'Entry',
+                        props: '${JSON.stringify({ entryId: entryId })}'
+                      }
+                    })"
                   >
                     <button
                       type="submit"
@@ -102,8 +114,8 @@ export default (props: {
                     >
                       ${icons.x}
                     </button>
+                    
                     <input type="hidden" name="id" value="${row.id}" />
-                    <input type="hidden" name="entry_id" value="${entryId}" />
                   </form>
                 </aside>
               </header>

package/components/Entries.ts

@@ -1,7 +1,6 @@
 import { html } from 'hono/html'
 import { query } from '../index.ts'
 import * as icons from './icons.ts'
-import type { BlockDef } from '../types.ts'
 
 export default ({ name }: { name: string }) => {
   const entries = query.blocks({ parent_id: null, status: 'enabled', name })
@@ -22,7 +21,12 @@ export default ({ name }: { name: string }) => {
               </a>
 
               <form
-                data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
+                data-on-submit="@delete('/studio/api/block', {
+                  contentType: 'form',
+                  headers: {
+                    render: 'AdminPanel'
+                  }
+                })"
               >
                 <input type="hidden" name="id" value="${block.id}" />
                 <button

package/components/Settings.ts

@@ -1,104 +1,13 @@
-import { db } from '@alstar/db'
 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'
+import Backup from './settings/Backup.ts'
+import Users from './settings/Users.ts'
+import ApiKeys from './settings/ApiKeys.ts'
 
 export default () => {
-  const apiKeys = db.database
-    .prepare(sql`
-      select
-        *
-      from
-        api_keys
-    `)
-    .all()
-
   return html`
-  <div id="settings" data-signals="{ apiKey: '', copied: false }">
+  <div id="settings">
       <!-- <h1>Settings</h1> -->
-      <article>
-        <header>API Keys</header>
-
-        <ul>
-          ${apiKeys.map((apiKey) => {
-            return html`<li>
-              <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"
-                >
-                  ${icons.trash}
-                </button>
-
-                <input type="hidden" name="value" value="${apiKey.value}" />
-              </form>
-            </li>`
-          })}
-        </ul>
-
-        <form
-          data-on-submit="@post('/studio/api/api-key', { contentType: 'form' })"
-        >
-          <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>
-
-      ${Backup()}
-
-      ${Users()}
+      ${ApiKeys()} ${Backup()} ${Users()}
     </div>
   `
 }

package/components/SiteLayout.ts

@@ -11,16 +11,15 @@ export default (
     | Promise<HtmlEscapedString>,
   includeAdminPanel = true,
 ) => {
+  const title = studioConfig.siteName ? studioConfig.siteName + ' | ' : ''
+
   return html`
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>
-          ${studioConfig.siteName ? studioConfig.siteName + ' | ' : ''}Alstar
-          Studio
-        </title>
+        <title>${title}Alstar Studio</title>
 
         <link rel="icon" type="image/svg" href="/studio/favicon.svg" />
 

package/components/fields/Slug.ts

@@ -28,8 +28,6 @@ app.get('/slug', async (c) => {
       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',
@@ -64,16 +62,20 @@ export default (props: {
 
   if (!data) return html`<p>No block</p>`
 
+  const entry = query.root({ id: entryId })
+  const title = entry?.fields?.title?.value
+  const sluggedTitle = slugify(title)
+
   return html`
-    <div
-      style="display: flex; align-items: center"
-      data-signals="{ slug: '${data.value}' }"
-    >
+    <div style="display: flex; align-items: center">
       <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()"
+        data-on-change="@patch('/studio/api/block', {
+          contentType: 'form',
+          headers: {
+            render: 'Entry',
+            props: '${JSON.stringify({ entryId: entryId })}'
+          }
+        })"
       >
         <hgroup>
           <label for="block-${data.id}">${structure.label}</label>
@@ -84,7 +86,7 @@ export default (props: {
           id="block-${data.id}"
           name="value"
           type="text"
-          data-bind="slug"
+          value="${data.value}"
         />
 
         <input type="hidden" name="type" value="${structure.type}" />
@@ -96,9 +98,16 @@ export default (props: {
 
       <form
         style="margin-top: 21px"
-        data-on-submit="@get('/studio/api/field/slug', { contentType: 'form' })"
+        data-on-submit="@patch('/studio/api/block', {
+          contentType: 'form',
+          headers: {
+            render: 'Entry',
+            props: '${JSON.stringify({ entryId: entryId })}'
+          }
+        })"
       >
-        <input type="hidden" name="entryId" value="${entryId}" />
+        <input type="hidden" name="id" value="${data.id}" />
+        <input type="hidden" name="value" value="${sluggedTitle}" />
         <button
           class="ghost"
           aria-label="Generate slug"

package/components/fields/Text.ts

@@ -12,17 +12,33 @@ export default (props: {
 }) => {
   const { entryId, parentId, name, structure, sortOrder = 0, id } = props
 
-  const data = getOrCreateRow({ parentId, name, field: structure, sortOrder, id })
+  const data = getOrCreateRow({
+    parentId,
+    name,
+    field: structure,
+    sortOrder,
+    id,
+  })
 
   if (!data) return html`<p>No block</p>`
 
+  const isEntryTitle = entryId === parentId && name === 'title'
+
   return html`
-  <form
-      data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
+    <form
+      data-on-input="@patch('/studio/api/block', {
+        contentType: 'form',
+        headers: {
+          render: '${isEntryTitle ? 'AdminPanel' : ''}'
+        }
+      })"
     >
       <hgroup>
         <label for="block-${data.id}">${structure.label}</label>
-        <p><small>${structure.description}</small></p>
+        ${structure.description &&
+        html`
+          <p><small>${structure.description}</small></p>
+        `}
       </hgroup>
 
       <input

package/components/fields/index.ts

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

package/components/icons.ts

@@ -230,3 +230,22 @@ export const arrowsRound = html`
     />
   </svg>
 `
+
+export const download = 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">
+      <path
+        d="M10.75 2.75a.75.75 0 0 0-1.5 0v8.614L6.295 8.235a.75.75 0 1 0-1.09 1.03l4.25 4.5a.75.75 0 0 0 1.09 0l4.25-4.5a.75.75 0 0 0-1.09-1.03l-2.955 3.129z"
+      />
+      <path
+        d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z"
+      />
+    </g>
+  </svg>
+`

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/{Users.ts → settings/Users.ts}

@@ -1,6 +1,6 @@
 import { db } from '@alstar/db'
 import { html } from 'hono/html'
-import { sql } from '../utils/sql.ts'
+import { sql } from '../../utils/sql.ts'
 
 export default () => {
   const users = db.database
@@ -15,9 +15,26 @@ export default () => {
   return html`
     <article>
       <header>Users</header>
-      <ul>
-        ${users.map(user => html`<li>${user.email}</li>`)}
-      </ul>
+      
+      <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

package/index.ts

@@ -31,7 +31,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: ['.'] })
+  const refresher = await createRefresher({ rootdir: '.' })
 
   loadDb('./studio.db')
   createStudioTables()
@@ -80,6 +80,8 @@ const createStudio = async (config: types.StudioConfig) => {
    */
   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()
@@ -89,6 +91,16 @@ const createStudio = async (config: types.StudioConfig) => {
     return c.notFound()
   })
 
+  app.use(
+    '/studio/backups/*',
+    serveStatic({
+      root: './',
+      rewriteRequestPath: (path) => path.replace(/^\/studio\/backups/, '/backups'),
+    }),
+  )
+
+  // console.log(app.routes)
+
   /**
    * Run server
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.11",
+  "version": "0.0.0-beta.12",
   "type": "module",
   "main": "index.ts",
   "engines": {
@@ -11,8 +11,8 @@
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
     "@alstar/db": "0.0.0-beta.1",
-    "@alstar/ui": "0.0.0-beta.1",
-    "@alstar/refresher": "0.0.0-beta.3"
+    "@alstar/refresher": "0.0.0-beta.3",
+    "@alstar/ui": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/pages/error.ts

@@ -8,7 +8,7 @@ export default ((err?: Error | HTTPResponseError) => {
     <article>
       <header>Something went wrong</header>
       <p>Try again</p>
-      <p>${err?.message}</p>
+      <p>${err?.message || '404 - Not found'}</p>
     </article>
   `, false)
 })

package/public/studio/css/settings.css

@@ -1,28 +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/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';

package/public/studio/main.js

@@ -4,6 +4,7 @@ import './js/markdown-editor.js'
 import './js/sortable-list.js'
 
 barba.init({
+  debug: true,
   cacheIgnore: true,
   views: [{ namespace: 'default' }],
 })

package/utils/renderSSE.ts

@@ -0,0 +1,27 @@
+import path from 'node:path'
+import { stripNewlines } from './strip-newlines.ts'
+import { type SSEStreamingApi } from 'hono/streaming'
+import { type Context } from 'hono'
+
+export const renderSSE = async (stream: SSEStreamingApi, c: Context) => {
+  const componentPath = c.req.header('render')
+  const props = c.req.header('props')
+
+  if (componentPath) {
+    try {
+      const partialToRender = await import(
+        path.join('../', 'components', componentPath + '.ts')
+      )
+
+      const propsJSON = props ? JSON.parse(props) : undefined
+      const component = await partialToRender.default(propsJSON)
+
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(component)}`,
+      })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

package/utils/slugify.ts

@@ -1,4 +1,6 @@
-export function slugify(str: string) {
+export function slugify(str?: string | null) {
+  if (!str) return ''
+
   return String(str)
     .normalize('NFKD') // split accented characters into their base characters and diacritical marks
     .replace(/[\u0300-\u036f]/g, '') // remove all the accents, which happen to be all in the \u03xx UNICODE block.

package/components/Backup.ts

@@ -1,13 +0,0 @@
-import { html } from 'hono/html'
-
-export default () => {
-  return html`<article data-signals="{ status: null, message: '' }">
-      <header>Backup</header>
-      <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/utils/build-structure-path.ts

@@ -1,43 +0,0 @@
-import { type Block } from '../types.ts'
-import { structure } from '../index.ts'
-
-export type StructurePath = (string | number)[]
-
-function getTargetPath(
-  target: Block,
-  path: StructurePath,
-): number | string | undefined {
-  if (!path.length) {
-    return structure.findIndex((block) => block.name === target.name)
-  }
-
-  let sub = structure
-
-  path.forEach((key: number | string) => {
-    if (sub) {
-      // @ts-ignore
-      sub = sub[key]
-    }
-  })
-
-  if (Array.isArray(sub)) {
-    return sub.findIndex((block) => block.name === target.name)
-  }
-
-  return
-}
-
-export const buildStructurePath = (
-  target: Block | undefined,
-  path: StructurePath = [],
-) => {
-  if (!target) return path
-
-  const targetPlacement = getTargetPath(target, path)
-
-  if (targetPlacement !== undefined) {
-    path.push(targetPlacement)
-  }
-
-  return path
-}