@rimelight/cms 0.0.2 → 0.0.3

package/src/admin/pages/settings.astro

@@ -0,0 +1,203 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLABadge from "@rimelight/ui/components/badge/RLABadge.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { getSiteSettings } from "../../services/site-settings.ts";
+
+export const prerender = false;
+
+let settings: any = {
+  name: "Rimelight",
+  description: "Next-generation game studio & platform",
+  url: "https://rimelight.com",
+  author: "Rimelight Entertainment",
+  email: "contact@rimelight.com",
+  branding: {},
+  seo: {}
+};
+
+if (db) {
+  try {
+    settings = await getSiteSettings(db);
+  } catch (err) {
+    console.warn("Failed to load settings:", err);
+  }
+}
+---
+
+<CMSDashboardLayout title="Settings" description="CMS Settings" activeSection="settings">
+  <Fragment slot="toolbar-right">
+    <button
+      id="save-settings-btn"
+      type="button"
+      class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors shadow-sm cursor-pointer disabled:opacity-50"
+    >
+      <span id="btn-text">Save Settings</span>
+    </button>
+  </Fragment>
+
+  <form id="settings-form" class="max-w-3xl mx-auto space-y-8 pb-12">
+    <!-- General Site Identity -->
+    <div class="bg-elevated/40 border border-default rounded-xl shadow p-6">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h2 class="text-xl font-semibold text-highlighted">Site Identity & Metadata</h2>
+          <p class="text-sm text-muted mt-1">Dynamic database-backed site configuration</p>
+        </div>
+        <RLABadge variant="soft" color="primary" size="sm">Dynamic DB</RLABadge>
+      </div>
+
+      <div class="space-y-4">
+        <div>
+          <label for="setting-name" class="block text-sm font-medium text-highlighted mb-1">Site Name</label>
+          <input
+            id="setting-name"
+            name="name"
+            type="text"
+            value={settings.name}
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          />
+        </div>
+
+        <div>
+          <label for="setting-description" class="block text-sm font-medium text-highlighted mb-1">Site Description</label>
+          <textarea
+            id="setting-description"
+            name="description"
+            rows="3"
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          >{settings.description}</textarea>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label for="setting-url" class="block text-sm font-medium text-highlighted mb-1">Site URL</label>
+            <input
+              id="setting-url"
+              name="url"
+              type="url"
+              value={settings.url}
+              class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+            />
+          </div>
+          <div>
+            <label for="setting-author" class="block text-sm font-medium text-highlighted mb-1">Author / Organization</label>
+            <input
+              id="setting-author"
+              name="author"
+              type="text"
+              value={settings.author}
+              class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="setting-email" class="block text-sm font-medium text-highlighted mb-1">Contact Email</label>
+          <input
+            id="setting-email"
+            name="email"
+            type="email"
+            value={settings.email}
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- SEO Defaults -->
+    <div class="bg-elevated/40 border border-default rounded-xl shadow p-6">
+      <h2 class="text-xl font-semibold mb-6 text-highlighted">SEO & Social Sharing</h2>
+      <div class="space-y-4">
+        <div>
+          <label for="setting-title-template" class="block text-sm font-medium text-highlighted mb-1">Title Template</label>
+          <input
+            id="setting-title-template"
+            name="seo_title_template"
+            type="text"
+            value={settings.seo?.titleTemplate || "%s | " + settings.name}
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          />
+        </div>
+
+        <div>
+          <label for="setting-og-image" class="block text-sm font-medium text-highlighted mb-1">OpenGraph Image Fallback URL</label>
+          <input
+            id="setting-og-image"
+            name="og_image"
+            type="text"
+            value={settings.ogImage || settings.seo?.ogImageFallback || ""}
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          />
+        </div>
+
+        <div>
+          <label for="setting-max-desc" class="block text-sm font-medium text-highlighted mb-1">Max Description Length (chars)</label>
+          <input
+            id="setting-max-desc"
+            name="seo_max_description_length"
+            type="number"
+            value={settings.seo?.maxDescriptionLength || 160}
+            class="w-full px-3 py-2 bg-elevated border border-default rounded-md shadow-sm text-highlighted focus:ring-2 focus:ring-primary/50 text-sm"
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+
+  <script>
+    const saveBtn = document.getElementById("save-settings-btn");
+    const btnText = document.getElementById("btn-text");
+
+    saveBtn?.addEventListener("click", async () => {
+      const name = (document.getElementById("setting-name") as HTMLInputElement)?.value || "";
+      const description = (document.getElementById("setting-description") as HTMLTextAreaElement)?.value || "";
+      const url = (document.getElementById("setting-url") as HTMLInputElement)?.value || "";
+      const author = (document.getElementById("setting-author") as HTMLInputElement)?.value || "";
+      const email = (document.getElementById("setting-email") as HTMLInputElement)?.value || "";
+      const ogImage = (document.getElementById("setting-og-image") as HTMLInputElement)?.value || "";
+
+      const titleTemplate = (document.getElementById("setting-title-template") as HTMLInputElement)?.value || "";
+      const maxDescLength = parseInt((document.getElementById("setting-max-desc") as HTMLInputElement)?.value || "160", 10);
+
+      const payload = {
+        name,
+        description,
+        url,
+        author,
+        email,
+        ogImage,
+        seo: {
+          titleTemplate,
+          ogImageFallback: ogImage,
+          maxDescriptionLength: maxDescLength
+        }
+      };
+
+      if (saveBtn) (saveBtn as HTMLButtonElement).disabled = true;
+      if (btnText) btnText.textContent = "Saving...";
+
+      try {
+        const res = await fetch("/api/cms/settings", {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload)
+        });
+
+        if (!res.ok) {
+          const err = await res.json();
+          alert(err.error || "Failed to save settings");
+        } else {
+          if (btnText) btnText.textContent = "Saved!";
+          setTimeout(() => {
+            if (btnText) btnText.textContent = "Save Settings";
+          }, 2000);
+        }
+      } catch {
+        alert("Failed to save settings");
+      } finally {
+        if (saveBtn) (saveBtn as HTMLButtonElement).disabled = false;
+      }
+    });
+  </script>
+</CMSDashboardLayout>

