feat: add slugRegex config option for collections (#538)

Author: stevenle

.changeset/flat-zoos-do.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: add slugRegex config option for collections (#538)

packages/root-cms/core/app.tsx

@@ -154,6 +154,7 @@ function serializeCollection(collection: Collection): Partial<Collection> {
     url: collection.url,
     previewUrl: collection.previewUrl,
     preview: collection.preview,
+    slugRegex: collection.slugRegex,
   };
 }
 

packages/root-cms/core/schema.ts

@@ -288,6 +288,11 @@ export type Collection = Schema & {
       src: string;
     };
   };
+  /**
+   * Regular expression used to validate document slugs. Should be provided as a
+   * string so it can be serialized to the CMS UI.
+   */
+  slugRegex?: string;
 };
 
 export function defineCollection(

packages/root-cms/core/tsconfig.json

@@ -30,5 +30,6 @@
     "**/*.ts",
     "*.tsx",
     "**/*.tsx",
+    "../shared/*.ts"
   ]
 }

packages/root-cms/shared/slug.test.ts

@@ -0,0 +1,40 @@
+import {describe, it, expect} from 'vitest';
+import {isSlugValid, normalizeSlug} from './slug.js';
+
+describe('isSlugValid', () => {
+  it('validates good slugs', () => {
+    expect(isSlugValid('1')).toBe(true);
+    expect(isSlugValid('a')).toBe(true);
+    expect(isSlugValid('foo')).toBe(true);
+    expect(isSlugValid('foo-bar')).toBe(true);
+    expect(isSlugValid('foo--bar')).toBe(true);
+    expect(isSlugValid('foo-bar-123')).toBe(true);
+    expect(isSlugValid('foo--bar--123')).toBe(true);
+    expect(isSlugValid('foo_bar')).toBe(true);
+    expect(isSlugValid('foo_bar-123')).toBe(true);
+    expect(isSlugValid('_foo_bar-123')).toBe(true);
+  });
+
+  it('invalidates bad slugs', () => {
+    expect(isSlugValid('Foo')).toBe(false);
+    expect(isSlugValid('-asdf-')).toBe(false);
+    expect(isSlugValid('-a!!')).toBe(false);
+    expect(isSlugValid('!!a')).toBe(false);
+    expect(isSlugValid('/foo')).toBe(false);
+    expect(isSlugValid('--foo--bar')).toBe(false);
+  });
+});
+
+describe('normalizeSlug', () => {
+  it('converts / to --', () => {
+    expect(normalizeSlug('foo')).toEqual('foo');
+    expect(normalizeSlug('foo/bar')).toEqual('foo--bar');
+    expect(normalizeSlug('foo/bar/baz')).toEqual('foo--bar--baz');
+  });
+
+  it('removes whitespace', () => {
+    expect(normalizeSlug('  foo  ')).toEqual('foo');
+    expect(normalizeSlug('  foo/bar  ')).toEqual('foo--bar');
+    expect(normalizeSlug('  foo/bar/baz  ')).toEqual('foo--bar--baz');
+  });
+});

packages/root-cms/ui/utils/slug.ts renamed to packages/root-cms/shared/slug.ts

