@alstar/studio 0.0.0-beta.15 → 0.0.0-beta.18

package/index.ts

@@ -6,7 +6,6 @@ import { serveStatic } from '@hono/node-server/serve-static'
 import { HTTPException } from 'hono/http-exception'
 
 import { loadDb } from '@alstar/db'
-import { createRefresher } from '@alstar/refresher'
 
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
@@ -20,21 +19,20 @@ import auth from './utils/auth.ts'
 import ErrorPage from './pages/error.ts'
 
 import * as types from './types.ts'
+import { refresher, refreshClient } from './utils/refresher.ts'
 
 export let rootdir = './node_modules/@alstar/studio'
 
 export let studioStructure: types.Structure = {}
 export let studioConfig: types.StudioConfig = {
   siteName: '',
+  honoConfig: {},
   fileBasedRouter: true,
   port: 3000,
   structure: {},
 }
 
-const createStudio = async (config: types.StudioConfig) => {
-  // const refresher = await createRefresher({ rootdir: ['.', import.meta.dirname] })
-  const refresher = await createRefresher({ rootdir: '.' })
-
+const createStudio = async (config: types.StudioConfigInput) => {
   loadDb('./studio.db')
   createStudioTables()
 
@@ -48,6 +46,8 @@ const createStudio = async (config: types.StudioConfig) => {
 
   const app = new Hono(studioConfig.honoConfig)
 
+  app.get('/refresh', refresher({ root: '.', exclude: '.db' }))
+
   /**
    * Static folders
    */
@@ -104,8 +104,6 @@ const createStudio = async (config: types.StudioConfig) => {
     }),
   )
 
-  // console.log(app.routes)
-
   /**
    * Run server
    */
@@ -129,9 +127,12 @@ const createStudio = async (config: types.StudioConfig) => {
     })
   })
 
-  startupLog({ port: studioConfig.port || 3000, refresherPort: refresher.port })
+  startupLog({ port: studioConfig.port })
 