package/src/admin/pages/tags.astro

@@ -0,0 +1,21 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import { RimelightTaxonomyMasterDetail } from "../../client/components";
+
+export const prerender = false;
+---
+
+<CMSDashboardLayout
+  title="Tags"
+  description="Manage content tags and keywords"
+  activeSection="tags"
+>
+  <div class="w-full">
+    <RimelightTaxonomyMasterDetail
+      client:only="solid"
+      taxonomy="tag"
+      title="Tags"
+      description="Label articles and posts with keywords for easy filtering."
+    />
+  </div>
+</CMSDashboardLayout>

package/src/admin/pages/templates-edit.astro

@@ -0,0 +1,234 @@
+---
+import CMSDashboardLayout from "../layouts/CMSDashboardLayout.astro";
+import RLAButton from "@rimelight/ui/components/button/RLAButton.astro";
+import RLAInput from "@rimelight/ui/components/input/RLAInput.astro";
+import RLATextarea from "@rimelight/ui/components/textarea/RLATextarea.astro";
+import RLASelect from "@rimelight/ui/components/select/RLASelect.astro";
+import { db } from "virtual:rimelight-cms/db";
+import { pageTemplates } from "../../schema/page_templates.ts";
+import { eq } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+const id = Astro.params.id;
+
+let template: any = null;
+if (db && id) {
+  try {
+    const templateResult = await db
+      .select()
+      .from(pageTemplates)
+      .where(eq(pageTemplates.id, id as any))
+      .limit(1);
+    template = templateResult[0] || null;
+  } catch (err) {
+    console.warn("Failed to fetch template:", err);
+  }
+}
+
+if (!template) {
+  return Astro.redirect(getRelativeLocaleUrl(currentLocale, "/cms/templates"));
+}
+
+const defaultRolesList = [
+  { name: "admin", displayName: "Administrator", description: "Full system & CMS access" },
+  { name: "editor", displayName: "Editor", description: "Can create and publish pages" },
+  { name: "author", displayName: "Author", description: "Can create and edit drafts" },
+  { name: "reviewer", displayName: "Reviewer", description: "Can review & approve versions" },
+  { name: "viewer", displayName: "Viewer", description: "Read-only access" }
+];
+
+const roleOptions = defaultRolesList.map((r) => ({
+  label: r.displayName || r.name,
+  value: r.name,
+  description: r.description || ""
+}));
+
+const rolePerms = template.rolePermissions || {
+  whoCanCreate: template.allowedRoles || [],
+  whoCanEdit: [],
+  whoCanReview: template.approvalRules?.requiredRolesForApproval || [],
+  whoCanView: []
+};
+
+const titleVal = typeof template.title === "object" && template.title !== null ? (template.title as any).en || "" : template.title || "";
+const descVal = typeof template.description === "object" && template.description !== null ? (template.description as any).en || "" : template.description || "";
+---
+
+<CMSDashboardLayout title={`Edit Template: ${titleVal}`} description="Edit CMS template" activeSection="templates">
+  <div class="max-w-3xl mx-auto space-y-6">
+    <form id="template-edit-form" class="bg-elevated/40 border border-default p-6 rounded-2xl shadow space-y-6">
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Slug</label>
+        <RLAInput name="slug" value={template.slug} required />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Title</label>
+        <RLAInput name="title" value={titleVal} required />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Description</label>
+        <RLATextarea name="description" rows="3" value={descVal} />
+      </div>
+
+      <div>
+        <label class="block text-sm font-medium text-highlighted mb-2">Page Type</label>
+        <RLASelect
+          name="pageType"
+          placeholder="Select page type..."
+          value={template.pageType}
+          items={[
+            { label: "Blog Post", value: "blog" },
+            { label: "Wiki Page", value: "wiki" },
+            { label: "Documentation", value: "doc" },
+            { label: "Announcement", value: "announcement" }
+          ]}
+          required
+        />
+      </div>
+
+      <div class="border-t border-default pt-6 space-y-4">
+        <h3 class="text-md font-semibold text-highlighted">Role Permissions</h3>
+        <p class="text-xs text-muted mb-4">Define granular user role access for pages instantiated from this template.</p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Create</label>
+            <RLASelect
+              name="whoCanCreate"
+              placeholder="Select creator roles..."
+              multiple={true}
+              value={rolePerms.whoCanCreate || []}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Edit</label>
+            <RLASelect
+              name="whoCanEdit"
+              placeholder="Select editor roles..."
+              multiple={true}
+              value={rolePerms.whoCanEdit || []}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can Review</label>
+            <RLASelect
+              name="whoCanReview"
+              placeholder="Select reviewer roles..."
+              multiple={true}
+              value={rolePerms.whoCanReview || []}
+              items={roleOptions}
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-highlighted mb-1">Who Can View</label>
+            <RLASelect
+              name="whoCanView"
+              placeholder="Select viewer roles..."
+              multiple={true}
+              value={rolePerms.whoCanView || []}
+              items={roleOptions}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="border-t border-default pt-6">
+        <rimelight-template-editor id="template-block-editor"></rimelight-template-editor>
+      </div>
+
+      <div class="border-t border-default pt-6 flex items-center justify-end gap-3">
+        <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates")} variant="outline" color="neutral" size="sm">
+          Cancel
+        </RLAButton>
+        <RLAButton variant="solid" color="primary" size="sm" type="submit">
+          Save Changes
+        </RLAButton>
+      </div>
+    </form>
+  </div>
+
+  <script is:inline define:vars={{ currentLocale, templateId: id, initialBlocks: template.initialBlocks || [] }}>
+    import('@rimelight/cms/client/loader').then(({ defineCustomElements }) => {
+      defineCustomElements();
+      const templateEditor = document.getElementById('template-block-editor');
+      if (templateEditor && typeof templateEditor.setBlocks === 'function') {
+        templateEditor.setBlocks(initialBlocks);
+      }
+      return null;
+    });
+
+    function parseRoles(rawVal) {
+      if (!rawVal) return [];
+      try {
+        const parsed = JSON.parse(rawVal);
+        return Array.isArray(parsed) ? parsed : [rawVal];
+      } catch {
+        return rawVal.split(',').map(r => r.trim()).filter(Boolean);
+      }
+    }
+
+    document.getElementById('template-edit-form')?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const formData = new FormData(e.target);
+      const whoCanCreate = parseRoles(formData.get('whoCanCreate'));
+      const whoCanEdit = parseRoles(formData.get('whoCanEdit'));
+      const whoCanReview = parseRoles(formData.get('whoCanReview'));
+      const whoCanView = parseRoles(formData.get('whoCanView'));
+
+      const templateEditor = document.getElementById('template-block-editor');
+      const updatedBlocks = templateEditor && typeof templateEditor.getBlocks === 'function'
+        ? templateEditor.getBlocks()
+        : [];
+
+      const rolePermissions = {
+        whoCanCreate,
+        whoCanEdit,
+        whoCanReview,
+        whoCanView
+      };
+
+      const data = {
+        slug: formData.get('slug'),
+        title: formData.get('title'),
+        description: formData.get('description'),
+        pageType: formData.get('pageType'),
+        allowedRoles: whoCanCreate,
+        rolePermissions,
+        initialBlocks: updatedBlocks,
+        approvalRules: {
+          allowSelfApproval: true,
+          minApprovals: 1,
+          requiredRolesForApproval: whoCanReview
+        }
+      };
+
+      try {
+        const response = await fetch(`/api/cms/templates/${templateId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data)
+        });
+
+        if (response.ok) {
+          window.location.href = `/${currentLocale}/cms/templates`;
+        } else {
+          const errorData = (await response.json().catch(() => ({})));
+          alert(`Failed to save template: ${errorData.error || 'Unknown error'}`);
+        }
+      } catch {
+        alert('Error saving template: Network error');
+      }
+    });
+  </script>
+</CMSDashboardLayout>

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

@@ -0,0 +1,95 @@
+---
+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 { db } from "virtual:rimelight-cms/db";
+import { pageTemplates } from "../../schema/page_templates.ts";
+import { desc } from "drizzle-orm";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+
+export const prerender = false;
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+let templates: any[] = [];
+if (db) {
+  try {
+    templates = await db
+      .select()
+      .from(pageTemplates)
+      .orderBy(desc(pageTemplates.createdAt));
+  } catch (err) {
+    console.warn("Failed to fetch templates:", err);
+  }
+}
+---
+
+<CMSDashboardLayout title="Templates" description="Manage CMS templates" activeSection="templates">
+  <Fragment slot="toolbar-right">
+    <RLAButton href={getRelativeLocaleUrl(currentLocale, "/cms/templates/new")} variant="solid" color="primary" leadingIcon="i-lucide-plus">
+      Create Template
+    </RLAButton>
+  </Fragment>
+
+  <div class="bg-elevated/40 border border-default rounded-xl overflow-hidden">
+    <table class="w-full text-left text-sm">
+      <thead class="bg-elevated/70 border-b border-default text-xs font-semibold text-muted uppercase tracking-wider">
+        <tr>
+          <th class="px-6 py-3">Name</th>
+          <th class="px-6 py-3">Type</th>
+          <th class="px-6 py-3">Version</th>
+          <th class="px-6 py-3 text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-default/50">
+        {templates.map((template: any) => (
+          <tr class="hover:bg-elevated/50 transition">
+            <td class="px-6 py-4 whitespace-nowrap">
+              <div class="text-sm font-medium text-highlighted">{template.title}</div>
+              <div class="text-xs font-mono text-muted">{template.slug}</div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+              <RLABadge variant="soft" color="primary" size="xs">{template.pageType}</RLABadge>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono text-muted">
+              v{template.version}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-right flex items-center justify-end gap-2">
+              <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/pages/new?templateId=${template.id}`)} variant="ghost" color="primary" size="xs">
+                Create Page
+              </RLAButton>
+              <RLAButton href={getRelativeLocaleUrl(currentLocale, `/cms/templates/${template.id}/edit`)} variant="ghost" color="neutral" size="xs">
+                Edit
+              </RLAButton>
+              <RLAButton variant="ghost" color="error" size="xs" class="delete-template-btn" data-id={template.id}>
+                Delete
+              </RLAButton>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+
+  <script>
+    document.querySelectorAll('.delete-template-btn').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        const id = (btn as HTMLElement).dataset.id;
+        if (!id) return;
+
+        if (!confirm('Are you sure you want to delete this template?')) return;
+
+        try {
+          const res = await fetch(`/api/cms/templates/${id}`, { method: 'DELETE' });
+          if (res.ok) {
+            window.location.reload();
+          } else {
+            alert('Failed to delete template');
+          }
+        } catch {
+          alert('Network error deleting template');
+        }
+      });
+    });
+  </script>
+</CMSDashboardLayout>