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

package/api/api-key.ts

@@ -0,0 +1,69 @@
+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 Settings from '../components/Settings.ts'
+import { createHash } from '../utils/create-hash.ts'
+
+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 = createHash(apiKey)
+
+    const xs = (length: number) => '*'.repeat(length)
+
+    db.insertInto('api_keys', {
+      name: data.name?.toString(),
+      value: hash,
+      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())}`,
+    })
+  })
+})
+
+export const apiKeyRoutes = app

package/api/auth.ts

@@ -0,0 +1,66 @@
+import { type HttpBindings } from '@hono/node-server'
+import { Hono } from 'hono'
+import { createHash } from '../utils/create-hash.ts'
+import { db } from '@alstar/db'
+import { streamSSE } from 'hono/streaming'
+import { sql } from '../utils/sql.ts'
+import { setCookie } from 'hono/cookie'
+
+const app = new Hono<{ Bindings: HttpBindings }>()
+
+app.post('/register', async (c) => {
+  return streamSSE(c, async (stream) => {
+    const formData = await c.req.formData()
+    const data = Object.fromEntries(formData.entries())
+
+    if (!data || !data.email || !data.password) return
+
+    const hash = createHash(data.password.toString())
+
+    db.insertInto('users', {
+      email: data.email?.toString(),
+      hash: hash,
+    })
+
+    await stream.writeSSE({
+      event: 'datastar-patch-signals',
+      data: `signals { status: 200, message: 'User "${data.email}" created successfully' }`,
+    })
+  })
+})
+
+app.post('/login', async (c) => {
+  const formData = await c.req.formData()
+  const data = Object.fromEntries(formData.entries())
+
+  if (!data || !data.email || !data.password) return
+
+  const user = db.database
+    .prepare(sql`
+      select
+        *
+      from
+        users
+      where
+        email = ?
+    `)
+    .get(data.email.toString())
+
+  if (!user) {
+    return c.json({ status: 404, message: 'No user with that email' })
+  }
+
+  const passwordHash = createHash(data.password.toString())
+
+  if (passwordHash !== user.hash) {
+    return c.json({ status: 401, message: 'Wrong password' })
+  }
+
+  setCookie(c, 'login', 'yes')
+
+  return c.redirect('/studio')
+
+  // return c.json({ status: 200, message: 'Logged in!' })
+})
+
+export const authRoutes = app

package/api/backup.ts

@@ -0,0 +1,40 @@
+import fsp from 'node:fs/promises'
+import { backup } from 'node:sqlite'
+
+import { Hono } from 'hono'
+import { type HttpBindings } from '@hono/node-server'
+import { streamSSE } from 'hono/streaming'
+import { db } from '@alstar/db'
+
+const app = new Hono<{ Bindings: HttpBindings }>()
+
+app.post('/backup', async (c) => {
+  const date = new Date()
+  const name = `./backups/backup-${date.toISOString()}.db`
+
+  try {
+    fsp.mkdir('./backups', { recursive: true })
+
+    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' }`,
+      })
+    })
+  } catch (error) {
+    console.log(error)
+
+    return streamSSE(c, async (stream) => {
+      await stream.writeSSE({
+        event: 'datastar-patch-signals',
+        data: `signals { status: 500, message: '${name} failed' }`,
+      })
+    })
+  }
+})
+
+export const backupRoutes = app

package/api/block.ts

@@ -1,97 +1,162 @@
 import { type HttpBindings } from '@hono/node-server'
-// import { ServerSentEventGenerator } from '@starfederation/datastar-sdk'
+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 Entries from '../components/Entries.ts'
 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'
 
