@alstar/studio 0.0.0-beta.16 → 0.0.0-beta.18

package/api/block.ts

@@ -5,7 +5,6 @@ import { streamSSE } from 'hono/streaming'
 import { sql } from '../utils/sql.ts'
 import { db } from '@alstar/db'
 import {
-  blockWithChildren,
   deleteBlockWithChildren,
 } from '../queries/block-with-children.ts'
 import { query } from '../queries/index.ts'
@@ -57,19 +56,6 @@ app.patch('/block', async (c) => {
     transaction.run(value, id)
 
     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>`,
-    //     })
-    //   }
-    // }
   })
 })
 

package/components/AdminPanel.ts

@@ -2,7 +2,7 @@ import { html } from 'hono/html'
 import { logo } from './icons.ts'
 import Entries from './Entries.ts'
 import * as icons from './icons.ts'
-import { studioStructure } from '../index.ts'
+import { studioConfig, studioStructure } from '../index.ts'
 import { getOrCreateRow } from '../utils/get-or-create-row.ts'
 
 export default () => {
@@ -10,9 +10,15 @@ export default () => {
 
   return html`
     <div class="admin-panel" id="admin_panel">
-      <h1>
-        <a href="/studio" aria-label="Go to dashboard"> ${logo} </a>
-      </h1>
+      <!-- <button class="ghost toggle-button">
+        {icons.bars}
+      </button> -->
+
+      <header>
+        <h1 class="title">
+          <a href="/studio" aria-label="Go to dashboard"> ${studioConfig.admin?.logo ?? logo} </a>
+        </h1>
+      </header>
 
       <aside style="width: 100%;">
         ${entries.map(([name, block]) => {
@@ -37,7 +43,7 @@ export default () => {
 
           return html`
           <form
-              data-on-submit="@post('/studio/api/block', {
+              data-on:submit="@post('/studio/api/block', {
                 contentType: 'form',
                 headers: {
                   'render': 'AdminPanel',

package/components/BlockFieldRenderer.ts

@@ -1,5 +1,5 @@
 import { query } from '../queries/index.ts'
-import type { BlocksFieldDefStructure } from '../types.ts'
+import type { BlocksFieldDef, BlocksFieldDefStructure } from '../types.ts'
 import { BlockInstance } from '../utils/define.ts'
 import { getOrCreateRow } from '../utils/get-or-create-row.ts'
 import { html } from '../utils/html.ts'
@@ -7,8 +7,8 @@ import * as icons from './icons.ts'
 import Render from './Render.ts'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   name: string
   structure: BlocksFieldDefStructure
   id?: number
@@ -32,7 +32,7 @@ export default (props: {
 
   return html`
     <div class="blocks-field">
-      <header>
+      <header data-on:click="console.log('hehehe')">
         <p>${structure.label}</p>
 
         <details class="dropdown">
@@ -42,10 +42,10 @@ export default (props: {
               return html`
                 <li>
                   <form
-                    data-on-submit="@post('/studio/api/block', {
+                    data-on:submit="@post('/studio/api/block', {
                       contentType: 'form',
                       headers: {
-                        render: 'Entry',
+                        render: 'Entry LivePreview',
                         props: '${JSON.stringify({ entryId: entryId })}'
                       }
                     })"
@@ -69,8 +69,6 @@ export default (props: {
         </details>
       </header>
 
-      <hr style="margin-top: 0;" />
-
       <sortable-list data-id="${data.id}">
         ${rows.map((row) => {
           const [name, struct] =
@@ -79,7 +77,7 @@ export default (props: {
           if (!name || !struct) return html`<p>No name</p>`
 
           return html`
-          <article data-id="${row.id}">
+            <article data-id="${row.id}" data-signals="{ 'expanded-${row.id}': true }">
               <header>
                 ${struct.label}
 
@@ -88,19 +86,25 @@ export default (props: {
                     <input name="enable" type="checkbox" role="switch" checked />
                   </label> -->
 
+                  <button data-on:click="$expanded-${row.id} = !$expanded-${row.id}" class="ghost handle text-secondary" data-tooltip="Collapse" data-placement="top">
+                    ${icons.minus}
+                  </button>
+
                   <button
                     data-handle-for="${data.id}"
                     class="ghost handle text-secondary"
                     style="cursor: grab"
+                    data-tooltip="Reorder"
+                    data-placement="top"
                   >
                     ${icons.bars}
                   </button>
 
                   <form
-                    data-on-submit="@delete('/studio/api/block', {
+                    data-on:submit="@delete('/studio/api/block', {
                       contentType: 'form',
                       headers: {
-                        render: 'Entry',
+                        render: 'Entry LivePreview',
                         props: '${JSON.stringify({ entryId: entryId })}'
                       }
                     })"
@@ -120,14 +124,16 @@ export default (props: {
                 </aside>
               </header>
 
-              ${Render({
-                entryId,
-                parentId:
-                  struct.instanceOf === BlockInstance ? row.id : data.id,
-                id: row.id,
-                structure: struct,
-                name: name,
-              })}
+              <div data-show="$expanded-${row.id}">
+                ${Render({
+                  entryId,
+                  parentId:
+                    struct.instanceOf === BlockInstance ? row.id : data.id,
+                  id: row.id,
+                  structure: struct,
+                  name: name,
+                })}
+              </div>
             </article>
           `
         })}

package/components/BlockRenderer.ts

@@ -1,12 +1,12 @@
 import { html } from 'hono/html'
-import type { BlockDef } from '../types.ts'
+import type { BlockDefStructure } from '../types.ts'
 import Render from './Render.ts'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   id?: number
-  structure: BlockDef
+  structure: BlockDefStructure
 }) => {
   const { entryId, parentId, structure } = props
 

package/components/Entries.ts

@@ -21,7 +21,7 @@ export default ({ name }: { name: string }) => {
               </a>
 
               <form
-                data-on-submit="@delete('/studio/api/block', {
+                data-on:submit="@delete('/studio/api/block', {
                   contentType: 'form',
                   headers: {
                     render: 'AdminPanel'

package/components/Entry.ts

@@ -3,7 +3,7 @@ import { query } from '../queries/index.ts'
 import { studioStructure } from '../index.ts'
 import Render from './Render.ts'
 
-export default (props: { entryId: number }) => {
+export default (props: { entryId: number | string }) => {
   const data = query.block({ id: props.entryId?.toString() })
 
   if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
@@ -14,12 +14,18 @@ export default (props: { entryId: number }) => {
 
   return html`
     <div id="entry" class="entry">
-      ${Render({
-        entryId: props.entryId,
-        parentId: props.entryId,
-        structure: structure,
-        name: data.name,
-      })}
+      <header>
+        <h1>Entry content</h1>
+      </header>
+
+      <div class="content">
+        ${Render({
+          entryId: props.entryId,
+          parentId: props.entryId,
+          structure: structure,
+          name: data.name,
+        })}
+      </div>
     </div>
     
   `

package/components/FieldRenderer.ts

@@ -2,10 +2,11 @@ import { Field } from './fields/index.ts'
 import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
 import BlockFieldRenderer from './BlockFieldRenderer.ts'
 import { BlockFieldInstance } from '../utils/define.ts'
+import { html } from 'hono/html'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   structure: FieldDefStructure | BlocksFieldDefStructure
   id?: number
   name: string
@@ -18,23 +19,23 @@ export default (props: {
 
   switch (structure.type) {
     case 'text': {
-      return Field.Text({ entryId, parentId, name, id, structure })
+      return html`<div class="field">${Field.Text({ entryId, parentId, name, id, structure })}</div>`
     }
 
     case 'slug': {
-      return Field.Slug({ entryId, parentId, name, id, structure })
+      return html`<div class="field">${Field.Slug({ entryId, parentId, name, id, structure })}</div>`
     }
 
     case 'markdown': {
-      return Field.Markdown({ entryId, parentId, name, id, structure })
+      return html`<div class="field">${Field.Markdown({ entryId, parentId, name, id, structure })}</div>`
     }
 
     case 'image': {
-      return Field.Text({ entryId, parentId, name, structure, id })
+      return html`<div class="field">${Field.Text({ entryId, parentId, name, structure, id })}</div>`
     }
 
     case 'reference': {
-      return Field.Reference({ entryId, parentId, name, structure, id })
+      return html`<div class="field">${Field.Reference({ entryId, parentId, name, structure, id })}</div>`
     }
   }
 }

package/components/LivePreview.ts

@@ -0,0 +1,37 @@
+import { html } from "hono/html"
+import { query } from "../queries/index.ts"
+import { studioConfig, studioStructure } from "../index.ts"
+
+export default (props: { entryId: number | string }) => {
+  const data = query.root({ id: props.entryId })
+
+  if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
+
+  const structure = studioStructure[data.name]
+
+  if (!structure) return html`<p>No structure of type: ${data.name}</p>`
+
+  if (!structure.preview) return html``
+
+  const slugValue = 'slug' in structure.preview! && structure.preview?.slug
+  const slugColumn = 'field' in structure.preview! && structure.preview?.field
+
+  if (!slugValue && !slugColumn) return html``
+
+  let slug
+
+  if (slugValue) {
+    slug = slugValue
+  } else if (slugColumn) {
+    slug = data.fields[slugColumn].value
+  }
+
+  if (!slug) return html``
+
+  return html`<live-preview id="live_preview" class="live-preview" data-rendered-at="${Date.now()}">
+    <header>
+      <h1>Live preview</h1>
+    </header>
+    <iframe src="http://localhost:${studioConfig.port}/${slug === '/' ? '' : slug}"></iframe>
+  </live-preview>`
+}

package/components/Render.ts

@@ -15,8 +15,8 @@ import type {
 } from '../types.ts'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   structure: BlockDefStructure | FieldDefStructure | BlocksFieldDefStructure
   id?: number
   name: string

package/components/SiteLayout.ts

@@ -25,10 +25,7 @@ export default (
 
         <meta name="color-scheme" content="light dark" />
 
-        <script
-          type="module"
-          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
-        ></script>
+        <script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-RC.6/bundles/datastar.js"></script>
 
         <script type="importmap">
           {

package/components/fields/Markdown.ts

@@ -3,8 +3,8 @@ import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
 import { html } from '../../utils/html.ts'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   name: string
   id?: number
   structure: FieldDefStructure
@@ -17,7 +17,13 @@ export default (props: {
 
   return html`
   <form
-      data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
+      data-on:input="@patch('/studio/api/block', {
+        contentType: 'form',
+        headers: {
+          render: 'LivePreview',
+          props: '${JSON.stringify({ entryId: entryId })}'
+        }
+      })"
     >
       <hgroup>
         <label for="block-${data.id}">${structure.label}</label>
@@ -27,6 +33,7 @@ export default (props: {
       <markdown-editor
         data-content="${data.value?.trim()}"
         data-id="${data.id}"
+        data-entry-id="${entryId}"
       >
         <!-- <textarea id="block-{data.id}" name="value" class="markdown">
           {data.value}

package/components/fields/Reference.ts

@@ -4,8 +4,8 @@ import type { FieldDefStructure, ReferenceFieldStructure } from '../../types.ts'
 import { query } from '../../queries/index.ts'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   name: string
   id?: number
   structure: ReferenceFieldStructure
@@ -23,14 +23,15 @@ export default (props: {
 
   if (!data) return html`<p>No block</p>`
 
-  const entries = query.roots({ type: structure.to }, { depth: 1 })
+  const entries = query.blocks({ type: structure.to })
 
   return html`
     <form
-      data-on-input="@patch('/studio/api/block', {
+      data-on:input="@patch('/studio/api/block', {
         contentType: 'form',
         headers: {
-          render: ''
+          render: 'LivePreview',
+          props: '${JSON.stringify({ entryId: entryId })}'
         }
       })"
     >
@@ -50,8 +51,11 @@ export default (props: {
       />
       <datalist id="entries-${data.id}">
         ${entries.map((entry) => {
-          return html`<option value="${entry.fields.slug.value}">
-              ${entry.fields.title.value}
+          const slug = query.block({ name: 'slug', parent_id: entry.id })
+          const title = query.block({ name: 'title', parent_id: entry.id })
+
+          return html`<option value="${slug.value}">
+              ${title.value}
             </option>`
         })}
       </datalist>

package/components/fields/Slug.ts

@@ -43,8 +43,8 @@ app.get('/slug', async (c) => {
 export const routes = app
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   name: string
   id?: number
   structure: FieldDefStructure
@@ -69,10 +69,10 @@ export default (props: {
   return html`
     <div style="display: flex; align-items: center">
       <form
-        data-on-change="@patch('/studio/api/block', {
+        data-on:change="@patch('/studio/api/block', {
           contentType: 'form',
           headers: {
-            render: 'Entry',
+            render: 'Entry LivePreview',
             props: '${JSON.stringify({ entryId: entryId })}'
           }
         })"
@@ -98,10 +98,10 @@ export default (props: {
 
       <form
         style="margin-top: 21px"
-        data-on-submit="@patch('/studio/api/block', {
+        data-on:submit="@patch('/studio/api/block', {
           contentType: 'form',
           headers: {
-            render: 'Entry',
+            render: 'Entry LivePreview',
             props: '${JSON.stringify({ entryId: entryId })}'
           }
         })"

package/components/fields/Text.ts

@@ -1,10 +1,11 @@
 import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
 import { html } from '../../utils/html.ts'
 import type { FieldDefStructure } from '../../types.ts'
+import { raw } from 'hono/html'
 
 export default (props: {
-  entryId: number
-  parentId: number
+  entryId: number | string
+  parentId: number | string
   name: string
   id?: number
   structure: FieldDefStructure
@@ -26,21 +27,25 @@ export default (props: {
 
   return html`
     <form
-      data-on-input="@patch('/studio/api/block', {
+      class="field-text"
+      data-on:input="@patch('/studio/api/block', {
         contentType: 'form',
         headers: {
-          render: '${isEntryTitle ? 'AdminPanel' : ''}'
+          render: '${isEntryTitle ? 'AdminPanel' : ''} LivePreview',
+          props: '${JSON.stringify({ entryId: entryId })}'
         }
       })"
     >
       <hgroup>
         <label for="block-${data.id}">${structure.label}</label>
-        ${structure.description &&
-        html`
-          <p><small>${structure.description}</small></p>
-        `}
+        ${structure.description ?
+          html`
+            <p><small>${structure.description}</small></p>
+          ` : null}
       </hgroup>
 
+      ${structure.presentation === 'svg' ? html`<output>${raw(data.value)}</output>`: ''}
+
       <input
         id="block-${data.id}"
         name="value"

package/components/icons.ts

@@ -249,3 +249,6 @@ export const download = html`
     </g>
   </svg>
 `
+
+export const minus = html`
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 20 20"><!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE --><path fill="currentColor" d="M6.75 9.25a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5z"/></svg>`

package/components/settings/ApiKeys.ts

@@ -33,7 +33,7 @@ export default () => {
                 <td><input type="text" disabled value="${apiKey.hint}" /></td>
                 <td>
                   <form
-                    data-on-submit="@delete('/studio/api/api-key', {
+                    data-on:submit="@delete('/studio/api/api-key', {
                       contentType: 'form',
                       headers: {
                         render: 'Settings'
@@ -58,7 +58,7 @@ export default () => {
       </table>
 
       <form
-        data-on-submit="@post('/studio/api/api-key', {
+        data-on:submit="@post('/studio/api/api-key', {
           contentType: 'form',
           headers: {
             render: 'Settings'
@@ -93,7 +93,7 @@ export default () => {
             <button
               style="display: flex; align-items: center;"
               data-attr="{ id: $apiKey }"
-              data-on-click="navigator.clipboard.writeText($apiKey); $copied = true"
+              data-on:click="navigator.clipboard.writeText($apiKey); $copied = true"
               class="ghost"
               aria-label="Copy key to clipboard"
             >
@@ -110,7 +110,7 @@ export default () => {
           <footer>
             <button
               class="ghost"
-              data-on-click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
+              data-on:click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
             >
               Close
             </button>

package/components/settings/Backup.ts

@@ -41,7 +41,7 @@ export default async () => {
                 </th>
                 <th>
                   <form
-                    data-on-submit="@delete('/studio/api/backup', {
+                    data-on:submit="@delete('/studio/api/backup', {
                       contentType: 'form',
                       headers: {
                         render: 'Settings'
@@ -59,7 +59,7 @@ export default async () => {
       </table>
 
       <form
-        data-on-submit="@post('/studio/api/backup', {
+        data-on:submit="@post('/studio/api/backup', {
           contentType: 'form',
           headers: {
             render: 'Settings'
@@ -72,7 +72,7 @@ export default async () => {
       <hr />
 
       <form
-        data-on-submit="@post('/studio/api/backup', { contentType: 'form' })"
+        data-on:submit="@post('/studio/api/backup', { contentType: 'form' })"
       >
         <input type="file" name="file" />
         <button type="submit" class="ghost">Restore database</button>

package/components/settings/Users.ts

@@ -38,7 +38,7 @@ export default () => {
       <article>
         <header>Register user</header>
         <form
-          data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+          data-on:submit="@post('/studio/api/auth/register', { contentType: 'form' })"
         >
           <label for="register_email"><small>Email</small></label>
           <input

package/index.ts

@@ -6,7 +6,6 @@ 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 { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
@@ -20,21 +19,20 @@ import auth from './utils/auth.ts'
 import ErrorPage from './pages/error.ts'
 
 import * as types from './types.ts'
+import { refresher, refreshClient } from './utils/refresher.ts'
 
 export let rootdir = './node_modules/@alstar/studio'
 
 export let studioStructure: types.Structure = {}
 export let studioConfig: types.StudioConfig = {
   siteName: '',
+  honoConfig: {},
   fileBasedRouter: true,
   port: 3000,
   structure: {},
 }
 
-const createStudio = async (config: types.StudioConfig) => {
-  // const refresher = await createRefresher({ rootdir: ['.', import.meta.dirname] })
-  const refresher = await createRefresher({ rootdir: '.' })
-
+const createStudio = async (config: types.StudioConfigInput) => {
   loadDb('./studio.db')
   createStudioTables()
 
@@ -48,6 +46,8 @@ const createStudio = async (config: types.StudioConfig) => {
 
   const app = new Hono(studioConfig.honoConfig)
 
+  app.get('/refresh', refresher({ root: '.', exclude: '.db' }))
+
   /**
    * Static folders
    */
@@ -104,8 +104,6 @@ const createStudio = async (config: types.StudioConfig) => {
     }),
   )
 
-  // console.log(app.routes)
-
   /**
    * Run server
    */
@@ -129,9 +127,12 @@ const createStudio = async (config: types.StudioConfig) => {
     })
   })
 
-  startupLog({ port: studioConfig.port || 3000, refresherPort: refresher.port })
+  startupLog({ port: studioConfig.port })
 
-  return app
+  return {
+    app,
+    refreshClient: refreshClient(studioConfig.port)
+  }
 }
 
 export {
@@ -144,6 +145,6 @@ export {
 } from './utils/define.ts'
 export { type RequestContext } from './types.ts'
 export { createStudio }
-export { html, type HtmlEscapedString } from './utils/html.ts'
+export { html, raw, type HtmlEscapedString } from './utils/html.ts'
 export { query } from './queries/index.ts'
 export const version = packageJSON.version