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

package/components/BlockFieldRenderer.ts

@@ -0,0 +1,125 @@
+import { query } from '../queries/index.ts'
+import type { BlocksFieldDefStructure } from '../types.ts'
+import { BlockInstance } from '../utils/define.ts'
+import { getOrCreateRow } from '../utils/get-or-create-row.ts'
+import { html } from '../utils/html.ts'
+import * as icons from './icons.ts'
+import Render from './Render.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  structure: BlocksFieldDefStructure
+  id?: number
+  sortOrder?: number
+}) => {
+  const { entryId, parentId, name, structure, id, sortOrder = 0 } = props
+
+  const data = getOrCreateRow({
+    parentId,
+    name,
+    field: structure,
+    sortOrder,
+    id,
+  })
+
+  if (!data) return html`<p>No block</p>`
+
+  const entries = Object.entries(structure.children)
+
+  const rows = query.blocks({ parent_id: data.id })
+
+  return html`
+    <div class="blocks-field">
+      <header>
+        <p>${structure.label}</p>
+
+        <details class="dropdown">
+          <summary>Add</summary>
+          <ul>
+            ${entries.map(([name, block]) => {
+              return html`
+                <li>
+                  <form
+                    data-on-submit="@post('/studio/api/new-block', { contentType: 'form' })"
+                  >
+                    <button type="submit" class="ghost">${block.label}</button>
+                    <input type="hidden" name="type" value="${block.type}" />
+                    <input type="hidden" name="name" value="${name}" />
+                    <input type="hidden" name="label" value="${block.label}" />
+                    <input type="hidden" name="parent_id" value="${data.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                    <input
+                      type="hidden"
+                      name="sort_order"
+                      value="${rows.length}"
+                    />
+                  </form>
+                </li>
+                `
+            })}
+          </ul>
+        </details>
+      </header>
+
+      <hr style="margin-top: 0;" />
+
+      <sortable-list data-id="${data.id}">
+        ${rows.map((row, idx) => {
+          const [name, struct] =
+            entries.find(([name]) => name === row.name) || []
+
+          if (!name || !struct) return html`<p>No name</p>`
+
+          return html`
+          <article data-id="${row.id}">
+              <header>
+                ${struct.label}
+
+                <aside>
+                  <!-- <label style="margin: 0; border-bottom: none" data-tooltip="Disable" data-placement="top">
+                    <input name="enable" type="checkbox" role="switch" checked />
+                  </label> -->
+
+                  <button
+                    data-handle-for="${data.id}"
+                    class="ghost handle text-secondary"
+                    style="cursor: grab"
+                  >
+                    ${icons.bars}
+                  </button>
+
+                  <form
+                    data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
+                  >
+                    <button
+                      type="submit"
+                      class="ghost text-secondary"
+                      data-tooltip="Remove"
+                      data-placement="top"
+                      aria-label="Delete block"
+                    >
+                      ${icons.x}
+                    </button>
+                    <input type="hidden" name="id" value="${row.id}" />
+                    <input type="hidden" name="entry_id" value="${entryId}" />
+                  </form>
+                </aside>
+              </header>
+
+              ${Render({
+                entryId,
+                parentId:
+                  struct.instanceOf === BlockInstance ? row.id : data.id,
+                id: row.id,
+                structure: struct,
+                name: name,
+              })}
+            </article>
+          `
+        })}
+      </sortable-list>
+    </div>
+  `
+}

package/components/BlockRenderer.ts

@@ -0,0 +1,22 @@
+import { html } from 'hono/html'
+import type { BlockDef } from '../types.ts'
+import Render from './Render.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  id?: number
+  structure: BlockDef
+}) => {
+  const { entryId, parentId, structure } = props
+
+  const entries = Object.entries(structure.fields)
+
+  return html`${entries.map(([name, field]) => {
+      try {
+        return Render({ entryId, parentId, structure: field, name })
+      } catch (error) {
+        return html`<p>Cound not render: "${name}"</p>`
+      }
+    })}`
+}

package/components/Entries.ts

@@ -1,32 +1,40 @@
 import { html } from 'hono/html'
 import { query } from '../index.ts'
 import * as icons from './icons.ts'
+import type { BlockDef } from '../types.ts'
 