-  return app
+  return {
+    app,
+    refreshClient: refreshClient(studioConfig.port)
+  }
 }
 
 export {
@@ -144,6 +145,6 @@ export {
 } from './utils/define.ts'
 export { type RequestContext } from './types.ts'
 export { createStudio }
-export { html, type HtmlEscapedString } from './utils/html.ts'
+export { html, raw, type HtmlEscapedString } from './utils/html.ts'
 export { query } from './queries/index.ts'
 export const version = packageJSON.version

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.15",
+  "version": "0.0.0-beta.18",
   "type": "module",
   "main": "index.ts",
   "bin": {
@@ -10,12 +10,11 @@
     "node": ">=23.8"
   },
   "dependencies": {
-    "@hono/node-server": "^1.18.1",
+    "@hono/node-server": "1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
-    "hono": "^4.8.12",
-    "@alstar/ui": "0.0.0-beta.2",
-    "@alstar/refresher": "0.0.0-beta.3",
-    "@alstar/db": "0.0.0-beta.1"
+    "hono": "4.8.12",
+    "@alstar/db": "0.0.0-beta.1",
+    "@alstar/ui": "0.0.0-beta.4"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/pages/entry/[id].ts

@@ -3,6 +3,7 @@ import { defineEntry } from '../../utils/define.ts'
 
 import SiteLayout from '../../components/SiteLayout.ts'
 import Entry from '../../components/Entry.ts'
+import LivePreview from '../../components/LivePreview.ts'
 
 export default defineEntry((c) => {
   const id = c.req.param('id')
@@ -11,5 +12,10 @@ export default defineEntry((c) => {
     return html`<p>Entry page url needs an ID param: "${id}"</p>`
   }
 
-  return SiteLayout(Entry({ entryId: parseInt(id) }))
+  return SiteLayout(
+    html`<div class="entry-page">
+      ${Entry({ entryId: id })}
+      ${LivePreview({ entryId: id })}</div>
+    `
+  )
 })

package/pages/error.ts

@@ -3,12 +3,13 @@ import SiteLayout from "../components/SiteLayout.ts";
 import type { HTTPResponseError } from "hono/types";
 
 export default ((err?: Error | HTTPResponseError) => {
-
   return SiteLayout(html`
-    <article>
-      <header>Something went wrong</header>
-      <p>Try again</p>
-      <p>${err?.message || '404 - Not found'}</p>
-    </article>
+    <div class="container">
+      <article style="margin: 100px">
+        <header>Something went wrong</header>
+        <p>Try again</p>
+        <p>${err?.message || '404 - Not found'}</p>
+      </article>
+    </div>
   `, false)
 })

package/pages/login.ts

@@ -7,7 +7,7 @@ export default defineEntry(c => {
   <div class="login-form">
     <article>
       <header>Login</header>
-      <form data-on-submit="@post('/studio/api/auth/login', { contentType: 'form' })">
+      <form data-on:submit="@post('/studio/api/auth/login', { contentType: 'form' })">
         <label for="email">Email</label>  
         <input id="email" name="email" type="text" placeholder="Email">
         <label for="password">Password</label>  

package/pages/register.ts

@@ -10,8 +10,8 @@ export default defineEntry((c) => {
           <header>Register user</header>
           <form
             data-signals="{ status: 0 }"
-            data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
-            data-on-signal-patch="patch.status === 200 && window.location.reload()"
+            data-on:submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+            data-on:signal-patch="patch.status === 200 && window.location.reload()"
           >
             <label for="email">Email</label>
             <input id="email" name="email" type="text" placeholder="Email" style="width: 100%" />

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

@@ -1,28 +1,46 @@
 .admin-panel {
-  /* background: hsla(0, 0%, 0%, 0.1); */
   padding: 40px;
   margin-bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 
+  position: relative;
   height: 100%;
   min-height: inherit;
-
   min-width: 250px;
 
-  > h1 {
-    padding-bottom: 1rem;
+  border-right: 1px solid var(--pico-muted-border-color);
 
-    a {
-      display: flex;
-    }
+  /* .toggle-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
+    padding: 0.2rem;
+  } */
 
-    svg {
-      height: 1.6rem;
+  header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-bottom: 1rem;
+    
+    .title {
+      margin: 0;
+  
+      a {
+        display: flex;
+      }
+  
+      svg {
+        height: 1.6rem;
+        width: auto;
+      }
     }
   }
 
+
   form {
     padding-bottom: 1rem;
 

package/public/studio/css/blocks-field.css

@@ -1,9 +1,22 @@
 .blocks-field {
   > header {
+    position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background: var(--pico-background-color);
+    border-bottom: 1px solid var(--pico-muted-border-color);
+
+    padding: 1rem;
+
+    p {
+      margin: 0;
+    }
+
     > form fieldset {
       button {
         padding-inline: 1rem;
@@ -11,6 +24,8 @@
     }
 
     details {
+      margin: 0;
+
       form {
         display: flex;
       }
@@ -28,6 +43,16 @@
     }
   }
 
+  > header:after {
+    content: '';
+    position: absolute;
+    background-color: var(--pico-background-color);
+    height: 100%;
+    width: 200%;
+    left: -50%;
+    z-index: -1;
+  }
+
   article {
     > header {
       display: flex;

package/public/studio/css/entry-page.css

@@ -0,0 +1,4 @@
+.entry-page:has(#live_preview) {
+  display: grid;
+  grid-template-columns: 500px 1fr;
+}

package/public/studio/css/entry.css

@@ -0,0 +1,35 @@
+.entry{
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+
+  > header {
+    background-color: var(--pico-background-color);
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    padding: 1rem;
+
+    h1 {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      font-family: var(--pico-font-family-monospace);
+    }
+  }
+
+  .content {
+    overflow: auto;
+  }
+
+  > .fields > .block {
+    padding: var(--pico-spacing);
+  
+    > header {
+      margin-block: var(--pico-block-spacing-vertical);
+    }
+  }
+
+  .field {
+    padding-top: 1rem;
+    padding-inline: 1rem;
+  }
+}

package/public/studio/css/field.css

@@ -0,0 +1,14 @@
+.field {
+  .field-text {
+    output {
+      display: grid;
+      max-height: 300px;
+      margin-bottom: 1rem;
+      
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}

package/public/studio/css/live-preview.css

@@ -0,0 +1,25 @@
+.live-preview {
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid var(--pico-muted-border-color);
+  
+  display: grid;
+  grid-template-rows: auto 1fr;
+  
+  header {
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    padding: 1rem;
+
+    h1 {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      font-family: var(--pico-font-family-monospace);
+    }
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

package/public/studio/css/settings.css

@@ -1,4 +1,8 @@
 #settings {
+  padding: 1rem;
+  overflow: auto;
+  height: 100vh;
+
   tr {
     input {
       width: 100%;

package/public/studio/js/live-preview.js

@@ -0,0 +1,26 @@
+class LivePreview extends HTMLElement {
+  abortController = new AbortController()
+  mutationObserver
+  iframe
+
+  reload() {
+    this.iframe.contentWindow.location.reload()
+  }
+
+  connectedCallback() {
+    this.mutationObserver = new MutationObserver(this.reload.bind(this))
+    this.mutationObserver.observe(this, { attributes: true })
+
+    this.iframe = this.querySelector('iframe')
+
+    window.addEventListener('markdown-editor:update', this.reload.bind(this), { signal: this.abortController.signal })
+    window.addEventListener('sortable-list:update', this.reload.bind(this), { signal: this.abortController.signal })
+  }
+
+  disconnectedCallback() {
+    this.abortController?.abort()
+    this.mutationObserver?.disconnect()
+  }
+}
+
+customElements.define('live-preview', LivePreview)

package/public/studio/js/markdown-editor.js

@@ -11,11 +11,17 @@ class MarkdownEditor extends HTMLElement {
         afterUpdate: async (e) => {
           await fetch('/studio/api/value', {
             method: 'PATCH',
+            headers: {
+              render: 'LivePreview',
+              props: this.dataset.entryId
+            },
             body: JSON.stringify({
               value: e,
               id: this.dataset.id,
             }),
           })
+
+          window.dispatchEvent(new CustomEvent('markdown-editor:update'))
         },
       },
       interface: {

package/public/studio/js/sortable-list.js

@@ -13,23 +13,25 @@ class SortableList extends HTMLElement {
     this.instance = Sortable.create(this, {
       animation: 250,
       handle: `[data-handle-for="${id}"]`,
-      onEnd: (e) => {
+      onEnd: async (e) => {
         const items = [...e.target.children]
 
-        items.forEach(async (child, idx) => {
+        await Promise.all(items.map(async (child, idx) => {
           const searchParams = new URLSearchParams()
 
           searchParams.set('id', child.dataset.id)
           searchParams.set('sort-order', idx)
 
-          await fetch(`/studio/api/sort-order?${searchParams.toString()}`, {
+          return fetch(`/studio/api/sort-order?${searchParams.toString()}`, {
             method: 'post',
           })
-        })
+        }))
 
         this.querySelectorAll('[name="sort_order"]').forEach((input, idx) => {
           input.value = idx.toString()
         })
+
+        window.dispatchEvent(new CustomEvent('sortable-list:update'))
       },
     })
   }

package/public/studio/main.css

@@ -1,7 +1,16 @@
 @import 'https://esm.sh/@alstar/ui/red.css';
+/* @import '../node_modules/@alstar/ui/red.css'; */
 @import './css/admin-panel.css';
 @import './css/blocks-field.css';
 @import './css/settings.css';
+@import './css/live-preview.css';
+@import './css/entry-page.css';
+@import './css/entry.css';
+@import './css/field.css';
+
+:root {
+  --pico-font-size: 80%;
+}
 
 body {
   padding: 0;
@@ -12,13 +21,11 @@ body {
   align-content: baseline;
 
   > main {
-    padding: 40px;
-    height: 100vh;
-    overflow: auto;
     width: 100%;
+    height: 100vh;
+    padding: 0;
 
     section {
-      max-width: 900px;
       margin: 0 auto;
     }
   }
@@ -28,14 +35,6 @@ button svg, a svg {
   pointer-events: none;
 }
 
-.entry > .fields > .block {
-  padding-block: var(--pico-spacing);
-
-  > header {
-    margin-block: var(--pico-block-spacing-vertical);
-  }
-}
-
 .block {
   > header {
     margin-bottom: var(--pico-spacing);

package/public/studio/main.js

@@ -2,6 +2,7 @@ import barba from '@barba/core'
 
 import './js/markdown-editor.js'
 import './js/sortable-list.js'
+import './js/live-preview.js'
 
 barba.init({
   debug: true,