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

package/public/studio/blocks.css

@@ -0,0 +1,53 @@
+.blocks-field {
+  > header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    > form fieldset {
+      button {
+        padding-inline: 1rem;
+      }
+    }
+
+    details {
+      form {
+        display: flex;
+      }
+
+      button {
+        width: 100%;
+        margin-bottom: 0;
+        text-align: left;
+      }
+
+      summary + ul {
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  article {
+    > header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      aside {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      button {
+        margin: 0;
+        padding: 0;
+
+        svg {
+          padding: 5px;
+        }
+      }
+    }
+  }
+}

package/public/studio/main.css

@@ -0,0 +1,162 @@
+/* @import './../node_modules/@alstar/ui/red.css'; */
+@import 'https://esm.sh/@alstar/ui/red.css';
+@import './admin-panel.css';
+@import './entry.css';
+@import './blocks.css';
+@import './settings.css';
+
+body {
+  padding: 0;
+  min-height: 100vh;
+
+  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;
+  }
+}
+
+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);
+}
+
+.ͼ1 .cm-content.ink-mde-editor-content {
+  min-height: 10lh;
+}
+
+div.ink-mde {
+  --pico-border-color: var(--pico-form-element-border-color);
+
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+
+  padding: var(--pico-form-element-spacing-vertical)
+    var(--pico-form-element-spacing-horizontal);
+  margin-bottom: var(--pico-spacing);
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.ink-mde-textarea {
+}
+
+div.ink-mde:has(.cm-focused) {
+  --pico-outline-width: 0.1rem;
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width)
+    var(--pico-form-element-focus-color);
+
+  box-shadow: var(--pico-box-shadow);
+}
+
+.ͼ1.cm-focused {
+  outline: none;
+}
+
+.ink-mde-textarea {
+  width: 100%;
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.disclamer {
+  display: flex;
+  justify-content: center;
+}
+
+.text-secondary {
+  color: var(--pico-secondary);
+}
+
+.markdown {
+  width: 100%;
+  height: 10lh;
+}

package/public/studio/main.js

@@ -0,0 +1,10 @@
+import barba from '@barba/core'
+
+barba.init({
+  cacheIgnore: true,
+  views: [
+    {
+      namespace: 'default',
+    },
+  ],
+})

package/public/studio/markdown-editor.js

@@ -0,0 +1,34 @@
+import { ink } from 'ink-mde'
+
+class MarkdownEditor extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    this.style.width = '100%'
+
+    this.instance = ink(this, {
+      hooks: {
+        afterUpdate: async (e) => {
+          await fetch('/admin/api/value', {
+            method: 'PATCH',
+            body: JSON.stringify({
+              value: e,
+              id: this.dataset.id,
+            }),
+          })
+        },
+      },
+      interface: {
+        attribution: false,
+      },
+    })
+
+    this.instance.update(this.dataset.content)
+  }
+
+  disconnectedCallback() {
+    // this.instance.destroy()
+  }
+}
+
+customElements.define('markdown-editor', MarkdownEditor)

package/public/studio/settings.css

@@ -0,0 +1,24 @@
+#settings {
+  ul {
+    padding: 0;
+  }
+
+  li {
+    width: 100%;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 15% 1fr auto;
+    gap: 1rem;
+    border-bottom: 1px solid var(--pico-form-element-border-color);
+    margin-bottom: 0;
+    padding: 1rem 0;
+
+    input {
+      font-family: var(--pico-font-family-monospace);
+    }
+
+    * {
+      margin-bottom: 0;
+    }
+  }
+}

package/public/studio/sortable-list.js

@@ -0,0 +1,40 @@
+import Sortable from 'sortablejs'
+
+class SortableList extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    if (!this.children.length) return
+
+    const { id } = this.dataset
+
+    this.instance = Sortable.create(this, {
+      animation: 250,
+      handle: `[data-handle-for="${id}"]`,
+      onEnd: (e) => {
+        const items = [...e.target.children]
+
+        items.forEach(async (child, idx) => {
+          const searchParams = new URLSearchParams()
+
+          searchParams.set('id', child.dataset.id)
+          searchParams.set('sort-order', idx)
+
+          await fetch(`/admin/api/sort-order?${searchParams.toString()}`, {
+            method: 'post',
+          })
+        })
+
+        this.querySelectorAll('[name="sort_order"]').forEach((input, idx) => {
+          input.value = idx.toString()
+        })
+      },
+    })
+  }
+
+  disconnectedCallback() {
+    this.instance?.destroy()
+  }
+}
+
+customElements.define('sortable-list', SortableList)

package/queries/block-with-children.ts

@@ -0,0 +1,74 @@
+import { sql } from '../utils/sql.ts'
+
+export const blockWithChildren = sql`
+  with recursive
+    block_tree as (
+      -- Start from the root block you want
+      select
+        id,
+        name,
+        label,
+        type,
+        sort_order,
+        value,
+        options,
+        status,
+        parent_id,
+        0 as depth
+      from
+        blocks
+      where
+        id = ? -- <-- put your starting block id here
+      union all
+      -- Recursively select children
+      select
+        b.id,
+        b.name,
+        b.label,
+        b.type,
+        b.sort_order,
+        b.value,
+        b.options,
+        b.status,
+        b.parent_id,
+        bt.depth + 1
+      from
+        blocks b
+        inner join block_tree bt on b.parent_id = bt.id
+    )
+  select
+    *
+  from
+    block_tree
+  order by
+    depth,
+    sort_order;
+`
+
+export const deleteBlockWithChildren = sql`
+  with recursive
+    block_tree as (
+      -- start from the root block you want to delete
+      select
+        id
+      from
+        blocks
+      where
+        id = ? -- <-- put your root block id here
+      union all
+      -- recursively select children
+      select
+        b.id
+      from
+        blocks b
+        inner join block_tree bt on b.parent_id = bt.id
+    )
+  delete from blocks
+  where
+    id in (
+      select
+        id
+      from
+        block_tree
+    );
+`

