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

package/components/Render.ts

@@ -0,0 +1,46 @@
+import { html } from 'hono/html'
+import type { HtmlEscapedString } from 'hono/utils/html'
+import FieldRenderer from './FieldRenderer.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+import BlockRenderer from './BlockRenderer.ts'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from '../utils/define.ts'
+import type {
+  BlockDefStructure,
+  BlocksFieldDefStructure,
+  FieldDefStructure,
+} from '../types.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: BlockDefStructure | FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+  sortOrder?: number
+}): HtmlEscapedString | Promise<HtmlEscapedString> | string => {
+  const { entryId, parentId, structure, name, id } = props
+
+  if (!structure) return html`<p>No block</p>`
+
+  try {
+    switch (structure.instanceOf) {
+      case FieldInstance: {
+        return FieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockFieldInstance: {
+        return BlockFieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockInstance: {
+        return BlockRenderer({ entryId, parentId, structure, id })
+      }
+    }
+  } catch (error) {
+    return html`<p>Error rendering "${name}"</p>`
+  }
+}

package/components/Settings.ts

@@ -0,0 +1,98 @@
+import { db } from '@alstar/db'
+import { html } from 'hono/html'
+import { sql } from '../utils/sql.ts'
+import * as icons from './icons.ts'
+
+export default () => {
+  const apiKeys = db.database
+    .prepare(sql`
+      select
+        *
+      from
+        api_keys
+    `)
+    .all()
+
+  return html`
+  <div id="settings" data-signals="{ apiKey: '', copied: false }">
+      <!-- <h1>Settings</h1> -->
+      <article>
+        <header>API Keys</header>
+
+        <ul>
+          ${apiKeys.map((apiKey) => {
+            return html`<li>
+                <p>${apiKey.name}</p>
+                <input type="text" disabled value="${apiKey.hint}" />
+                <form
+                  data-on-submit="@delete('/admin/api/api-key', { contentType: 'form' })"
+                >
+                  <button
+                    data-tooltip="Delete API key"
+                    data-placement="left"
+                    type="submit"
+                    class="ghost"
+                  >
+                    ${icons.trash}
+                  </button>
+
+                  <input type="hidden" name="value" value="${apiKey.value}" />
+                </form>
+              </li>`
+          })}
+        </ul>
+
+        <form
+          data-on-submit="@post('/admin/api/api-key', { contentType: 'form' })"
+        >
+          <label for="api_key_name">Generate API Key</label>
+
+          <input
+            data-bind="name"
+            type="text"
+            name="name"
+            id="api_key_name"
+            placeholder="Name"
+          />
+
+          <button type="submit" class="ghost">Generate key</button>
+        </form>
+
+        <dialog data-attr="{ open: $apiKey !== '' }">
+          <article>
+            <header>
+              <p>API Key</p>
+            </header>
+            <p>Be sure to save this key, as it wont be shown again.</p>
+
+            <div style="display: flex; gap: 1rem; align-items: center;">
+              <h3 style="margin: 0;">
+                <code data-text="$apiKey"></code>
+              </h3>
+
+              <button
+                style="display: flex; align-items: center;"
+                data-attr="{ id: $apiKey }"
+                data-on-click="navigator.clipboard.writeText($apiKey); $copied = true"
+                class="ghost"
+                aria-label="Copy key to clipboard"
+              >
+                ${icons.clipboard}
+                <span style="display: none; margin-left: 0.5rem; color: green;" data-style="{ display: $copied && 'block' }">Copied</span>
+              </button>
+            </div>
+
+            <footer>
+              <button
+                class="ghost"
+                data-on-click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
+              >
+                Close
+              </button>
+            </footer>
+          </article>
+        </dialog>
+      </article>
+    </div>
+  `
+}

package/components/{layout.ts → SiteLayout.ts}

@@ -1,8 +1,7 @@
-import adminPanel from './AdminPanel/AdminPanel.ts'
+import adminPanel from './AdminPanel.ts'
 import { html } from 'hono/html'
 import { type HtmlEscapedString } from 'hono/utils/html'
-import { rootdir, studioConfig } from '../index.ts'
-import { type Structure } from '../types.ts'
+import { studioConfig } from '../index.ts'
 
 export default (props: {
   content:
@@ -10,7 +9,6 @@ export default (props: {
     | Promise<string>
     | HtmlEscapedString
     | Promise<HtmlEscapedString>
-  structure: Structure
 }) => {
   return html`
     <!DOCTYPE html>
@@ -23,15 +21,11 @@ export default (props: {
           Studio
         </title>
 
-        <link
-          rel="icon"
-          type="image/svg"
-          href="${rootdir}/public/favicon.svg"
-        />
+        <link rel="icon" type="image/svg" href="/studio/favicon.svg" />
 
         <meta name="color-scheme" content="light dark" />
 
-        <link rel="stylesheet" href="${rootdir}/public/main.css" />
+        <link rel="stylesheet" href="/studio/main.css" />
 
         <script
           type="module"
@@ -47,18 +41,20 @@ export default (props: {
             }
           }
         </script>
+
+        <script src="/studio/markdown-editor.js" type="module"></script>
+        <script src="/studio/sortable-list.js" type="module"></script>
+        <script src="/studio/main.js" type="module"></script>
       </head>
 
       <body data-barba="wrapper">
-        <section>${adminPanel(props.structure)}</section>
+        <section style="margin-bottom: 0;">${adminPanel()}</section>
 
         <main>
           <section data-barba="container" data-barba-namespace="default">
             ${props.content}
           </section>
         </main>
-
-        <script src="${rootdir}/public/main.js" type="module"></script>
       </body>
     </html>
   `

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

@@ -0,0 +1,42 @@
+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
+  id?: number
+  structure: FieldDefStructure
+  sortOrder?: number
+}) => {
+  const { entryId, parentId, name, structure, sortOrder = 0, id } = props
+
+  const data = getOrCreateRow({ parentId, name, field: structure, sortOrder, 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>
+
+      <input
+        id="block-${data.id}"
+        name="value"
+        type="text"
+        value="${data.value}"
+      />
+
+      <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/index.ts

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

package/components/icons.ts

@@ -135,3 +135,62 @@ export const trash = html`
     />
   </svg>
 `
+
+export const x = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+`
+
+export const cog = html`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path
+        d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93c.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204s.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78c-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107c-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93c-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204s-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78c.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107s.71-.505.78-.929z"
+      />
+      <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+    </g>
+  </svg>`
+
+export const clipboard = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0q.083.292.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0q.002-.32.084-.612m7.332 0q.969.073 1.927.184c1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48 48 0 0 1 1.927-.184"
+    />
+  </svg>
+`

package/index.ts

@@ -1,59 +1,73 @@
 import { Hono } from 'hono'
 import { loadDb } from '@alstar/db'
-import { sectionRoutes } from './api/index.ts'
-import { getConfig } from './utils/get-config.ts'
-import * as types from './types.ts'
-
-import Layout from './components/layout.ts'
-import IndexPage from './components/index.ts'
-import Entry from './components/Entry.ts'
-
 import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
+import { createRefresher } from '@alstar/refresher'
+
+import * as types from './types.ts'
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
+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: '',
+  port: 3000,
+  structure: {},
 }
 
-const createStudio = async (studioStructure?: types.Structure) => {
+const createStudio = async (config: types.StudioConfig) => {
+  createRefresher({ rootdir: '.' })
+
   loadDb('./studio.db')
   createStudioTables()
 
-  const configFile = await getConfig<types.StudioConfig>()
+  // const configFile = await getConfig<types.StudioConfig>()
+
+  if (config.structure) {
+    studioStructure = config.structure
+  }
 
-  structure = studioStructure || []
-  studioConfig = { ...studioConfig, ...configFile }
+  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() })))
+  /**
+   * Studio API routes
+   */
+  app.route('/admin/api', api(studioStructure))
+  app.route('/admin/mcp', mcp())
 
-  app.route('/admin/api', sectionRoutes(structure))
+  /**
+   * Studio pages
+   */
+  const adminPages = await fileBasedRouter(path.join(rootdir, 'pages'))
 
-  app.get('/admin/entry/:id', (c) => {
-    return c.html(
-      Layout({
-        structure,
-        content: Entry({ structure, entryId: c.req.param('id') }),
-      }),
-    )
-  })
+  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', () => {
@@ -70,10 +84,18 @@ const createStudio = async (studioStructure?: types.Structure) => {
     })
   })
 
