@rigel-cms/rigel 0.1.3-beta.1 → 0.2.0-beta.1

package/src/editor/styles.css

@@ -1,4 +1,7 @@
 .rigel, .rigel *, .rigel *::before, .rigel *::after { box-sizing: border-box; }
+.rigel .rigel-tooltip { position: fixed; pointer-events: auto; inset: auto; margin: 0; padding: 0.375rem 0.625rem; max-width: min(20rem, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: auto; border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--text); color: var(--panel); box-shadow: var(--shadow-md); font: 500 0.75rem/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; overflow-wrap: anywhere; text-align: start; white-space: normal; }
+.rigel .rigel-tooltip::backdrop { background: transparent; pointer-events: none; }
+@media (forced-colors: active) { .rigel .rigel-tooltip { background: Canvas; color: CanvasText; border-color: CanvasText; } }
 .rigel {
   --rigel-50: #EFFBFF;
   --rigel-100: #D9F4FF;
@@ -26,6 +29,9 @@
 
 .rigel.connection-shell { align-items: center; justify-content: center; padding: 1.5rem; min-height: 100dvh; }
 .rigel .connection-card { flex: none; width: 100%; max-width: 560px; margin: 0; padding: 2rem; background: var(--panel); border: 1px solid var(--border); overflow-wrap: anywhere; }
+.rigel .connection-brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.5rem; font-weight: 650; letter-spacing: -0.04em; }
+.rigel .brand-suffix { font-weight: 450; }
+.rigel .connection-brand img { flex-shrink: 0; }
 .rigel .connection-card h1 { margin: 1rem 0; font-size: 1.75rem; line-height: 1.2; }
 .rigel .connection-card p { margin: 1rem 0; }
 .rigel .connection-card :is(button, a.primary) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.625rem 1rem; font: inherit; text-decoration: none; text-align: center; }
@@ -169,6 +175,8 @@
 .rigel .rail-scroll > button:hover { background: var(--surface-raised); color: var(--text); }
 .rigel .sidebar-asset-icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; background-color: currentColor; mask-image: var(--sidebar-icon); mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
 .rigel .rail-scroll > button { gap: 0.625rem; }
+.rigel aside > button.sidebar-publish { gap: 0.625rem; width: calc(100% - 1.5rem); min-height: 44px; margin: 0 0.75rem 0.5rem; padding: 0.625rem; border: 1px solid var(--border-control); color: var(--text); }
+.rigel aside > button.sidebar-publish:disabled { opacity: 0.5; cursor: not-allowed; }
 .rigel aside > button.sidebar-toggle { gap: 0.625rem; width: calc(100% - 1.5rem); margin: 0 0.75rem 0.5rem; padding: 0.625rem; font-size: 0.75rem; }
 @media (min-width: 768px) {
   .rigel.sidebar-collapsed { --sidebar-w: 64px; }
@@ -180,6 +188,7 @@
   .rigel.sidebar-collapsed .user-btn > .user-menu-icon { display: none; }
   .rigel.sidebar-collapsed .rail-scroll > button,
   .rigel.sidebar-collapsed .search-trigger,
+  .rigel.sidebar-collapsed .sidebar-publish,
   .rigel.sidebar-collapsed .sidebar-toggle { justify-content: center; }
   .rigel.sidebar-collapsed .sidebar-heading { height: 1px; font-size: 0; padding: 0; margin: 0.75rem 0.625rem; border-top: 1px solid var(--border-subtle); }
   .rigel.sidebar-collapsed .aside-foot { padding: 0.75rem 0.5rem; }
@@ -359,7 +368,18 @@
 .rigel .preview-heading span, .rigel .site-preview small { color: var(--text-muted); font-size: 0.75rem; }
 .rigel .site-preview p { overflow-wrap: anywhere; font-size: 0.8125rem; }
 .rigel .site-preview .preview-error { color: var(--danger); }
-.rigel .site-preview iframe { flex: 1; width: 100%; min-height: 300px; border: 1px solid var(--border); background: white; }
+.rigel .preview-frame { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; background: var(--panel); }
+.rigel .preview-frame iframe { opacity: 0; visibility: hidden; transition: none; }
+.rigel .preview-frame iframe.revealed { opacity: 1; visibility: visible; transition: opacity 200ms ease-out; }
+.rigel .preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.625rem; color: var(--text); background: var(--panel); font-size: 0.8125rem; }
+.rigel .preview-spinner { width: 1rem; height: 1rem; border: 2px solid var(--border); border-top-color: currentColor; border-radius: 50%; animation: preview-spin 800ms linear infinite; }
+@keyframes preview-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .rigel .preview-spinner { animation: none; }
+  .rigel .preview-frame iframe.revealed { transition: none; }
+}
+.rigel .site-preview .preview-frame { min-height: 300px; border: 1px solid var(--border); }
+.rigel .site-preview iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: white; }
 .rigel .site-preview small { padding-top: 0.75rem; }
 .rigel .preview-retry { align-self: start; }
 @media (max-width: 1050px) {
@@ -959,6 +979,10 @@
   font-size: 0.875rem; font-weight: 600; text-transform: none;
   letter-spacing: 0; color: var(--text); margin: 0 0 0.75rem;
 }