package/queries/block.ts

@@ -1,22 +1,6 @@
 import { db } from '@alstar/db'
 import { sql } from '../utils/sql.ts'
-
-type DBBlockResult = {
-  id: number
-  created_at: string
-  updated_at: string
-  name: string
-  label: string
-  type: string
-  sort_order: number
-  value: string | null
-  options: any
-  status: string
-  parent_block_id: number | null
-  depth: number
-  children: DBBlockResult[]
-  fields: Record<string, DBBlockResult>
-}
+import { type DBBlockResult } from '../types.ts'
 
 function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
   const map = new Map<number, DBBlockResult>()
@@ -28,10 +12,10 @@ function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
   }
 
   for (const block of blocks) {
-    if (block.parent_block_id === null) {
+    if (block.parent_id === null) {
       roots.push(block)
     } else {
-      const parent = map.get(block.parent_block_id)
+      const parent = map.get(block.parent_id)
       if (parent) parent.children!.push(block)
     }
   }
@@ -56,10 +40,10 @@ function buildTree(blocks: DBBlockResult[]): DBBlockResult {
   }
 
   for (const block of blocks) {
-    if (block.parent_block_id === null) {
+    if (block.parent_id === null) {
       roots.push(block)
     } else {
-      const parent = map.get(block.parent_block_id)
+      const parent = map.get(block.parent_id)
       if (parent) parent.children!.push(block)
     }
   }
@@ -74,35 +58,40 @@ function buildTree(blocks: DBBlockResult[]): DBBlockResult {
   return roots[0]
 }
 
-function transformDBBlockResultTree(
+function transformBlocksTree(
   block: DBBlockResult,
   isBlocksChild?: boolean,
 ): DBBlockResult {
   const fields: Record<string, DBBlockResult> = {}
+  let hasFields = false
 
   for (const child of block.children ?? []) {
-    const transformedChild = transformDBBlockResultTree(
+    const transformedChild = transformBlocksTree(
       child,
       child.type === 'blocks',
     )
 
-    if (isBlocksChild) {
-    } else {
+    if (!isBlocksChild) {
+      hasFields = true
       fields[transformedChild.name] = transformedChild
     }
   }
 
-  block.fields = fields
-
+  if(hasFields) {
+    block.fields = fields
+  }
+  
   if (!isBlocksChild) {
-    block.children = [] // clear children array, since all children moved into fields
+    delete block.children
+  } else {
+    delete block.fields
   }
 
   return block
 }
 
 function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
-  return blocks.map((block) => transformDBBlockResultTree(block))
+  return blocks.map((block) => transformBlocksTree(block))
 }
 
 function rootQuery(filterSql: string, depthLimit?: number) {
@@ -123,7 +112,7 @@ function rootQuery(filterSql: string, depthLimit?: number) {
           value,
           options,
           status,
-          parent_block_id,
+          parent_id,
           0 as depth
         from
           blocks
@@ -141,11 +130,11 @@ function rootQuery(filterSql: string, depthLimit?: number) {
           b.value,
           b.options,
           b.status,
-          b.parent_block_id,
+          b.parent_id,
           a.depth + 1
         from
           blocks b
-          inner join ancestors a on b.id = a.parent_block_id
+          inner join ancestors a on b.id = a.parent_id
       ),
       roots as (
         select
@@ -159,12 +148,12 @@ function rootQuery(filterSql: string, depthLimit?: number) {
           value,
           options,
           status,
-          parent_block_id,
+          parent_id,
           0 as depth
         from
           ancestors
         where
-          parent_block_id is null
+          parent_id is null
       ),
       descendants as (
         select
@@ -178,7 +167,7 @@ function rootQuery(filterSql: string, depthLimit?: number) {
           value,
           options,
           status,
-          parent_block_id,
+          parent_id,
           depth
         from
           roots
@@ -194,19 +183,19 @@ function rootQuery(filterSql: string, depthLimit?: number) {
           b.value,
           b.options,
           b.status,
-          b.parent_block_id,
+          b.parent_id,
           d.depth + 1
         from
           blocks b
-          inner join descendants d on b.parent_block_id = d.id ${depthLimitClause}
+          inner join descendants d on b.parent_id = d.id ${depthLimitClause}
       )
     select
       *
     from
       descendants
     order by
-      parent_block_id,
-      sort_order;
+      sort_order,
+      id;
   `
 }
 
@@ -264,7 +253,7 @@ export function root(
 
   const tree = buildTree(rows)
 
-  return transformDBBlockResultTree(tree)
+  return transformBlocksTree(tree)
 }
 
 export function block(params: Record<string, any>) {
@@ -292,6 +281,8 @@ export function blocks(params: Record<string, any>) {
       blocks
     where
       ${filterSql}
+    order by
+     sort_order
   `
 
   return db.database.prepare(query).all(sqlParams) as unknown as DBBlockResult[]

package/queries/db-types.ts

@@ -0,0 +1,15 @@
+// db-types.ts
+export type DBBase = {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  name: string;
+  label: string;
+  type: string;
+  sort_order: number;
+  value: string | null;
+  options: any | null;
+  status: string;
+  parent_id: number | null;
+  depth: number;
+};