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

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

@@ -8,8 +8,12 @@ import { type Structure } from '../types.ts'
 import { db } from '@alstar/db'
 import Entries from '../components/Entries.ts'
 import Entry from '../components/Entry.ts'
+import {
+  blockWithChildren,
+  deleteBlockWithChildren,
+} from '../queries/block-with-children.ts'
 
-export const sectionRoutes = (structure: Structure) => {
+export default (structure: Structure) => {
   const app = new Hono<{ Bindings: HttpBindings }>()
 
   app.post('/block', async (c) => {
@@ -17,14 +21,14 @@ 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({
@@ -37,26 +41,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()) }))}`,
       })
     })
   })
@@ -99,22 +96,17 @@ export const sectionRoutes = (structure: Structure) => {
       const formData = await c.req.formData()
 
       const id = formData.get('id')?.toString()
+      const entryId = formData.get('entry_id')?.toString()
 
-      if (!id) return
+      if (!id || !entryId) 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())}`,
+        data: `elements ${stripNewlines(Entry({ entryId: parseInt(entryId.toString()) }))}`,
       })
     })
   })

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/bin/alstar.ts

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+// process.removeAllListeners('warning')
+
+const __filename = fileURLToPath(import.meta.url)
+
+// Dev-only auto watch (opt out with ALSTAR_NO_WATCH=true)
+const isDev =
+  process.env.NODE_ENV !== 'production' &&
+  process.env.ALSTAR_NO_WATCH !== 'true'
+const alreadyBootstrapped = process.env.ALSTAR_WATCH_BOOTSTRAPPED === '1'
+
+if (isDev && !alreadyBootstrapped) {
+  // Start a watcher ON THIS FILE and mark the environment so the child won't re-spawn
+  const childProcess = spawn(
+    process.execPath,
+    ['--watch', __filename, ...process.argv.slice(2)],
+    // [__filename, ...process.argv.slice(2)],
+    {
+      stdio: 'inherit',
+      env: { ...process.env, ALSTAR_WATCH_BOOTSTRAPPED: '1' },
+    },
+  )
+  // Important: exit this launcher so only the watched child keeps running
+  process.on('SIGINT', () => {
+    childProcess.kill('SIGINT')
+  })
+
+  process.on('SIGTERM', () => {
+    childProcess.kill('SIGTERM')
+  })
+
+  process.exit(0)
+
+}
+
+// --- Your actual CLI logic below ---
+// console.log(import.meta.dirname, path.resolve('.'))
+// import("./main.js").then(m => m.default());

package/components/{AdminPanel/AdminPanel.ts → AdminPanel.ts}

@@ -1,17 +1,14 @@
 import { html } from 'hono/html'
