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

package/api/api-key.ts

@@ -0,0 +1,74 @@
+import { type HttpBindings } from '@hono/node-server'
+import { ServerSentEventGenerator } from '@starfederation/datastar-sdk'
+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 { type Structure } from '../types.ts'
+import Settings from '../components/Settings.ts'
+
+export default (structure: Structure) => {
+  const app = new Hono<{ Bindings: HttpBindings }>()
+
+  app.post('/api-key', async (c) => {
+    return streamSSE(c, async (stream) => {
+      const formData = await c.req.formData()
+      const data = Object.fromEntries(formData.entries())
+
+      if (!data) return
+
+      const apiKey = crypto.randomUUID()
+      const hash = crypto.createHash('sha256')
+
+      hash.update(apiKey)
+
+      const digest = hash.digest().toString('base64')
+
+      const xs = (length: number) => '*'.repeat(length)
+
+      db.insertInto('api_keys', {
+        name: data.name?.toString(),
+        value: digest,
+        hint: `${apiKey.substring(0, 8)}-${xs(4)}-${xs(4)}-${xs(4)}-${xs(12)}`,
+      })
+
+      await stream.writeSSE({
+        event: 'datastar-patch-signals',
+        data: `signals { apiKey: '${apiKey}', name: '' }`,
+      })
+
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(Settings())}`,
+      })
+    })
+  })
+
+  app.delete('/api-key', async (c) => {
+    return streamSSE(c, async (stream) => {
+      const formData = await c.req.formData()
+
+      const value = formData.get('value')?.toString()
+
+      if (!value) return
+
+      db.database
+        .prepare(sql`
+          delete from api_keys
+          where
+            value = ?
+        `)
+        .run(value)
+
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(Settings())}`,
+      })
+    })
+  })
+
+  return app
+}

package/api/block.ts

@@ -6,10 +6,15 @@ 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 Entries from '../components/Entries.ts'
 import Entry from '../components/Entry.ts'
-
-export const sectionRoutes = (structure: Structure) => {
+import {
+  blockWithChildren,
+  deleteBlockWithChildren,
+} from '../queries/block-with-children.ts'
+import AdminPanel from '../components/AdminPanel.ts'
+import { query } from '../queries/index.ts'
+
+export default (structure: Structure) => {
   const app = new Hono<{ Bindings: HttpBindings }>()
 
   app.post('/block', async (c) => {
@@ -17,19 +22,19 @@ export const sectionRoutes = (structure: Structure) => {
       const formData = await c.req.formData()
       const data = Object.fromEntries(formData.entries())
 
-      const row = structure.find((block) => block.type === data.type)
+      const row = structure[data.name?.toString()]
 
       if (!row) return
 
       db.insertInto('blocks', {
-        name: row.name?.toString(),
-        label: row.label?.toString(),
-        type: row.type?.toString(),
+        name: data.name?.toString(),
+        label: row.label,
+        type: row.type,
       })
 
       await stream.writeSSE({
         event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entries())}`,
+        data: `elements ${stripNewlines(AdminPanel())}`,
       })
     })
   })
@@ -37,26 +42,19 @@ export const sectionRoutes = (structure: Structure) => {
   app.post('/new-block', async (c) => {
     return streamSSE(c, async (stream) => {
       const formData = await c.req.formData()
-      const newBlock = formData.get('block')?.toString().split(';')
-      const columns = newBlock?.map((field) => field.split(':')) as string[][]
-      const data = Object.fromEntries(columns)
-
-      const parent_block_id = formData?.get('parent_block_id')?.toString()
-      const sort_order = formData?.get('sort_order')?.toString()
-
-      if (!parent_block_id || !sort_order) return
+      const data = Object.fromEntries(formData)
 
       db.insertInto('blocks', {
-        type: data.type,
-        name: data.name,
-        label: data.label,
-        parent_block_id,
-        sort_order,
+        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: data.entry_id, structure }))}`,
+        data: `elements ${stripNewlines(Entry({ entryId: parseInt(data.entry_id.toString()) }))}`,
       })
     })
   })
