@rimelight/cms 0.0.1

package/README.md

@@ -0,0 +1,19 @@
+# Rimelight Entertainment Workspace
+
+## Structure
+
+### Apps (`/packages`)
+
+- **`rimelight.com`**: The main company website.
+- **`starter.rimelight.com`**: Our standardized starter template for Astro websites.
+
+### Packages (`/packages`)
+
+- **`@rimelight/auth`**: Authentication and authorization utilities for the Rimelight ecosystem.
+- **`@rimelight/cli`**: The command line interface for managing Rimelight projects.
+- **`@rimelight/cms`**: Enterprise content management, block rendering, and wiki engine.
+- **`@rimelight/docs`**: Documentation components and utilities.
+- **`@rimelight/i18n`**: Internationalization and localization tools.
+- **`@rimelight/security`**: Astro security integration (CSP, SRI, and more).
+- **`@rimelight/seo`**: SEO utilities including sitemap, robots, and meta components.
+- **`@rimelight/ui`**: Our component library used in all our web projects.

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@rimelight/cms",
+  "version": "0.0.1",
+  "private": false,
+  "description": "Rimelight Entertainment's Content Management System Package",
+  "homepage": "https://rimelight.com/docs",
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Rimelight Entertainment"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
+  },
+  "files": [
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./schema": "./src/schema/index.ts",
+    "./core/*": "./src/core/*",
+    "./astro/*": "./src/astro/*",
+    "./client/styles/*": "./src/client/styles/*",
+    "./client/components": "./src/client/components/index.ts",
+    "./client/components/*.tsx": "./src/client/components/*.tsx",
+    "./client/components/*.ts": "./src/client/components/*.ts",
+    "./client/components/*": "./src/client/components/*.tsx",
+    "./client/loader": "./src/client/loader.ts",
+    "./client/*": "./src/client/*.ts",
+    "./auth/*": "./src/auth/*",
+    "./cache/*": "./src/cache/*",
+    "./search/*": "./src/search/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check": "pnpm audit --audit-level=moderate && vp check --fix && astro check"
+  },
+  "dependencies": {
+    "@rimelight/i18n": "workspace:*",
+    "@rimelight/ui": "workspace:*",
+    "drizzle-orm": "0.45.2",
+    "solid-js": "1.9.15",
+    "sortablejs": "1.15.7"
+  },
+  "devDependencies": {
+    "@astrojs/check": "0.9.10",
+    "@rimelight/config": "workspace:*",
+    "@types/sortablejs": "1.15.9",
+    "astro": "7.2.2",
+    "better-auth": "1.6.30",
+    "typescript": "6.0.3",
+    "unocss": "66.7.5",
+    "vitest": "4.1.10"
+  },
+  "peerDependencies": {
+    "astro": ">=7.0.0",
+    "better-auth": ">=1.0.0"
+  },
+  "engines": {
+    "node": ">=26.7.0"
+  },
+  "packageManager": "pnpm@11.22.0"
+}

package/src/astro/BlockRenderer.astro

