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

package/types.ts

@@ -2,15 +2,130 @@ import { type HttpBindings } from '@hono/node-server'
 import { type Context } from 'hono'
 import { type HonoOptions } from 'hono/hono-base'
 import { type BlankInput, type BlankEnv } from 'hono/types'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from './utils/define.ts'
+
+export type PrimitiveField = {
+  name: string
+  label: string
+  type: 'text' | 'slug' | 'markdown' | 'image'
+}
+
+export type BlockField = {
+  name: string
+  label: string
+  type: 'blocks'
+  children: Record<string, Field | Block>
+}
+
+export type Field = PrimitiveField | BlockField
 
 export type Block = {
   name: string
   label: string
   type: string
-  fields?: Block[]
+  fields: Record<string, Field | Block>
+}
+
+export type Structure = Record<string, BlockDefStructure>
+
+// --- Field & block definitions ---
+type FieldType = 'text' | 'slug' | 'markdown' | 'image'
+
+interface BaseField {
+  label: string
+  type: FieldType
+  description?: string
+}
+
+interface TextField extends BaseField {
+  type: 'text' | 'slug' | 'markdown'
+}
+
+interface TextFieldStructure extends TextField {
+  instanceOf: typeof FieldInstance
+}
+
+interface ImageField extends BaseField {
+  type: 'image'
+}
+
+interface ImageFieldStructure extends ImageField {
+  instanceOf: typeof FieldInstance
+}
+
+export interface BlocksFieldDef {
+  label: string
+  type: 'blocks'
+  description?: string
+  children: Record<string, BlockDefStructure | FieldDefStructure>
+}
+
+export interface BlocksFieldDefStructure extends BlocksFieldDef {
+  instanceOf: typeof BlockFieldInstance
+}
+
+export type FieldDef = TextField | ImageField
+export type FieldDefStructure = TextFieldStructure | ImageFieldStructure
+
+export interface BlockDef {
+  label: string
+  type: string
+  fields: Record<string, FieldDefStructure | BlocksFieldDefStructure>
+  description?: string
+}
+
+export interface BlockDefStructure extends BlockDef {
+  instanceOf: typeof BlockInstance
+}
+
+// type DBDefaults = {
+//   id: number
+//   created_at: string
+//   updated_at: string
+//   name: string
+//   label: string
+//   // type: string
+//   sort_order: number
+//   value: string
+//   options: string | null
+//   status: 'enabled' | 'disabled'
+//   parent_id: number | null
+//   depth: number
+// }
+
+type BaseDBResult = {
+  id: number
+  created_at: string
+  updated_at: string
+  name: string
+  label: string
+  sort_order: number
+  value: string | null
+  options: any
+  status: 'enabled' | 'disabled'
+  parent_id: number | null
+  depth: number
+}
+
+export type DBPrimitiveFieldResult = BaseDBResult & {
+  type: FieldDef
+}
+
+export type DBBlockFieldResult = BaseDBResult & {
+  type: 'blocks'
+  children: DBBlockResult[]
+}
+
+export type DBBlockResult = BaseDBResult & {
+  type: string
+  fields: Record<string, DBFieldResult>
 }
 
