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

package/components/Field.ts

@@ -1,168 +0,0 @@
-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_block_id: 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="name" value="${blockStructure.name}" />
-        <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="name" value="${blockStructure.name}" />
-        <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="name" value="${blockStructure.name}" />
-        <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="name" value="${blockStructure.name}" />
-        <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

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

package/public/main.css

@@ -1,95 +0,0 @@
-/* @import './../node_modules/@alstar/ui/red.css'; */
-@import 'https://esm.sh/@alstar/ui/red.css';
-
-body {
-  min-height: 100vh;
-}
-
-body {
-  padding: 0;
-  min-height: inherit;
-
-  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;
-  }
-
-  /* .sortable-chosen {
-    filter: brightness(0.9)
-  } */
-}
-
-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);
-}
-
-.ink-mde-textarea {
-  width: 100%;
-}
-
-.disclamer {
-  display: flex;
-  justify-content: center;
-}

package/public/main.js

@@ -1,44 +0,0 @@
-import barba from '@barba/core'
-import Sortable from 'sortablejs'
-// import { wrap } from 'ink-mde'
-
-barba.init({
-  views: [
-    {
-      namespace: 'default',
-      afterEnter() {
-        init()
-      },
-    },
-  ],
-})
-
-function init() {
-  // sortable
-  {
-    const els = document.querySelectorAll('[data-sortable]')
-
-    els.forEach((el) => {
-      var sortable = Sortable.create(el, {
-        delay: 0,
-        animation: 250,
-        dragClass: 'sortable-drag',
-        easing: 'ease-in-out',
-      })
-    })
-  }
-
-  // // ink-mde
-  // {
-  //   const el = document.querySelector('textarea')
-
-  //   if (el) {
-  //     wrap(el, {
-  //       interface: {
-  //         // appearance: InkValues.Appearance.Auto,
-  //         attribution: false,
-  //       },
-  //     })
-  //   }
-  // }
-}