@@ -0,0 +1,111 @@
+---
+import type { BaseBlock } from "@rimelight/cms"
+import ParagraphBlock from "./blocks/ParagraphBlock.astro"
+import CalloutBlock from "./blocks/CalloutBlock.astro"
+import ImageBlock from "./blocks/ImageBlock.astro"
+import CodeBlock from "./blocks/CodeBlock.astro"
+import ScriptBlock from "./blocks/ScriptBlock.astro"
+import SceneBlock from "./blocks/SceneBlock.astro"
+import DialogueBlock from "./blocks/DialogueBlock.astro"
+import SectionBlock from "./blocks/SectionBlock.astro"
+import TableBlock from "./blocks/TableBlock.astro"
+import TabsBlock from "./blocks/TabsBlock.astro"
+import TabItemBlock from "./blocks/TabItemBlock.astro"
+import StepsBlock from "./blocks/StepsBlock.astro"
+import StepItemBlock from "./blocks/StepItemBlock.astro"
+import CardsBlock from "./blocks/CardsBlock.astro"
+import CardBlock from "./blocks/CardBlock.astro"
+import FileTreeBlock from "./blocks/FileTreeBlock.astro"
+import UnorderedListBlock from "./blocks/UnorderedListBlock.astro"
+import OrderedListBlock from "./blocks/OrderedListBlock.astro"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+  sectionDepth?: number
+  index?: number
+}
+
+const { block, locale = "en", sectionDepth = 0, index = 0 } = Astro.props
+---
+
+{
+  block.type === "ParagraphBlock" ? (
+    <ParagraphBlock block={block} locale={locale} />
+  ) : block.type === "CalloutBlock" ? (
+    <CalloutBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </CalloutBlock>
+  ) : block.type === "ImageBlock" ? (
+    <ImageBlock block={block} locale={locale} />
+  ) : block.type === "CodeBlock" ? (
+    <CodeBlock block={block} locale={locale} />
+  ) : block.type === "TableBlock" ? (
+    <TableBlock block={block} locale={locale} />
+  ) : block.type === "TabsBlock" ? (
+    <TabsBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </TabsBlock>
+  ) : block.type === "TabItemBlock" ? (
+    <TabItemBlock block={block} locale={locale} index={index} isFirst={index === 0}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </TabItemBlock>
+  ) : block.type === "StepsBlock" ? (
+    <StepsBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </StepsBlock>
+  ) : block.type === "StepItemBlock" ? (
+    <StepItemBlock block={block} locale={locale} index={index}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </StepItemBlock>
+  ) : block.type === "CardsBlock" ? (
+    <CardsBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </CardsBlock>
+  ) : block.type === "CardBlock" ? (
+    <CardBlock block={block} locale={locale} />
+  ) : block.type === "FileTreeBlock" ? (
+    <FileTreeBlock block={block} locale={locale} />
+  ) : block.type === "UnorderedListBlock" ? (
+    <UnorderedListBlock block={block} locale={locale} />
+  ) : block.type === "OrderedListBlock" ? (
+    <OrderedListBlock block={block} locale={locale} />
+  ) : block.type === "ScriptBlock" ? (
+    <ScriptBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </ScriptBlock>
+  ) : block.type === "SceneBlock" ? (
+    <SceneBlock block={block} locale={locale}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth} index={idx} />
+      ))}
+    </SceneBlock>
+  ) : block.type === "DialogueBlock" ? (
+    <DialogueBlock block={block} locale={locale} />
+  ) : block.type === "SectionBlock" ? (
+    <SectionBlock block={block} locale={locale} sectionDepth={sectionDepth}>
+      {(block.children || block.props?.children)?.map((child: BaseBlock, idx: number) => (
+        <Astro.self block={child} locale={locale} sectionDepth={sectionDepth + 1} index={idx} />
+      ))}
+    </SectionBlock>
+  ) : (
+    <div class="cms-block-fallback p-4 border border-dashed border-gray-700 rounded my-2 text-sm text-gray-400">
+      Unknown Block Type: {block.type}
+    </div>
+  )
+}
+

package/src/astro/PageRenderer.astro

@@ -0,0 +1,23 @@
+---
+import type { BaseBlock } from "../core/types/blocks"
+import type { UserSessionContext } from "../auth/permissions"
+import { filterBlocksForReader } from "../auth/filter-blocks"
+import BlockRenderer from "./BlockRenderer.astro"
+
+interface Props {
+  blocks: BaseBlock[]
+  session?: UserSessionContext
+  locale?: string
+  class?: string
+}
+
+const { blocks, session, locale = "en", class: className = "" } = Astro.props
+
+const sanitizedBlocks = filterBlocksForReader(blocks, session)
+---
+
+<article class={`rimelight-cms-page ${className}`}>
+  {sanitizedBlocks.map((block) => (
+    <BlockRenderer block={block} locale={locale} />
+  ))}
+</article>

package/src/astro/blocks/CalloutBlock.astro