-export default () => {
-  const entries = query.blocks({ parent: null })
+export default ({ name }: { name: string }) => {
+  const entries = query.blocks({ parent_id: null, status: 'enabled', name })
 
   return html`
     <section id="entries">
       <ul>
         ${entries?.map((block) => {
           const title = query.block({
-            parent: block.id.toString(),
+            parent_id: block.id.toString(),
             name: 'title',
           })
 
           return html`
             <li>
-              <a href="/admin/entry/${block.id}" id="block_link_${block.id}">
-                ${block.value || title?.value || 'Untitled'}
+              <a href="/studio/entry/${block.id}" id="block_link_${block.id}">
+                ${title?.value || 'Untitled'}
               </a>
-              <!-- <button
-                data-tooltip="Rename"
-                data-placement="right"
-                class="ghost"
-                style="padding: 0"
+
+              <form
+                data-on-submit="@delete('/studio/api/block', { contentType: 'form' })"
               >
-                {icons.pen}
-              </button> -->
+                <input type="hidden" name="id" value="${block.id}" />
+                <button
+                  data-tooltip="Remove"
+                  data-placement="right"
+                  class="ghost text-secondary"
+                  style="padding: 0"
+                  type="submit"
+                >
+                  ${icons.trash}
+                </button>
+              </form>
             </li>
           `
         })}

package/components/Entry.ts

@@ -1,34 +1,26 @@
 import { html } from 'hono/html'
 import { query } from '../queries/index.ts'
-import { rootdir } from '../index.ts'
-import { type Structure } from '../types.ts'
-import Fields from './Fields.ts'
-import { buildStructurePath } from '../utils/build-structure-path.ts'
+import { studioStructure } from '../index.ts'
+import Render from './Render.ts'
 
-export default (props: { entryId: number | string; structure: Structure }) => {
+export default (props: { entryId: number }) => {
   const data = query.block({ id: props.entryId?.toString() })
 
   if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
 
-  const blockStructure = props.structure.find(
-    (block) => block.name === data.name,
-  )
+  const structure = studioStructure[data.name]
 
-  const structurePath = buildStructurePath(blockStructure)
+  if (!structure) return html`<p>No structure of type: ${data.name}</p>`
 
   return html`
-    <div id="entry">
-      <link rel="stylesheet" href="${rootdir}/components/Entry.css" />
-
-      <div class="entry">
-        ${blockStructure &&
-        Fields({
-          entryId: props.entryId,
-          parentId: props.entryId,
-          blockStructure,
-          structurePath,
-        })}
-      </div>
+    <div id="entry" class="entry">
+      ${Render({
+        entryId: props.entryId,
+        parentId: props.entryId,
+        structure: structure,
+        name: data.name,
+      })}
     </div>
+    
   `
 }

package/components/FieldRenderer.ts

@@ -0,0 +1,35 @@
+import { Field } from './fields/index.ts'
+import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+}) => {
+  const { entryId, parentId, structure, name, id } = props
+
+  switch (structure.type) {
+    case 'text': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'slug': {
+      return Field.Slug({ entryId, parentId, name, id, structure })
+    }
+
+    case 'markdown': {
+      return Field.Markdown({ entryId, parentId, name, id, structure })
+    }
+
+    case 'image': {
+      return Field.Text({ entryId, parentId, name, structure, id })
+    }
+
+    case 'blocks': {
+      return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+    }
+  }
+}

package/components/Render.ts

@@ -0,0 +1,46 @@
+import { html } from 'hono/html'
+import type { HtmlEscapedString } from 'hono/utils/html'
+import FieldRenderer from './FieldRenderer.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+import BlockRenderer from './BlockRenderer.ts'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from '../utils/define.ts'
+import type {
+  BlockDefStructure,
+  BlocksFieldDefStructure,
+  FieldDefStructure,
+} from '../types.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: BlockDefStructure | FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+  sortOrder?: number
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const { entryId, parentId, structure, name, id } = props
+
+  if (!structure) return html`<p>No block</p>`
+
+  try {
+    switch (structure.instanceOf) {
+      case FieldInstance: {
+        return FieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockFieldInstance: {
+        return BlockFieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockInstance: {
+        return BlockRenderer({ entryId, parentId, structure, id })
+      }
+    }
+  } catch (error) {
+    return html`<p>Error rendering "${name}"</p>`
+  }
+}

package/components/Settings.ts

@@ -0,0 +1,104 @@
+import { db } from '@alstar/db'
+import { html } from 'hono/html'
+import { sql } from '../utils/sql.ts'
+import * as icons from './icons.ts'
+import Backup from './Backup.ts'
+import Users from './Users.ts'
+
+export default () => {
+  const apiKeys = db.database
+    .prepare(sql`
+      select
+        *
+      from
+        api_keys
+    `)
+    .all()
+
+  return html`
+  <div id="settings" data-signals="{ apiKey: '', copied: false }">
+      <!-- <h1>Settings</h1> -->
+      <article>
+        <header>API Keys</header>
+
+        <ul>
+          ${apiKeys.map((apiKey) => {
+            return html`<li>
+              <p>${apiKey.name}</p>
+              <input type="text" disabled value="${apiKey.hint}" />
+              <form
+                data-on-submit="@delete('/studio/api/api-key', { contentType: 'form' })"
+              >
+                <button
+                  data-tooltip="Delete API key"
+                  data-placement="left"
+                  type="submit"
+                  class="ghost"
+                >
+                  ${icons.trash}
+                </button>
+
+                <input type="hidden" name="value" value="${apiKey.value}" />
+              </form>
+            </li>`
+          })}
+        </ul>
+
+        <form
+          data-on-submit="@post('/studio/api/api-key', { contentType: 'form' })"
+        >
+          <label for="api_key_name"><small>Generate API Key</small></label>
+
+          <input
+            data-bind="name"
+            type="text"
+            name="name"
+            id="api_key_name"
+            placeholder="Name"
+          />
+
+          <button type="submit" class="ghost">Generate key</button>
+        </form>
+
+        <dialog data-attr="{ open: $apiKey !== '' }">
+          <article>
+            <header>
+              <p>API Key</p>
+            </header>
+            <p>Be sure to save this key, as it wont be shown again.</p>
+
+            <div style="display: flex; gap: 1rem; align-items: center;">
+              <h3 style="margin: 0;">
+                <code data-text="$apiKey"></code>
+              </h3>
+
+              <button
+                style="display: flex; align-items: center;"
+                data-attr="{ id: $apiKey }"
+                data-on-click="navigator.clipboard.writeText($apiKey); $copied = true"
+                class="ghost"
+                aria-label="Copy key to clipboard"
+              >
+                ${icons.clipboard}
+                <span style="display: none; margin-left: 0.5rem; color: green;" data-style="{ display: $copied && 'block' }">Copied</span>
+              </button>
+            </div>
+
+            <footer>
+              <button
+                class="ghost"
+                data-on-click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
+              >
+                Close
+              </button>
+            </footer>
+          </article>
+        </dialog>
+      </article>
+
+      ${Backup()}
+
+      ${Users()}
+    </div>
+  `
+}

package/components/SiteLayout.ts

@@ -0,0 +1,61 @@
+import adminPanel from './AdminPanel.ts'
+import { html } from 'hono/html'
+import { type HtmlEscapedString } from 'hono/utils/html'
+import { studioConfig } from '../index.ts'
+
+export default (
+  content:
+    | string
+    | Promise<string>
+    | HtmlEscapedString
+    | Promise<HtmlEscapedString>,
+  includeAdminPanel = true,
+) => {
+  return html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>
+          ${studioConfig.siteName ? studioConfig.siteName + ' | ' : ''}Alstar
+          Studio
+        </title>
+
+        <link rel="icon" type="image/svg" href="/studio/favicon.svg" />
+
+        <meta name="color-scheme" content="light dark" />
+
+        <script
+          type="module"
+          src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
+        ></script>
+
+        <script type="importmap">
+          {
+            "imports": {
+              "@barba/core": "https://esm.sh/@barba/core@2.10.3/dist/barba.mjs",
+              "sortablejs": "https://esm.sh/sortablejs@1.15.6/modular/sortable.core.esm.js",
+              "ink-mde": "https://esm.sh/ink-mde@0.34.0"
+            }
+          }
+        </script>
+
+        <script src="/studio/main.js" type="module"></script>
+        <link href="/studio/main.css" rel="stylesheet" />
+      </head>
+
+      <body data-barba="wrapper">
+        ${includeAdminPanel
+          ? html`<section style="margin-bottom: 0;">${adminPanel()}</section>`
+          : html`<div></div>`}
+
+        <main>
+          <section data-barba="container" data-barba-namespace="default">
+            ${content}
+          </section>
+        </main>
+      </body>
+    </html>
+  `
+}

package/components/Users.ts

@@ -0,0 +1,46 @@
+import { db } from '@alstar/db'
+import { html } from 'hono/html'
+import { sql } from '../utils/sql.ts'
+
+export default () => {
+  const users = db.database
+    .prepare(sql`
+      select
+        email
+      from
+        users
+    `)
+    .all()
+
+  return html`
+    <article>
+      <header>Users</header>
+      <ul>
+        ${users.map(user => html`<li>${user.email}</li>`)}
+      </ul>
+      <article>
+        <header>Register user</header>
+        <form
+          data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+        >
+          <label for="register_email"><small>Email</small></label>
+          <input
+            id="register_email"
+            name="email"
+            type="email"
+            placeholder="Email"
+          />
+          <label for="register_password"><small>Password</small></label>
+          <input
+            id="register_password"
+            name="password"
+            type="password"
+            placeholder="Password"
+          />
+          <br />
+          <button type="submit" class="ghost">Create</button>
+        </form>
+      </article>
+    </article>
+  `
+}

package/components/fields/Markdown.ts

@@ -0,0 +1,44 @@
+import type { FieldDefStructure } from '../../types.ts'
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: FieldDefStructure
+}) => {
+  const { entryId, parentId, name, structure, id } = props
+
+  const data = getOrCreateRow({ parentId, name, field: structure, id })
+
+  if (!data) return html`<p>No block</p>`
+
+  return html`
+  <form
+      data-on-input="@patch('/studio/api/block', { contentType: 'form' })"
+    >
+      <hgroup>
+        <label for="block-${data.id}">${structure.label}</label>
+        <p><small>${structure.description}</small></p>
+      </hgroup>
+
+      <markdown-editor
+        data-content="${data.value?.trim()}"
+        data-id="${data.id}"
+      >
+        <!-- <textarea id="block-{data.id}" name="value" class="markdown">
+          {data.value}
+        </textarea
+        > -->
+      </markdown-editor>
+
+      <input type="hidden" name="type" value="${structure.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="name" value="${name}" />
+    </form>
+`
+}