@alstar/studio 0.0.0-beta.7 → 0.0.0-beta.9

package/api/api-key.ts

@@ -7,10 +7,9 @@ import crypto from 'node:crypto'
 
 import { stripNewlines } from '../utils/strip-newlines.ts'
 import { sql } from '../utils/sql.ts'
-import { type Structure } from '../types.ts'
 import Settings from '../components/Settings.ts'
 
-export default (structure: Structure) => {
+export default () => {
   const app = new Hono<{ Bindings: HttpBindings }>()
 
   app.post('/api-key', async (c) => {

package/api/backup.ts

@@ -0,0 +1,38 @@
+import { type HttpBindings } from '@hono/node-server'
+import { Hono } from 'hono'
+import { streamSSE } from 'hono/streaming'
+import { DatabaseSync } from 'node:sqlite'
+
+import { stripNewlines } from '../utils/strip-newlines.ts'
+import { db } from '@alstar/db'
+
+export default () => {
+  const app = new Hono<{ Bindings: HttpBindings }>()
+
+  app.post('/backup', async (c) => {
+    // const totalPagesTransferred = await backup(db.database, './backups/backup.db', {
+    //   rate: 1, // Copy one page at a time.
+    //   progress: ({ totalPages, remainingPages }) => {
+    //     console.log('Backup in progress', { totalPages, remainingPages })
+    //   },
+    // })
+
+    // console.log('Backup completed', totalPagesTransferred)
+
+    return c.html('good')
+
+    // return streamSSE(c, async (stream) => {
+    //   await stream.writeSSE({
+    //     event: 'datastar-patch-signals',
+    //     data: `signals {}`,
+    //   })
+
+    //   await stream.writeSSE({
+    //     event: 'datastar-patch-elements',
+    //     data: `elements ${stripNewlines(Settings())}`,
+    //   })
+    // })
+  })
+
+  return app
+}

package/api/index.ts

@@ -1,10 +1,13 @@
 import block from './block.ts'
 import apiKey from './api-key.ts'
+import type { Structure } from '../types.ts'
+import backup from './backup.ts'
 
-export const api = (structure) => {
+export const api = (structure: Structure) => {
   const app = block(structure)
-  
-  app.route('/', apiKey(structure))
+
+  app.route('/', apiKey())
+  app.route('/', backup())
 
   return app
 }

package/components/Backup.ts

@@ -0,0 +1,10 @@
+import { html } from 'hono/html'
+
+export default () => {
+  return html`<article>
+      <header>Backup</header>
+      <form data-on-submit="@post('/admin/api/backup', { contentType: 'form' })">
+        <button type="submit">Backup database</button>
+      </form>
+    </article>`
+}

package/components/BlockRenderer.ts

@@ -8,15 +8,15 @@ export default (props: {
   id?: number
   structure: BlockDef
 }) => {
-  const { entryId, parentId, structure, id } = props
+  const { entryId, parentId, structure } = props
 
   const entries = Object.entries(structure.fields)
 
-  return entries.map(([name, field]) => {
-    try {
-      return Render({ entryId, parentId, structure: field, name })
-    } catch (error) {
-      return html`<p>Cound not render: "${name}"</p>`
-    }
-  }).join('')
+  return html`${entries.map(([name, field]) => {
+      try {
+        return Render({ entryId, parentId, structure: field, name })
+      } catch (error) {
+        return html`<p>Cound not render: "${name}"</p>`
+      }
+    })}`
 }

package/components/Render.ts

@@ -21,7 +21,7 @@ export default (props: {
   id?: number
   name: string
   sortOrder?: number
-}): HtmlEscapedString | Promise<HtmlEscapedString> | string => {
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
   const { entryId, parentId, structure, name, id } = props
 
   if (!structure) return html`<p>No block</p>`

package/components/Settings.ts

@@ -2,6 +2,7 @@ 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'
 
 export default () => {
   const apiKeys = db.database
@@ -93,6 +94,8 @@ export default () => {
           </article>
         </dialog>
       </article>
+
+      <!-- {Backup()} -->
     </div>
   `
 }

package/components/SiteLayout.ts

@@ -25,8 +25,6 @@ export default (props: {
 
         <meta name="color-scheme" content="light dark" />
 
-        <link rel="stylesheet" href="/studio/main.css" />
-
         <script
           type="module"
           src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
@@ -42,9 +40,8 @@ export default (props: {
           }
         </script>
 
-        <script src="/studio/markdown-editor.js" type="module"></script>
-        <script src="/studio/sortable-list.js" type="module"></script>
         <script src="/studio/main.js" type="module"></script>
+        <link href="/studio/main.css" rel="stylesheet" />
       </head>
 
       <body data-barba="wrapper">

package/index.ts

@@ -23,7 +23,7 @@ export let studioConfig: types.StudioConfig = {
 }
 
 const createStudio = async (config: types.StudioConfig) => {
-  createRefresher({ rootdir: '.' })
+  const refresher = await createRefresher({ rootdir: '.' })
 
   loadDb('./studio.db')
   createStudioTables()
@@ -84,7 +84,7 @@ const createStudio = async (config: types.StudioConfig) => {
     })
   })
 
-  startupLog({ port: studioConfig.port || 3000 })
+  startupLog({ port: studioConfig.port || 3000, refresherPort: refresher.port })
 
   return app
 }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.7",
+  "version": "0.0.0-beta.9",
   "type": "module",
   "main": "index.ts",
   "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/ui": "0.0.0-beta.1",
-    "@alstar/db": "0.0.0-beta.1",
-    "@alstar/refresher": "0.0.0-beta.2"
+    "@alstar/db": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/public/studio/{sortable-list.js → js/sortable-list.js}

@@ -3,8 +3,10 @@ import Sortable from 'sortablejs'
 class SortableList extends HTMLElement {
   instance = null
 
-  connectedCallback() {
-    if (!this.children.length) return
+  mutationObserver
+
+  init() {
+    if (this.instance || !this.children.length) return
 
     const { id } = this.dataset
 
@@ -32,8 +34,16 @@ class SortableList extends HTMLElement {
     })
   }
 
+  connectedCallback() {
+    this.mutationObserver = new MutationObserver(this.init.bind(this))
+    this.mutationObserver.observe(this, { childList: true })
+
+    this.init()
+  }
+
   disconnectedCallback() {
     this.instance?.destroy()
+    this.mutationObserver?.disconnect()
   }
 }
 

package/public/studio/main.css

@@ -1,9 +1,8 @@
 /* @import './../node_modules/@alstar/ui/red.css'; */
 @import 'https://esm.sh/@alstar/ui/red.css';
-@import './admin-panel.css';
-@import './entry.css';
-@import './blocks.css';
-@import './settings.css';
+@import './css/admin-panel.css';
+@import './css/blocks-field.css';
+@import './css/settings.css';
 
 body {
   padding: 0;

package/public/studio/main.js

@@ -1,10 +1,9 @@
 import barba from '@barba/core'
 
+import './js/markdown-editor.js'
+import './js/sortable-list.js'
+
 barba.init({
   cacheIgnore: true,
-  views: [
-    {
-      namespace: 'default',
-    },
-  ],
+  views: [{ namespace: 'default' }],
 })

package/utils/startup-log.ts

@@ -1,9 +1,10 @@
 import packageJSON from '../package.json' with { type: 'json' }
 
-export default ({ port }: { port: number }) => {
+export default ({ port, refresherPort }: { port: number, refresherPort: number }) => {
   console.log('\x1b[32m%s\x1b[0m', '╭───────────────────────╮')
   console.log('\x1b[32m%s\x1b[0m', '│ Alstar Studio         │')
   console.log('\x1b[32m%s\x1b[0m', `│ ${packageJSON.version}${' '.repeat(22 - packageJSON.version.length)}│`)
   console.log('\x1b[32m%s\x1b[0m', `│ http://localhost:${port} │`)
+  console.log('\x1b[32m%s\x1b[0m', `│ Refresher port:  ${refresherPort} │`)
   console.log('\x1b[32m%s\x1b[0m', '╰───────────────────────╯')
 }

package/public/studio/entry.css

@@ -1,7 +0,0 @@
-.entry {
-  form {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}