@@ -0,0 +1,78 @@
+---
+import type { BaseBlock, CalloutVariant } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { variant = "info", to, target } = block.props || {}
+
+const variantConfigs: Record<
+  string,
+  {
+    icon: string
+    classes: string
+    label: string
+  }
+> = {
+  info: {
+    icon: "i-lucide-info",
+    classes:
+      "bg-blue-50/50 dark:bg-blue-950/10 border-blue-200 dark:border-blue-900/50 text-blue-800 dark:text-blue-200",
+    label: "Info"
+  },
+  success: {
+    icon: "i-lucide-check-circle",
+    classes:
+      "bg-green-50/50 dark:bg-green-950/10 border-green-200 dark:border-green-900/50 text-green-800 dark:text-green-200",
+    label: "Success"
+  },
+  warning: {
+    icon: "i-lucide-alert-triangle",
+    classes:
+      "bg-yellow-50/50 dark:bg-yellow-950/10 border-yellow-200 dark:border-yellow-900/50 text-yellow-800 dark:text-yellow-200",
+    label: "Warning"
+  },
+  error: {
+    icon: "i-lucide-alert-octagon",
+    classes:
+      "bg-red-50/50 dark:bg-red-950/10 border-red-200 dark:border-red-900/50 text-red-800 dark:text-red-200",
+    label: "Error"
+  },
+  commentary: {
+    icon: "i-lucide-message-square",
+    classes:
+      "bg-purple-50/50 dark:bg-purple-950/10 border-purple-200 dark:border-purple-900/50 text-purple-800 dark:text-purple-200",
+    label: "Commentary"
+  },
+  ideation: {
+    icon: "i-lucide-lightbulb",
+    classes:
+      "bg-amber-50/50 dark:bg-amber-950/10 border-amber-200 dark:border-amber-900/50 text-amber-800 dark:text-amber-200",
+    label: "Ideation"
+  },
+  source: {
+    icon: "i-lucide-code",
+    classes:
+      "bg-indigo-50/50 dark:bg-indigo-950/10 border-indigo-200 dark:border-indigo-900/50 text-indigo-800 dark:text-indigo-200",
+    label: "Source"
+  }
+}
+
+const config = (variantConfigs[variant as CalloutVariant] || variantConfigs.info)!
+const Tag = to ? "a" : "div"
+---
+
+<Tag
+  href={to}
+  target={target}
+  class={`cms-callout border rounded-xl p-4 my-4 flex items-start gap-3 text-sm no-underline ${config.classes}`}
+  data-block-id={block.id}
+>
+  <span class={`${config.icon} size-5 shrink-0 mt-0.5`} aria-hidden="true" />
+  <div class="flex-1 min-w-0 text-sm">
+    <slot />
+  </div>
+</Tag>

package/src/astro/blocks/CardBlock.astro

@@ -0,0 +1,43 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { title = "", description = "", icon = "i-lucide-book-open", href, badge } = block.props || {}
+const Tag = href ? "a" : "div"
+---
+
+<Tag
+  href={href}
+  class="cms-card group relative block p-5 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50 hover:border-primary-500/50 hover:shadow-md transition-all text-decoration-none no-underline"
+  data-block-id={block.id}
+>
+  <div class="flex items-start justify-between gap-2">
+    <div class="flex items-center gap-3">
+      {icon && (
+        <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 group-hover:bg-primary-50 dark:group-hover:bg-primary-950/50 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+          <span class={`${icon} size-5`} aria-hidden="true" />
+        </div>
+      )}
+      {title && (
+        <h4 class="text-base font-semibold text-neutral-900 dark:text-white m-0 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+          {title}
+        </h4>
+      )}
+    </div>
+    {badge && (
+      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-700 dark:text-neutral-300">
+        {badge}
+      </span>
+    )}
+  </div>
+  {description && (
+    <p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400 m-0">
+      {description}
+    </p>
+  )}
+</Tag>

package/src/astro/blocks/CardsBlock.astro

@@ -0,0 +1,24 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { columns = 2 } = block.props || {}
+
+const gridColsClass =
+  columns === 1
+    ? "grid-cols-1"
+    : columns === 3
+      ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+      : columns === 4
+        ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+        : "grid-cols-1 sm:grid-cols-2"
+---
+
+<div class={`cms-cards my-6 grid gap-4 ${gridColsClass}`} data-block-id={block.id}>
+  <slot />
+</div>

package/src/astro/blocks/CodeBlock.astro

@@ -0,0 +1,16 @@
+---
+import type { BaseBlock } from "@rimelight/cms"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { code = "", language = "text" } = block.props
+---
+
+<div class="cms-code my-4 rounded-lg bg-gray-950 p-4 font-mono text-sm border border-gray-800 overflow-x-auto" data-block-id={block.id}>
+  <div class="text-xs text-gray-500 uppercase mb-2 select-none">{language}</div>
+  <pre class="m-0"><code>{code}</code></pre>
+</div>

package/src/astro/blocks/DialogueBlock.astro

@@ -0,0 +1,23 @@
+---
+import type { BaseBlock } from "@rimelight/cms"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { character, parenthetical, line } = block.props
+---
+
+<div class="my-3 mx-8 max-w-md">
+  <div class="text-sm font-bold text-center text-pink-800 dark:text-pink-200">
+    {character}
+  </div>
+  {parenthetical && (
+    <div class="text-xs italic text-center text-gray-600 dark:text-gray-400 mt-0.5">
+      ({parenthetical})
+    </div>
+  )}
+  <div class="text-sm text-center text-gray-700 dark:text-gray-300 mt-1">{line}</div>
+</div>

package/src/astro/blocks/FileTreeBlock.astro