+  startupLog({ port: studioConfig.port || 3000 })
+
   return app
 }
 
-export { defineConfig, defineEntry, defineStructure } from './utils/define.ts'
+export {
+  defineConfig,
+  defineEntry,
+  defineStructure,
+  defineBlock,
+  defineField,
+} from './utils/define.ts'
 export { type RequestContext } from './types.ts'
 export { createStudio }
 export { html, type HtmlEscapedString } from './utils/html.ts'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.5",
+  "version": "0.0.0-beta.7",
   "type": "module",
   "main": "index.ts",
   "dependencies": {
@@ -8,7 +8,8 @@
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
     "@alstar/ui": "0.0.0-beta.1",
-    "@alstar/db": "0.0.0-beta.1"
+    "@alstar/db": "0.0.0-beta.1",
+    "@alstar/refresher": "0.0.0-beta.2"
   },
   "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.length ? 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/studio/admin-panel.css

@@ -0,0 +1,103 @@
+.admin-panel {
+  /* background: hsla(0, 0%, 0%, 0.1); */
+  padding: 40px;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  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;
+    }
+
+    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;
+
+      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;
+        padding: 0;
+
+        a {
+          text-decoration: none;
+          width: 100%;
+          padding: 0.5rem 1rem;
+        }
+
+        button {
+          border-radius: 7px;
+          opacity: 0;
+          transition: opacity 100px;
+
+          svg {
+            margin: 0.5rem 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  > footer {
+    margin-top: auto;
+  }
+}
+
+#entries ul {
+  > li:hover {
+    background-color: var(--pico-form-element-background-color);
+
+    button {
+      opacity: 1;
+    }
+  }
+}