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

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/fields/Blocks.ts

@@ -0,0 +1,118 @@
+import { query } from '../../queries/index.ts'
+import type { Field, Block as BlockType, BlocksField } from '../../types.ts'
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+import Block from '../Block.ts'
+import * as icons from '../icons.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  field: BlocksField
+  sortOrder: number
+}) => {
+  const { entryId, parentId, name, field, sortOrder = 0 } = props
+
+  const data = getOrCreateRow(parentId, name, field, sortOrder)
+
+  if (!data) return html`<p>No block</p>`
+
+  const entries = Object.entries(field.children) as [
+    string,
+    BlockType | Field,
+  ][]
+  const rows = query.blocks({ parent_id: data.id })
+
+  return html`
+    <div class="blocks-field">
+      <header>
+        <p>${field.label}</p>
+
+        <details class="dropdown">
+          <summary>Add</summary>
+          <ul>
+            ${entries.map(([name, block]) => {
+              return html`
+                <li>
+                  <form
+                    data-on-submit="@post('/admin/api/new-block', { contentType: 'form' })"
+                  >
+                    <button type="submit" class="ghost">${block.label}</button>
+                    <input type="hidden" name="type" value="${block.type}" />
+                    <input type="hidden" name="name" value="${name}" />
+                    <input type="hidden" name="label" value="${block.label}" />
+                    <input type="hidden" name="parent_id" value="${data.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                    <input
+                      type="hidden"
+                      name="sort_order"
+                      value="${rows.length}"
+                    />
+                  </form>
+                </li>
+                `
+            })}
+          </ul>
+        </details>
+      </header>
+
+      <hr style="margin-top: 0;" />
+
+      <div data-sortable="${data.id}">
+        ${rows.map((row, idx) => {
+          const [name, struct] = (entries.find(([name]) => name === row.name) ||
+            []) as [string, BlockType]
+
+          if (!name) return html``
+
+          return html`
+          <article>
+              <header>
+                ${struct.label}
+
+                <!-- data-tooltip="Move"
+                data-placement="top" -->
+                <aside>
+                  <button
+                    data-handle="${data.id}"
+                    class="ghost handle text-secondary"
+                    style="cursor: grab"
+                  >
+                    ${icons.bars}
+                  </button>
+
+                  <form
+                    data-on-submit="@delete('/admin/api/block', { contentType: 'form' })"
+                  >
+                    <button
+                      type="submit"
+                      class="ghost text-secondary"
+                      data-tooltip="Remove"
+                      data-placement="top"
+                      aria-label="Delete block"
+                    >
+                      ${icons.x}
+                    </button>
+                    <input type="hidden" name="id" value="${row.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                  </form>
+                </aside>
+              </header>
+
+              ${Block({
+                entryId,
+                parentId: struct.fields ? row.id : data.id,
+                blockStructure: struct,
+                name: name,
+                sortOrder: row.sort_order,
+              })}
+
+              <!-- <pre><code>{JSON.stringify(struct, null, 2)} - {row.sort_order}</code></pre> -->
+            </article>
+          `
+        })}
+      </div>
+    </div>
+  `
+}

package/components/fields/Text.ts

@@ -0,0 +1,42 @@
+import type { FieldDef } 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
+  field: FieldDef
+  sortOrder: number
+}) => {
+  const { entryId, parentId, name, field, sortOrder = 0 } = props
+
+  const data = getOrCreateRow(parentId, name, field, sortOrder)
+
+  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}">${field.label}</label>
+        <p><small>${field.description}</small></p>
+      </hgroup>
+     
+      <input
+        id="block-${data.id}"
+        name="value"
+        type="text"
+        value="${data.value}"
+      />
+
+      <input type="hidden" name="type" value="${field.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

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

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/components/index.ts

