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

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

@@ -1,53 +0,0 @@
-import adminPanel from './AdminPanel/AdminPanel.ts'
-import { html } from 'hono/html'
-import { type HtmlEscapedString } from 'hono/utils/html'
-import { rootdir } from '../index.ts'
-import { type Structure } from '../types.ts'
-
-export default (props: {
-  content:
-    | string
-    | Promise<string>
-    | HtmlEscapedString
-    | Promise<HtmlEscapedString>
-  structure: Structure
-}) => {
-  return html`
-    <!DOCTYPE html>
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Alster CMS</title>
-
-        <link
-          rel="icon"
-          type="image/svg"
-          href="${rootdir}/public/favicon.svg"
-        />
-
-        <meta name="color-scheme" content="light dark" />
-
-        <link rel="stylesheet" href="${rootdir}/public/main.css" />
-
-        <script
-          type="module"
-          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
-        ></script>
-        <script src="https://unpkg.com/@barba/core@2.10.3/dist/barba.umd.js"></script>
-      </head>
-
-      <body data-barba="wrapper">
-        <section>${adminPanel(props.structure)}</section>
-
-        <main style="height: 100vh; overflow: auto">
-          <section data-barba="container" data-barba-namespace="default">
-            ${props.content}
-          </section>
-        </main>
-
-        <script src="${rootdir}/public/main.js" type="module"></script>
-      </body>
-    </html>
-  `
-}

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,
-        },
-      })
-    }
-  }
-}