@@ -70,54 +68,96 @@ export const sectionRoutes = (structure: Structure) => {
       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 sortOrder = formData.get('sort_order')?.toString()
 
-      if (!id || !value || !sortOrder) return
+      if (!id || !value) return
 
       const transaction = db.database.prepare(sql`
         update blocks
         set
           value = ?
         where
-          id = ?
-          and sort_order = ?;
+          id = ?;
       `)
 
-      transaction.run(value, id, sortOrder)
+      transaction.run(value, id)
 
       if (entryId === parentId && name?.toString() === 'title') {
-        await stream.writeSSE({
-          event: 'datastar-patch-elements',
-          data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+        const rootBlock = query.block({
+          id: parentId?.toString() || null,
         })
+
+        if (rootBlock.type !== 'single') {
+          await stream.writeSSE({
+            event: 'datastar-patch-elements',
+            data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+          })
+        }
       }
     })
   })
 
+  app.patch('/value', async (c) => {
+    const body = await c.req.json()
+
+    const transaction = db.database.prepare(sql`
+      update blocks
+      set
+        value = ?
+      where
+        id = ?;
+    `)
+
+    transaction.run(body.value, body.id)
+
+    return c.json({ status: 200, message: 'success' })
+  })
+
   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(sql`
-        update blocks
-        set
-          status = 'disabled'
-        where
-          id = ?
-      `)
+      const transaction = db.database.prepare(deleteBlockWithChildren)
 
-      transaction.run(id)
+      transaction.all(id)
 
-      await stream.writeSSE({
-        event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entries())}`,
-      })
+      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())}`,
+        })
+      }
     })
   })
 
+  app.post('/sort-order', async (c) => {
+    const id = c.req.query('id')
+    const sortOrder = c.req.query('sort-order')
+
+    if (!id || !sortOrder) return
+
+    const transaction = db.database.prepare(sql`
+      update blocks
+      set
+        sort_order = ?
+      where
+        id = ?
+    `)
+
+    transaction.run(sortOrder, id)
+
+    return c.json({ status: 200, message: 'success' })
+  })
+
   return app
 }

package/api/index.ts

@@ -1,2 +1,10 @@
-export * from './block.ts'
+import block from './block.ts'
+import apiKey from './api-key.ts'
 
+export const api = (structure) => {
+  const app = block(structure)
+  
+  app.route('/', apiKey(structure))
+
+  return app
+}

package/api/mcp.ts

@@ -0,0 +1,53 @@
+import { type HttpBindings } from '@hono/node-server'
+import { ServerSentEventGenerator } from '@starfederation/datastar-sdk'
+import { Hono } from 'hono'
+import { sql } from '../utils/sql.ts'
+import { db } from '@alstar/db'
+import { bearerAuth } from 'hono/bearer-auth'
+import crypto from 'node:crypto'
+
+export default () => {
+  const app = new Hono<{ Bindings: HttpBindings }>()
+
+  app.use(
+    '/*',
+    bearerAuth({
+      verifyToken: async (token, c) => {
+        const hash = crypto.createHash('sha256')
+
+        hash.update(token)
+
+        const digest = hash.digest().toString('base64')
+
+        const exists = db.database
+          .prepare(sql`
+            select
+              value
+            from
+              api_keys
+            where
+              value = ?
+          `)
+          .get(digest)
+
+        return !!exists
+      },
+    }),
+  )
+
+  app.get('/entry', async (c) => {
+    return c.json({
+      status: 'success',
+      message: 'Response from MCP server!',
+    })
+  })
+
+  app.post('/entry', async (c) => {
+    return c.json({
+      status: 'success',
+      message: 'New entry created!',
+    })
+  })
+
+  return app
+}

package/components/AdminPanel.ts