@@ -0,0 +1,45 @@
+---
+import type { BaseBlock, FileTreeNode } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { tree = [] } = block.props || {}
+---
+
+<div class="cms-file-tree my-6 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/30 p-4 font-mono text-sm" data-block-id={block.id}>
+  <div class="cms-file-tree-root space-y-1">
+    {tree.map(function renderNode(node: FileTreeNode) {
+      return (
+        <div class="cms-tree-item">
+          <div class="flex items-center gap-2 py-0.5 text-neutral-800 dark:text-neutral-200">
+            <span
+              class={`${
+                node.isDir
+                  ? "i-lucide-folder text-amber-500"
+                  : "i-lucide-file-text text-neutral-400 dark:text-neutral-500"
+              } size-4 shrink-0`}
+              aria-hidden="true"
+            />
+            <span class={`font-medium ${node.isDir ? "text-neutral-900 dark:text-neutral-100" : ""}`}>
+              {node.name}
+            </span>
+            {node.comment && (
+              <span class="text-xs text-neutral-500 dark:text-neutral-400 italic font-sans ml-2">
+                — {node.comment}
+              </span>
+            )}
+          </div>
+          {node.children && node.children.length > 0 && (
+            <div class="pl-4 ml-2 border-l border-neutral-200 dark:border-neutral-800 space-y-1">
+              {node.children.map(renderNode)}
+            </div>
+          )}
+        </div>
+      )
+    })}
+  </div>
+</div>

package/src/astro/blocks/ImageBlock.astro

@@ -0,0 +1,17 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { src = "", url = "", alt = "Image", caption = "" } = block.props || {}
+const imageSrc = src || url
+---
+
+<figure class="cms-image mx-auto my-6 flex flex-col items-center max-w-full" data-block-id={block.id}>
+  <img src={imageSrc} alt={alt || "Image"} class="h-auto max-w-full rounded-xl object-cover border border-neutral-200 dark:border-neutral-800 shadow-sm" />
+  {caption && <figcaption class="mt-2 text-center text-xs text-neutral-500 dark:text-neutral-400 italic">{caption}</figcaption>}
+</figure>

package/src/astro/blocks/OrderedListBlock.astro

