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

package/api/block.ts

@@ -6,12 +6,13 @@ 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'
 
 export default (structure: Structure) => {
   const app = new Hono<{ Bindings: HttpBindings }>()
@@ -33,7 +34,7 @@ export default (structure: Structure) => {
 
       await stream.writeSSE({
         event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entries())}`,
+        data: `elements ${stripNewlines(AdminPanel())}`,
       })
     })
   })
@@ -67,30 +68,51 @@ export default (structure: Structure) => {
       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()
+      // const sortOrder = formData.get('sort_order')?.toString()
 
-      if (!id || !value || !sortOrder) return
+      if (!id || !value) return
 
       const transaction = db.database.prepare(sql`
         update blocks
         set
           value = ?
         where
-          id = ?
-          and sort_order = ?;
+          id = ?;
       `)
 
-      transaction.run(value, id, sortOrder)
+      transaction.run(value, id)
 
       if (entryId === parentId && name?.toString() === 'title') {
-        await stream.writeSSE({
-          event: 'datastar-patch-elements',
-          data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+        const rootBlock = query.block({
+          id: parentId?.toString() || null,
         })
+
+        if (rootBlock.type !== 'single') {
+          await stream.writeSSE({
+            event: 'datastar-patch-elements',
+            data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+          })
+        }
       }
     })
   })
 
+  app.patch('/value', async (c) => {
+    const body = await c.req.json()
+
+    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()
@@ -98,18 +120,44 @@ export default (structure: Structure) => {
       const id = formData.get('id')?.toString()
       const entryId = formData.get('entry_id')?.toString()
 
-      if (!id || !entryId) return
+      if (!id) return
 
       const transaction = db.database.prepare(deleteBlockWithChildren)
 
       transaction.all(id)
 
-      await stream.writeSSE({
-        event: 'datastar-patch-elements',
-        data: `elements ${stripNewlines(Entry({ entryId: parseInt(entryId.toString()) }))}`,
-      })
+      if (entryId) {
+        await stream.writeSSE({
+          event: 'datastar-patch-elements',
+          data: `elements ${stripNewlines(Entry({ entryId: parseInt(entryId.toString()) }))}`,
+        })
+      } else {
+        await stream.writeSSE({
+          event: 'datastar-patch-elements',
+          data: `elements ${stripNewlines(AdminPanel())}`,
+        })
+      }
     })
   })
 
+  app.post('/sort-order', async (c) => {
+    const id = c.req.query('id')
+    const sortOrder = c.req.query('sort-order')
+
+    if (!id || !sortOrder) return
+
+    const transaction = db.database.prepare(sql`
+      update blocks
+      set
+        sort_order = ?
+      where
+        id = ?
+    `)
+
+    transaction.run(sortOrder, id)
+
+    return c.json({ status: 200, message: 'success' })
+  })
+
   return app
 }

package/components/AdminPanel.ts

@@ -1,39 +1,61 @@
 import { html } from 'hono/html'
-import type { Structure } from '../types.ts'
 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 (structure: Structure) => {
-  const entries = Object.entries(structure)
-  const type = typeof entries[0][1] !== 'string' ? entries[0][1].type : null
+export default () => {
+  const entries = Object.entries(studioStructure)
 
   return html`
-    <div class="admin-panel">
+    <div class="admin-panel" id="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' })"
-        >
-          <!-- TODO: currently only handles a single entry type -->
-          ${entries.length
-            ? html`<input type="hidden" name="name" value="${type}" />
-                <button
-                  class="ghost"
-                  style="padding: 10px; margin: 0 -13px; display: flex;"
-                  data-tooltip="New entry"
-                  data-placement="right"
-                >
-                  ${icons.newDocument}
-                </button>`
-            : ''}
-        </form>
-      </aside>
+      <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="/admin/entry/${data.id}"
+                      id="block_link_${data.id}"
+                    >
+                      ${block.label}
+                    </a>
+                  </li>
+                </ul>
+              </section>
+            `
+          }
 
-      ${Entries()}
+          return html`
+          <form
+              data-on-submit="@post('/admin/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

package/components/{fields/Blocks.ts → BlockFieldRenderer.ts}

@@ -1,33 +1,39 @@
-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'
+import { query } from '../queries/index.ts'
+import type { BlocksFieldDefStructure } from '../types.ts'
+import { BlockInstance } from '../utils/define.ts'
+import { getOrCreateRow } from '../utils/get-or-create-row.ts'
+import { html } from '../utils/html.ts'
+import * as icons from './icons.ts'
+import Render from './Render.ts'
 
 export default (props: {
   entryId: number
   parentId: number
   name: string
-  field: BlocksField
-  sortOrder: number
+  structure: BlocksFieldDefStructure
+  id?: number
+  sortOrder?: number
 }) => {
-  const { entryId, parentId, name, field, sortOrder = 0 } = props
+  const { entryId, parentId, name, structure, id, sortOrder = 0 } = 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>`
 
-  const entries = Object.entries(field.children) as [
-    string,
-    BlockType | Field,
-  ][]
+  const entries = Object.entries(structure.children)
+
   const rows = query.blocks({ parent_id: data.id })
 
   return html`
     <div class="blocks-field">
       <header>
-        <p>${field.label}</p>
+        <p>${structure.label}</p>
 
         <details class="dropdown">
           <summary>Add</summary>
@@ -59,23 +65,21 @@ export default (props: {
 
       <hr style="margin-top: 0;" />
 
-      <div data-sortable="${data.id}">
+      <sortable-list data-id="${data.id}">
         ${rows.map((row, idx) => {
-          const [name, struct] = (entries.find(([name]) => name === row.name) ||
-            []) as [string, BlockType]
+          const [name, struct] =
+            entries.find(([name]) => name === row.name) || []
 
-          if (!name) return html``
+          if (!name || !struct) return html`<p>No name</p>`
 
           return html`
-          <article>
+          <article data-id="${row.id}">
               <header>
                 ${struct.label}
 
-                <!-- data-tooltip="Move"
-                data-placement="top" -->
                 <aside>
                   <button
-                    data-handle="${data.id}"
+                    data-handle-for="${data.id}"
                     class="ghost handle text-secondary"
                     style="cursor: grab"
                   >
@@ -100,19 +104,18 @@ export default (props: {
                 </aside>
               </header>
 
-              ${Block({
+              ${Render({
                 entryId,
-                parentId: struct.fields ? row.id : data.id,
-                blockStructure: struct,
+                parentId:
+                  struct.instanceOf === BlockInstance ? row.id : data.id,
+                id: row.id,
+                structure: struct,
                 name: name,
-                sortOrder: row.sort_order,
               })}
-
-              <!-- <pre><code>{JSON.stringify(struct, null, 2)} - {row.sort_order}</code></pre> -->
             </article>
           `
         })}
-      </div>
+      </sortable-list>
     </div>
   `
 }

package/components/BlockRenderer.ts

@@ -0,0 +1,22 @@
+import { html } from 'hono/html'
+import type { BlockDef } from '../types.ts'
+import Render from './Render.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  id?: number
+  structure: BlockDef
+}) => {
+  const { entryId, parentId, structure, id } = props
+
+  const entries = Object.entries(structure.fields)
+
+  return entries.map(([name, field]) => {
+    try {
+      return Render({ entryId, parentId, structure: field, name })
+    } catch (error) {
+      return html`<p>Cound not render: "${name}"</p>`
+    }
+  }).join('')
+}

package/components/Entries.ts

@@ -1,9 +1,10 @@
 import { html } from 'hono/html'
 import { query } from '../index.ts'
 import * as icons from './icons.ts'
+import type { BlockDef } from '../types.ts'
 
-export default () => {
-  const entries = query.blocks({ parent_id: null, status: 'enabled' })
+export default ({ name }: { name: string }) => {
+  const entries = query.blocks({ parent_id: null, status: 'enabled', name })
 
   return html`
     <section id="entries">

package/components/Entry.ts

@@ -1,28 +1,26 @@
 import { html } from 'hono/html'
 import { query } from '../queries/index.ts'
-import { rootdir, structure } from '../index.ts'
-import Block from './Block.ts'
+import { studioStructure } from '../index.ts'
+import Render from './Render.ts'
 
 export default (props: { entryId: number }) => {
   const data = query.block({ id: props.entryId?.toString() })
 
   if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
 
-  const blockStructure = structure[data.name]
+  const structure = studioStructure[data.name]
 
-  return html`
-    <div id="entry">
-      <div class="entry">
-        ${blockStructure &&
-        Block({
-          entryId: props.entryId,
-          parentId: props.entryId,
-          blockStructure: blockStructure,
-          name: data.name,
-        })}
-      </div>
+  if (!structure) return html`<p>No structure of type: ${data.name}</p>`
 
-      <!-- <pre><code>{JSON.stringify(blockStructure, null, 2)}</code></pre> -->
+  return html`
+    <div id="entry" class="entry">
+      ${Render({
+        entryId: props.entryId,
+        parentId: props.entryId,
+        structure: structure,
+        name: data.name,
+      })}
     </div>
+    
   `
 }

package/components/FieldRenderer.ts

@@ -0,0 +1,35 @@
+import { Field } from './fields/index.ts'
+import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+}) => {
+  const { entryId, parentId, structure, name, id } = props
+
+  switch (structure.type) {
+    case 'text': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'slug': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'markdown': {
+      return Field.Markdown({ entryId, parentId, name, id, structure })
+    }
+
+    case 'image': {
+      return Field.Text({ entryId, parentId, name, structure, id })
+    }
+
+    case 'blocks': {
+      return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+    }
+  }
+}

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/{layout.ts → SiteLayout.ts}

@@ -1,8 +1,7 @@
 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 style="margin-bottom: 0;">${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

@@ -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 }