-export type Structure = Block[]
+export type DBFieldResult = DBPrimitiveFieldResult & DBBlockFieldResult
 
 export type DBBlock = Block & {
   id: number
@@ -18,17 +133,19 @@ export type DBBlock = Block & {
   updated_at: string
   value: string | null
   sort_order: number | null
-  parent_block_id: number | null
+  parent_id: number | null
   options: number | null
 }
 
+export type BlockStatus = 'enabled' | 'disabled'
+
 export type StudioConfig = {
-  siteName: string
+  siteName?: string
   honoConfig?: HonoOptions<BlankEnv>
+  port?: number
+  structure: Structure
 }
 
-export type BlockStatus = 'enabled' | 'disabled'
-
 export type RequestContext = Context<
   { Bindings: HttpBindings },
   string,

package/utils/buildBlocksTree.ts

@@ -6,7 +6,7 @@ type Block = {
   sort_order: number
   value: string | null
   options: any // JSON-parsed if necessary
-  parent_block_id: number | null
+  parent_id: number | null
   depth: number
   // ... you can add other fields if needed
 }
@@ -26,13 +26,13 @@ export function buildBlockTree(blocks: Block[]): BlockWithChildren {
   for (const block of blocks) {
     const current = blockMap.get(block.id)!
 
-    if (block.parent_block_id != null) {
-      const parent = blockMap.get(block.parent_block_id)
+    if (block.parent_id != null) {
+      const parent = blockMap.get(block.parent_id)
       if (parent) {
         parent.fields.push(current)
       } else {
         console.warn(
-          `Parent with id ${block.parent_block_id} not found for block ${block.id}`,
+          `Parent with id ${block.parent_id} not found for block ${block.id}`,
         )
       }
     } else {

package/utils/define.ts

@@ -1,15 +1,41 @@
-import { type Context } from 'hono'
 import * as types from '../types.ts'
-import { type HttpBindings } from '@hono/node-server'
-import { type BlankInput } from 'hono/types'
 import { type HtmlEscapedString } from './html.ts'
 
 export const defineConfig = (config: types.StudioConfig) => config
 
-export const defineStructure = (structure: types.Structure) => structure
-
 export const defineEntry = (
   fn: (
     c: types.RequestContext,
   ) => HtmlEscapedString | Promise<HtmlEscapedString>,
 ) => fn
+
+export const FieldInstance = Symbol('field')
+export const BlockFieldInstance = Symbol('blockfield')
+export const BlockInstance = Symbol('block')
+
+// --- Identity helpers (preserve literal types) ---
+export function defineField(field: types.FieldDef): types.FieldDefStructure {
+  return {
+    ...field,
+    instanceOf: FieldInstance,
+  }
+}
+
+export function defineBlockField(
+  field: types.BlocksFieldDef,
+): types.BlocksFieldDefStructure {
+  return {
+    ...field,
+    instanceOf: BlockFieldInstance,
+  }
+}
+
+export function defineBlock(block: types.BlockDef): types.BlockDefStructure {
+  return { ...block, instanceOf: BlockInstance }
+}
+
+export function defineStructure(
+  structure: Record<string, types.BlockDefStructure>,
+) {
+  return structure
+}

package/utils/file-based-router.ts

@@ -15,6 +15,7 @@ export const fileBasedRouter = async (rootdir: string) => {
   try {
     dirs = await fs.readdir(root, { recursive: true })
   } catch (error) {
+    console.log('No files in:', root)
     return
   }
 

package/utils/get-or-create-row.ts

@@ -0,0 +1,41 @@
+import { db } from '@alstar/db'
+import { query } from '../queries/index.ts'
+import type {
+  BlockDefStructure,
+  BlocksFieldDefStructure,
+  FieldDefStructure,
+} from '../types.ts'
+
+export function getOrCreateRow(props: {
+  parentId: string | number | null
+  name: string
+  field: BlockDefStructure | BlocksFieldDefStructure | FieldDefStructure
+  sortOrder?: number
+  id?: number
+}) {
+  const { parentId, name, field, sortOrder = 0, id } = props
+
+  if (id) {
+    return query.block({
+      id: id?.toString(),
+    })
+  }
+
+  const data = query.block({
+    parent_id: parentId?.toString() || null,
+    name: name,
+    sort_order: sortOrder.toString(),
+  })
+
+  if (data) return data
+
+  const change = db.insertInto('blocks', {
+    name: name?.toString(),
+    label: field.label?.toString(),
+    type: field.type?.toString(),
+    sort_order: sortOrder,
+    parent_id: parentId,
+  })
+
+  return query.block({ id: change.lastInsertRowid.toString() })
+}

package/utils/startup-log.ts

@@ -0,0 +1,9 @@
+import packageJSON from '../package.json' with { type: 'json' }
+
+export default ({ port }: { port: 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', '╰───────────────────────╯')
+}

package/components/AdminPanel/AdminPanel.css

@@ -1,78 +0,0 @@
-.admin-panel {
-  /* background: hsla(0, 0%, 0%, 0.1); */
-  padding: 40px;
-
-  height: 100%;
-  min-height: inherit;
-
-  min-width: 250px;
-
-  > h1 {
-    padding-bottom: 1rem;
-
-    a {
-      display: flex;
-    }
-
-    svg {
-      height: 1.6rem;
-    }
-  }
-
-  form {
-    padding-bottom: 1rem;
-
-    button {
-      margin: 10px 0px 20px;
-    }
-  }
-
-  #entries ul {
-    padding: 0;
-    margin-inline: -1rem;
-
-    form {
-      display: flex;
-      padding-bottom: 0;
-
-      button {
-        margin: 0;
-      }
-    }
-
-    > li {
-      margin-bottom: 0px;
-      border-radius: 8px;
-      display: flex;
-      justify-content: space-between;
-      align-items: stretch;
-      list-style: none;
-
-      a {
-        text-decoration: none;
-        width: 100%;
-        padding: 0.5rem 1rem;
-      }
-
-      button {
-        border-radius: 7px;
-        opacity: 0;
-        transition: opacity 100px;
-
-        svg {
-          margin: 0.5rem 1rem;
-        }
-      }
-    }
-  }
-}
-
-#entries ul {
-  > li:hover {
-    background-color: var(--pico-form-element-background-color);
-
-    button {
-      opacity: 1;
-    }
-  }
-}

package/components/AdminPanel/AdminPanel.ts

@@ -1,57 +0,0 @@
-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'
-
-export default (structure: Structure) => {
-  return html`
-    <link
-      rel="stylesheet"
-      href="${rootdir}/components/AdminPanel/AdminPanel.css"
-    />
-
-    <div class="admin-panel">
-      <h1>
-        <a href="/admin" aria-label="Go to dashboard"> ${logo} </a>
-      </h1>
-
-      <aside>
-        <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}"
-                />
-                <button
-                  class="ghost"
-                  style="padding: 10px; margin: 0 -13px; display: flex;"
-                  data-tooltip="New entry"
-                  data-placement="right"
-                >
-                  ${icons.newDocument}
-                </button>`
-            : ''}
-        </form>
-      </aside>
-
-      ${Entries()}
-    </div>
-  `
-}

package/components/Block.ts

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