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

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,28 @@
+#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;
+    }
+  }
+}
+
+.login-form {
+  width: 100%;
+}

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('/studio/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(`/studio/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,166 @@
+/* @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;
+    width: 100%;
+
+    section {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+  }
+}
+
+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);
+  }
+
+  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,21 @@
+import barba from '@barba/core'
+
+import './js/markdown-editor.js'
+import './js/sortable-list.js'
+
+barba.init({
+  cacheIgnore: true,
+  views: [{ namespace: 'default' }],
+})
+
+// client side script
+// const eventSource = new EventSource('http://localhost:5432')
+// eventSource.onmessage = ({ data }) => {
+//   const delay = data.split(' - ').at(-1) === 'true'
+//   setTimeout(() => window.location.reload(), delay ? 0 : 1000)
+// }
+
+// console.log(
+//   '%c REFRESHER ACTIVE ',
+//   'color: green; background: lightgreen; border-radius: 2px'
+// )