@alstar/studio 0.0.0-beta.1 → 0.0.0-beta.10

package/components/Block.ts

@@ -1,116 +0,0 @@
-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/Entry.css

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

package/components/Field.ts

@@ -1,164 +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: 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

@@ -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,92 +0,0 @@
-@import './../node_modules/@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;
-
-    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,43 +0,0 @@
-import Sortable from '../node_modules/sortablejs/modular/sortable.core.esm.js'
-import { ink, wrap } from 'https://esm.sh/ink-mde@0.34.0'
-
-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,
-        },
-      })
-    }
-  }
-}