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

package/package.json

@@ -1,18 +1,15 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.1",
+  "version": "0.0.0-beta.10",
   "type": "module",
   "main": "index.ts",
-  "scripts": {
-    "dev": "node --watch index.ts"
-  },
   "dependencies": {
-    "@alstar/db": "workspace:*",
-    "@alstar/ui": "workspace:*",
     "@hono/node-server": "^1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
-    "sortablejs": "^1.15.6"
+    "@alstar/refresher": "0.0.0-beta.3",
+    "@alstar/ui": "0.0.0-beta.1",
+    "@alstar/db": "0.0.0-beta.1"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",
@@ -35,5 +32,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "dev": "node --watch index.ts"
   }
-}
+}

package/pages/entry/[id].ts

@@ -0,0 +1,17 @@
+import { html } from 'hono/html'
+import { defineEntry } from '../../utils/define.ts'
+
+import SiteLayout from '../../components/SiteLayout.ts'
+import Entry from '../../components/Entry.ts'
+
+export default defineEntry((c) => {
+  const id = c.req.param('id')
+
+  if (!id) {
+    return html`<p>Entry page url needs an ID param: "${id}"</p>`
+  }
+
+  return SiteLayout({
+    content: Entry({ entryId: parseInt(id) }),
+  })
+})

package/{components → pages}/index.ts

@@ -1,5 +1,8 @@
 import { html } from 'hono/html'
-import { structure } from '../index.ts'
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import { studioStructure } from '../index.ts'
 
 const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span style="color: #61aeee;">createStudio</span>([
   {
@@ -16,7 +19,7 @@ const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span st
   }
 ])</code>`
 
-export default () => {
+export default defineEntry(() => {
   const Discamer = html`
     <div class="disclamer">
       <article>
@@ -26,5 +29,5 @@ export default () => {
       </article>
     </div>`
 
-  return html`${!structure.length ? Discamer : ''}`
-}
+  return SiteLayout({ content: !Object.values(studioStructure).length ? Discamer : '' })
+})

package/pages/settings.ts

@@ -0,0 +1,10 @@
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import Settings from '../components/Settings.ts'
+
+export default defineEntry(() => {
+  return SiteLayout({
+    content: Settings(),
+  })
+})

package/public/studio/css/admin-panel.css

@@ -0,0 +1,103 @@
+.admin-panel {
+  /* background: hsla(0, 0%, 0%, 0.1); */
+  padding: 40px;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  height: 100%;
+  min-height: inherit;
+
+  min-width: 250px;
+
+  > h1 {
+    padding-bottom: 1rem;
+
+    a {
+      display: flex;
+    }
+
+    svg {
+      height: 1.6rem;
+    }
+  }
+
+  form {
+    padding-bottom: 1rem;
+
+    button {
+      margin: 10px 0px 20px;
+    }
+
+    p {
+      margin: 0;
+
+      small {
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+        font-weight: 600;
+        opacity: 0.6;
+      }
+    }
+  }
+
+  #entries {
+    width: 100%;
+    user-select: none;
+
+    ul {
+      padding: 0;
+      margin-inline: -1rem;
+
+      form {
+        display: flex;
+        padding-bottom: 0;
+
+        button {
+          margin: 0;
+        }
+      }
+
+      > li {
+        margin-bottom: 0px;
+        border-radius: 8px;
+        display: flex;
+        justify-content: space-between;
+        align-items: stretch;
+        list-style: none;
+        padding: 0;
+
+        a {
+          text-decoration: none;
+          width: 100%;
+          padding: 0.5rem 1rem;
+        }
+
+        button {
+          border-radius: 7px;
+          opacity: 0;
+          transition: opacity 100px;
+
+          svg {
+            margin: 0.5rem 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  > footer {
+    margin-top: auto;
+  }
+}
+
+#entries ul {
+  > li:hover {
+    background-color: var(--pico-form-element-background-color);
+
+    button {
+      opacity: 1;
+    }
+  }
+}

package/public/studio/css/blocks-field.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/css/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/js/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/js/sortable-list.js

@@ -0,0 +1,50 @@
+import Sortable from 'sortablejs'
+
+class SortableList extends HTMLElement {
+  instance = null
+
+  mutationObserver
+
+  init() {
+    if (this.instance || !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()
+        })
+      },
+    })
+  }
+
+  connectedCallback() {
+    this.mutationObserver = new MutationObserver(this.init.bind(this))
+    this.mutationObserver.observe(this, { childList: true })
+
+    this.init()
+  }
+
+  disconnectedCallback() {
+    this.instance?.destroy()
+    this.mutationObserver?.disconnect()
+  }
+}
+
+customElements.define('sortable-list', SortableList)

package/public/studio/main.css

@@ -0,0 +1,161 @@
+/* @import './../node_modules/@alstar/ui/red.css'; */
+@import 'https://esm.sh/@alstar/ui/red.css';
+@import './css/admin-panel.css';
+@import './css/blocks-field.css';
+@import './css/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,9 @@
+import barba from '@barba/core'
+
+import './js/markdown-editor.js'
+import './js/sortable-list.js'
+
+barba.init({
+  cacheIgnore: true,
+  views: [{ namespace: 'default' }],
+})

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
+    );
+`