@@ -0,0 +1,55 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+import type { InlineNode } from "../../core/types/inline"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const items = block.props?.items || block.children || []
+
+function escapeHtml(str: string): string {
+  return (str || "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+function renderNodesToHtml(nodes: InlineNode[]): string {
+  if (!Array.isArray(nodes)) return ""
+  return nodes
+    .map((node) => {
+      if (!node) return ""
+      if (node.type === "text") {
+        let t = escapeHtml(node.text || "")
+        if (node.marks && Array.isArray(node.marks)) {
+          if (node.marks.includes("bold")) t = `<strong>${t}</strong>`
+          if (node.marks.includes("italic")) t = `<em>${t}</em>`
+          if (node.marks.includes("underline")) t = `<u>${t}</u>`
+          if (node.marks.includes("strikethrough")) t = `<s>${t}</s>`
+          if (node.marks.includes("code")) {
+            t = `<code class="bg-neutral-800 text-neutral-200 px-1.5 py-0.5 rounded text-sm font-mono">${t}</code>`
+          }
+        }
+        return t
+      }
+      if (node.type === "link") {
+        const inner = node.children ? renderNodesToHtml(node.children) : escapeHtml((node as any).text || "")
+        const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
+        const href = escapeHtml(node.url || "#")
+        return `<a href="${href}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+      }
+      return ""
+    })
+    .join("")
+}
+---
+
+<ol class="cms-ordered-list list-decimal list-inside space-y-2 my-4 text-base text-neutral-800 dark:text-neutral-200" data-block-id={block.id}>
+  {items.map((item: BaseBlock) => (
+    <li set:html={renderNodesToHtml(item.props?.content || [])} />
+  ))}
+</ol>

package/src/astro/blocks/ParagraphBlock.astro

@@ -0,0 +1,65 @@
+---
+import type { BaseBlock } from "../../core/types/blocks"
+import type { InlineNode } from "../../core/types/inline"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block, locale = "en" } = Astro.props
+const rawText = block.props?.text
+
+function escapeHtml(str: string): string {
+  return (str || "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+}
+
+function renderNodesToHtml(nodes: InlineNode[]): string {
+  if (!Array.isArray(nodes)) return ""
+  return nodes
+    .map((node) => {
+      if (!node) return ""
+      if (node.type === "text") {
+        let t = escapeHtml(node.text || "")
+        if (node.marks && Array.isArray(node.marks)) {
+          if (node.marks.includes("bold")) t = `<strong>${t}</strong>`
+          if (node.marks.includes("italic")) t = `<em>${t}</em>`
+          if (node.marks.includes("underline")) t = `<u>${t}</u>`
+          if (node.marks.includes("strikethrough")) t = `<s>${t}</s>`
+          if (node.marks.includes("code")) {
+            t = `<code class="bg-neutral-800 text-neutral-200 px-1.5 py-0.5 rounded text-sm font-mono">${t}</code>`
+          }
+        }
+        return t
+      }
+      if (node.type === "link") {
+        const inner = node.children ? renderNodesToHtml(node.children) : escapeHtml((node as any).text || "")
+        const target = node.openInNewTab ? ' target="_blank" rel="noopener noreferrer"' : ""
+        const href = escapeHtml(node.url || "#")
+        return `<a href="${href}"${target} class="text-blue-500 hover:text-blue-400 underline underline-offset-2">${inner}</a>`
+      }
+      if (node.type === "page_mention") {
+        const title = escapeHtml(node.displayTitle || node.pageSlug || node.pageId || "Page")
+        const href = `/${escapeHtml(node.pageSlug || node.pageId)}`
+        return `<a href="${href}" class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 text-sm font-medium no-underline"><span class="i-lucide-file-text size-3.5"></span>${title}</a>`
+      }
+      return ""
+    })
+    .join("")
+}
+
+let htmlContent = ""
+if (Array.isArray(rawText)) {
+  htmlContent = renderNodesToHtml(rawText)
+} else if (typeof rawText === "object" && rawText !== null) {
+  htmlContent = escapeHtml(rawText[locale] || rawText.en || "")
+} else if (typeof rawText === "string") {
+  htmlContent = escapeHtml(rawText)
+}
+---
+
+<p class="cms-paragraph text-base leading-relaxed text-neutral-800 dark:text-neutral-200 my-4 whitespace-pre-wrap break-words" data-block-id={block.id} set:html={htmlContent} />

package/src/astro/blocks/SceneBlock.astro

@@ -0,0 +1,65 @@
+---
+import type { BaseBlock, TimeOfDay, Setting, Transition } from "@rimelight/cms"
+
+interface Props {
+  block: BaseBlock
+  locale?: string
+}
+
+const { block } = Astro.props
+const { location, timeOfDay, setting, transition, description } = block.props
+
+const timeOfDayLabels: Record<TimeOfDay, string> = {
+  MORNING: "Morning",
+  NOON: "Noon",
+  AFTERNOON: "Afternoon",
+  EVENING: "Evening",
+  NIGHT: "Night",
+  OTHER: "Other"
+}
+
+const settingLabels: Record<Setting, string> = { 
+  INTERIOR: "INT.", 
+  EXTERIOR: "EXT.", 
+  OTHER: "Other" 
+}
+
+const transitionLabels: Record<Transition, string> = {
+  CUT_TO: "CUT TO",
+  CUT_BACK_TO: "CUT BACK TO",
+  FADE_TO: "FADE TO",
+  NONE: ""
+}
+
+const settingLabel = settingLabels[setting as Setting] || "Other"
+const todLabel = timeOfDayLabels[timeOfDay as TimeOfDay] || "Other"
+const transitionLabel = transitionLabels[transition as Transition] || ""
+
+const headingParts = []
+if (settingLabel && settingLabel !== "Other") headingParts.push(settingLabel)
+if (location) headingParts.push(location)
+if (todLabel && todLabel !== "Other") headingParts.push(`- ${todLabel}`)
+---
+
+<div class="my-4 p-3 border-l-4 border-indigo-400 bg-indigo-50/20 dark:bg-indigo-950/10 rounded-r-lg">
+  <div class="flex flex-wrap items-center gap-2 text-sm font-semibold text-indigo-800 dark:text-indigo-200 mb-2">
+    {headingParts.map((part) => (
+      <span>{part}</span>
+    ))}
+    {transitionLabel && (
+      <span class="ml-auto text-[10px] italic text-gray-600 dark:text-gray-400">
+        {transitionLabel}
+      </span>
+    )}
+  </div>
+  {description && (
+    <p class="text-sm text-gray-700 dark:text-gray-300 mb-2">
+      {description}
+    </p>
+  )}
+  {((block.children && block.children.length > 0) || (block.props?.children && block.props.children.length > 0)) && (
+    <div class="mt-3">
+      <slot />
+    </div>
+  )}
+</div>