@rimelight/cms 0.0.9 → 0.0.10

package/src/admin/pages/pages-index.astro

@@ -1,9 +1,8 @@
 ---
 import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
 import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
-import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
 import RLATable from "@rimelight/ui/components/table/RLATable.astro";
-import type { TableColumn } from "@rimelight/ui/components/table/table.ts";
+import type { TableColumn, TableRow } from "@rimelight/ui/components/table/table.ts";
 import { db } from "virtual:rimelight-cms/db";
 import { pages } from "../../schema/pages.ts";
 import { desc, isNull } from "drizzle-orm";
@@ -13,134 +12,296 @@ export const prerender = false;
 
 const currentLocale = Astro.currentLocale ?? "en";
 
-let pagesList: any[] = [];
+let rawPages: any[] = [];
+
 if (db) {
   try {
-    pagesList = await db
+    rawPages = await db
       .select()
       .from(pages)
       .where(isNull(pages.deletedAt))
-      .orderBy(desc(pages.createdAt));
+      .orderBy(desc(pages.updatedAt), desc(pages.createdAt));
   } catch (err) {
     console.warn("Failed to fetch pages:", err);
   }
 }
 
-const formattedPages = pagesList.map((page) => {
-  const titleVal =
-    typeof page.title === "object" && page.title !== null
-      ? (page.title as Record<string, string>)["en"] || ""
-      : String(page.title || "");
+// Format page data with resilient localized string parsing
+const pagesList = rawPages.map((page) => {
+  let titleStr = "";
+  if (typeof page.title === "object" && page.title !== null) {
+    const titleObj = page.title as Record<string, string>;
+    titleStr = titleObj[currentLocale] || titleObj["en"] || (Object.values(titleObj)[0] as string | undefined) || "";
+  } else {
+    titleStr = String(page.title || "Untitled");
+  }
+
+  let descStr = "";
+  if (typeof page.description === "object" && page.description !== null) {
+    descStr = (page.description as Record<string, string>)[currentLocale] || (page.description as Record<string, string>)["en"] || "";
+  } else if (page.description) {
+    descStr = String(page.description);
+  }
+
+  const isPublished = Boolean(page.publishedVersionId);
+  const type = String(page.type || "page").toLowerCase();
+  
   return {
     id: page.id,
-    title: titleVal,
-    slug: page.slug,
-    type: page.type || "page",
-    status: page.publishedVersionId ? "published" : "draft",
+    slug: page.slug || "",
+    title: titleStr,
+    description: descStr,
+    type,
+    status: isPublished ? "published" : "draft",
+    isPublished,
     publishedVersionId: page.publishedVersionId,
-    createdAt: page.createdAt
+    postedAt: page.postedAt ? new Date(page.postedAt) : null,
+    createdAt: page.createdAt ? new Date(page.createdAt) : new Date(),
+    updatedAt: page.updatedAt ? new Date(page.updatedAt) : (page.createdAt ? new Date(page.createdAt) : new Date())
   };
 });
 
-const columns: TableColumn[] = [
-  { id: "title", accessorKey: "title", header: "Title", enableSorting: true },
-  { id: "slug", accessorKey: "slug", header: "Slug", enableSorting: true },
-  { id: "type", accessorKey: "type", header: "Type", enableSorting: true },
-  { id: "status", accessorKey: "status", header: "Status", enableSorting: true },
-  { id: "actions", header: "Actions", enableSorting: false, meta: { class: { th: "text-right", td: "text-right" } } }
+function formatDate(date: Date): string {
+  try {
+    return new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    }).format(date);
+  } catch {
+    return date.toISOString().slice(0, 10);
+  }
+}
+
+function timeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) return "Just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  return formatDate(date);
+}
+
+function getTypeBadgeColor(type: string): "primary" | "secondary" | "success" | "warning" | "error" | "neutral" {
+  switch (type) {
+    case "blog":
+      return "primary";
+    case "doc":
+    case "documentation":
+      return "secondary";
+    case "legal":
+    case "policy":
+      return "warning";
+    case "wiki":
+      return "success";
+    case "announcement":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+
+function getTypeIcon(type: string): string {
+  switch (type) {
+    case "blog":
+      return "i-lucide-newspaper";
+    case "doc":
+    case "documentation":
+      return "i-lucide-book-open";
+    case "legal":
+    case "policy":
+      return "i-lucide-shield-alert";
+    case "wiki":
+      return "i-lucide-library";
+    case "announcement":
+      return "i-lucide-megaphone";
+    default:
+      return "i-lucide-file-text";
+  }
+}
+
+const pageColumns: TableColumn<any>[] = [
+  {
+    accessorKey: "title",
+    header: "Page & Slug",
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const page = row.original;
+      return `<div class="flex items-start gap-3 py-1">
+        <div class="mt-0.5 size-8 rounded-lg bg-elevated border border-default text-muted flex items-center justify-center shrink-0">
+          <span class="${getTypeIcon(page.type)} size-4"></span>
+        </div>
+        <div class="min-w-0 flex-1">
+          <a href="${getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/edit`)}" class="font-semibold text-highlighted hover:text-primary transition-colors text-sm truncate block" title="${page.title}">
+            ${page.title}
+          </a>
+          <div class="flex items-center gap-2 mt-1">
+            <span class="font-mono text-xs text-muted bg-elevated px-1.5 py-0.5 rounded border border-default/60 truncate max-w-xs">
+              /${page.slug}
+            </span>
+            ${page.isPublished ? `<a href="/${currentLocale}/${page.slug}" target="_blank" rel="noopener noreferrer" class="text-muted hover:text-primary p-0.5 rounded transition cursor-pointer" title="View on site"><span class="i-lucide-external-link size-3.5 inline-block"></span></a>` : ''}
+          </div>
+          ${page.description ? `<p class="text-xs text-muted/80 mt-1 line-clamp-1 max-w-md">${page.description}</p>` : ''}
+        </div>
+      </div>`;
+    }
+  },
+  {
+    accessorKey: "type",
+    header: "Type",
+    size: 130,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const page = row.original;
+      const color = getTypeBadgeColor(page.type);
+      return `<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wider bg-${color}-500/10 text-${color}-500 border border-${color}-500/20">${page.type}</span>`;
+    }
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    size: 130,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const page = row.original;
+      return page.isPublished
+        ? `<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-500 border border-emerald-500/20"><span class="size-1.5 rounded-full bg-emerald-500 animate-pulse"></span><span>Published</span></div>`
+        : `<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-500/10 text-amber-500 border border-amber-500/20"><span class="size-1.5 rounded-full bg-amber-500"></span><span>Draft</span></div>`;
+    }
+  },
+  {
+    accessorKey: "updatedAt",
+    header: "Last Updated",
+    size: 160,
+    cell: ({ row }: { row: TableRow<any> }) => {
+      const page = row.original;
+      return `<div class="text-xs font-medium text-highlighted" title="${formatDate(page.updatedAt)}">${timeAgo(page.updatedAt)}</div><div class="text-[11px] text-muted font-mono mt-0.5">${page.updatedAt.toISOString().slice(0, 10)}</div>`;
+    }
+  },
+  {
+    id: "actions",
+    actions: (row: TableRow<any>) => {
+      const page = row.original;
+      return [
+        {
+          label: "Edit Page",
+          icon: "i-lucide-pencil",
+          to: getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/edit`)
+        },
+        {
+          label: "Live Preview",
+          icon: "i-lucide-eye",
+          to: getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/preview`)
+        },
+        {
+          label: "Version History",
+          icon: "i-lucide-git-compare",
+          to: getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/review`)
+        },
+        ...(page.isPublished ? [
+          {
+            label: "View on Live Site",
+            icon: "i-lucide-external-link",
+            to: `/${currentLocale}/${page.slug}`,
+            target: "_blank"
+          }
+        ] : []),
+        {
+          type: "separator" as const
+        },
+        ...(page.isPublished ? [
+          {
+            label: "Unpublish to Draft",
+            icon: "i-lucide-archive",
+            color: "warning" as const,
+            id: `unpublish-page-${page.id}`
+          }
+        ] : []),
+        {
+          label: "Delete Page",
+          icon: "i-lucide-trash-2",
+          color: "error" as const,
+          id: `delete-page-${page.id}`
+        }
+      ];
+    }
+  }
 ];
 ---
 
-<CMSDashboardLayout title="Pages" description="Manage CMS pages" activeSection="pages">
+<CMSDashboardLayout title="Pages" description="Manage, edit, and publish dynamic site content" activeSection="pages">
   <Fragment slot="toolbar-right">
-    <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/pages/new")} variant="solid" color="success" leadingIcon="i-lucide-plus">
-      Create Page
-    </RLAButton>
+    <div class="flex items-center gap-2">
+      <RLAButton
+        href={getRelativeLocaleUrl(currentLocale, "/cms/templates")}
+        variant="outline"
+        color="neutral"
+        size="sm"
+        leadingIcon="i-lucide-layout-template"
+      >
+        Templates
+      </RLAButton>
+      <RLAButton
+        href={getRelativeLocaleUrl(currentLocale, "/cms/pages/new")}
+        variant="solid"
+        color="primary"
+        size="sm"
+        leadingIcon="i-lucide-plus"
+      >
+        Create Page
+      </RLAButton>
+    </div>
   </Fragment>
 
-  <RLATable
-    columns={columns}
-    data={formattedPages}
-    searchable
-    searchPlaceholder="Search pages..."
-    showColumnsToggle
-    hoverable
-    striped
-    class="w-full"
-  >
-    {formattedPages.map((page) => (
-      <tr class="hover:bg-muted/20 transition-colors" data-slot="tr" data-row-id={page.id}>
-        <td class="p-3.5 text-sm font-medium text-highlighted" data-col-id="title" data-slot="td">
-          {page.title}
-        </td>
-        <td class="p-3.5 text-sm text-muted font-mono text-xs" data-col-id="slug" data-slot="td">
-          {page.slug}
-        </td>
-        <td class="p-3.5" data-col-id="type" data-slot="td">
-          <RLABadge variant="soft" color="blue" size="xs">
-            {page.type}
-          </RLABadge>
-        </td>
-        <td class="p-3.5" data-col-id="status" data-slot="td">
-          {page.status === "published" ? (
-            <RLABadge variant="soft" color="green" size="xs">Published</RLABadge>
-          ) : (
-            <RLABadge variant="soft" color="yellow" size="xs">Draft</RLABadge>
-          )}
-        </td>
-        <td class="p-3.5 text-right whitespace-nowrap" data-col-id="actions" data-slot="td">
-          <div class="flex items-center justify-end gap-2">
-            <RLAButton
-              href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/edit`)}
-              variant="ghost"
-              color="primary"
-              size="xs"
-            >
-              Edit
-            </RLAButton>
-            <RLAButton
-              href={getRelativeLocaleUrl(currentLocale, `/cms/pages/${page.id}/preview`)}
-              variant="ghost"
-              color="neutral"
-              size="xs"
-            >
-              Preview
-            </RLAButton>
-            <RLAButton
-              variant="ghost"
-              color="error"
-              size="xs"
-              class="delete-page-btn"
-              data-page-id={page.id}
-            >
-              Delete
-            </RLAButton>
-          </div>
-        </td>
-      </tr>
-    ))}
-  </RLATable>
+  <div class="flex flex-col gap-4">
+    <RLATable
+      data={pagesList}
+      columns={pageColumns}
+      striped
+      hoverable
+      searchable
+      showColumnsToggle
+      exportable
+      exportFilename="rimelight-pages-export"
+    />
+  </div>
 
   <script>
