@acms-subir/core 0.0.1

package/src/components/Modal.astro

@@ -0,0 +1,65 @@
+---
+// Kit modal on the native <dialog>. Server-rendered `open` (e.g. ?new=1) shows
+// the form without JS; the script upgrades it to a real modal with backdrop.
+interface Props {
+  id: string;
+  title: string;
+  open?: boolean;
+}
+const { id, title, open = false } = Astro.props;
+---
+
+<dialog class="modal" id={id} open={open}>
+  <div class="modal-head">
+    <span>{title}</span>
+    <button class="modal-x" type="button" data-close aria-label="Close">✕</button>
+  </div>
+  <div class="modal-body"><slot /></div>
+</dialog>
+
+<script>
+  const slugifyLite = (s: string) =>
+    s
+      .toLowerCase()
+      .normalize('NFKD')
+      .replace(/[̀-ͯ]/g, '')
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .slice(0, 80);
+
+  for (const d of document.querySelectorAll<HTMLDialogElement>('dialog.modal[open]')) {
+    d.close();
+    d.showModal();
+  }
+
+  document.addEventListener('click', (e) => {
+    const t = e.target as HTMLElement;
+    const opener = t.closest<HTMLElement>('[data-modal]');
+    if (opener) {
+      const dlg = document.getElementById(opener.dataset.modal!);
+      if (dlg instanceof HTMLDialogElement) {
+        dlg.showModal();
+        dlg.querySelector<HTMLInputElement>('input:not([type=hidden])')?.focus();
+      }
+      return;
+    }
+    if (t.closest('[data-close]')) {
+      t.closest('dialog')?.close();
+      return;
+    }
+    // click on the backdrop (the dialog element itself, outside its content)
+    if (t instanceof HTMLDialogElement && t.classList.contains('modal')) t.close();
+  });
+
+  document.addEventListener('input', (e) => {
+    const el = e.target as HTMLInputElement;
+    if (el.dataset.slugDest !== undefined) {
+      el.dataset.touched = '1';
+      return;
+    }
+    if (el.dataset.slugFor) {
+      const dest = document.getElementById(el.dataset.slugFor);
+      if (dest instanceof HTMLInputElement && !dest.dataset.touched) dest.value = slugifyLite(el.value);
+    }
+  });
+</script>

package/src/components/NavManager.tsx