@@ -26,5 +26,5 @@ export default () => {
       </article>
     </div>`
 
-  return html`${!structure.length ? Discamer : ''}`
+  return html`${!structure ? Discamer : ''}`
 }

package/components/layout.ts

@@ -1,4 +1,4 @@
-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'
@@ -50,7 +50,7 @@ export default (props: {
       </head>
 
       <body data-barba="wrapper">
-        <section>${adminPanel(props.structure)}</section>
+        <section style="margin-bottom: 0;">${adminPanel(props.structure)}</section>
 
         <main>
           <section data-barba="container" data-barba-namespace="default">

package/index.ts

@@ -1,33 +1,45 @@
 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 { 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 { serve } from '@hono/node-server'
-import { serveStatic } from '@hono/node-server/serve-static'
+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'
 
 export let structure: types.Structure
 export let rootdir = '/node_modules/@alstar/studio'
 
 export let studioConfig: types.StudioConfig = {
   siteName: '',
+  structure: {}
 }
 
-const createStudio = async (studioStructure?: types.Structure) => {
+const createStudio = async (config: types.StudioConfig) => {
+  startupLog()
+
+  createRefresher({ rootdir: '.' })
+
   loadDb('./studio.db')
   createStudioTables()
 
-  const configFile = await getConfig<types.StudioConfig>()
+  // const configFile = await getConfig<types.StudioConfig>()
+
+  if (config.structure) {
+    structure = config.structure
+  }
 
-  structure = studioStructure || []
-  studioConfig = { ...studioConfig, ...configFile }
+  studioConfig = { ...studioConfig, ...config }
 
   const app = new Hono(studioConfig.honoConfig)
 
@@ -35,18 +47,19 @@ const createStudio = async (studioStructure?: types.Structure) => {
   app.use('*', serveStatic({ root: './public' }))
 
   app.get('/admin', (c) => c.html(Layout({ structure, content: IndexPage() })))
-
-  app.route('/admin/api', sectionRoutes(structure))
-
+  app.get('/admin/settings', (c) => c.html(Layout({ structure, content: SettingsPage() })))
   app.get('/admin/entry/:id', (c) => {
     return c.html(
       Layout({
         structure,
-        content: Entry({ structure, entryId: c.req.param('id') }),
+        content: Entry({ entryId: parseInt(c.req.param('id')) }),
       }),
     )
   })
 
+  app.route('/admin/api', api(structure))
+  app.route('/admin/mcp', mcp())
+
   const pages = await fileBasedRouter('./pages')
 
   if (pages) {
@@ -73,7 +86,13 @@ const createStudio = async (studioStructure?: types.Structure) => {
   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,14 +1,15 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.5",
+  "version": "0.0.0-beta.6",
   "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/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",
+    "@alstar/ui": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/public/admin-panel.css

@@ -0,0 +1,90 @@
+.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;
+    }
+  }
+
+  #entries {
+    width: 100%;
+    
+    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;
+          }
+        }
+      }
+    }
+  }
+
+  > footer {
+    margin-top: auto;
+  }
+}
+
+#entries ul {
+  > li:hover {
+    background-color: var(--pico-form-element-background-color);
+
+    button {
+      opacity: 1;
+    }
+  }
+}

package/public/blocks.css

@@ -0,0 +1,53 @@
+.blocks-field {
+  > header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > form fieldset {
+      button {
+        padding-inline: 1rem;
+      }
+    }
+
+    details {
+      form {
+        display: flex;
+      }
+
+      button {
+        width: 100%;
+        margin-bottom: 0;
+        text-align: left;
+      }
+
+      summary + ul {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  article {
+    > header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      aside {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      button {
+        margin: 0;
+        padding: 0;
+
+        svg {
+          padding: 5px;
+        }
+      }
+    }
+  }
+}

package/public/main.css

@@ -1,5 +1,9 @@
 /* @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 {
   min-height: 100vh;
@@ -93,3 +97,7 @@ div.ink-mde {
   display: flex;
   justify-content: center;
 }
+
+.text-secondary {
+  color: var(--pico-secondary);
+}

package/public/main.js

@@ -3,6 +3,7 @@ import Sortable from 'sortablejs'
 // import { wrap } from 'ink-mde'
 
 barba.init({
+  cacheIgnore: true,
   views: [
     {
       namespace: 'default',
@@ -19,11 +20,14 @@ function init() {
     const els = document.querySelectorAll('[data-sortable]')
 
     els.forEach((el) => {
+      const id = el.dataset.sortable
+
       var sortable = Sortable.create(el, {
         delay: 0,
         animation: 250,
         dragClass: 'sortable-drag',
         easing: 'ease-in-out',
+        handle: `[data-handle="${id}"]`,
       })
     })
   }

package/public/settings.css

@@ -0,0 +1,24 @@
+#settings {
+  ul {
+    padding: 0;
+  }
+
+  li {
+    width: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 15% 1fr auto;
+    gap: 1rem;
+    border-bottom: 1px solid var(--pico-form-element-border-color);
+    margin-bottom: 0;
+    padding: 1rem 0;
+
+    input {
+      font-family: var(--pico-font-family-monospace);
+    }
+
+    * {
+      margin-bottom: 0;
+    }
+  }
+}