+.rigel .connection-details { margin: 0; }
+.rigel .connection-details dt { margin-top: 1rem; font-size: 0.75rem; font-weight: 600; color: var(--text-2); }
+.rigel .connection-details dd { margin: 0.375rem 0 0; font-size: 0.875rem; overflow-wrap: anywhere; }
+.rigel .connection-details small { display: block; margin-top: 0.125rem; color: var(--text-muted); }
 .rigel .settings-pane fieldset { border: none; padding: 0; margin: 0 0 1rem; }
 .rigel .settings-pane fieldset.accessibility-options { margin-top: 1.5rem; }
 .rigel .accessibility-options label.inline { margin-top: 0; }

package/src/env.d.ts

@@ -17,6 +17,6 @@ declare module "virtual:rigel-content" {
 
 declare module "virtual:rigel-config" {
   import type { RigelConfig } from "@rigel-cms/rigel";
-  const config: Pick<RigelConfig, "copyDir" | "backend" | "demo" | "collections" | "menus" | "mediaDir" | "schema"> & { publicDir?: string; root?: string };
+  const config: Pick<RigelConfig, "copyDir" | "backend" | "demo" | "collections" | "menus" | "mediaDir" | "schema" | "preview"> & { publicDir?: string; root?: string };
   export default config;
 }

package/src/preview.ts

@@ -1,6 +1,7 @@
 import MarkdownIt from "markdown-it";
 import DOMPurify from "dompurify";
 import { pageRoute } from "./schema/paths";
+import { slugify } from "./slugs";
 import { renderArticle } from "./article-render";
 import { safePreviewUrl, previewBaseUrl } from "./preview-urls";
 export { safePreviewUrl } from "./preview-urls";
@@ -20,6 +21,7 @@ export interface PreviewConfig {
 export interface PreviewTarget {
   kind: "page" | "post" | "menu" | "document";
   slug: string;
+  urlSlug?: string;
   collection?: string;
   type?: string;
 }
@@ -30,8 +32,13 @@ export function previewPath(config: PreviewConfig, target: PreviewTarget, isNew
   return typeof path === "string" && /^\/(?!\/)/.test(path) && !/[\\\s?#]/.test(path) && !/%(?:2e|2f|5c)/i.test(path) && !path.split("/").some(part => part === "." || part === "..") && !/^\/rigel(?:\/|$)/.test(path) ? path : null;
 }
 
-export function previewUrl(config: PreviewConfig, target: PreviewTarget, mode: "live" | "draft" = "draft", isNew = false): string | null {
-  const path = previewPath(config, target, mode === "draft" && isNew);
+export function previewUrl(config: PreviewConfig, target: PreviewTarget, mode: "live" | "draft" | "website" = "draft", isNew = false): string | null {
+  if (mode !== "draft" && target.kind !== "page" && target.urlSlug !== undefined) {
+    const slug = slugify(target.urlSlug);
+    if (!slug) return null;
+    target = { ...target, slug };
+  }
+  const path = previewPath(config, target, mode === "draft" && (target.kind === "post" || isNew));
   const base = mode === "live" ? config.liveUrl : config.draftUrl;
   if (!path || base === undefined) return path;
   try { return new URL(path.slice(1), previewBaseUrl(base)).href; } catch { return null; }

package/src/routes/local-documents.ts

@@ -46,7 +46,7 @@ export const GET: APIRoute = async ({ params }) => {
   const target = validateDocumentId(guarded.schema, id);
   if (!target) return new Response("Unknown document", { status: 404 });
   try {
-    const documents = await readDocuments(guarded.schema, guarded.root);
+    const documents = await readDocuments(guarded.schema, guarded.root, config.preview);
     const document = documents.find((entry) => entry.id === id);
     if (!document) return new Response("Unknown document", { status: 404 });
     return Response.json(document);
@@ -66,10 +66,10 @@ const handle: APIRoute = async ({ request, params }) => {
   if (!target) return new Response("Unknown document type or slug", { status: 400 });
   try {
     const data = await readBody(request);
-    const documents = await readDocuments(guarded.schema, guarded.root);
-    const next = { ...data, _id: id, _type: target.type.name, slug: target.slug };
+    const documents = await readDocuments(guarded.schema, guarded.root, config.preview);
+    const next = { ...data, _id: id, _type: target.type.name };
     validateDocument(guarded.schema, target.type.name, target.slug, next, documents);
-    await writeDocument(guarded.schema, guarded.root, target.type.name, target.slug, next, request.method === "POST" ? "create" : "update");
+    await writeDocument(guarded.schema, guarded.root, target.type.name, target.slug, next, request.method === "POST" ? "create" : "update", config.preview);
     return new Response(null, { status: 204 });
   } catch (error) {
     if (error instanceof DocumentStoreError) return new Response(error.message, { status: error.status });

package/src/routes/local-post.ts

@@ -1,5 +1,6 @@
 import type { APIRoute } from "astro";
-import { writeFile, mkdir, rm, readFile, rename } from "node:fs/promises";
+import { writeFile, mkdir, rm, readFile, readdir, rename, link } from "node:fs/promises";
+import { assertUniqueUrlSlugs, normalizeUrlSlug } from "../slugs";
 import { randomUUID } from "node:crypto";
 import path from "node:path";
 
@@ -23,7 +24,14 @@ function safeSlug(slug: string): string | null {
   return /^[a-z0-9][a-z0-9_-]*$/.test(slug) ? slug : null;
 }
 
-export const POST: APIRoute = async ({ request, params }) => {
+let writes: Promise<unknown> = Promise.resolve();
+export const POST: APIRoute = (context) => {
+  const result = writes.then(() => savePost(context));
+  writes = result.catch(() => {});
+  return result;
+};
+
+const savePost: APIRoute = async ({ request, params }) => {
   if (import.meta.env.PROD) {
     return new Response("Local backend is dev-only", { status: 404 });
   }
@@ -45,17 +53,27 @@ export const POST: APIRoute = async ({ request, params }) => {
   try {
     validateBody(body.body);
     const fields = config.collections?.find((collection: CollectionConfig) => collection.name === params.collection)?.fields ?? [];
-    const documents = config.schema && config.root ? await readDocuments(config.schema, fileURLToPath(config.root)) : [];
+    const documents = config.schema && config.root ? await readDocuments(config.schema, fileURLToPath(config.root), config.preview) : [];
     validateCollectionValues(fields, body.frontmatter, documents);
+    if (Object.hasOwn(body.frontmatter, "slug")) body.frontmatter.slug = normalizeUrlSlug(body.frontmatter.slug);
+    const names = await readdir(folder).catch((error: NodeJS.ErrnoException) => { if (error.code === "ENOENT") return []; throw error; });
+    const entries = await Promise.all(names.filter(name => name.endsWith(".json") && name !== `${slug}.json`).map(async name => ({ slug: name.slice(0, -5), values: JSON.parse(await readFile(path.join(folder, name), "utf8")).frontmatter })));
+    assertUniqueUrlSlugs([...entries, { slug, values: body.frontmatter }]);
   } catch (error) {
     return new Response(error instanceof Error ? error.message : "Invalid article", { status: 400 });
   }
   await mkdir(path.dirname(file), { recursive: true });
-  const fm = { ...body.frontmatter, slug };
+  const fm = { ...body.frontmatter };
   const temporary = `${file}.${randomUUID()}.tmp`;
   try {
     await writeFile(temporary, JSON.stringify({ frontmatter: fm, body: body.body }, null, 2) + "\n", { flag: "wx" });
-    await rename(temporary, file);
+    if (request.headers.get("If-None-Match") === "*") {
+      try { await link(temporary, file); }
+      catch (error) {
+        if ((error as NodeJS.ErrnoException).code === "EEXIST") return new Response("A post with that slug already exists. Reload the collection and create the draft again.", { status: 409 });
+        throw error;
+      }
+    } else await rename(temporary, file);
   } finally { await rm(temporary, { force: true }); }
   return new Response(null, { status: 204 });
 };

package/src/schema/paths.ts

@@ -1,4 +1,5 @@
 import { documentDef, isPlainObject, objectDef } from "./validate";
+import { effectiveSlug } from "../slugs";
 import {
   SLUG_PATTERN,
   type ContentDocument,
@@ -128,8 +129,9 @@ export function assertUniqueSlug(documents: ContentDocument[], typeName: string,
   if (legacySlugs.includes(slug)) throw new Error(`The slug "${slug}" is already used by a copy page.`);
 }
 
-export function pageRoute(slug: string, mapping: { url: string; index?: string } | undefined): string | null {
+export function pageRoute(target: string | Pick<ContentDocument, "slug" | "data">, mapping: { url: string; index?: string } | undefined): string | null {
   if (!mapping) return null;
+  const slug = typeof target === "string" ? target : effectiveSlug(target.data, target.slug);
   if (slug === "home" && mapping.index) return mapping.index;
   const path = mapping.url.replaceAll("{slug}", slug);
   return /^\/(?!\/)/.test(path) && !/[\\\s?#]/.test(path) && !path.split("/").includes("..") && !/^\/rigel(?:\/|$)/.test(path) ? path : null;

package/src/schema/store.ts

@@ -4,6 +4,8 @@ import path from "node:path";
 import { constants } from "node:fs";
 import { isPlainObject } from "./validate";
 import { SLUG_PATTERN, type ContentDocument, type Schema } from "./types";
+import { normalizeUrlSlug, validateDocumentSlugs } from "../slugs";
+import type { PreviewConfig } from "../preview";
 
 const MAX_BYTES = 1024 * 1024;
 const FOLDER_PART = /^[a-zA-Z0-9_-][a-zA-Z0-9_. -]*$/;
@@ -68,7 +70,7 @@ async function ensureFolder(root: string, folder: string): Promise<string> {
   return directory;
 }
 
-export async function readDocuments(schema: Schema, root: string): Promise<ContentDocument[]> {
+export async function readDocuments(schema: Schema, root: string, preview?: PreviewConfig): Promise<ContentDocument[]> {
   const documents: ContentDocument[] = [];
   for (const type of schema.documents) {
     let directory: string;
@@ -88,6 +90,8 @@ export async function readDocuments(schema: Schema, root: string): Promise<Conte
       documents.push({ id: `${type.name}:${slug}`, type: type.name, slug, data: data as Record<string, unknown> });
     }
   }
+  try { validateDocumentSlugs(schema, documents, preview); }
+  catch (error) { throw new DocumentStoreError((error as Error).message); }
   return documents;
 }
 
@@ -96,13 +100,21 @@ export async function readDocument(schema: Schema, root: string, typeName: strin
   return documents.find((doc) => doc.type === typeName && doc.slug === slug) ?? null;
 }
 
-export async function writeDocument(
+let writes: Promise<void> = Promise.resolve();
+export function writeDocument(...args: Parameters<typeof writeDocumentFile>): Promise<void> {
+  const result = writes.then(() => writeDocumentFile(...args));
+  writes = result.catch(() => {});
+  return result;
+}
+
+async function writeDocumentFile(
   schema: Schema,
   root: string,
   typeName: string,
   slug: string,
   data: Record<string, unknown>,
   mode: "create" | "update",
+  preview?: PreviewConfig,
 ): Promise<void> {
   const type = schema.documents.find((entry) => entry.name === typeName);
   if (!type) throw new DocumentStoreError(`Unknown document type ${typeName}`, 404);
@@ -118,6 +130,13 @@ export async function writeDocument(
   if (existing && (existing.isSymbolicLink() || !existing.isFile())) throw new DocumentStoreError("Document path is unsafe", 409);
   if (mode === "create" && existing) throw new DocumentStoreError("A document with that slug already exists", 409);
   if (mode === "update" && !existing) throw new DocumentStoreError("No such document", 404);
+  if (Buffer.byteLength(JSON.stringify(data)) > MAX_BYTES) throw new DocumentStoreError("Document exceeds the 1 MiB limit", 413);
+  data = { ...data };
+  try {
+    if (!type.shared && Object.hasOwn(data, "slug")) data.slug = normalizeUrlSlug(data.slug);
+    const documents = await readDocuments(schema, root, preview);
+    validateDocumentSlugs(schema, [...documents.filter(doc => doc.id !== `${typeName}:${slug}`), { id: `${typeName}:${slug}`, type: typeName, slug, data }], preview);
+  } catch (error) { throw new DocumentStoreError((error as Error).message); }
   const serialized = JSON.stringify(data, null, 2) + "\n";
   if (Buffer.byteLength(serialized) > MAX_BYTES) throw new DocumentStoreError("Document exceeds the 1 MiB limit", 413);
   const temporary = path.join(directory, `.${slug}-${randomUUID()}.tmp`);

package/src/slugs.ts

@@ -0,0 +1,46 @@
+import type { ContentDocument, Schema } from "./schema/types";
+import type { PreviewConfig } from "./preview";
+
+export function slugify(input: string, existingSlugs: Iterable<string> = []): string {
+  const base = input.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/-{2,}/g, "-");
+  if (!base) return "";
+  const existing = new Set(existingSlugs);
+  let slug = base;
+  for (let suffix = 2; existing.has(slug); suffix++) slug = `${base}-${suffix}`;
+  return slug;
+}
+
+export function normalizeUrlSlug(value: unknown): string {
+  if (typeof value !== "string" || !slugify(value)) throw new Error("URL slug must contain letters or numbers.");
+  return slugify(value);
+}
+
+export function effectiveSlug(values: Record<string, unknown>, storageSlug: string): string {
+  if (!Object.hasOwn(values, "slug")) return storageSlug;
+  if (typeof values.slug !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(values.slug)) throw new Error("Invalid URL slug; use lowercase letters, numbers and single dashes.");
+  return values.slug;
+}
+
+export function assertUniqueUrlSlugs(entries: { slug: string; values: Record<string, unknown> }[]): void {
+  const seen = new Set<string>();
+  for (const entry of entries) {
+    const slug = effectiveSlug(entry.values, entry.slug);
+    if (seen.has(slug)) throw new Error(`URL slug "${slug}" is already used.`);
+    seen.add(slug);
+  }
+}
+
+export function validateDocumentSlugs(schema: Schema, documents: ContentDocument[], preview?: PreviewConfig): void {
+  const seen = new Set<string>();
+  const pages = documents.filter(doc => schema.documents.some(type => type.name === doc.type && !type.shared));
+  const fixedRoutes = Object.entries(preview?.pages ?? {}).filter(([key]) => !pages.some(doc => doc.slug === key)).map(([, route]) => route);
+  for (const doc of documents) {
+    const type = schema.documents.find(type => type.name === doc.type);
+    if (!type || type.shared) continue;
+    const slug = effectiveSlug(doc.data, doc.slug);
+    const mapping = preview?.documents?.[doc.type];
+    const route = mapping ? slug === "home" && mapping.index ? mapping.index : mapping.url.replaceAll("{slug}", slug) : `/${slug}/`;
+    if (seen.has(route) || fixedRoutes.includes(route)) throw new Error(`URL slug "${slug}" is already used.`);
+    seen.add(route);
+  }
+}

package/src/vite/manifest-plugin.ts

@@ -22,7 +22,8 @@ export function rigelManifestPlugin(cfg: RigelConfig, publicDir?: URL, root?: UR
     ...(cfg.menus ? { menus: { folder: cfg.menus.folder, maxDepth: cfg.menus.maxDepth! } } : {}),
   } : undefined;
 
-  const documentsSrc = documentTypes.length
+  const slugHelpers = `import { assertUniqueUrlSlugs as __rigelAssertUniqueUrlSlugs, validateDocumentSlugs as __rigelValidateDocumentSlugs } from ${JSON.stringify(fileURLToPath(new URL("../slugs.ts", import.meta.url)))};`;
+  const documentsSrc = slugHelpers + (documentTypes.length
     ? `
 ${documentTypes.map((type, index) => `const __rigelDoc${index} = import.meta.glob(${JSON.stringify(`/${type.folder}/*.json`)}, { eager: true, import: "default" });`).join("\n")}
 export const documentTypes = ${JSON.stringify(documentTypes.map((type) => ({ name: type.name, shared: Boolean(type.shared) })))};
@@ -33,9 +34,10 @@ export const documents = Object.entries(__rigelRawDocuments)
     return { id: type + ":" + slug, type, slug, data: { ...data, _id: type + ":" + slug, _type: type } };
   }))
   .sort((a, b) => a.id.localeCompare(b.id));
+__rigelValidateDocumentSlugs(${JSON.stringify(cfg.schema)}, documents, ${JSON.stringify(cfg.preview)});
 const __rigelReservedSlugs = new Set(documents.filter((doc) => !documentTypes.find((type) => type.name === doc.type).shared).map((doc) => doc.slug));
 `
-    : `export const documentTypes = [];\nexport const documents = [];\nconst __rigelReservedSlugs = new Set();\n`;
+    : `export const documentTypes = [];\nexport const documents = [];\nconst __rigelReservedSlugs = new Set();\n`);
 
   const collectionCode = collections
     .map(
@@ -137,6 +139,7 @@ export const menus = {
           menus: cfg.menus,
           collections: cfg.collections ?? [],
           schema: cfg.schema,
+          preview: cfg.preview,
         })};`;
       }
       if (id === "\0" + CONTENT_ID) {
@@ -174,6 +177,7 @@ export const pages = loaded.filter((page) => !__rigelReservedSlugs.has(page.slug
 export const collections = [
 ${collectionCode}
 ];
+for (const collection of collections) __rigelAssertUniqueUrlSlugs(collection.posts.map(post => ({ slug: post.slug, values: post.frontmatter })));
 ${menuCode}
 export default { pages, collections, documents${github ? ', backend: "github", github: ' + JSON.stringify(github) : ""}${cfg.menus ? ", menus" : ""}${cfg.schema ? ", schema: " + JSON.stringify(cfg.schema) : ""}${cfg.preview ? ", preview: " + JSON.stringify(cfg.preview) : ""}${cfg.sidebar ? ", sidebar: " + JSON.stringify(cfg.sidebar) : ""} };
 `;