-export const sectionRoutes = (structure: Structure) => {
-  const app = new Hono<{ Bindings: HttpBindings }>()
+const app = new Hono<{ Bindings: HttpBindings }>()
 
-  app.post('/block', async (c) => {
-    return streamSSE(c, async (stream) => {
-      const formData = await c.req.formData()
-      const data = Object.fromEntries(formData.entries())
+app.post('/block', async (c) => {
+  return streamSSE(c, async (stream) => {
+    const formData = await c.req.formData()
+    const data = Object.fromEntries(formData.entries())
 
-      const row = structure.find((block) => block.type === data.type)
+    const row = studioStructure[data.name?.toString()]
 
-      if (!row) return
+    if (!row) return
 
-      db.insertInto('blocks', {
-        name: row.name?.toString(),
-        label: row.label?.toString(),
-        type: row.type?.toString(),
-      })
+    db.insertInto('blocks', {
+      name: data.name?.toString(),
+      label: row.label,
+      type: row.type,
+    })
 
-      await stream.writeSSE({
-        event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entries())}`,
-      })
+    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(),
+    })
 
-  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)
+    await stream.writeSSE({
+      event: 'datastar-patch-elements',
+      data: `elements ${stripNewlines(Entry({ entryId: parseInt(data.entry_id.toString()) }))}`,
+    })
+  })
+})
+
+app.patch('/block', async (c) => {
+  return streamSSE(c, async (stream) => {
+    const formData = await c.req.formData()
+
+    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()
+
+    if (!id || !value) return
+
+    const transaction = db.database.prepare(sql`
+      update blocks
+      set
+        value = ?
+      where
+        id = ?;
+    `)
+
+    transaction.run(value, id)
+
+    if (entryId === parentId && name?.toString() === 'title') {
+      const rootBlock = query.block({
+        id: parentId?.toString() || null,
+      })
 
-      const parent_block_id = formData?.get('parent_block_id')?.toString()
-      const sort_order = formData?.get('sort_order')?.toString()
+      if (rootBlock.type !== 'single') {
+        await stream.writeSSE({
+          event: 'datastar-patch-elements',
+          data: `elements <a href="/studio/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+        })
+      }
+    }
+  })
+})
 
-      if (!parent_block_id || !sort_order) return
+app.patch('/value', async (c) => {
+  const body = await c.req.json()
 
-      db.insertInto('blocks', {
-        type: data.type,
-        name: data.name,
-        label: data.label,
-        parent_block_id,
-        sort_order,
-      })
+  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(deleteBlockWithChildren)
+
+    transaction.all(id)
+
+    if (entryId) {
       await stream.writeSSE({
         event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entry({ entryId: data.entry_id, structure }))}`,
+        data: `elements ${stripNewlines(Entry({ entryId: parseInt(entryId.toString()) }))}`,
       })
-    })
+    } else {
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(AdminPanel())}`,
+      })
+    }
   })
+})
 
-  app.patch('/block', async (c) => {
-    return streamSSE(c, async (stream) => {
-      const formData = await c.req.formData()
-
-      const id = formData.get('id')?.toString()
-      const value = formData.get('value')?.toString()
-      const entryId = formData.get('entryId')?.toString()
-      const parentId = formData.get('parentId')?.toString()
-      const sortOrder = formData.get('sort_order')?.toString()
+app.post('/sort-order', async (c) => {
+  const id = c.req.query('id')
+  const sortOrder = c.req.query('sort-order')
 
-      if (!id || !value || !sortOrder) return
+  if (!id || !sortOrder) return
 
-      const transaction = db.database.prepare(sql`
-        update blocks
-        set
-          value = ?
-        where
-          id = ?
-          and sort_order = ?;
-      `)
+  const transaction = db.database.prepare(sql`
+    update blocks
+    set
+      sort_order = ?
+    where
+      id = ?
+  `)
 
-      transaction.run(value, id, sortOrder)
+  transaction.run(sortOrder, id)
 
-      if (entryId === parentId) {
-        await stream.writeSSE({
-          event: 'datastar-patch-elements',
-          data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
-        })
-      }
-    })
-  })
+  return c.json({ status: 200, message: 'success' })
+})
 
-  return app
-}
+export const blockRoutes = app

package/api/index.ts

@@ -1,2 +1,20 @@
-export * from './block.ts'
+import { Hono } from 'hono'
 
+import { blockRoutes } from './block.ts'
+import { apiKeyRoutes } from './api-key.ts'
+import { backupRoutes } from './backup.ts'
+import { authRoutes } from './auth.ts'
+import { fieldRoutes } from '../components/fields/index.ts'
+
+const routes = new Hono()
+
+routes.route('/', blockRoutes)
+routes.route('/', apiKeyRoutes)
+routes.route('/', backupRoutes)
+routes.route('/auth', authRoutes)
+
+fieldRoutes.forEach((fieldRoute) => {
+  routes.route('/field', fieldRoute)
+})
+
+export const apiRoutes = routes

package/api/mcp.ts

@@ -0,0 +1,50 @@
+import { type HttpBindings } from '@hono/node-server'
+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'
+
+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!',
+  })
+})
+
+export const mcpRoutes = app

package/components/AdminPanel.ts

@@ -0,0 +1,87 @@
+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="/studio" 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="/studio/entry/${data.id}"
+                      id="block_link_${data.id}"
+                    >
+                      ${block.label}
+                    </a>
+                  </li>
+                </ul>
+              </section>
+            `
+          }
+
+          return html`
+          <form
+              data-on-submit="@post('/studio/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="/studio/settings"
+          class="ghost"
+          style="padding: 10px; margin: 0 -13px; display: flex;"
+          data-tooltip="Settings"
+          data-placement="right"
+          aria-label="Settings"
+        >
+          ${icons.cog}
+        </a>
+        
+        <a
+          role="button"
+          href="/"
+          class="ghost"
+          style="padding: 10px; margin: 0 -13px; display: flex;"
+          data-tooltip="Leave Studio"
+          data-placement="right"
+          aria-label="Leave"
+        >
+          ${icons.leave}
+        </a>
+      </footer>
+    </div>
+  `
+}

package/components/Backup.ts

@@ -0,0 +1,13 @@
+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>`
+}