@@ -0,0 +1,74 @@
+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 { getOrCreateRow } from '../utils/get-or-create-row.ts'
+
+export default () => {
+  const entries = Object.entries(studioStructure)
+
+  return html`
+    <div class="admin-panel" id="admin_panel">
+      <h1>
+        <a href="/admin" aria-label="Go to dashboard"> ${logo} </a>
+      </h1>
+
+      <aside style="width: 100%;">
+        ${entries.map(([name, block]) => {
+          if (block.type === 'single') {
+            const data = getOrCreateRow({ parentId: null, name, field: block })
+
+            return html`
+            <section id="entries">
+                <ul>
+                  <li>
+                    <a
+                      href="/admin/entry/${data.id}"
+                      id="block_link_${data.id}"
+                    >
+                      ${block.label}
+                    </a>
+                  </li>
+                </ul>
+              </section>
+            `
+          }
+
+          return html`
+          <form
+              data-on-submit="@post('/admin/api/block', { contentType: 'form' })"
+              style="display: flex; align-items: center; gap: 1rem;"
+            >
+              <input type="hidden" name="name" value="${name}" />
+              <button
+                class="ghost"
+                style="padding: 10px; margin: 0 -13px; display: flex;"
+                data-tooltip="New ${block.label}"
+                data-placement="right"
+              >
+                ${icons.newDocument}
+              </button>
+              <p style="user-select: none;"><small>${block.label}</small></p>
+            </form>
+
+            ${Entries({ name })}
+          `
+        })}
+      </aside>
+
+      <footer>
+        <a
+          role="button"
+          href="/admin/settings"
+          class="ghost"
+          style="padding: 10px; margin: 0 -13px; display: flex;"
+          data-tooltip="Settings"
+          data-placement="right"
+        >
+          ${icons.cog}
+        </a>
+      </footer>
+    </div>
+  `
+}

package/components/BlockFieldRenderer.ts

@@ -0,0 +1,121 @@
+import { query } from '../queries/index.ts'
+import type { 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'
+import * as icons from './icons.ts'
+import Render from './Render.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  structure: BlocksFieldDefStructure
+  id?: number
+  sortOrder?: number
+}) => {
+  const { entryId, parentId, name, structure, id, sortOrder = 0 } = props
+
+  const data = getOrCreateRow({
+    parentId,
+    name,
+    field: structure,
+    sortOrder,
+    id,
+  })
+
+  if (!data) return html`<p>No block</p>`
+
+  const entries = Object.entries(structure.children)
+
+  const rows = query.blocks({ parent_id: data.id })
+
+  return html`
+    <div class="blocks-field">
+      <header>
+        <p>${structure.label}</p>
+
+        <details class="dropdown">
+          <summary>Add</summary>
+          <ul>
+            ${entries.map(([name, block]) => {
+              return html`
+                <li>
+                  <form
+                    data-on-submit="@post('/admin/api/new-block', { contentType: 'form' })"
+                  >
+                    <button type="submit" class="ghost">${block.label}</button>
+                    <input type="hidden" name="type" value="${block.type}" />
+                    <input type="hidden" name="name" value="${name}" />
+                    <input type="hidden" name="label" value="${block.label}" />
+                    <input type="hidden" name="parent_id" value="${data.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                    <input
+                      type="hidden"
+                      name="sort_order"
+                      value="${rows.length}"
+                    />
+                  </form>
+                </li>
+                `
+            })}
+          </ul>
+        </details>
+      </header>
+
+      <hr style="margin-top: 0;" />
+
+      <sortable-list data-id="${data.id}">
+        ${rows.map((row, idx) => {
+          const [name, struct] =
+            entries.find(([name]) => name === row.name) || []
+
+          if (!name || !struct) return html`<p>No name</p>`
+
+          return html`
+          <article data-id="${row.id}">
+              <header>
+                ${struct.label}
+
+                <aside>
+                  <button
+                    data-handle-for="${data.id}"
+                    class="ghost handle text-secondary"
+                    style="cursor: grab"
+                  >
+                    ${icons.bars}
+                  </button>
+
+                  <form
+                    data-on-submit="@delete('/admin/api/block', { contentType: 'form' })"
+                  >
+                    <button
+                      type="submit"
+                      class="ghost text-secondary"
+                      data-tooltip="Remove"
+                      data-placement="top"
+                      aria-label="Delete block"
+                    >
+                      ${icons.x}
+                    </button>
+                    <input type="hidden" name="id" value="${row.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                  </form>
+                </aside>
+              </header>
+
+              ${Render({
+                entryId,
+                parentId:
+                  struct.instanceOf === BlockInstance ? row.id : data.id,
+                id: row.id,
+                structure: struct,
+                name: name,
+              })}
+            </article>
+          `
+        })}
+      </sortable-list>
+    </div>
+  `
+}