-    document.querySelectorAll(".delete-page-btn").forEach((btn) => {
-      btn.addEventListener("click", async () => {
-        const pageId = (btn as HTMLElement).dataset["pageId"];
+    document.addEventListener("click", async (e) => {
+      const target = e.target as HTMLElement;
+
+      // Handle unpublish
+      const unpublishItem = target.closest<HTMLElement>("[data-item-id^='unpublish-page-']");
+      if (unpublishItem) {
+        const pageId = unpublishItem.getAttribute("data-item-id")?.replace("unpublish-page-", "") || "";
         if (!pageId) return;
-        if (!confirm("Are you sure you want to delete this page?")) return;
+        if (!confirm("Are you sure you want to unpublish this page?")) return;
+        try {
+          const res = await fetch(`/api/cms/pages/${pageId}/unpublish`, { method: "POST" });
+          if (res.ok) window.location.reload();
+          else alert("Failed to unpublish page");
+        } catch {
+          alert("Network error unpublishing page");
+        }
+        return;
+      }
 
+      // Handle delete
+      const deleteItem = target.closest<HTMLElement>("[data-item-id^='delete-page-']");
+      if (deleteItem) {
+        const pageId = deleteItem.getAttribute("data-item-id")?.replace("delete-page-", "") || "";
+        if (!pageId) return;
+        if (!confirm("Are you sure you want to delete this page? This action cannot be undone.")) return;
         try {
-          const res = await fetch(`/api/cms/pages/${pageId}`, {
-            method: "DELETE"
-          });
-          if (res.ok) {
-            window.location.reload();
-          } else {
-            alert("Failed to delete page");
-          }
+          const res = await fetch(`/api/cms/pages/${pageId}`, { method: "DELETE" });
+          if (res.ok) window.location.reload();
+          else alert("Failed to delete page");
         } catch {
-          alert("Error deleting page");
+          alert("Network error deleting page");
         }
-      });
+      }
     });
   </script>
 </CMSDashboardLayout>

package/src/admin/pages/pages-preview.astro

@@ -18,9 +18,12 @@ if (!id) {
 }
 
 const token = Astro.url.searchParams.get("token");
-const secret = process.env["CMS_PREVIEW_SECRET"] || "rimelight-preview-secret-key";
+const secret = process.env["CMS_PREVIEW_SECRET"] || process.env["AUTH0_SECRET"] || "rimelight-preview-secret-key";
 if (token) {
-  await verifyPreviewToken(id, token, secret);
+  const isTokenValid = await verifyPreviewToken(id, token, secret);
+  if (!isTokenValid) {
+    return new Response("Forbidden: Invalid or expired preview token", { status: 403 });
+  }
 }
 
 let page: any = null;