@rimelight/cms 0.0.2 → 0.0.4

package/src/admin/api/media.ts

@@ -0,0 +1,224 @@
+import type { APIRoute } from "astro"
+import { getR2Bucket, listR2Files, uploadR2File, deleteR2File } from "../../storage/index"
+// @ts-ignore
+import { storageConfig } from "virtual:rimelight-cms/storage"
+// @ts-ignore
+import authAdapter from "virtual:rimelight-cms/auth"
+
+export const prerender = false
+
+export const GET: APIRoute = async ({ request, locals }) => {
+  try {
+    const session = await authAdapter.getSession(request)
+    if (!session) {
+      return new Response(JSON.stringify({ success: false, error: "Unauthorized" }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" }
+      })
+    }
+    const url = new URL(request.url)
+    const prefix = (url.searchParams.get("prefix") ??
+      (storageConfig?.prefix as string | undefined) ??
+      "media/") as string
+    const cursor = (url.searchParams.get("cursor") || undefined) as string | undefined
+    const limit = Number(url.searchParams.get("limit")) || 50
+    const search = url.searchParams.get("search")?.toLowerCase()
+    const typeFilter = url.searchParams.get("type")?.toLowerCase()
+
+    const bindingName = (storageConfig?.binding as string | undefined) ?? "BLOB"
+    const bucket = await getR2Bucket(locals, bindingName)
+
+    if (!bucket) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          error: `Storage binding "${bindingName}" not found in runtime environment. Ensure R2 bucket is configured in wrangler.jsonc or astro.config.`
+        }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    const apiBasePath = `${url.pathname.replace(/\/$/, "")}/file`
+    const result = await listR2Files(bucket, {
+      prefix,
+      cursor,
+      limit,
+      publicUrl: storageConfig?.publicUrl as string | undefined,
+      apiBasePath
+    })
+
+    let files = result.files
+
+    if (search) {
+      files = files.filter(
+        (f) => f.name.toLowerCase().includes(search) || f.key.toLowerCase().includes(search)
+      )
+    }
+
+    if (typeFilter && typeFilter !== "all") {
+      files = files.filter((f) => {
+        if (typeFilter === "images") return f.mimeType.startsWith("image/")
+        if (typeFilter === "videos") return f.mimeType.startsWith("video/")
+        if (typeFilter === "audio") return f.mimeType.startsWith("audio/")
+        if (typeFilter === "documents")
+          return (
+            f.mimeType.includes("pdf") ||
+            f.mimeType.includes("text") ||
+            f.mimeType.includes("document")
+          )
+        return true
+      })
+    }
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        data: {
+          files,
+          truncated: result.truncated,
+          cursor: result.cursor,
+          provider: storageConfig?.provider ?? "r2",
+          binding: bindingName
+        }
+      }),
+      { status: 200, headers: { "Content-Type": "application/json" } }
+    )
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: error.message || "Failed to list media files"
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    )
+  }
+}
+
+export const POST: APIRoute = async ({ request, locals }) => {
+  try {
+    const session = await authAdapter.getSession(request)
+    if (!session) {
+      return new Response(JSON.stringify({ success: false, error: "Unauthorized" }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" }
+      })
+    }
+
+    const bindingName = storageConfig?.binding ?? "BLOB"
+    const bucket = await getR2Bucket(locals, bindingName)
+
+    if (!bucket) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          error: `Storage binding "${bindingName}" not found in runtime environment.`
+        }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    const contentType = request.headers.get("content-type") || ""
+    if (!contentType.includes("multipart/form-data")) {
+      return new Response(
+        JSON.stringify({ success: false, error: "Expected multipart/form-data content type." }),
+        { status: 400, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    const formData = await request.formData()
+    const file = formData.get("file")
+
+    if (!file || !(file instanceof File)) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          error: "No file found in form data payload (field name 'file')."
+        }),
+        { status: 400, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    const url = new URL(request.url)
+    const apiBasePath = `${url.pathname.replace(/\/$/, "")}/file`
+
+    const uploaded = await uploadR2File(bucket, file, {
+      prefix: (storageConfig?.prefix as string | undefined) ?? "media/",
+      publicUrl: storageConfig?.publicUrl as string | undefined,
+      apiBasePath
+    })
+
+    return new Response(
+      JSON.stringify({
+        success: true,
+        data: { file: uploaded }
+      }),
+      { status: 201, headers: { "Content-Type": "application/json" } }
+    )
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: error.message || "Failed to upload file to R2"
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    )
+  }
+}
+
+export const DELETE: APIRoute = async ({ request, locals }) => {
+  try {
+    const session = await authAdapter.getSession(request)
+    if (!session) {
+      return new Response(JSON.stringify({ success: false, error: "Unauthorized" }), {
+        status: 401,
+        headers: { "Content-Type": "application/json" }
+      })
+    }
+
+    const bindingName = storageConfig?.binding ?? "BLOB"
+    const bucket = await getR2Bucket(locals, bindingName)
+
+    if (!bucket) {
+      return new Response(
+        JSON.stringify({
+          success: false,
+          error: `Storage binding "${bindingName}" not found in runtime environment.`
+        }),
+        { status: 500, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    let key = ""
+    const url = new URL(request.url)
+    const queryKey = url.searchParams.get("key")
+
+    if (queryKey) {
+      key = queryKey
+    } else {
+      const body = await request.json().catch(() => ({}))
+      key = body.key
+    }
+
+    if (!key) {
+      return new Response(
+        JSON.stringify({ success: false, error: "Missing required 'key' parameter for deletion." }),
+        { status: 400, headers: { "Content-Type": "application/json" } }
+      )
+    }
+
+    await deleteR2File(bucket, key)
+
+    return new Response(
+      JSON.stringify({ success: true, message: `File "${key}" deleted successfully.` }),
+      { status: 200, headers: { "Content-Type": "application/json" } }
+    )
+  } catch (error: any) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: error.message || "Failed to delete file from R2"
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    )
+  }
+}

package/src/admin/layouts/CMSDashboardLayout.astro

@@ -0,0 +1,191 @@
+---
+import ParentLayout from "virtual:rimelight-cms/parent-layout";
+import authAdapter from "virtual:rimelight-cms/auth";
+import RLADashboardGroup from "@rimelight/ui/components/dashboard-group/RLADashboardGroup.astro";
+import RLADashboardSidebar from "@rimelight/ui/components/dashboard-sidebar/RLADashboardSidebar.astro";
+import RLADashboardNavbar from "@rimelight/ui/components/dashboard-navbar/RLADashboardNavbar.astro";
+import RLADashboardPanel from "@rimelight/ui/components/dashboard-panel/RLADashboardPanel.astro";
+import RLADashboardToolbar from "@rimelight/ui/components/dashboard-toolbar/RLADashboardToolbar.astro";
+import RLADashboardSidebarCollapse from "@rimelight/ui/components/dashboard-sidebar-collapse/RLADashboardSidebarCollapse.astro";
+import RLADashboardSidebarToggle from "@rimelight/ui/components/dashboard-sidebar-toggle/RLADashboardSidebarToggle.astro";
+import RLAIcon from "@rimelight/ui/components/icon/RLAIcon.astro";
+import { getRelativeLocaleUrl } from "@rimelight/i18n";
+import "../../client/styles/cms-editor.css";
+
+const session = await authAdapter.getSession(Astro.request);
+if (!session) {
+  if (authAdapter.handleUnauthorized) {
+    const res = await authAdapter.handleUnauthorized(Astro.request);
+    if (res instanceof Response) return res;
+  }
+  return Astro.redirect(getRelativeLocaleUrl(Astro.currentLocale ?? "en", "/auth/sign-in"));
+}
+
+const currentLocale = Astro.currentLocale ?? "en";
+
+const dashboardItem = {
+  icon: "i-lucide-layout-dashboard",
+  label: "Dashboard",
+  href: getRelativeLocaleUrl(currentLocale, "/cms"),
+  id: "dashboard"
+};
+
+const navigationGroups = [
+  {
+    title: "Collections",
+    items: [
+      { icon: "i-lucide-file-text", label: "Pages", href: getRelativeLocaleUrl(currentLocale, "/cms/pages"), id: "pages" },
+      { icon: "i-lucide-layout-template", label: "Templates", href: getRelativeLocaleUrl(currentLocale, "/cms/templates"), id: "templates" },
+    ]
+  },
+  {
+    title: "Manage",
+    items: [
+      { icon: "i-lucide-image", label: "Assets", href: getRelativeLocaleUrl(currentLocale, "/cms/assets"), id: "assets" },
+      { icon: "i-lucide-folder", label: "Categories", href: getRelativeLocaleUrl(currentLocale, "/cms/categories"), id: "categories" },
+      { icon: "i-lucide-tag", label: "Tags", href: getRelativeLocaleUrl(currentLocale, "/cms/tags"), id: "tags" },
+      { icon: "i-lucide-pen-tool", label: "Bylines", href: getRelativeLocaleUrl(currentLocale, "/cms/bylines"), id: "bylines" },
+      { icon: "i-lucide-git-branch", label: "Versions", href: getRelativeLocaleUrl(currentLocale, "/cms/versions"), id: "versions" },
+    ]
+  },
+  {
+    title: "Admin",
+    items: [
+      { icon: "i-lucide-database", label: "Content Types", href: getRelativeLocaleUrl(currentLocale, "/cms/content-types"), id: "content-types" },
+      { icon: "i-lucide-file-cog", label: "Byline Schema", href: getRelativeLocaleUrl(currentLocale, "/cms/byline-schema"), id: "byline-schema" },
+      { icon: "i-lucide-users", label: "Users", href: getRelativeLocaleUrl(currentLocale, "/cms/users"), id: "users" },
+    ]
+  }
+];
+
+const settingsNavItem = {
+  icon: "i-lucide-settings",
+  label: "Settings",
+  href: getRelativeLocaleUrl(currentLocale, "/cms/settings"),
+  id: "settings"
+};
+
+interface Props {
+  title: string;
+  description?: string;
+  activeSection?: string;
+  toolbarLeft?: any;
+  toolbarRight?: any;
+}
+
+const {
+  title,
+  description = "Content Management System",
+  activeSection = "dashboard",
+  toolbarLeft,
+  toolbarRight
+} = Astro.props;
+---
+
+<ParentLayout title={title} description={description}>
+  <RLADashboardGroup>
+    <RLADashboardSidebar side="left" collapsible>
+      <Fragment slot="header">
+        <div class="h-16 min-h-16 flex items-center gap-3 w-full shrink-0" style="height: 4rem; min-height: 4rem; display: flex; align-items: center; gap: 0.75rem;">
+          <RLAIcon name="i-lucide-shield" class="size-6 text-primary shrink-0 group-data-[collapsed=true]:hidden" data-dashboard-sidebar-logo />
+          <span class="font-semibold text-highlighted truncate flex-1 transition-opacity duration-200 group-data-[collapsed=true]:hidden" data-dashboard-sidebar-label>CMS Admin</span>
+          <RLADashboardSidebarCollapse side="left" class="shrink-0 group-data-[collapsed=true]:mx-auto" />
+        </div>
+      </Fragment>
+
+      <nav class="flex flex-col gap-4 py-2" data-dashboard-nav-container>
+        <!-- Top Dashboard Item -->
+        <a
+          href={dashboardItem.href}
+          data-dashboard-nav
+          data-dashboard-section={dashboardItem.id}
+          class={
+            "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-0 " +
+            (dashboardItem.id === activeSection
+              ? "bg-muted text-highlighted font-semibold"
+              : "text-default hover:text-highlighted hover:bg-muted")
+          }
+        >
+          <RLAIcon name={dashboardItem.icon} class="size-5 shrink-0" />
+          <span class="truncate flex-1 group-data-[collapsed=true]:hidden" data-dashboard-nav-label>{dashboardItem.label}</span>
+        </a>
+
+        <hr class="border-t border-default/60 mx-3 my-1 group-data-[collapsed=true]:hidden" />
+
+        <!-- Categorized Sections -->
+        {navigationGroups.map((group) => (
+          <div class="flex flex-col gap-1">
+            <div class="px-3 pt-2 pb-1 text-xs font-semibold text-muted uppercase tracking-wider group-data-[collapsed=true]:hidden">
+              {group.title}
+            </div>
+            <hr class="border-t border-default/40 mx-3 mb-1.5 group-data-[collapsed=true]:hidden" />
+            {group.items.map((item) => (
+              <a
+                href={item.href}
+                data-dashboard-nav
+                data-dashboard-section={item.id}
+                class={
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-0 " +
+                  (item.id === activeSection
+                    ? "bg-muted text-highlighted font-semibold"
+                    : "text-default hover:text-highlighted hover:bg-muted")
+                }
+              >
+                <RLAIcon name={item.icon} class="size-5 shrink-0" />
+                <span class="truncate flex-1 group-data-[collapsed=true]:hidden" data-dashboard-nav-label>{item.label}</span>
+              </a>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      <Fragment slot="footer">
+        <div class="w-full" data-dashboard-nav-container>
+          <a
+            href={settingsNavItem.href}
+            data-dashboard-nav
+            data-dashboard-section={settingsNavItem.id}
+            class={
+              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors w-full group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-0 " +
+              (settingsNavItem.id === activeSection
+                ? "bg-muted text-highlighted font-semibold"
+                : "text-default hover:text-highlighted hover:bg-muted")
+            }
+          >
+            <RLAIcon name={settingsNavItem.icon} class="size-5 shrink-0" />
+            <span class="truncate flex-1 group-data-[collapsed=true]:hidden" data-dashboard-nav-label>{settingsNavItem.label}</span>
+          </a>
+        </div>
+      </Fragment>
+    </RLADashboardSidebar>
+
+    <RLADashboardPanel>
+      <RLADashboardNavbar slot="header" title={title} icon="i-lucide-file-text" class="h-16 min-h-16">
+        <Fragment slot="left">
+          <div class="h-16 min-h-16 flex items-center gap-3">
+            <RLADashboardSidebarToggle class="flex lg:hidden size-9 rounded-lg items-center justify-center border border-default hover:bg-muted text-toned hover:text-highlighted transition-colors shrink-0" />
+            <RLADashboardSidebarCollapse side="left" class="hidden lg:flex size-9 rounded-lg" />
+            <h1 class="text-lg sm:text-xl font-semibold text-highlighted truncate" data-dashboard-navbar-title>{title}</h1>
+          </div>
+        </Fragment>
+        <Fragment slot="right">
+          <slot name="toolbar-right">{toolbarRight}</slot>
+        </Fragment>
+      </RLADashboardNavbar>
+
+      <div slot="body" class="flex flex-col gap-6">
+        {(toolbarLeft || Astro.slots.has("toolbar-left")) && (
+          <RLADashboardToolbar>
+            <Fragment slot="left">
+              <slot name="toolbar-left">{toolbarLeft || <p class="text-sm text-muted">{description}</p>}</slot>
+            </Fragment>
+          </RLADashboardToolbar>
+        )}
+
+        <div class="section-content flex flex-col gap-6">
+          <slot />
+        </div>
+      </div>
+    </RLADashboardPanel>
+  </RLADashboardGroup>
+</ParentLayout>

package/src/admin/layouts/DefaultParentLayout.astro

@@ -0,0 +1,50 @@
+---
+import UIHead from "@rimelight/ui/components/head/UIHead.astro";
+import RLAMain from "@rimelight/ui/components/main/RLAMain.astro";
+import RLAToaster from "@rimelight/ui/components/toaster/RLAToaster.astro";
+import "virtual:uno.css";
+import "../../client/styles/cms-editor.css";
+
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title = "Rimelight CMS", description = "Content Management System" } = Astro.props;
+---
+
+<!doctype html>
+<html lang={Astro.currentLocale || "en"} class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <UIHead />
+    <slot name="head" />
+  </head>
+  <body class="isolate bg-background text-foreground antialiased selection:bg-primary selection:text-primary-foreground">
+    <RLAMain id="main-content" class="dashboard-viewport-area flex flex-col min-w-0">
+      <slot />
+    </RLAMain>
+    <RLAToaster />
+  </body>
+</html>
+
+<style is:global>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+
+  .dashboard-viewport-area {
+    box-sizing: border-box;
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+    height: 100vh !important;
+    min-height: 100vh !important;
+    max-height: 100vh !important;
+    overflow: hidden;
+    transform: translate(0);
+  }
+</style>