package/components/BlockRenderer.ts

@@ -0,0 +1,22 @@
+import { html } from 'hono/html'
+import type { BlockDef } from '../types.ts'
+import Render from './Render.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  id?: number
+  structure: BlockDef
+}) => {
+  const { entryId, parentId, structure, id } = 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('')
+}

package/components/Entries.ts

@@ -1,16 +1,17 @@
 import { html } from 'hono/html'
 import { query } from '../index.ts'
 import * as icons from './icons.ts'
+import type { BlockDef } from '../types.ts'
 
-export default () => {
-  const entries = query.blocks({ parent_block_id: null, status: 'enabled' })
+export default ({ name }: { name: string }) => {
+  const entries = query.blocks({ parent_id: null, status: 'enabled', name })
 
   return html`
     <section id="entries">
       <ul>
         ${entries?.map((block) => {
           const title = query.block({
-            parent_block_id: block.id.toString(),
+            parent_id: block.id.toString(),
             name: 'title',
           })
 
@@ -27,7 +28,7 @@ export default () => {
                 <button
                   data-tooltip="Remove"
                   data-placement="right"
-                  class="ghost"
+                  class="ghost text-secondary"
                   style="padding: 0"
                   type="submit"
                 >

package/components/Entry.ts

@@ -1,34 +1,26 @@
 import { html } from 'hono/html'
 import { query } from '../queries/index.ts'
-import { rootdir } from '../index.ts'
-import { type Structure } from '../types.ts'
-import Fields from './Fields.ts'
-import { buildStructurePath } from '../utils/build-structure-path.ts'
+import { studioStructure } from '../index.ts'
+import Render from './Render.ts'
 
-export default (props: { entryId: number | string; structure: Structure }) => {
+export default (props: { entryId: number }) => {
   const data = query.block({ id: props.entryId?.toString() })
 
   if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
 
-  const blockStructure = props.structure.find(
-    (block) => block.name === data.name,
-  )
+  const structure = studioStructure[data.name]
 
-  const structurePath = buildStructurePath(blockStructure)
+  if (!structure) return html`<p>No structure of type: ${data.name}</p>`
 
   return html`
-    <div id="entry">
-      <link rel="stylesheet" href="${rootdir}/components/Entry.css" />
-
-      <div class="entry">
-        ${blockStructure &&
-        Fields({
-          entryId: props.entryId,
-          parentId: props.entryId,
-          blockStructure,
-          structurePath,
-        })}
-      </div>
+    <div id="entry" class="entry">
+      ${Render({
+        entryId: props.entryId,
+        parentId: props.entryId,
+        structure: structure,
+        name: data.name,
+      })}
     </div>
+    
   `
 }

package/components/FieldRenderer.ts

@@ -0,0 +1,35 @@
+import { Field } from './fields/index.ts'
+import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+}) => {
+  const { entryId, parentId, structure, name, id } = props
+
+  switch (structure.type) {
+    case 'text': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'slug': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'markdown': {
+      return Field.Markdown({ entryId, parentId, name, id, structure })
+    }
+
+    case 'image': {
+      return Field.Text({ entryId, parentId, name, structure, id })
+    }
+
+    case 'blocks': {
+      return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+    }
+  }
+}