@omega.js/web 0.1.0

package/core/js/pages/admin/posts/editor/index.js

@@ -0,0 +1,230 @@
+/**
+ * Admin Post Editor Page JavaScript
+ *
+ * One editor, two modes. Create (default): full frontmatter form →
+ * POST /admin/post (the backend downloads/resizes images and commits the
+ * post to the website repo). Edit (?post=<url>): loads the live post via
+ * GET /content/post, then title + body → PUT /admin/post (frontmatter is
+ * preserved server-side). D13: saving dispatches a site build unless the
+ * deploy switch is off.
+ */
+
+// Libraries
+import { FormManager } from '@omega.js/client/modules/form-manager.js';
+import omega from '@omega.js/client';
+import { siteUrl } from '__main_assets__/js/libs/path-prefix.js';
+
+// State
+let formManager = null;
+let editUrl = null;
+let slugTouched = false;
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    await omega.dom().ready();
+
+    omega.auth().listen({ once: true }, async (state) => {
+      if (!state.user) {
+        return;
+      }
+
+      editUrl = new URLSearchParams(window.location.search).get('post');
+
+      initForm();
+
+      if (editUrl) {
+        enterEditMode();
+      } else {
+        initSlugFollow();
+      }
+    });
+
+    return resolve();
+  });
+};
+
+// ============================================
+// Create mode
+// ============================================
+
+// Slug follows the title until it's edited by hand
+function initSlugFollow() {
+  const $title = document.getElementById('editor-title');
+  const $slug = document.getElementById('editor-slug');
+  if (!$title || !$slug) {
+    return;
+  }
+
+  $title.addEventListener('input', () => {
+    if (!slugTouched) {
+      $slug.value = hyphenate($title.value);
+    }
+  });
+
+  $slug.addEventListener('input', () => {
+    slugTouched = $slug.value.trim() !== '';
+  });
+}
+
+function hyphenate(text) {
+  return String(text || '')
+    .toLowerCase()
+    .replace(/['’]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+// ============================================
+// Edit mode
+// ============================================
+
+async function enterEditMode() {
+  const $note = document.getElementById('editor-mode-note');
+  const $submitText = document.getElementById('editor-submit-text');
+  const $formCard = document.getElementById('editor-form-card');
+  const $loading = document.getElementById('editor-loading');
+
+  if ($note) $note.textContent = 'Editing a live post. Title and body are editable, frontmatter is preserved';
+  if ($submitText) $submitText.textContent = 'Save changes';
+
+  // Create-only fields don't apply on edit — hide them and drop their
+  // required flags so HTML5 validation doesn't block the submit
+  document.querySelectorAll('.create-only').forEach(($wrapper) => {
+    $wrapper.classList.add('d-none');
+    $wrapper.querySelectorAll('input, textarea').forEach(($field) => {
+      $field.required = false;
+      $field.disabled = true;
+    });
+  });
+
+  if ($formCard) $formCard.classList.add('d-none');
+  if ($loading) $loading.classList.remove('d-none');
+
+  try {
+    const url = new URL(`${omega.getApiUrl()}/omega/content/post`);
+    url.searchParams.set('url', editUrl);
+
+    const post = await omega.request(url.toString(), {
+      method: 'GET',
+      timeout: 60000,
+      tries: 1,
+      log: true,
+    });
+
+    const $title = document.getElementById('editor-title');
+    const $body = document.getElementById('editor-body');
+    if ($title) $title.value = post?.title || '';
+    if ($body) $body.value = post?.body || '';
+
+    // Show the preserved frontmatter for transparency
+    const $details = document.getElementById('editor-frontmatter-details');
+    const $frontmatter = document.getElementById('editor-frontmatter');
+    if ($details && $frontmatter && post?.frontmatter) {
+      $frontmatter.textContent = post.frontmatter;
+      $details.classList.remove('d-none');
+    }
+
+    if ($loading) $loading.classList.add('d-none');
+    if ($formCard) $formCard.classList.remove('d-none');
+  } catch (error) {
+    console.error('Failed to load post:', error);
+
+    const $error = document.getElementById('editor-load-error');
+    const $message = document.getElementById('editor-load-error-message');
+    if ($loading) $loading.classList.add('d-none');
+    if ($message) $message.textContent = error.message || 'Unknown error';
+    if ($error) $error.classList.remove('d-none');
+  }
+}
+
+// ============================================
+// Submit
+// ============================================
+
+function initForm() {
+  formManager = new FormManager('#post-editor-form', {
+    allowResubmit: true,
+    submittingText: 'Saving...',
+  });
+
+  formManager.on('submit', async ({ data }) => {
+    const post = data?.post || {};
+    const deploy = post.deploy === true;
+
+    const payload = editUrl
+      ? {
+          url: editUrl,
+          title: (post.title || '').trim(),
+          body: post.body || '',
+          deploy: deploy,
+        }
+      : {
+          title: (post.title || '').trim(),
+          url: hyphenate(post.url || post.title),
+          description: (post.description || '').trim(),
+          headerImageURL: (post.headerImageURL || '').trim(),
+          body: post.body || '',
+          categories: splitList(post.categories),
+          tags: splitList(post.tags),
+          deploy: deploy,
+        };
+
+    // Author defaults to the brand server-side — only send a real one
+    if (!editUrl && post.author?.trim()) {
+      payload.author = post.author.trim();
+    }
+
+    try {
+      const response = await omega.request(`/omega/admin/post`, {
+        method: editUrl ? 'PUT' : 'POST',
+        timeout: 190000,
+        tries: 1,
+        log: true,
+        body: payload,
+      });
+
+      showSuccess(response, payload);
+    } catch (error) {
+      console.error('Failed to save post:', error);
+      formManager.showError(error.message || 'Failed to save the post');
+    }
+  });
+}
+
+function splitList(value) {
+  return String(value || '')
+    .split(',')
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+// Swap the form for the success panel
+function showSuccess(response, payload) {
+  const $formCard = document.getElementById('editor-form-card');
+  const $success = document.getElementById('editor-success');
+  const $title = document.getElementById('editor-success-title');
+  const $detail = document.getElementById('editor-success-detail');
+  const $view = document.getElementById('btn-view-post');
+
+  if ($title) {
+    $title.textContent = editUrl ? 'Changes committed' : 'Post committed';
+  }
+
+  if ($detail) {
+    if (response?.deployDispatched === true) {
+      $detail.textContent = 'A site build was dispatched. It goes live when the build finishes.';
+    } else if (payload.deploy === false) {
+      $detail.textContent = 'Deploy skipped. The commit rides the next site build.';
+    } else {
+      $detail.textContent = 'The commit landed, but the build dispatch could not be confirmed. Check the repo\'s Actions.';
+    }
+  }
+
+  if ($view) {
+    $view.href = editUrl || siteUrl(`/blog/${payload.url}`);
+  }
+
+  if ($formCard) $formCard.classList.add('d-none');
+  if ($success) $success.classList.remove('d-none');
+}

package/core/js/pages/admin/posts/index.js

@@ -0,0 +1,237 @@
+/**
+ * Admin Posts Index Page JavaScript
+ *
+ * The CMS list view: reads the site's own JSON feed (/feeds/posts.json,
+ * generated at build time) so it lists exactly what's LIVE — newest first,
+ * instant client-side filter. Create/edit hand off to /admin/posts/editor,
+ * which rides the backend admin/post routes.
+ */
+
+// Libraries
+import { formatTimeAgo } from '__main_assets__/js/libs/admin-helpers.js';
+import omega from '@omega.js/client';
+import { siteUrl } from '__main_assets__/js/libs/path-prefix.js';
+
+// State
+let posts = [];
+let filterText = '';
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    await omega.dom().ready();
+
+    omega.auth().listen({ once: true }, async (state) => {
+      if (!state.user) {
+        return;
+      }
+
+      initControls();
+      loadPosts();
+    });
+
+    return resolve();
+  });
+};
+
+// Wire refresh + filter
+function initControls() {
+  const $refresh = document.getElementById('btn-refresh-posts');
+  if ($refresh) {
+    $refresh.addEventListener('click', () => loadPosts());
+  }
+
+  const $filter = document.getElementById('posts-filter');
+  if ($filter) {
+    $filter.addEventListener('input', () => {
+      filterText = $filter.value.trim().toLowerCase();
+      renderPosts();
+    });
+  }
+}
+
+// Load the site's own JSON feed
+async function loadPosts() {
+  showLoading();
+
+  try {
+    const response = await fetch(siteUrl('/feeds/posts.json'), { cache: 'no-store' });
+    if (!response.ok) {
+      throw new Error(`Feed returned ${response.status}`);
+    }
+
+    const feed = await response.json();
+
+    // Newest first regardless of feed order
+    posts = (feed.items || []).slice().sort((a, b) => new Date(b.date_published) - new Date(a.date_published));
+
+    renderStats();
+
+    if (posts.length === 0) {
+      showEmpty('No posts yet. Write the first one from the editor');
+      return;
+    }
+
+    renderPosts();
+  } catch (error) {
+    console.error('Failed to load posts feed:', error);
+    renderStats();
+    showEmpty(`Failed to load the posts feed: ${error.message || 'Unknown error'}`);
+  }
+}
+
+// Fill the stat cards from the loaded feed
+function renderStats() {
+  const $total = document.getElementById('stat-total-posts');
+  const $latest = document.getElementById('stat-latest-post');
+  const $latestTitle = document.getElementById('stat-latest-title');
+  const $categories = document.getElementById('stat-categories');
+
+  const latest = posts[0];
+  const categories = new Set(posts.flatMap((post) => post.tags || []));
+
+  if ($total) $total.textContent = posts.length.toLocaleString();
+  if ($latest) $latest.textContent = latest ? formatTimeAgo(new Date(latest.date_published).getTime()) : '—';
+  if ($latestTitle) $latestTitle.textContent = latest ? latest.title : '';
+  if ($categories) $categories.textContent = categories.size.toLocaleString();
+}
+
+// Render the posts table (filter-aware)
+function renderPosts() {
+  const $loading = document.getElementById('posts-loading');
+  const $empty = document.getElementById('posts-empty');
+  const $table = document.getElementById('posts-table');
+  const $tbody = document.getElementById('posts-tbody');
+  const $footer = document.getElementById('posts-footer');
+  const $count = document.getElementById('posts-count');
+
+  const shown = posts.filter(matchesFilter);
+
+  if (shown.length === 0) {
+    showEmpty(filterText ? 'No posts match your filter' : 'No posts yet');
+    return;
+  }
+
+  if ($loading) $loading.classList.add('d-none');
+  if ($empty) $empty.classList.add('d-none');
+  if ($table) $table.classList.remove('d-none');
+  if ($footer) $footer.classList.remove('d-none');
+  if ($tbody) $tbody.innerHTML = '';
+
+  shown.forEach((post) => {
+    $tbody.appendChild(renderRow(post));
+  });
+
+  if ($count) {
+    $count.textContent = filterText
+      ? `${shown.length} of ${posts.length} posts match “${filterText}”`
+      : `${posts.length} post${posts.length !== 1 ? 's' : ''} · from the live site feed`;
+  }
+}
+
+// Filter predicate: title, categories, or URL
+function matchesFilter(post) {
+  if (!filterText) {
+    return true;
+  }
+
+  return (post.title || '').toLowerCase().includes(filterText)
+    || (post.url || '').toLowerCase().includes(filterText)
+    || (post.tags || []).some((tag) => String(tag).toLowerCase().includes(filterText));
+}
+
+// Build one post row
+function renderRow(post) {
+  const escape = omega.utilities().escapeHTML;
+  const title = post.title || 'Untitled';
+  const url = post.url || '';
+  const pathname = url ? new URL(url, window.location.origin).pathname : '';
+  const author = post.authors?.[0]?.name || '—';
+  const tags = post.tags || [];
+  const published = post.date_published ? new Date(post.date_published) : null;
+
+  // Categories cell (first 3 + overflow count)
+  const badges = tags.slice(0, 3)
+    .map((tag) => `<span class="omega-chip">${escape(String(tag))}</span>`)
+    .join(' ');
+  const overflow = tags.length > 3 ? ` <span class="text-muted small">+${tags.length - 3}</span>` : '';
+
+  // Published cell
+  const publishedText = published ? published.toLocaleDateString() : '—';
+  const publishedAgo = published
+    ? `<div class="text-muted" style="font-size: 0.7rem;">${escape(formatTimeAgo(published.getTime()))}</div>`
+    : '';
+
+  const editorHref = siteUrl(`/admin/posts/editor?post=${encodeURIComponent(url)}`);
+
+  const $row = document.createElement('tr');
+  $row.innerHTML = `
+    <td>
+      <div class="d-flex align-items-center gap-2">
+        <span class="omega-icon-chip omega-icon-chip--neutral"><i class="fa-solid fa-newspaper fa-sm"></i></span>
+        <div class="min-w-0">
+          <div class="text-truncate fw-semibold" style="max-width: 320px;">${escape(title)}</div>
+          <div class="font-monospace text-muted text-truncate" style="max-width: 320px; font-size: 0.7rem;">${escape(pathname)}</div>
+        </div>
+      </div>
+    </td>
+    <td class="small">${escape(author)}</td>
+    <td>${badges || '<span class="text-muted small">—</span>'}${overflow}</td>
+    <td class="text-muted small">${escape(publishedText)}${publishedAgo}</td>
+    <td>
+      <div class="dropdown">
+        <button class="omega-iconbtn" type="button" data-bs-toggle="dropdown" aria-label="Post actions">
+          <i class="fa-solid fa-ellipsis-vertical fa-sm"></i>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end">
+          <li><a class="dropdown-item small" href="${escape(editorHref)}">
+            <i class="fa-solid fa-pen fa-sm me-2"></i>
+            Edit post
+          </a></li>
+          <li><a class="dropdown-item small" href="${escape(url)}" target="_blank" rel="noopener">
+            <i class="fa-solid fa-arrow-up-right-from-square fa-sm me-2"></i>
+            View live
+          </a></li>
+          <li><a class="dropdown-item small btn-copy-url" href="#">
+            <i class="fa-solid fa-copy fa-sm me-2"></i>
+            Copy URL
+          </a></li>
+        </ul>
+      </div>
+    </td>
+  `;
+
+  $row.querySelector('.btn-copy-url').addEventListener('click', (e) => {
+    e.preventDefault();
+    navigator.clipboard.writeText(url);
+  });
+
+  return $row;
+}
+
+// UI state helpers
+function showLoading() {
+  hideAll();
+  const $loading = document.getElementById('posts-loading');
+  if ($loading) $loading.classList.remove('d-none');
+}
+
+function showEmpty(message) {
+  hideAll();
+  const $empty = document.getElementById('posts-empty');
+  if ($empty) {
+    $empty.classList.remove('d-none');
+    $empty.textContent = message || 'No posts found';
+  }
+}
+
+function hideAll() {
+  ['posts-loading', 'posts-empty'].forEach((id) => {
+    const $el = document.getElementById(id);
+    if ($el) $el.classList.add('d-none');
+  });
+  const $table = document.getElementById('posts-table');
+  const $footer = document.getElementById('posts-footer');
+  if ($table) $table.classList.add('d-none');
+  if ($footer) $footer.classList.add('d-none');
+}