@xleddyl/nuxt-cms 0.2.3 → 0.4.0

package/README.md

@@ -10,7 +10,7 @@ nuxt-cms is a Nuxt module that leverages the Nitro server to ship a lightweight
 - **Content types in code**: a `cms.config.ts` with `defineCmsConfig()` declares collections, single documents, relations, blocks and translatable fields; database schema, migrations and TypeScript types are generated from it.
 - **Content with blocks**: news, blog and other content types with title, slug, cover, SEO fields and a body built from your own site components, drafts and scheduled publishing; `<CmsBlocks>` renders the body with typed props.
 - **Visual editor**: content items (and any blocks field built from site components) are edited on a live preview of your own site, with drag and drop, a block palette, per-locale and mobile previews, scheduling and publishing.
-- **Admin panel at `/cms`**: entry editing with validation, drafts, media library (S3-compatible storage, a directory on the server's disk, or a local mode backed directly by your `public/` folder), single-admin auth from env credentials.
+- **Admin panel at `/cms`**: entry editing with validation, drafts, media library with one-click download of the original file (S3-compatible storage, a directory on the server's disk, or a local mode backed directly by your `public/` folder), a global search (⌘K / Ctrl K) over labels and every stored value in all locales, single-admin auth from env credentials.
 - **Public GraphQL API**: read-only, typed end-to-end via gql.tada, with filtering, sorting and pagination; fields marked `private` stay out of it.
 - **SQLite, Postgres, libSQL/Turso or Cloudflare D1**: a local file database by default, one config line to switch (including remote SQLite over the network).
 - **Runs on serverless too**: migrations are baked into the server bundle, uploads are presigned straight to your bucket, sessions are sealed cookies. Nothing on the request path needs a local disk or sticky instances.
@@ -56,6 +56,13 @@ build stops with an explicit message if the client for the configured driver is
 
 Then declare your content types in a `cms.config.ts` at the project root with `defineCmsConfig()`.
 
+### Admin branding
+
+`cms.admin.title`, `cms.admin.subtitle` and `cms.admin.logo` replace the name, the tagline and the
+mark in the admin sidebar, mobile bar and login page. `logo` takes a URL or public path, a path to
+an `.svg` file in the project (inlined, so it follows the light and dark theme) or raw `<svg>`
+markup; see [Configuration](docs/configuration.md#admin-branding).
+
 ### Disabling the CMS
 
 Keep the module in `modules[]` at all times and turn it off with the `enabled` option or the

package/dist/module.d.mts

@@ -42,6 +42,9 @@ interface ModuleOptions {
     admin?: {
         email?: string;
         password?: string;
+        title?: string;
+        subtitle?: string;
+        logo?: string;
     };
     database?: ModuleOptionsDatabase;
     media?: ModuleOptionsMedia;

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@xleddyl/nuxt-cms",
   "configKey": "cms",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { spawn } from 'node:child_process';
-import { existsSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
-import { join, isAbsolute, resolve, relative, dirname } from 'node:path';
+import { extname, resolve, isAbsolute, join, relative, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineNuxtModule, createResolver, useLogger, addImports, addTemplate, addServerPlugin, addTypeTemplate, addVitePlugin, addComponentsDir, addRouteMiddleware, extendPages, addServerHandler, resolvePath, addComponent } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
@@ -18,6 +18,91 @@ import { createHash } from 'node:crypto';
 import { readFile } from 'node:fs/promises';
 import { routePathsFromDir, resolvePageRoutes } from '../dist/runtime/shared/page-routes.js';
 
+const DEFAULT_BRAND_TITLE = "nuxt-cms";
+const DEFAULT_BRAND_SUBTITLE = "Content studio";
+const ROOT_ALIASES = ["~~/", "@@/"];
+const SRC_ALIASES = ["~/", "@/"];
+function sanitizeSvg(markup) {
+  let svg = markup.replace(/<\?xml[\s\S]*?\?>/gi, "").replace(/<!DOCTYPE[\s\S]*?>/gi, "").replace(/<!--[\s\S]*?-->/g, "").replace(/<script\b[\s\S]*?<\/script\s*>/gi, "").replace(/<script\b[^>]*\/>/gi, "").replace(/<foreignObject\b[\s\S]*?<\/foreignObject\s*>/gi, "").replace(/<foreignObject\b[^>]*\/>/gi, "").replace(/\s+on[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:xlink:)?href\s*=\s*("\s*javascript:[^"]*"|'\s*javascript:[^']*')/gi, "").trim();
+  const start = svg.search(/<svg\b/i);
+  if (start === -1) throw new Error("no <svg> element found");
+  svg = svg.slice(start);
+  return svg.replace(/<svg\b[^>]*>/i, (tag) => normalizeRootTag(tag));
+}
+function normalizeRootTag(tag) {
+  const attribute = (name) => tag.match(new RegExp(`\\s${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`, "i"));
+  const width = parseFloat(attribute("width")?.[1] ?? attribute("width")?.[2] ?? "");
+  const height = parseFloat(attribute("height")?.[1] ?? attribute("height")?.[2] ?? "");
+  let next = tag.replace(/\s(?:width|height)\s*=\s*(?:"[^"]*"|'[^']*')/gi, "");
+  if (!attribute("viewBox") && width > 0 && height > 0) {
+    next = next.replace(/<svg\b/i, `<svg viewBox="0 0 ${width} ${height}"`);
+  }
+  return next;
+}
+function isPublicReference(logo) {
+  return /^(?:https?:)?\/\//i.test(logo) || /^data:image\//i.test(logo) || logo.startsWith("/");
+}
+function projectFile(logo, paths) {
+  const rooted = ROOT_ALIASES.find((alias) => logo.startsWith(alias));
+  if (rooted) return resolve(paths.rootDir, logo.slice(rooted.length));
+  const sourced = SRC_ALIASES.find((alias) => logo.startsWith(alias));
+  if (sourced) return resolve(paths.srcDir, logo.slice(sourced.length));
+  return isAbsolute(logo) ? logo : resolve(paths.rootDir, logo);
+}
+function resolveBrandLogo(logo, paths) {
+  const value = logo?.trim() ?? "";
+  if (!value) return { logo: { kind: "default" }, file: null };
+  if (/^<svg[\s>]/i.test(value)) {
+    return { logo: { kind: "svg", markup: sanitizeSvgOption(value, "admin.logo") }, file: null };
+  }
+  if (isPublicReference(value)) {
+    return { logo: { kind: "image", src: value }, file: null };
+  }
+  const file = projectFile(value, paths);
+  if (!existsSync(file)) {
+    throw new Error(
+      `[nuxt-cms] admin.logo (${value}) points to a file that does not exist: ${file}. Use a path to an .svg file in the project, a public path such as '/logo.png', a URL, or inline <svg> markup.`
+    );
+  }
+  if (extname(file).toLowerCase() !== ".svg") {
+    throw new Error(
+      `[nuxt-cms] admin.logo (${value}) is not an .svg file. Only SVG files are read from the project: put the image in public/ and use its public path, for example '/${file.split(/[\\/]/).pop()}'.`
+    );
+  }
+  return {
+    logo: { kind: "svg", markup: sanitizeSvgOption(readFileSync(file, "utf8"), value) },
+    file
+  };
+}
+function sanitizeSvgOption(markup, source) {
+  try {
+    return sanitizeSvg(markup);
+  } catch {
+    throw new Error(`[nuxt-cms] admin.logo (${source}) does not contain an <svg> element.`);
+  }
+}
+function resolveBrand(options, paths) {
+  const { logo, file } = resolveBrandLogo(options?.logo, paths);
+  return {
+    brand: {
+      title: options?.title?.trim() || DEFAULT_BRAND_TITLE,
+      subtitle: options?.subtitle === void 0 ? DEFAULT_BRAND_SUBTITLE : options.subtitle.trim(),
+      logo
+    },
+    file
+  };
+}
+function renderBrandFile(brand) {
+  return [
+    `export const cmsBrand: {`,
+    `  title: string`,
+    `  subtitle: string`,
+    `  logo: { kind: 'default' } | { kind: 'image'; src: string } | { kind: 'svg'; markup: string }`,
+    `} = ${JSON.stringify(brand, null, 2)}`,
+    ``
+  ].join("\n");
+}
+
 function componentPascalName(name) {
   return name.split(/[-_\s]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
 }
@@ -1201,7 +1286,10 @@ function resolveModuleOptions(options) {
     configPath: options.configPath ?? "cms.config",
     admin: {
       email: options.admin?.email ?? "",
-      password: options.admin?.password ?? ""
+      password: options.admin?.password ?? "",
+      title: options.admin?.title ?? "",
+      subtitle: options.admin?.subtitle,
+      logo: options.admin?.logo ?? ""
     },
     database: resolveDatabaseOptions(options.database),
     media: resolveMediaOptions(options.media),
@@ -1735,6 +1823,18 @@ const module$1 = defineNuxtModule({
       },
       { nuxt: true, nitro: true }
     );
+    const brandPaths = {
+      rootDir: nuxt.options.rootDir,
+      srcDir: nuxt.options.srcDir ?? nuxt.options.rootDir
+    };
+    const { file: brandFile } = resolveBrand(resolved.admin, brandPaths);
+    if (brandFile) nuxt.options.watch.push(brandFile);
+    const brandTemplate = addTemplate({
+      filename: "cms/brand.ts",
+      write: true,
+      getContents: () => renderBrandFile(resolveBrand(resolved.admin, brandPaths).brand)
+    });
+    nuxt.options.alias["#cms-brand"] = brandTemplate.dst;
     addVitePlugin(tailwindcss());
     addVitePlugin(svgLoader({ defaultImport: "url", svgoConfig: { plugins: ["prefixIds"] } }));
     nuxt.options.css.push(
@@ -1871,6 +1971,11 @@ const module$1 = defineNuxtModule({
       method: "post",
       handler: resolver.resolve("./runtime/server/api/media-usage.post")
     });
+    addServerHandler({
+      route: "/api/cms/admin/media/download",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/media-download.get")
+    });
     if (mediaFilesystemBase) {
       addServerHandler({
         route: "/api/cms/admin/media/upload",
@@ -1882,6 +1987,11 @@ const module$1 = defineNuxtModule({
         handler: resolver.resolve("./runtime/server/routes/media-file")
       });
     }
+    addServerHandler({
+      route: "/api/cms/search",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/search.get")
+    });
     addServerHandler({
       route: "/api/cms/users",
       method: "get",

package/dist/runtime/app/components/cms/BrandMark.vue

@@ -1,5 +1,19 @@
 <template>
-   <span class="cms-brand-mark" :class="{ 'is-lg': size === 'lg' }" aria-hidden="true">
+   <span
+      v-if="cmsBrand.logo.kind === 'svg'"
+      class="cms-brand-logo"
+      :class="{ 'is-lg': size === 'lg' }"
+      aria-hidden="true"
+      v-html="cmsBrand.logo.markup"
+   />
+   <img
+      v-else-if="cmsBrand.logo.kind === 'image'"
+      class="cms-brand-logo"
+      :class="{ 'is-lg': size === 'lg' }"
+      :src="cmsBrand.logo.src"
+      :alt="cmsBrand.title"
+   />
+   <span v-else class="cms-brand-mark" :class="{ 'is-lg': size === 'lg' }" aria-hidden="true">
       <svg viewBox="0 0 16 16" fill="none">
          <path
             d="M4.5 5.5h7M4.5 8h7M4.5 10.5h4"
@@ -12,6 +26,7 @@
 </template>
 
 <script setup>
+import { cmsBrand } from "#cms-brand";
 defineProps({
   size: { type: String, required: false }
 });

package/dist/runtime/app/components/cms/EntryForm.d.vue.ts

@@ -1,4 +1,5 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { CmsSearchFocus } from '../../../shared/search.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
@@ -7,6 +8,7 @@ type __VLS_Props = {
     loading?: boolean;
     formId?: string;
     footer?: boolean;
+    focus?: CmsSearchFocus | null;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

package/dist/runtime/app/components/cms/EntryForm.vue

@@ -1,5 +1,12 @@
 <template>
-   <CmsForm :id="formId" :state="state" :schema="schema" @submit="emit('submit')" @error="onError">
+   <CmsForm
+      :id="formId"
+      ref="form"
+      :state="state"
+      :schema="schema"
+      @submit="emit('submit')"
+      @error="onError"
+   >
       <div v-if="tabList.length > 1" class="cms-tabs" role="tablist">
          <button
             v-for="tab in tabList"
@@ -53,6 +60,8 @@
                         :icon="fieldIcon(fields[key])"
                         :name="key"
                         :required="fields[key].required"
+                        :data-cms-field="key"
+                        :class="{ 'is-search-focus': highlighted === key }"
                      >
                         <template
                            v-if="hasLocaleSwitch(fields[key]) && i18n.locales.length > 1"
@@ -102,8 +111,9 @@ import {
   resolveFormLayout,
   slugSourceValue
 } from "#nuxt-cms";
-import { computed, nextTick, ref, watch } from "#imports";
+import { computed, nextTick, onMounted, ref, watch } from "#imports";
 import { buildEntrySchema } from "../../../shared/validation";
+import { useCmsFieldFocus } from "../../composables/cms-field-focus";
 import { useCmsRuntime } from "../../composables/cms-runtime";
 import { entryFormLayout, useCmsSettingsState } from "../../composables/cms-settings";
 import { fieldIcon } from "../../utils/ui";
@@ -114,7 +124,8 @@ const props = defineProps({
   drafts: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
   formId: { type: String, required: false },
-  footer: { type: Boolean, required: false, default: true }
+  footer: { type: Boolean, required: false, default: true },
+  focus: { type: [Object, null], required: false }
 });
 const state = defineModel({ type: Object, ...{ required: true } });
 const emit = defineEmits(["submit", "error"]);
@@ -194,4 +205,24 @@ const published = computed({
 function togglePublished() {
   published.value = !published.value;
 }
+const form = ref(null);
+const { highlighted, reveal } = useCmsFieldFocus();
+function applyFocus(focus) {
+  if (focus.tab && tabList.value.some((tab2) => tab2.id === focus.tab)) activeTab.value = focus.tab;
+  const key = focus.field;
+  const field = key ? props.fields[key] : void 0;
+  if (!key || !field) return;
+  const tab = tabList.value.length ? fieldTab(field, tabList.value) : void 0;
+  if (tab) activeTab.value = tab;
+  if (focus.locale && hasLocaleSwitch(field) && i18n.locales.includes(focus.locale)) {
+    setLocale(key, focus.locale);
+  }
+  void nextTick(() => {
+    revealField(key);
+    reveal(() => form.value?.$el, key);
+  });
+}
+onMounted(() => {
+  if (props.focus) applyFocus(props.focus);
+});
 </script>

package/dist/runtime/app/components/cms/EntryForm.vue.d.ts

@@ -1,4 +1,5 @@
 import type { CmsEntry, CmsTab } from '#nuxt-cms';
+import type { CmsSearchFocus } from '../../../shared/search.js';
 type __VLS_Props = {
     fields: CmsEntry['fields'];
     tabs?: CmsTab[];
@@ -7,6 +8,7 @@ type __VLS_Props = {
     loading?: boolean;
     formId?: string;
     footer?: boolean;
+    focus?: CmsSearchFocus | null;
 };
 type __VLS_ModelProps = {
     modelValue: Record<string, unknown>;

package/dist/runtime/app/components/cms/MediaDetail.vue

@@ -13,22 +13,31 @@
             <CmsIcon v-else :name="mediaIconFor(item.type)" class="size-12" />
          </div>
 
-         <div v-if="item.url" class="cms-actions">
-            <CmsButton
-               :label="copied ? 'Copied' : 'Copy URL'"
-               :icon="copied ? 'check' : 'clipboard-document'"
-               variant="soft"
-               color="neutral"
-               size="sm"
-               @click="copyUrl"
-            />
+         <div class="cms-actions">
+            <template v-if="item.url">
+               <CmsButton
+                  :label="copied ? 'Copied' : 'Copy URL'"
+                  :icon="copied ? 'check' : 'clipboard-document'"
+                  variant="soft"
+                  color="neutral"
+                  size="sm"
+                  @click="copyUrl"
+               />
+               <a
+                  :href="item.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
+               >
+                  <CmsIcon name="arrow-top-right-on-square" class="size-4 shrink-0" />Open
+               </a>
+            </template>
             <a
-               :href="item.url"
-               target="_blank"
-               rel="noopener"
+               :href="downloadHref"
+               download
                class="cms-btn cms-btn-sm cms-btn-neutral cms-btn-ghost"
             >
-               <CmsIcon name="arrow-top-right-on-square" class="size-4 shrink-0" />Open
+               <CmsIcon name="arrow-down-tray" class="size-4 shrink-0" />Download
             </a>
          </div>
 
@@ -128,6 +137,9 @@ const dirty = computed(() => {
   if (!props.item) return false;
   return (alt.value.trim() || null) !== (props.item.alt ?? null) || !props.readOnly && folder.value !== (props.item.folder ?? null);
 });
+const downloadHref = computed(
+  () => props.item ? `/api/cms/admin/media/download?key=${encodeURIComponent(props.item.key)}` : ""
+);
 const facts = computed(() => {
   const item = props.item;
   if (!item) return [];

package/dist/runtime/app/components/cms/Search.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;