@@ -1,5 +1,11 @@
-export function isSlugValid(slug: string): boolean {
-  return Boolean(slug && slug.match(/^[a-z0-9]+(?:--?[a-z0-9]+)*$/));
+const DEFAULT_SLUG_PATTERN = /^[a-z0-9_]+(?:--?[a-z0-9_]+)*$/;
+
+export function isSlugValid(slug: string, pattern?: string | RegExp): boolean {
+  if (!pattern) {
+    pattern = DEFAULT_SLUG_PATTERN;
+  }
+  const re = typeof pattern === 'string' ? new RegExp(pattern) : pattern;
+  return Boolean(slug && re.test(slug));
 }
 
 /**
@@ -12,14 +18,12 @@ export function isSlugValid(slug: string): boolean {
  * Transformations include:
  *   Remove leading and trailing space
  *   Remove leading and trailing slash
- *   Lower case
  *   Replace '/' with '--', e.g. 'foo/bar' -> 'foo--bar'
  */
 export function normalizeSlug(slug: string): string {
   return slug
     .replace(/^[\s/]*/g, '')
     .replace(/[\s/]*$/g, '')
     .replace(/^\/+|\/+$/g, '')
-    .toLowerCase()
     .replaceAll('/', '--');
 }

packages/root-cms/ui/components/CopyDocModal/CopyDocModal.tsx

@@ -3,9 +3,9 @@ import {ContextModalProps, useModals} from '@mantine/modals';
 import {showNotification} from '@mantine/notifications';
 import {useState} from 'preact/hooks';
 import {route} from 'preact-router';
+import {isSlugValid, normalizeSlug} from '../../../shared/slug.js';
 import {useModalTheme} from '../../hooks/useModalTheme.js';
 import {cmsCopyDoc} from '../../utils/doc.js';
-import {isSlugValid, normalizeSlug} from '../../utils/slug.js';
 import {SlugInput} from '../SlugInput/SlugInput.js';
 import {Text} from '../Text/Text.js';
 import './CopyDocModal.css';
@@ -52,7 +52,8 @@ export function CopyDocModal(modalProps: ContextModalProps<CopyDocModalProps>) {
       return;
     }
     const cleanSlug = normalizeSlug(toSlug);
-    if (!isSlugValid(cleanSlug)) {
+    const slugRegex = window.__ROOT_CTX.collections[toCollectionId]?.slugRegex;
+    if (!isSlugValid(cleanSlug, slugRegex)) {
       setError('Please enter a valid slug (e.g. "foo-bar-123").');
       setLoading(false);
       return;

packages/root-cms/ui/components/DataSourceForm/DataSourceForm.tsx

@@ -8,6 +8,7 @@ import {
 import {showNotification} from '@mantine/notifications';
 import {useEffect, useRef, useState} from 'preact/hooks';
 import {route} from 'preact-router';
+import {isSlugValid} from '../../../shared/slug.js';
 import {useGapiClient} from '../../hooks/useGapiClient.js';
 import {
   DataSource,
@@ -20,7 +21,6 @@ import {
 } from '../../utils/data-source.js';
 import {parseSpreadsheetUrl} from '../../utils/gsheets.js';
 import {notifyErrors} from '../../utils/notifications.js';
-import {isSlugValid} from '../../utils/slug.js';
 import './DataSourceForm.css';
 
 const HTTP_URL_HELP = 'Enter the URL to make the HTTP request.';

packages/root-cms/ui/components/NewDocModal/NewDocModal.tsx

@@ -1,45 +1,19 @@
 import {Button, Modal, useMantineTheme} from '@mantine/core';
 import {useState} from 'preact/hooks';
 import {route} from 'preact-router';
+import {isSlugValid, normalizeSlug} from '../../../shared/slug.js';
+import {useCollectionSchema} from '../../hooks/useCollectionSchema.js';
 import {cmsCreateDoc} from '../../utils/doc.js';
 import {getDefaultFieldValue} from '../../utils/fields.js';
 import {SlugInput} from '../SlugInput/SlugInput.js';
 import './NewDocModal.css';
-import {logAction} from '../../utils/actions.js';
-import {useCollectionSchema} from '../../hooks/useCollectionSchema.js';
 
 interface NewDocModalProps {
   collection: string;
   opened?: boolean;
   onClose?: () => void;
 }
 
-function isSlugValid(slug: string): boolean {
-  return Boolean(slug && slug.match(/^[a-z0-9]+(?:--?[a-z0-9]+)*$/));
-}
-
-/**
- * Normalizes a user-entered slug value into one appropriate for the CMS.
- *
- * In order to keep the slugs "flat" within firestore, nested paths use a double
- * dash separator. For example, a URL like "/about/foo" should have a slug like
- * "about--foo".
- *
- * Transformations include:
- *   Remove leading and trailing space
- *   Remove leading and trailing slash
- *   Lower case
- *   Replace '/' with '--', e.g. 'foo/bar' -> 'foo--bar'
- */
-function normalizeSlug(slug: string): string {
-  return slug
-    .replace(/^[\s/]*/g, '')
-    .replace(/[\s/]*$/g, '')
-    .replace(/^\/+|\/+$/g, '')
-    .toLowerCase()
-    .replaceAll('/', '--');
-}
-
 export function NewDocModal(props: NewDocModalProps) {
   const [slug, setSlug] = useState('');
   const [rpcLoading, setRpcLoading] = useState(false);
@@ -64,7 +38,8 @@ export function NewDocModal(props: NewDocModalProps) {
     setSlugError('');
 
     const cleanSlug = normalizeSlug(slug);
-    if (!isSlugValid(cleanSlug)) {
+    const slugRegex = rootCollection.slugRegex;
+    if (!isSlugValid(cleanSlug, slugRegex)) {
       setSlugError('Please enter a valid slug (e.g. "foo-bar-123").');
       setRpcLoading(false);
       return;

packages/root-cms/ui/components/ReleaseForm/ReleaseForm.tsx

@@ -11,14 +11,14 @@ import {showNotification} from '@mantine/notifications';
 import {IconArrowUpRight, IconTrash} from '@tabler/icons-preact';
 import {useEffect, useRef, useState} from 'preact/hooks';
 import {route} from 'preact-router';
+import {isSlugValid} from '../../../shared/slug.js';
 import {notifyErrors} from '../../utils/notifications.js';
 import {
   Release,
   addRelease,
   getRelease,
   updateRelease,
 } from '../../utils/release.js';
-import {isSlugValid} from '../../utils/slug.js';
 import {DocPreviewCard} from '../DocPreviewCard/DocPreviewCard.js';
 import {useDocSelectModal} from '../DocSelectModal/DocSelectModal.js';
 import './ReleaseForm.css';