@alstar/studio 0.0.0-beta.1

package/api/block.ts

@@ -0,0 +1,97 @@
+import { type HttpBindings } from '@hono/node-server'
+// import { ServerSentEventGenerator } from '@starfederation/datastar-sdk'
+import { Hono } from 'hono'
+import { streamSSE } from 'hono/streaming'
+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'
+
+export const sectionRoutes = (structure: Structure) => {
+  const app = new Hono<{ Bindings: HttpBindings }>()
+
+  app.post('/block', async (c) => {
+    return streamSSE(c, async (stream) => {
+      const formData = await c.req.formData()
+      const data = Object.fromEntries(formData.entries())
+
+      const row = structure.find((block) => block.type === data.type)
+
+      if (!row) return
+
+      db.insertInto('blocks', {
+        name: row.name?.toString(),
+        label: row.label?.toString(),
+        type: row.type?.toString(),
+      })
+
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(Entries())}`,
+      })
+    })
+  })
+
+  app.post('/new-block', async (c) => {
+    return streamSSE(c, async (stream) => {
+      const formData = await c.req.formData()
+      const newBlock = formData.get('block')?.toString().split(';')
+      const columns = newBlock?.map((field) => field.split(':')) as string[][]
+      const data = Object.fromEntries(columns)
+
+      const parent_block_id = formData?.get('parent_block_id')?.toString()
+      const sort_order = formData?.get('sort_order')?.toString()
+
+      if (!parent_block_id || !sort_order) return
+
+      db.insertInto('blocks', {
+        type: data.type,
+        name: data.name,
+        label: data.label,
+        parent_block_id,
+        sort_order,
+      })
+
+      await stream.writeSSE({
+        event: 'datastar-patch-elements',
+        data: `elements ${stripNewlines(Entry({ entryId: data.entry_id, structure }))}`,
+      })
+    })
+  })
+
+  app.patch('/block', async (c) => {
+    return streamSSE(c, async (stream) => {
+      const formData = await c.req.formData()
+
+      const id = formData.get('id')?.toString()
+      const value = formData.get('value')?.toString()
+      const entryId = formData.get('entryId')?.toString()
+      const parentId = formData.get('parentId')?.toString()
+      const sortOrder = formData.get('sort_order')?.toString()
+
+      if (!id || !value || !sortOrder) return
+
+      const transaction = db.database.prepare(sql`
+        update blocks
+        set
+          value = ?
+        where
+          id = ?
+          and sort_order = ?;
+      `)
+
+      transaction.run(value, id, sortOrder)
+
+      if (entryId === parentId) {
+        await stream.writeSSE({
+          event: 'datastar-patch-elements',
+          data: `elements <a href="/admin/entry/${entryId}" id="block_link_${entryId}">${value}</a>`,
+        })
+      }
+    })
+  })
+
+  return app
+}

package/api/index.ts

@@ -0,0 +1,2 @@
+export * from './block.ts'
+

package/components/AdminPanel/AdminPanel.css

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

package/components/AdminPanel/AdminPanel.ts

@@ -0,0 +1,57 @@
+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

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

package/components/Entries.ts

@@ -0,0 +1,37 @@
+import { html } from 'hono/html'
+import { query } from '../index.ts'
+import * as icons from './icons.ts'
+
+export default () => {
+  const entries = query.blocks({ parent: null })
+
+  return html`
+    <section id="entries">
+      <ul>
+        ${entries?.map((block) => {
+          const title = query.block({
+            parent: block.id.toString(),
+            name: 'title',
+          })
+
+          return html`
+            <li>
+              <a href="/admin/entry/${block.id}" id="block_link_${block.id}">
+                ${block.value || title?.value || 'Untitled'}
+              </a>
+              <!-- <button
+                data-tooltip="Rename"
+                data-placement="right"
+                class="ghost"
+                style="padding: 0"
+              >
+                {icons.pen}
+              </button> -->
+            </li>
+          `
+        })}
+      </ul>
+    </section>
+
+  `
+}

package/components/Entry.css

@@ -0,0 +1,7 @@
+.entry {
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/components/Entry.ts

@@ -0,0 +1,34 @@
+import { html } from 'hono/html'
+import { query } from '../queries/index.ts'
+import { rootdir } from '../index.ts'
+import { type Structure } from '../types.ts'
+import Fields from './Fields.ts'
+import { buildStructurePath } from '../utils/build-structure-path.ts'
+
+export default (props: { entryId: number | string; structure: Structure }) => {
+  const data = query.block({ id: props.entryId?.toString() })
+
+  if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
+
+  const blockStructure = props.structure.find(
+    (block) => block.name === data.name,
+  )
+
+  const structurePath = buildStructurePath(blockStructure)
+
+  return html`
+    <div id="entry">
+      <link rel="stylesheet" href="${rootdir}/components/Entry.css" />
+
+      <div class="entry">
+        ${blockStructure &&
+        Fields({
+          entryId: props.entryId,
+          parentId: props.entryId,
+          blockStructure,
+          structurePath,
+        })}
+      </div>
+    </div>
+  `
+}

package/components/Field.ts

@@ -0,0 +1,164 @@
+import { html } from 'hono/html'
+import { type Block } from '../types.ts'
+import { type HtmlEscapedString } from 'hono/utils/html'
+import { query } from '../queries/index.ts'
+import { db } from '@alstar/db'
+import BlockComponent from './Block.ts'
+import {
+  buildStructurePath,
+  type StructurePath,
+} from '../utils/build-structure-path.ts'
+
+function getData(parentId: string | number, field: Block, sortOrder: number) {
+  const data = query.block({
+    parent: parentId?.toString() || null,
+    name: field.name,
+    sort_order: sortOrder.toString(),
+  })
+
+  if (!data) {
+    const change = db.insertInto('blocks', {
+      name: field.name?.toString(),
+      label: field.label?.toString(),
+      type: field.type?.toString(),
+      sort_order: sortOrder,
+      parent_block_id: parentId,
+    })
+
+    return query.block({ id: change.lastInsertRowid.toString() })
+  }
+
+  return data
+}
+
+const Field = (props: {
+  entryId: string | number
+  parentId: string | number
+  blockStructure: Block
+  sortOrder?: number
+  structurePath: StructurePath
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const {
+    entryId,
+    parentId,
+    blockStructure,
+    sortOrder = 0,
+    structurePath,
+  } = props
+
+  const data = getData(parentId, blockStructure, sortOrder)
+
+  if (!data) return html`<p>No block</p>`
+
+  const fieldStructurePath = buildStructurePath(blockStructure, structurePath)
+
+  return html`
+    ${blockStructure.type === 'slug' &&
+    html`
+      <form
+        data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      >
+        <label for="block-${data.id}">${blockStructure.label}</label>
+        <input
+          id="block-${data.id}"
+          name="value"
+          type="text"
+          value="${data.value}"
+        />
+
+        <input type="hidden" name="type" value="${blockStructure.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="path"
+          value="${fieldStructurePath.join('.')}"
+        />
+      </form>
+    `}
+    ${blockStructure.type === 'text' &&
+    html`
+      <form
+        data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      >
+        <label for="block-${data.id}">${blockStructure.label}</label>
+        <input
+          id="block-${data.id}"
+          name="value"
+          type="text"
+          value="${data.value}"
+        />
+
+        <input type="hidden" name="type" value="${blockStructure.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="path"
+          value="${fieldStructurePath.join('.')}"
+        />
+      </form>
+    `}
+    ${blockStructure.type === 'image' &&
+    html`
+      <form
+        data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      >
+        <label for="block-${data.id}">${blockStructure.label}</label>
+        <input
+          id="block-${data.id}"
+          name="value"
+          type="text"
+          value="${data.value}"
+        />
+
+        <input type="hidden" name="type" value="${blockStructure.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="path"
+          value="${fieldStructurePath.join('.')}"
+        />
+      </form>
+    `}
+    ${blockStructure.type === 'markdown' &&
+    html`
+      <form
+        data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+      >
+        <label for="block-${data.id}">${blockStructure.label}</label>
+
+        <textarea></textarea>
+
+        <!-- <input
+          id="block-${data.id}"
+          name="value"
+          type="text"
+          value="${data.value}"
+        /> -->
+
+        <input type="hidden" name="type" value="${blockStructure.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="path"
+          value="${fieldStructurePath.join('.')}"
+        />
+      </form>
+    `}
+    ${blockStructure.type === 'blocks' &&
+    BlockComponent(entryId, data.id, blockStructure, fieldStructurePath)}
+  `
+}
+
+export default Field

package/components/Fields.ts

@@ -0,0 +1,43 @@
+import { html } from 'hono/html'
+import { type Block } from '../types.ts'
+import { type HtmlEscapedString } from 'hono/utils/html'
+import Field from './Field.ts'
+import {
+  buildStructurePath,
+  type StructurePath,
+} from '../utils/build-structure-path.ts'
+
+const Fields = (props: {
+  entryId: string | number
+  parentId: string | number
+  blockStructure: Block
+  structurePath: StructurePath
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const updatedPath = buildStructurePath(
+    props.blockStructure,
+    props.structurePath,
+  )
+
+  return html`
+    <div class="fields">
+      ${props.blockStructure.fields
+        ? props.blockStructure.fields?.map((field, idx) => {
+            return Field({
+              entryId: props.entryId,
+              parentId: props.parentId,
+              blockStructure: field,
+              sortOrder: idx,
+              structurePath: [...updatedPath, 'fields'],
+            })
+          })
+        : Field({
+            entryId: props.entryId,
+            parentId: props.parentId,
+            blockStructure: props.blockStructure,
+            structurePath: updatedPath,
+          })}
+    </div>
+  `
+}
+
+export default Fields