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

package/components/fields/Markdown.ts

@@ -0,0 +1,44 @@
+import type { FieldDefStructure } from '../../types.ts'
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: FieldDefStructure
+}) => {
+  const { entryId, parentId, name, structure, id } = props
+
+  const data = getOrCreateRow({ parentId, name, field: structure, id })
+
+  if (!data) return html`<p>No block</p>`
+
+  return html`
+  <form
+      data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+    >
+      <hgroup>
+        <label for="block-${data.id}">${structure.label}</label>
+        <p><small>${structure.description}</small></p>
+      </hgroup>
+
+      <markdown-editor
+        data-content="${data.value?.trim()}"
+        data-id="${data.id}"
+      >
+        <!-- <textarea id="block-{data.id}" name="value" class="markdown">
+          {data.value}
+        </textarea
+        > -->
+      </markdown-editor>
+
+      <input type="hidden" name="type" value="${structure.type}" />
+      <input type="hidden" name="id" value="${data.id}" />
+      <input type="hidden" name="entryId" value="${entryId}" />
+      <input type="hidden" name="parentId" value="${parentId}" />
+      <input type="hidden" name="name" value="${name}" />
+    </form>
+`
+}

package/components/fields/Text.ts

@@ -1,17 +1,18 @@
-import type { FieldDef } from '../../types.ts'
 import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
 import { html } from '../../utils/html.ts'