@@ -0,0 +1,168 @@
+import { useRef, useState } from 'react';
+import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { actions } from 'astro:actions';
+import type { NavItem, NavArea } from '../lib/schema';
+
+// Navigation manager: three drag-sortable areas. Header replaces the old
+// auto-list of published pages (which stays as a fallback while the header
+// area is empty); footer renders above the footer text; social feeds the
+// footer social row and share UIs.
+
+type SaveState = 'saved' | 'saving' | 'error';
+
+const AREAS: { key: NavArea; title: string; hint: string }[] = [
+  { key: 'header', title: 'Header', hint: 'Top navigation. While empty, the site falls back to auto-listing published pages.' },
+  { key: 'footer', title: 'Footer', hint: 'Link row above the footer text.' },
+  { key: 'social', title: 'Social', hint: 'Footer social row — also used for share links on posts.' },
+];
+
+function Row({
+  item, onEdit, onArea, onDelete,
+}: {
+  item: NavItem;
+  onEdit: (patch: Partial<Pick<NavItem, 'label' | 'url'>>) => void;
+  onArea: (area: NavArea) => void;
+  onDelete: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id });
+  const external = /^https?:\/\//.test(item.url);
+  return (
+    <div
+      ref={setNodeRef}
+      className="row nm-row"
+      style={{ transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.6 : 1 }}
+    >
+      <button className="lm-handle" type="button" aria-label="Reorder" {...attributes} {...listeners}>⋮⋮</button>
+      <input
+        className="bare nm-label"
+        value={item.label}
+        placeholder="Label"
+        onChange={(e) => onEdit({ label: e.target.value })}
+      />
+      <input
+        className="bare nm-url"
+        value={item.url}
+        placeholder="/path or https://…"
+        onChange={(e) => onEdit({ url: e.target.value })}
+      />
+      {external && <span className="nm-ext" title="External link">↗</span>}
+      <select
+        className="lm-select nm-area reveal"
+        value={item.area}
+        onChange={(e) => onArea(e.target.value as NavArea)}
+      >
+        {AREAS.map((a) => <option key={a.key} value={a.key}>{a.title}</option>)}
+      </select>
+      <button className="btn sm ghost reveal" type="button" onClick={onDelete}>Delete</button>
+    </div>
+  );
+}
+
+export default function NavManager({ items: initial }: { items: NavItem[] }) {
+  const [items, setItems] = useState<NavItem[]>(initial);
+  const [saveState, setSaveState] = useState<SaveState>('saved');
+  const pending = useRef(0);
+  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  async function run(fn: () => Promise<{ error?: unknown }>) {
+    pending.current += 1;
+    setSaveState('saving');
+    const r = await fn();
+    pending.current -= 1;
+    if (r.error) setSaveState('error');
+    else if (pending.current === 0) setSaveState('saved');
+  }
+
+  function debounced(key: string, fn: () => void, ms = 600) {
+    const prev = timers.current.get(key);
+    if (prev) clearTimeout(prev);
+    timers.current.set(key, setTimeout(() => { timers.current.delete(key); fn(); }, ms));
+  }
+
+  function edit(id: string, patch: Partial<Pick<NavItem, 'label' | 'url'>>) {
+    setItems((ls) => ls.map((n) => (n.id === id ? { ...n, ...patch } : n)));
+    debounced(id, () => void run(() => actions.nav.update({ id, ...patch })));
+  }
+
+  function setArea(id: string, area: NavArea) {
+    setItems((ls) => ls.map((n) => (n.id === id ? { ...n, area } : n)));
+    void run(() => actions.nav.update({ id, area }));
+  }
+
+  async function add(area: NavArea) {
+    await run(async () => {
+      const r = await actions.nav.create({ label: 'New link', url: '/', area });
+      if (!r.error) setItems((ls) => [...ls, r.data.item]);
+      return r;
+    });
+  }
+
+  function remove(id: string) {
+    if (!window.confirm('Delete this navigation item?')) return;
+    setItems((ls) => ls.filter((n) => n.id !== id));
+    void run(() => actions.nav.delete({ id }));
+  }
+
+  function onDragEnd(area: NavArea, e: DragEndEvent) {
+    const { active, over } = e;
+    if (!over || active.id === over.id) return;
+    setItems((ls) => {
+      const group = ls.filter((n) => n.area === area);
+      const rest = ls.filter((n) => n.area !== area);
+      const from = group.findIndex((n) => n.id === active.id);
+      const to = group.findIndex((n) => n.id === over.id);
+      const moved = arrayMove(group, from, to);
+      const next = [...rest, ...moved];
+      // persist the full display order: header, footer, social, each in order
+      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
+      void run(() => actions.nav.reorder({ ids: ordered }));
+      return next;
+    });
+  }
+
+  return (
+    <div className="nm">
+      <div className="nm-head">
+        <span className={`lm-savestate ${saveState}`}>
+          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+        </span>
+      </div>
+      {AREAS.map((a) => {
+        const group = items.filter((n) => n.area === a.key);
+        return (
+          <div className="card rowlist nm-group" key={a.key}>
+            <div className="nm-group-head">
+              <div>
+                <p className="card-title">{a.title}</p>
+                <p className="hint">{a.hint}</p>
+              </div>
+              <button className="btn sm" type="button" onClick={() => void add(a.key)}>+ Add item</button>
+            </div>
+            {group.length === 0 && <p className="nm-empty">No items yet.</p>}
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={(e) => onDragEnd(a.key, e)}>
+              <SortableContext items={group.map((n) => n.id)} strategy={verticalListSortingStrategy}>
+                {group.map((n) => (
+                  <Row
+                    key={n.id}
+                    item={n}
+                    onEdit={(patch) => edit(n.id, patch)}
+                    onArea={(area) => setArea(n.id, area)}
+                    onDelete={() => remove(n.id)}
+                  />
+                ))}
+              </SortableContext>
+            </DndContext>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/WidgetRenderer.astro

@@ -0,0 +1,84 @@
+---
+import { parseConfig, type WidgetInstance, type WidgetType } from '../lib/schema';
+import { renderMarkdown } from '../lib/markdown';
+
+interface Props {
+  pageId: string;
+  blocks: WidgetInstance[];
+}
+const { pageId, blocks } = Astro.props;
+
+// Parse each block's config through its zod schema so bad/missing fields
+// degrade to defaults instead of crashing the public page.
+const items = blocks.flatMap((b) => {
+  try {
+    return [{ block: b, config: parseConfig(b.type as WidgetType, b.config) as Record<string, any> }];
+  } catch {
+    return [];
+  }
+});
+---
+
+{items.map(({ block, config }) => {
+  switch (block.type) {
+    case 'hero':
+      return (
+        <section class={`w-hero ${config.align}`}>
+          <h1>{config.heading}</h1>
+          {config.sub && <p class="sub">{config.sub}</p>}
+          {config.ctaLabel && config.ctaHref && (
+            <a class="w-btn primary" href={config.ctaHref}>{config.ctaLabel}</a>
+          )}
+        </section>
+      );
+    case 'text':
+      return <section class="w-text" set:html={renderMarkdown(config.markdown)} />;
+    case 'image':
+      return config.src ? (
+        <figure class="w-image">
+          <img src={config.src} alt={config.alt} loading="lazy" />
+          {config.caption && <figcaption>{config.caption}</figcaption>}
+        </figure>
+      ) : null;
+    case 'button':
+      return config.label ? (
+        <p><a class={`w-btn ${config.variant}`} href={config.href}>{config.label}</a></p>
+      ) : null;
+    case 'spacer':
+      return <div class={`w-spacer ${config.size}`} />;
+    case 'embed':
+      return config.url ? (
+        <div class="w-embed">
+          <iframe src={config.url} height={config.height} loading="lazy" allowfullscreen />
+        </div>
+      ) : null;
+    case 'customHtml':
+      return (
+        <div class="w-custom">
+          <iframe
+            src={`/embed/${pageId}/${block.id}`}
+            height={config.height}
+            sandbox="allow-scripts"
+            loading="lazy"
+            data-embed-id={block.id}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+})}
+
+<script>
+  // Auto-height for sandboxed custom widgets: the embed document posts its
+  // height; match it to the iframe with the same block id.
+  window.addEventListener('message', (e) => {
+    const d = e.data;
+    if (!d || typeof d !== 'object' || !d.acmsEmbedId || typeof d.height !== 'number') return;
+    document.querySelectorAll<HTMLIFrameElement>('iframe[data-embed-id]').forEach((f) => {
+      if (f.dataset.embedId === d.acmsEmbedId && f.contentWindow === e.source) {
+        f.height = String(Math.min(Math.max(d.height, 40), 4000));
+      }
+    });
+  });
+</script>