-import type { Structure } from '../../types.ts'
-import { logo } from '../icons.ts'
-import { rootdir } from '../../index.ts'
-import Entries from '../Entries.ts'
-import * as icons from '../icons.ts'
+import type { Structure } from '../types.ts'
+import { logo } from './icons.ts'
+import Entries from './Entries.ts'
+import * as icons from './icons.ts'
 
 export default (structure: Structure) => {
-  return html`
-    <link
-      rel="stylesheet"
-      href="${rootdir}/components/AdminPanel/AdminPanel.css"
-    />
+  const entries = Object.entries(structure)
+  const type = typeof entries[0][1] !== 'string' ? entries[0][1].type : null
 
+  return html`
     <div class="admin-panel">
       <h1>
         <a href="/admin" aria-label="Go to dashboard"> ${logo} </a>
@@ -21,24 +18,9 @@ export default (structure: Structure) => {
         <form
           data-on-submit="@post('/admin/api/block', { contentType: 'form' })"
         >
-          <!-- <select name="type">
-            ${structure.map(
-            (block) => html`
-              <option value="${block.type}">
-                ${block.label}
-              </option>
-              `,
-          )}
-          </select>
-          <input type="submit" value="Create" /> -->
-
           <!-- TODO: currently only handles a single entry type -->
-          ${structure.length
-            ? html`<input
-                  type="hidden"
-                  name="type"
-                  value="${structure[0].type}"
-                />
+          ${entries.length
+            ? html`<input type="hidden" name="name" value="${type}" />
                 <button
                   class="ghost"
                   style="padding: 10px; margin: 0 -13px; display: flex;"
@@ -52,6 +34,19 @@ export default (structure: Structure) => {
       </aside>
 
       ${Entries()}
+
+      <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/Block.ts

@@ -1,116 +1,55 @@
 import { html } from 'hono/html'
-import { query } from '../queries/index.ts'
-import Fields from './Fields.ts'
-import * as icons from './icons.ts'
-import { type Block } from '../types.ts'
-import Field from './Field.ts'
-import {
-  buildStructurePath,
-  type StructurePath,
-} from '../utils/build-structure-path.ts'
-
-export default (
-  entryId: string | number,
-  id: string | number,
-  fieldStructure: Block,
-  structurePath: StructurePath,
-) => {
-  const data = query.block({ id: id.toString() })
-  const blocks = query.blocks({ parent_block_id: id })
-
-  if (!data) return html`<p>No block data</p>`
-
-  const fieldStructurePath = buildStructurePath(fieldStructure, structurePath)
+import type { Block, BlockDef, FieldDef } from '../types.ts'
+import { type HtmlEscapedString } from 'hono/utils/html'
+import { Field } from './fields/index.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  blockStructure: BlockDef | Block | FieldDef
+  name: string
+  sortOrder?: number
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const { entryId, parentId, blockStructure, name, sortOrder = 0 } = props
+
+  if (!blockStructure) return html`<p>No block</p>`
+
+  let entries: [string, BlockDef | Block | FieldDef][] = []
+
+  const fieldTypes = ['text', 'image', 'markdown', 'slug']
+
+  try {
+    if (fieldTypes.includes(blockStructure.type)) {
+      entries = [[name, blockStructure]]
+    } else if (blockStructure.type === 'blocks') {
+      entries = Object.entries(blockStructure.children)
+    } else if (blockStructure.fields) {
+      entries = Object.entries(blockStructure.fields)
+    } else {
+      console.log(blockStructure)
+    }
+  } catch (error) {
+    console.log(error)
+  }
 
   return html`
-  
-    <section class="block">
-      <header>
-        <h5>${fieldStructure.label}</h5>
-
-        <form
-          data-on-submit="@post('/admin/api/new-block', { contentType: 'form' })"
-        >
-          <input type="hidden" name="parent_block_id" value="${id}" />
-          <input
-            type="hidden"
-            name="sort_order"
-            value="${blocks?.length || 0}"
-          />
-
-          <fieldset role="group">
-            <select name="block">
-              ${fieldStructure.fields?.map((field) => {
-                return html`<option
-                    value="entry_id:${entryId};type:${field.type};name:${field.name};label:${field.label};sort_order:${blocks?.length ||
-                    0}"
-                  >
-                    ${field.label}
-                  </option>`
-              })}
-            </select>
-
-            <button
-              class="outline"
-              style="padding: 0 1rem"
-              data-tooltip="New entry"
-              data-placement="right"
-              type="submit"
-            >
-              Add
-            </button>
-          </fieldset>
-        </form>
-      </header>
-
-      <div data-sortable="${id}">
-        ${blocks?.map((block, idx) => {
-          const structure = fieldStructure.fields?.find(
-            (field) => field.name === block.name,
-          )
-
-          if (!structure) return
-
-          return html`
-            <article
-              data-signals="{ open${block.id}: true }"
-            >
-              <header>
-                <h6>${structure.label}</h6>
-                <div>
-                  <button
-                    data-on-click="$open${block.id} = !$open${block.id}"
-                    style="margin-right: 0.5rem"
-                    data-style-rotate="$open${block.id} ? '0deg' : '180deg'"
-                    class="shadow"
-                  >
-                    ${icons.chevron}
-                  </button>
-                  <button class="shadow">${icons.bars}</button>
-                </div>
-              </header>
-
-              <div data-show="$open${block.id}">
-                ${structure.fields
-                  ? Fields({
-                      entryId,
-                      parentId: block.id,
-                      blockStructure: structure,
-                      structurePath: [...fieldStructurePath, structure.name],
-                    })
-                  : Field({
-                      entryId,
-                      parentId: block.id,
-                      blockStructure: structure,
-                      sortOrder: idx,
-                      structurePath: [...fieldStructurePath, structure.name],
-                    })}
-                
-              </div>
-            </article>
-          `
-        })}
-      </div>
-    </section>
-  `
+    ${entries.map(([name, field]) => {
+      switch (field.type) {
+        case 'text': {
+          return Field.Text({ entryId, parentId, name, field, sortOrder })
+        }
+        case 'slug': {
+          return Field.Text({ entryId, parentId, name, field, sortOrder })
+        }
+        case 'markdown': {
+          return Field.Text({ entryId, parentId, name, field, sortOrder })
+        }
+        case 'image': {
+          return Field.Text({ entryId, parentId, name, field, sortOrder })
+        }
+        case 'blocks': {
+          return Field.Blocks({ entryId, parentId, name, field, sortOrder })
+        }
+      }
+    })}`
 }

package/components/Entries.ts

@@ -3,14 +3,14 @@ import { query } from '../index.ts'
 import * as icons from './icons.ts'
 
 export default () => {
-  const entries = query.blocks({ parent_block_id: null, status: 'enabled' })
+  const entries = query.blocks({ parent_id: null, status: 'enabled' })
 
   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 +27,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,28 @@
 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 { rootdir, structure } from '../index.ts'
+import Block from './Block.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 structurePath = buildStructurePath(blockStructure)
+  const blockStructure = structure[data.name]
 
   return html`
     <div id="entry">
-      <link rel="stylesheet" href="${rootdir}/components/Entry.css" />
-
       <div class="entry">
         ${blockStructure &&
-        Fields({
+        Block({
           entryId: props.entryId,
           parentId: props.entryId,
-          blockStructure,
-          structurePath,
+          blockStructure: blockStructure,
+          name: data.name,
         })}
       </div>
+
+      <!-- <pre><code>{JSON.stringify(blockStructure, null, 2)}</code></pre> -->
     </div>
   `
 }