+import type { FieldDefStructure } from '../../types.ts'
 
 export default (props: {
   entryId: number
   parentId: number
   name: string
-  field: FieldDef
-  sortOrder: number
+  id?: number
+  structure: FieldDefStructure
+  sortOrder?: number
 }) => {
-  const { entryId, parentId, name, field, sortOrder = 0 } = props
+  const { entryId, parentId, name, structure, sortOrder = 0, id } = props
 
-  const data = getOrCreateRow(parentId, name, field, sortOrder)
+  const data = getOrCreateRow({ parentId, name, field: structure, sortOrder, id })
 
   if (!data) return html`<p>No block</p>`
 
@@ -20,10 +21,10 @@ export default (props: {
       data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
     >
       <hgroup>
-        <label for="block-${data.id}">${field.label}</label>
-        <p><small>${field.description}</small></p>
+        <label for="block-${data.id}">${structure.label}</label>
+        <p><small>${structure.description}</small></p>
       </hgroup>
-     
+
       <input
         id="block-${data.id}"
         name="value"
@@ -31,11 +32,10 @@ export default (props: {
         value="${data.value}"
       />
 
-      <input type="hidden" name="type" value="${field.type}" />
+      <input type="hidden" name="type" value="${structure.type}" />
       <input type="hidden" name="id" value="${data.id}" />
       <input type="hidden" name="entryId" value="${entryId}" />
       <input type="hidden" name="parentId" value="${parentId}" />
-      <input type="hidden" name="sort_order" value="${sortOrder}" />
       <input type="hidden" name="name" value="${name}" />
     </form>
 `

package/components/fields/index.ts

@@ -1,4 +1,4 @@
 import Text from './Text.ts'
-import Blocks from './Blocks.ts'
+import Markdown from './Markdown.ts'
 
-export const Field = { Text, Blocks }
+export const Field = { Text, Markdown }

package/index.ts

@@ -4,11 +4,6 @@ import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
 import { createRefresher } from '@alstar/refresher'
 
-import Layout from './components/layout.ts'
-import IndexPage from './components/index.ts'
-import SettingsPage from './components/Settings.ts'
-import Entry from './components/Entry.ts'
-
 import * as types from './types.ts'
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
@@ -16,18 +11,18 @@ import { getConfig } from './utils/get-config.ts'
 import startupLog from './utils/startup-log.ts'
 import { api } from './api/index.ts'
 import mcp from './api/mcp.ts'
+import path from 'path'
 
-export let structure: types.Structure
-export let rootdir = '/node_modules/@alstar/studio'
+export let rootdir = './node_modules/@alstar/studio'
 
+export let studioStructure: types.Structure = {}
 export let studioConfig: types.StudioConfig = {
   siteName: '',
-  structure: {}
+  port: 3000,
+  structure: {},
 }
 
 const createStudio = async (config: types.StudioConfig) => {
-  startupLog()
-
   createRefresher({ rootdir: '.' })
 
   loadDb('./studio.db')
@@ -36,37 +31,43 @@ const createStudio = async (config: types.StudioConfig) => {
   // const configFile = await getConfig<types.StudioConfig>()
 
   if (config.structure) {
-    structure = config.structure
+    studioStructure = config.structure
   }
 
   studioConfig = { ...studioConfig, ...config }
 
   const app = new Hono(studioConfig.honoConfig)
 
-  app.use('*', serveStatic({ root: './' }))
+  /**
+   * Static folders
+   */
+  app.use('*', serveStatic({ root: path.join(rootdir, 'public') }))
   app.use('*', serveStatic({ root: './public' }))
 
-  app.get('/admin', (c) => c.html(Layout({ structure, content: IndexPage() })))
-  app.get('/admin/settings', (c) => c.html(Layout({ structure, content: SettingsPage() })))
-  app.get('/admin/entry/:id', (c) => {
-    return c.html(
-      Layout({
-        structure,
-        content: Entry({ entryId: parseInt(c.req.param('id')) }),
-      }),
-    )
-  })
-
-  app.route('/admin/api', api(structure))
+  /**
+   * Studio API routes
+   */
+  app.route('/admin/api', api(studioStructure))
   app.route('/admin/mcp', mcp())
 
+  /**
+   * Studio pages
+   */
+  const adminPages = await fileBasedRouter(path.join(rootdir, 'pages'))
+
+  if (adminPages) app.route('/admin', adminPages)
+
+  /**
+   * User pages
+   */
   const pages = await fileBasedRouter('./pages')
 
-  if (pages) {
-    app.route('/', pages)
-  }
+  if (pages) app.route('/', pages)
 
-  const server = serve(app)
+  const server = serve({
+    fetch: app.fetch,
+    port: studioConfig.port,
+  })
 
   // graceful shutdown
   process.on('SIGINT', () => {
@@ -83,6 +84,8 @@ const createStudio = async (config: types.StudioConfig) => {
     })
   })
 
+  startupLog({ port: studioConfig.port || 3000 })
+
   return app
 }
 

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.6",
+  "version": "0.0.0-beta.8",
   "type": "module",
   "main": "index.ts",
   "dependencies": {
     "@hono/node-server": "^1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
-    "@alstar/db": "0.0.0-beta.1",
     "@alstar/refresher": "0.0.0-beta.2",
-    "@alstar/ui": "0.0.0-beta.1"
+    "@alstar/ui": "0.0.0-beta.1",
+    "@alstar/db": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/pages/entry/[id].ts

@@ -0,0 +1,17 @@
+import { html } from 'hono/html'
+import { defineEntry } from '../../utils/define.ts'
+
+import SiteLayout from '../../components/SiteLayout.ts'
+import Entry from '../../components/Entry.ts'
+
+export default defineEntry((c) => {
+  const id = c.req.param('id')
+
+  if (!id) {
+    return html`<p>Entry page url needs an ID param: "${id}"</p>`
+  }
+
+  return SiteLayout({
+    content: Entry({ entryId: parseInt(id) }),
+  })
+})

package/{components → pages}/index.ts

@@ -1,5 +1,8 @@
 import { html } from 'hono/html'
-import { structure } from '../index.ts'
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import { studioStructure } from '../index.ts'
 
 const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span style="color: #61aeee;">createStudio</span>([
   {
@@ -16,7 +19,7 @@ const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span st
   }
 ])</code>`
 
-export default () => {
+export default defineEntry(() => {
   const Discamer = html`
     <div class="disclamer">
       <article>
@@ -26,5 +29,5 @@ export default () => {
       </article>
     </div>`
 
-  return html`${!structure ? Discamer : ''}`
-}
+  return SiteLayout({ content: !Object.values(studioStructure).length ? Discamer : '' })
+})

package/pages/settings.ts

@@ -0,0 +1,10 @@
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import Settings from '../components/Settings.ts'
+
+export default defineEntry(() => {
+  return SiteLayout({
+    content: Settings(),
+  })
+})

package/public/{admin-panel.css → studio/admin-panel.css}

@@ -29,11 +29,23 @@
     button {
       margin: 10px 0px 20px;
     }
+
+    p {
+      margin: 0;
+
+      small {
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+        font-weight: 600;
+        opacity: 0.6;
+      }
+    }
   }
 
   #entries {
     width: 100%;
-    
+    user-select: none;
+
     ul {
       padding: 0;
       margin-inline: -1rem;
@@ -54,6 +66,7 @@
         justify-content: space-between;
         align-items: stretch;
         list-style: none;
+        padding: 0;
 
         a {
           text-decoration: none;

package/public/studio/main.css

@@ -0,0 +1,162 @@
+/* @import './../node_modules/@alstar/ui/red.css'; */
+@import 'https://esm.sh/@alstar/ui/red.css';
+@import './admin-panel.css';
+@import './entry.css';
+@import './blocks.css';
+@import './settings.css';
+
+body {
+  padding: 0;
+  min-height: 100vh;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-content: baseline;
+
+  > main {
+    padding: 40px;
+    height: 100vh;
+    overflow: auto;
+
+    section {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+  }
+}
+
+.entry > .fields > .block {
+  padding-block: var(--pico-spacing);
+
+  > header {
+    margin-block: var(--pico-block-spacing-vertical);
+  }
+}
+
+.block {
+  > header {
+    margin-bottom: var(--pico-spacing);
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    background-color: inherit;
+
+    h6,
+    h5,
+    fieldset {
+      margin-bottom: 0;
+    }
+
+    button {
+      padding: 0;
+      background-color: white;
+
+      svg {
+        padding: 8px;
+      }
+    }
+  }
+}
+
+[data-sortable] {
+  > article {
+    transition: opacity 200ms;
+  }
+
+  .sortable-ghost {
+    opacity: 0.3;
+  }
+}
+
+div.ink-mde {
+  border: var(--pico-border-width) solid #2a3140;
+  border-radius: var(--pico-border-radius);
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+}
+
+.ͼ1 .cm-content.ink-mde-editor-content {
+  min-height: 10lh;
+}
+
+div.ink-mde {
+  --pico-border-color: var(--pico-form-element-border-color);
+
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+
+  padding: var(--pico-form-element-spacing-vertical)
+    var(--pico-form-element-spacing-horizontal);
+  margin-bottom: var(--pico-spacing);
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.ink-mde-textarea {
+}
+
+div.ink-mde:has(.cm-focused) {
+  --pico-outline-width: 0.1rem;
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width)
+    var(--pico-form-element-focus-color);
+
+  box-shadow: var(--pico-box-shadow);
+}
+
+.ͼ1.cm-focused {
+  outline: none;
+}
+
+.ink-mde-textarea {
+  width: 100%;
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.disclamer {
+  display: flex;
+  justify-content: center;
+}
+
+.text-secondary {
+  color: var(--pico-secondary);
+}
+
+.markdown {
+  width: 100%;
+  height: 10lh;
+}

package/public/studio/main.js

@@ -0,0 +1,10 @@
+import barba from '@barba/core'
+
+barba.init({
+  cacheIgnore: true,
+  views: [
+    {
+      namespace: 'default',
+    },
+  ],
+})

package/public/studio/markdown-editor.js

@@ -0,0 +1,34 @@
+import { ink } from 'ink-mde'
+
+class MarkdownEditor extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    this.style.width = '100%'
+
+    this.instance = ink(this, {
+      hooks: {
+        afterUpdate: async (e) => {
+          await fetch('/admin/api/value', {
+            method: 'PATCH',
+            body: JSON.stringify({
+              value: e,
+              id: this.dataset.id,
+            }),
+          })
+        },
+      },
+      interface: {
+        attribution: false,
+      },
+    })
+
+    this.instance.update(this.dataset.content)
+  }
+
+  disconnectedCallback() {
+    // this.instance.destroy()
+  }
+}
+
+customElements.define('markdown-editor', MarkdownEditor)

package/public/studio/sortable-list.js

@@ -0,0 +1,40 @@
+import Sortable from 'sortablejs'
+
+class SortableList extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    if (!this.children.length) return
+
+    const { id } = this.dataset
+
+    this.instance = Sortable.create(this, {
+      animation: 250,
+      handle: `[data-handle-for="${id}"]`,
+      onEnd: (e) => {
+        const items = [...e.target.children]
+
+        items.forEach(async (child, idx) => {
+          const searchParams = new URLSearchParams()
+
+          searchParams.set('id', child.dataset.id)
+          searchParams.set('sort-order', idx)
+
+          await fetch(`/admin/api/sort-order?${searchParams.toString()}`, {
+            method: 'post',
+          })
+        })
+
+        this.querySelectorAll('[name="sort_order"]').forEach((input, idx) => {
+          input.value = idx.toString()
+        })
+      },
+    })
+  }
+
+  disconnectedCallback() {
+    this.instance?.destroy()
+  }
+}
+
+customElements.define('sortable-list', SortableList)

package/queries/block.ts

@@ -281,6 +281,8 @@ export function blocks(params: Record<string, any>) {
       blocks
     where
       ${filterSql}
+    order by
+     sort_order
   `
 
   return db.database.prepare(query).all(sqlParams) as unknown as DBBlockResult[]